3 ms·

And even there it's not the pain it has been, if you write react app, thanks to create_react_app. It basically brings all of that out of the box, without any co

And even there it's not the pain it has been, if you write react app, thanks to create_react_app. It basically brings all of that out of the box, without any configuration needed, just like `rails new my_app_name` creates a ready to use app. Actually, I've seen several times people reporting using it for non react projects, just because of that ease of setup. Of course, you may still want to tweak configuration, and then you have to "eject", which means that all configuration files are dumped in your directory for you to edit, and you basically don't use create_react_app anymore. You now have to get webpack and babel configuration right to make your changes, but you have a solid basis. Nowadays, I try to never eject, and see create_react_app as a lib providing everything I need. It sometimes prevents me to try new staged js features, but on the other hand I often have new features on update that I didn't bother enough about to eject in previous version. Such wrappers around build system are probably the way to go. I would love to see something like create_react_app but allowing to provide buildpacks, so we can find in the wild the perfect configuration for our taste.

gggdvnkhmbgjvbn 9y ago
I like create react app a lot but i wish there was an easy way to add a second page. I tried doing this recently and found it was actually easier to implement react router with code splitting to avoid loading my main page's huge js file.
- oelmekki 9y ago
  I always do that, actually. I see what is provided in the App.js file as just a placeholder, meant to be replaced. Since you have webpack, you can import files from all over the place, deciding how to organize your project. It works just fine without ejecting :)
  - acemarke 9y ago
    I think the issue the parent is referring to is that CRA's Webpack configs only define a single "entry point", for your index.js, where each entry point becomes a separate bundle in and of itself. Having multiple entry points, like an "app page" and an "admin page", would require editing the Webpack config, which CRA deliberately keeps abstracted and hidden away until you eject. If you really want to be able to modify the Webpack config for a CRA app, you have a couple other options besides ejecting: - Create your own custom fork of the react-scripts ( https://github.com/facebookincubator/create-react-app/tree/master/packages/react-scripts https://github.com/facebookincubator/create-react-app/tree/m... ) package that CRA uses - Use the react-app-rewired (https://github.com/timarney/react-app-rewired https://github.com/timarney/react-app-rewired) tool , which lets you override parts of the build config within your project.
    - oelmekki 9y ago
      Oh, you're right, thus the "huge js file". Thanks for pointing it.
lewisl9029 9y ago
I love create-react-app too, but for a slightly different reason: They have an excellent, super-comprehensive README that covers practically everything you'd ever need to know about state-of-the-art Frontend JS tooling: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md https://github.com/facebookincubator/create-react-app/blob/m... create-react-app itself is great for quick prototyping, but for non-trivial apps, chances are, eventually some esoteric production concern will force you to "eject". At that point, the sheer volume of configuration you'll be left with will be rather overwhelming if you've never dealt with the underlying technologies before, and modifying/extending it can become rather intimidating. My recommendation is to start your first few projects with create-react-app, to get a feel for what a modern JS dev experience feels like, and then once you find the need to eject, instead of actually ejecting, copy your code over to a new project starting with just a bare minimum Webpack + Babel config, like the one in react-hot-loader-minimal-boilerplate (https://github.com/wkwiatek/react-hot-loader-minimal-boilerplate/blob/master/webpack.config.js https://github.com/wkwiatek/react-hot-loader-minimal-boilerp...) and refer to the ejected configs of the create-react-app version of your app and the create-react-app README to port over pieces of tooling that you feel are sorely missing from your create-react-app days, one by one. This way, you'll be left with a much simpler and leaner tooling pipeline that you fully understand and one that you'll be able to extend and maintain much more easily. I usually refer to the react-hot-loader-minimal-boilerplate config as a baseline simply because I consider es-next transpilation and hot-reloading essential parts of the modern Frontend dev experience. If you don't, you can totally start with something even more barebones.

gggdvnkhmbgjvbn 9y ago

I like create react app a lot but i wish there was an easy way to add a second page. I tried doing this recently and found it was actually easier to implement react router with code splitting to avoid loading my main page's huge js file.

oelmekki 9y ago
I always do that, actually. I see what is provided in the App.js file as just a placeholder, meant to be replaced. Since you have webpack, you can import files from all over the place, deciding how to organize your project. It works just fine without ejecting :)
- acemarke 9y ago
  I think the issue the parent is referring to is that CRA's Webpack configs only define a single "entry point", for your index.js, where each entry point becomes a separate bundle in and of itself. Having multiple entry points, like an "app page" and an "admin page", would require editing the Webpack config, which CRA deliberately keeps abstracted and hidden away until you eject. If you really want to be able to modify the Webpack config for a CRA app, you have a couple other options besides ejecting: - Create your own custom fork of the react-scripts ( https://github.com/facebookincubator/create-react-app/tree/master/packages/react-scripts https://github.com/facebookincubator/create-react-app/tree/m... ) package that CRA uses - Use the react-app-rewired (https://github.com/timarney/react-app-rewired https://github.com/timarney/react-app-rewired) tool , which lets you override parts of the build config within your project.
  - oelmekki 9y ago
    Oh, you're right, thus the "huge js file". Thanks for pointing it.

lewisl9029 9y ago

I love create-react-app too, but for a slightly different reason: They have an excellent, super-comprehensive README that covers practically everything you'd ever need to know about state-of-the-art Frontend JS tooling: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md https://github.com/facebookincubator/create-react-app/blob/m... create-react-app itself is great for quick prototyping, but for non-trivial apps, chances are, eventually some esoteric production concern will force you to "eject". At that point, the sheer volume of configuration you'll be left with will be rather overwhelming if you've never dealt with the underlying technologies before, and modifying/extending it can become rather intimidating. My recommendation is to start your first few projects with create-react-app, to get a feel for what a modern JS dev experience feels like, and then once you find the need to eject, instead of actually ejecting, copy your code over to a new project starting with just a bare minimum Webpack + Babel config, like the one in react-hot-loader-minimal-boilerplate (https://github.com/wkwiatek/react-hot-loader-minimal-boilerplate/blob/master/webpack.config.js https://github.com/wkwiatek/react-hot-loader-minimal-boilerp...) and refer to the ejected configs of the create-react-app version of your app and the create-react-app README to port over pieces of tooling that you feel are sorely missing from your create-react-app days, one by one. This way, you'll be left with a much simpler and leaner tooling pipeline that you fully understand and one that you'll be able to extend and maintain much more easily. I usually refer to the react-hot-loader-minimal-boilerplate config as a baseline simply because I consider es-next transpilation and hot-reloading essential parts of the modern Frontend dev experience. If you don't, you can totally start with something even more barebones.