Generate even less code?

[gaearon]

From @remy’s amazing First Impressions of React, this paragraph made me sad:

I had a couple of false starts with trying create-react-app, react-boilerplate and another that I forget.

The reason for the false starts is that they contained way too much code and structure and expected understanding. I believe they'll be super useful once there's some understanding and ability to navigate the logic behind React apps, but for starting out, I needed to be closer to the metal, I needed to see the direct output of my coding efforts.

Is there anything we could do to better match your use case? These are the files we generate by default. We opted for a bare minimum, just enough to render a single component.

Here’s what we generate:

.gitignore          # good defaults
package.json        # needed for npm
README.md           # tips and usage guide
index.html          # your page
src/index.js        # entry point to show where to put side effects on launch
src/index.css       # put global CSS here
src/App.js          # an example component
src/App.css         # an example component stylesheet
src/App.test.js     # an example component test
src/logo.svg        # an image so you know how to import media assets in code

Should we cut something?

[gaearon]

Of these files, we could technically not include index.css, App.css, App.test.js, or logo.svg. I’m worried that this will just cause people to scratch their head about how to import CSS, media assets, or even other JS modules.

[markerikson]

Granted, I'm not the target audience, and I haven't actually used it CRA yet, but that seems like the right amount of startup to me. One small example of everything, just enough to show how it's done and give you something to work from.

[remy]

Hey, so to chime in here rather than one twitter (and the 140 character limit!).

The direction I was coming from was very much: I WANT TO CODE NOW. i.e. don't want tests, don't want packages, just want results (and errors).

I'm not sure this is quite right for the masses…the fact you've got a test template in your initial build is good (really good). It's likely the next step I'm going to take when looking at my code.

