4 ms·

I can't emphasize how useful and important create-react-app is for the ecosystem. The first and obvious benefit is being able to quickly create new projects wi

I can't emphasize how useful and important create-react-app is for the ecosystem. The first and obvious benefit is being able to quickly create new projects without having to think about build infrastructure, which is honestly the most painful part of building a modern React project. create-react-app makes all the hard choices for you and gives you a reasonable set of defaults to work with. It's convention over configuration, kind of like Rails. It's a huge game changer. The less obvious benefit is that it forces developers to fall into the pit of success by making it easy to do the right thing. Flow is supported out of the box, so adding type checking to your app is trivial. Jest is set up for you out of the box, so you have no excuse to not add tests. This new version includes support for code splitting, so there's no reason to ship bloated JS bundles to your users. Building a PWA is easy, so you start thinking about offline-first right at the start of your project. I can't thank the team behind this little tool enough for making it so easy and so much fun to build React applications!

swah 9y ago
I love this and so many command line tools that so many projects are shipping now - actually I have come to expect that projects/frameworks that need multiple files (VueJS, React, etc) have a "component generator" distributed with it, so you can create new components, with the proper up-to-date template, from the command line. I don't remember when this started - Rails maybe? That was not my thing back then, but I really like this now. IIRC Elixir has a great tool as well.
kuschku 9y ago
At the same time, create-react-app just hides that very awful build system. At some point you will need to make changes — be it to switch to typescript, to add some other cross-compilation tools or modify the build pipeline — an you'll have to fight with the build system. If create-react-app did not exist, maybe the daily pain of working with the build system would be enough that it would actually be improved. Because currently, maven is even nicer to work with than the various js build systems.
- krisdol 9y ago
  By that logic, you could say that leiningen and gradle hide the very awful maven build system, and maybe if they didn't exist, the daily pain of working with maven would be enough that it would actually be improved. But it's been well over a decade. Maven is maven, npm is npm, make is make. Yarn is doing a good job now of being the new and improved build system for JS projects, and create-react-app seems to be using it under the hood. Eventually I may care about what compilation flags lein passes to maven in order for it to compile my clojure project into jvm bytecode, but that day hasn't happened yet and I've been glad not to have to set those up with every clojure project I start. The same now applies to react apps.
  - kuschku 9y ago
    But gradle doesn’t build on top of maven. Gradle replaces maven. That’s the issue I have with npm, webpack, create-react-app. They just pile more and more layers of abstraction on top, instead of improving or replacing what is below.
- simplify 9y ago
  FWIW, my side project[1] takes the opposite approach: start with a bare minimum project structure, and add pieces on top via a cli. So, for example, instead of starting with Flow by default and having to rip it out for TypeScript, you start with neither, and can run `pult add typescript` if you need to. [1] https://github.com/Concatapult/pult https://github.com/Concatapult/pult
