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 notifications@github.com
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: huy@xbits.com.au

[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.