But, just to give you my input on these files (and don't take this input as "this is what should be changed"!):

.gitignore          # meh
package.json        # why do I need npm?
README.md           # didn't I see the readme when I downloaded this?
index.html          # YES!
src/index.js        # YES!
src/index.css       # wait…what's "global CSS"?
src/App.js          # isn't my app in index.js?
src/App.css         # wait, I can split up my components? What's a component?
src/App.test.js     # tests, awesome! But nah, not yet
src/logo.svg        # I don't…no, don't know why I want this

(Take the comments as light hearted please ❤)

Aside: I might remove the emphasis on the "way" too much code. In hind sight, I ran a few generators (and included C-R-A) but briefly looked at the tree output and quickly tossed it aside as I was after the index HTML + JS.

[gaearon]

The direction I was coming from was very much: I WANT TO CODE NOW. i.e. don't want tests, don't want packages, just want results (and errors).

We wanted to make it clear you can delete everything except index.html, package.json and src/index.js and it would still work. Maybe we should ask if you want an empty template during project creation?

Tangentially, this is the kind of thing CRA would've solved for you:

[remy]

@gaearon yeah, server side, in the hour or so I've been searching (split over multiple attempts), I can't quite find a reasonable post on it yet. This is probably closest, but my gut feeling is that there's no generally accepted approach when it comes to node (just yet). Happy to be wrong!

[hqdo]

I'm a react beginner and imo create-react-app has the perfect amount of
files. Every file has been useful to me to demonstrate how to do something.
I think it strikes the perfect balance between too much and too little.

On Wednesday, 14 September 2016, Dan Abramov [email protected]
wrote:

From @remy https://github.com/remy’s amazing First Impressions of React
https://remysharp.com/2016/09/13/first-impressions-of-react, this
paragraph made me sad:

I had a couple of false starts with trying create-react-app,
react-boilerplate and another that I forget.

The reason for the false starts is that they contained way too much code
and structure and expected understanding. I believe they'll be super useful
once there's some understanding and ability to navigate the logic behind
React apps, but for starting out, I needed to be closer to the metal, I
needed to see the direct output of my coding efforts.

Is there anything we could do to better match your use case? These are the files
we generate by default
https://github.com/facebookincubator/create-react-app/blob/master/template.
We opted for a bare minimum, just enough to render a single component.

Here’s what we generate:

.gitignore # good defaults
package.json # needed for npm
README.md # tips and usage guide
index.html # your page
src/index.js # entry point to show where to put side effects on launch
src/index.css # put global CSS here
src/App.js # an example component
src/App.css # an example component stylesheet
src/App.test.js # an example component test
src/logo.svg # an image so you know how to import media assets in code

Should we cut something?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#642, or mute
the thread
https://github.com/notifications/unsubscribe-auth/ABEbWgY_hmZRqjR0W-0wJImAJIhBT0riks5qpyP8gaJpZM4J8NwU
.

Best Regards,

Huy Do
XBITS

P: (02) 8215 0661
E: [email protected]

[hqdo]

maybe adding a single parameter to create-react-app eg. "create-react-app minimal" to generate an app with the most minimal amount of files possible. But i understand that is a slippery slope considering this is a "no config" tool, and it can easily set a precedent for adding more parameters etc. and we have configuration all over again.

[mlrawlings]

A few ideas on how to reduce files:

Remove App.test.js: Tests could be deferred by including logic in react-scripts test to generate a sample test if it doesn't find any test files, or launch documentation in the browser on how to add tests, seeing as there are multiple ways (.test.js, .spec.js, __test__).

Remove README.md: Similarly, the README could be left out and launched in the browser by npm run help (react-scripts help). This command could be added to the launch text that appears in the console when starting the development server.

Remove favicon.ico: An app doesn't need a favicon to get started. To show an example of how to reference static files from the markup, index.css file could be included via a relative path (<link rel="stylesheet" href="./src/index.css" />) in the index.html file instead of using import in the index.js file.

[tbillington]

Everyones opinions here is to remove certain things, but I think they are all useful and serve a purpose. It's easy for beginners to remove things they don't need, but hard to know how to add things they do need that they haven't done before.

[fanderzon]

Instead of removing useful files, would it help if the README started off with a better "React beginner" path? Save the parts about how to make full use of this project to build tested production apps for further down in the file, and just get right into making your own basic components in App.js.

This solution assumes that many files are thought of as bad because it makes the project look complicated, and that we in very few words can explain that it is not. 😃

create-react-app has completely changed how I introduce new people to React, and we go directly to coding in the src/App.js after running npm start, and that file seems to be easy to read and understand (especially when simultaneously seeing it's output in the browser).

If create-react-app is not a person's first experience with a generator or starter project, chances are it can be perceived as more complex than it is, but maybe a quick guide to build something trivial from scratch, throwing away the component code in App.js will show that it really is as simple as running create-react-app and start coding, and that there are no magic parts to create-react-app you need to understand first (unlike most starter-projects).

[iRoachie]

I don't think it's too much for a beginner, I just started last week and i'm glad create-react-app abstracted the setup process. In reply to @mlrawlings about testing. I think we should leave it in. Testing is fundamental for a modern web application and i think leaving it in sets people on the right track. The lower the barrier of entry to testing the better.

[Markus-ipse]

Maybe I'm off base here, but to me it sounds like @remy didn't want to create a React app, he wanted to play around with React to get an understanding it, the library in and of it self. Not how you build a production ready application with React.

Although for many people those two things overlap, in this case it seems like it didn't and that something more barebones, other than Create-React-App, perhaps some kind of playground would have been more suitable?

I'm basing this of wanting no cross-browser support, no styles, no tests, having client-side jsx transforms, etc.

The beauty with Create-React-App is that it will give you all those nice things and more, it just happens to be that those things were of no interest to @remy in this case.

@remy Please forgive me if misrepresented/misinterpreted you in anyway.

@gaearon I love that you care so much, but please remember that you cannot make everyone happy, because not everyone wants or needs the same things. but that you've helped and inspired a tremendous amount of people with your work :)

[markerikson]

Yeah - I get the impression that a REPL like JSFiddle, JSBin, or WebpackBin would have been more relevant for the kind of "I just want to write some code and see what happens" goal that @remy seemed to be expressing.

[remy]

@hummlas no, I think you're on point with your comments, and I was waiting for the discussion to settle a bit before coming back in.

I think it's important to keep in mind who CRA is for. My comments (in my blog) might be useful, it might not be. My sense is that CRA is for beginners on their journey to learning React.

I was approaching it exactly as @markerikson suggests, very close to a REPL, and wanting to see the effect of change quickly.

Thinking now, the way to tackle this kind of audience might actually just be in the README me, somewhere clearly stating "if you just want to try it out, try this …". I found gist fascinating, it got me React with JSX in two files and it all just worked (obviously I looked under the hood and I was pulling 2mb of script, but that's fine for a bit of dabbling).

I hope that helps a little!

[louisgv]

I think it would be better to start out with a well-accepted directory structure than a totally flat unstructured code base. Something is always better than nothing imo. People follows different methodology but the one I found many other professional and myself using looks somewhat like this:

.gitignore          # meh
package.json        # why do I need npm?
README.md           # didn't I see the readme when I downloaded this?
index.html          # YES!
src/index.js        # YES!
src/index.css       # wait…what's "global CSS"?

src/containers/App/index.js                 # Or a page, it in turn consume the Header component
src/containers/App/index.css              # Style for this container

src/components/Header/index.js           # A sample Header component (Which is the spinner thing)
src/components/Header/index.css         # Style for this header component
src/components/Header/_test.js            #  tests, awesome! But nah, not yet

src/logo.svg        # I don't…no, don't know why I want this

[ippa]

I'll throw in my $0.02. Just this discussion alone is a reason to like CRA :).

README.md can be removed. Everyone has seen this prior to installing CRA and the web displays it better. How great wouldn't it be to have analytics on those littering READMEs to see how many opens and reads them. My bet is that they don't add much but rather create mental overhead due to another file that's "not yours".

When I looked into the src-directory for the first time, the difference between App.css vs index.css wasn't obvious, I think getting rid of index.css can be a good thing.

Maybe App.js / App.css can be simplified slightly as well - start out with 2 css-classes instead of 4 or something. I think the very bare minimum is easiest to digest here. Even for a super-small project you're going to want your own css-names and tag-structure.

App.test.js and logo.svg is great. With the simplest code possible it showed me how to build tests and how (webpack) allows es6 imports of svgs/image-assets.

@louisgv: I understand your reasoning but let's not make it even more complicated by adding more paths and directories. It's so refreshing to start small... and many projects also stay there. For the big important ones creating the structure You want isn't going to be a biggie.

Another slightly related thing. On a decent server it takes "create-react-app test" 1+ minute to finish... that's a pretty long time when you wanna get going. Admittedly it's a one-shot thing.

[AlicanC]

Who is this mysterious "beginner"? Someone who just started coding or someone who is moving from another framework? Answer to this question changes the answer to this issue drastically.

If we are targeting the absolute beginner, then:

• The logo must be a PNG or a JPEG. They will have no idea what an SVG is.
• Tests should be removed.
• index.html should be hidden so they don't put any CSS or JS in it.

[iRoachie]

@ippa lol i agree on that README, however for the styles its great to have both of them. Letting people know well index is where your global styles go, and then the App.css showing the convention for how to add component styles

[sotojuan]

I agree with @AlicanC. If you're going to say "beginners", please define the word. It could mean:

• Someone who started coding last week
• Someone who has been coding for years but not in JS
• Someone who has been coding JS for years but not React

And many more. IMO anyone who has done JS in the past year or so or even less has used package.json and npm. It's the defacto way to install dependencies and every single resource out there uses it.

[gaearon]

Thanks for feedback, everyone! Closing as for now I think all parts are relatively essential. We split index.html and favicon.ico into public folder so they’re less annoying, and I’m adding clarifications about styling in #735.

[jlubeck]

i'm glad to see that you DIDN'T remove the README.md. When starting out I tried out a gazilion boilerplate options. This is the one I liked the most, and without the README file, it would have been hard to remember that it was actually a CRA installation. Good job!

[praWINK]

Is it possible to change the javascript entry point from ./src/index.js to some other folder like ./components/header/common/index.js in create-react-app

[gaearon]

No, it's not possible.