brango 9y ago
Such a useful and important tool should really be documented in the React tutorial, etc...
jmkni 9y ago
This sounds really good. Quick question, does it include an option for client side routing? I really want to start using React, but every time I get overwhelmed by the sheer amount of options (paralysis analysis) and go back to AngularJS (which is starting to show it's age). Personally I'm not sold on Angular2/4. Cheers
- kotojo 9y ago
  They don't load a routing solution with this, but the most used router (and my favorite) is React-Router [0]. To get basic routing setup takes less than an hour, and has great docs. [0]: https://reacttraining.com/react-router https://reacttraining.com/react-router
  - celim307 9y ago
    for v4 I feel like the docs aren't all the way there. especially example wise
  - idbehold 9y ago
    If you're using redux I would recommend you stay far away from react-router. Using redux-little-router has been a pleasure to use in comparison: https://github.com/FormidableLabs/redux-little-router https://github.com/FormidableLabs/redux-little-router
    - elzi 9y ago
      Damn, this does look great. A lot of what it does can be solved by using `withRouter` from react-router, but I really like how they use `<Fragment />`
    - mhink 9y ago
      (Disclaimer: I work at Formidable) Can confirm, I absolutely love `redux-little-router`. It feels so natural to dispatch Redux actions to change routes rather than dealing with the song and dance of conditionally rendering <Redirect /> components or trying to figure out when in the lifecycle to call `router.push(url)`. I especially like pairing it with `redux-saga`- with a little bit of effort, you can end up writing mini-applications for each route which start and stop as the user navigates.

swah 9y ago

I love this and so many command line tools that so many projects are shipping now - actually I have come to expect that projects/frameworks that need multiple files (VueJS, React, etc) have a "component generator" distributed with it, so you can create new components, with the proper up-to-date template, from the command line. I don't remember when this started - Rails maybe? That was not my thing back then, but I really like this now. IIRC Elixir has a great tool as well.

kuschku 9y ago

At the same time, create-react-app just hides that very awful build system. At some point you will need to make changes — be it to switch to typescript, to add some other cross-compilation tools or modify the build pipeline — an you'll have to fight with the build system. If create-react-app did not exist, maybe the daily pain of working with the build system would be enough that it would actually be improved. Because currently, maven is even nicer to work with than the various js build systems.

krisdol 9y ago
By that logic, you could say that leiningen and gradle hide the very awful maven build system, and maybe if they didn't exist, the daily pain of working with maven would be enough that it would actually be improved. But it's been well over a decade. Maven is maven, npm is npm, make is make. Yarn is doing a good job now of being the new and improved build system for JS projects, and create-react-app seems to be using it under the hood. Eventually I may care about what compilation flags lein passes to maven in order for it to compile my clojure project into jvm bytecode, but that day hasn't happened yet and I've been glad not to have to set those up with every clojure project I start. The same now applies to react apps.
- kuschku 9y ago
  But gradle doesn’t build on top of maven. Gradle replaces maven. That’s the issue I have with npm, webpack, create-react-app. They just pile more and more layers of abstraction on top, instead of improving or replacing what is below.
simplify 9y ago
FWIW, my side project[1] takes the opposite approach: start with a bare minimum project structure, and add pieces on top via a cli. So, for example, instead of starting with Flow by default and having to rip it out for TypeScript, you start with neither, and can run `pult add typescript` if you need to. [1] https://github.com/Concatapult/pult https://github.com/Concatapult/pult

brango 9y ago

Such a useful and important tool should really be documented in the React tutorial, etc...

jmkni 9y ago

This sounds really good. Quick question, does it include an option for client side routing? I really want to start using React, but every time I get overwhelmed by the sheer amount of options (paralysis analysis) and go back to AngularJS (which is starting to show it's age). Personally I'm not sold on Angular2/4. Cheers

kotojo 9y ago
They don't load a routing solution with this, but the most used router (and my favorite) is React-Router [0]. To get basic routing setup takes less than an hour, and has great docs. [0]: https://reacttraining.com/react-router https://reacttraining.com/react-router
- celim307 9y ago
  for v4 I feel like the docs aren't all the way there. especially example wise
- idbehold 9y ago
  If you're using redux I would recommend you stay far away from react-router. Using redux-little-router has been a pleasure to use in comparison: https://github.com/FormidableLabs/redux-little-router https://github.com/FormidableLabs/redux-little-router
  - elzi 9y ago
    Damn, this does look great. A lot of what it does can be solved by using `withRouter` from react-router, but I really like how they use `<Fragment />`
  - mhink 9y ago
    (Disclaimer: I work at Formidable) Can confirm, I absolutely love `redux-little-router`. It feels so natural to dispatch Redux actions to change routes rather than dealing with the song and dance of conditionally rendering <Redirect /> components or trying to figure out when in the lifecycle to call `router.push(url)`. I especially like pairing it with `redux-saga`- with a little bit of effort, you can end up writing mini-applications for each route which start and stop as the user navigates.