3 ms·

Awesome stuff! I don't understand why this post isn't more popular around here? This is exactly what i need. For too long i've felt that there is too much magi

Awesome stuff! I don't understand why this post isn't more popular around here? This is exactly what i need. For too long i've felt that there is too much magic happening in the js and front end tooling world. More often than not, tutorials and guides just brush the basics aside and expect you to be fine with cloning the newest github biolerplate with x and y features and get on with it. That is usually fine until you hit a bug, or some non standard behavior because of the tooling setup. I think if you really want to learn for example react you owe it to yourself to learn the basics or you'll regret it later. And besides, most of these boilerplates usually bring considerable feature blot with it IMHO. I've grown too comfortable relying on prebuilt boilerplates. Time to get my hands dirty. If just for the learning experince.

stankot 9y ago
Thank you! I had the same feeling with boilerplates, so I tried my best to learn the tools properly. Digging through documentation took me a lot of time, so I tried my best to summarize it in a simpler way. It should get people up to speed and give them a solid ground for learning more. Let me know if there is room for improvement of the tutorial. I plan to post more posts in the same series soon. Bloat is hard to avoid on boilerplates (I wrote one that is quite popular so I know how it goes https://github.com/workco/marvin https://github.com/workco/marvin). If you want to make useful boilerplate, it gets opinionated really fast. I hope that is something we'll solve with the next version of Marvin. Btw I posted it yesterday, and it already gained a lot of traction (based on the analytics). Not sure why it didn't get more attention on HN though.
acemarke 9y ago
Webpack and Babel are very important tools, and I'd agree that it's worth knowing how they work and how to configure them... _eventually_. However, I disagree that those are "the basics". You shouldn't have to be required to set up Webpack and Babel as a prerequisite for being able to play around with or learn React. (That may not be exactly what you were suggesting, but it's a somewhat common sentiment.) It's worth noting that Create-React-App is the recommended tool for most people to use when starting a new React project. Also, CRA isn't a "boilerplate". It's a prepackaged build system that can be upgraded, and acts as an abstraction layer over Webpack and Babel. It doesn't come with dozens of app-level dependencies already installed and custom-configured, like most boilerplates do. It comes with sensible default settings out of the box, has a linting config that tries to detect common errors, and includes a lot of really nice bits of DX aimed at newer users. Overall, CRA serves three primary purposes: it allows React learners to set up an environment without having to learn Webpack and Babel first; it allows experienced React devs to spin up a project without having to do all the configuration work (or copy and paste it from somewhere); and it also provides a common starting point for instructions and tutorials. For example, my blog post on using the Cesium.js 3D globe library with Webpack and React was able to start by just saying "Create a CRA project, eject, and modify these two config values". So, my advice to most React developers would be to use CRA as the default tool for starting a new React app, unless you know ahead of time that you will need capabilities that CRA doesn't easily support, or you're very comfortable with configuring Webpack and Babel already. All that said, if you _do_ want to know how to set up Webpack and Babel, this is a good article, and I'll be adding it to my React/Redux links list as a useful resource.
- stankot 9y ago
  Of course, Create React App is the best place to start, and I totally agree with your points. I never said learning these tools are the basics. But if you need to setup a bigger project CRA doesn't cut it by default. For example, it is missing HMR and CSS preprocessing (or postporcessing) which are must have on a larger scale. Again, you can eject and start from there, but in that case it will be much easier if you understand these tools. Thank you for the constructive feedback!
  - acemarke 9y ago
    I'll nitpick a bit: CRA _does_ actually support "plain HMR", just not use of React-Hot-Loader. I wrote a post that clarifies the difference between the two: http://blog.isquaredsoftware.com/2017/08/blogged-answers-webpack-hmr-vs-rhl/ http://blog.isquaredsoftware.com/2017/08/blogged-answers-web... .

stankot 9y ago

Thank you! I had the same feeling with boilerplates, so I tried my best to learn the tools properly. Digging through documentation took me a lot of time, so I tried my best to summarize it in a simpler way. It should get people up to speed and give them a solid ground for learning more. Let me know if there is room for improvement of the tutorial. I plan to post more posts in the same series soon. Bloat is hard to avoid on boilerplates (I wrote one that is quite popular so I know how it goes https://github.com/workco/marvin https://github.com/workco/marvin). If you want to make useful boilerplate, it gets opinionated really fast. I hope that is something we'll solve with the next version of Marvin. Btw I posted it yesterday, and it already gained a lot of traction (based on the analytics). Not sure why it didn't get more attention on HN though.

acemarke 9y ago

Webpack and Babel are very important tools, and I'd agree that it's worth knowing how they work and how to configure them... _eventually_. However, I disagree that those are "the basics". You shouldn't have to be required to set up Webpack and Babel as a prerequisite for being able to play around with or learn React. (That may not be exactly what you were suggesting, but it's a somewhat common sentiment.) It's worth noting that Create-React-App is the recommended tool for most people to use when starting a new React project. Also, CRA isn't a "boilerplate". It's a prepackaged build system that can be upgraded, and acts as an abstraction layer over Webpack and Babel. It doesn't come with dozens of app-level dependencies already installed and custom-configured, like most boilerplates do. It comes with sensible default settings out of the box, has a linting config that tries to detect common errors, and includes a lot of really nice bits of DX aimed at newer users. Overall, CRA serves three primary purposes: it allows React learners to set up an environment without having to learn Webpack and Babel first; it allows experienced React devs to spin up a project without having to do all the configuration work (or copy and paste it from somewhere); and it also provides a common starting point for instructions and tutorials. For example, my blog post on using the Cesium.js 3D globe library with Webpack and React was able to start by just saying "Create a CRA project, eject, and modify these two config values". So, my advice to most React developers would be to use CRA as the default tool for starting a new React app, unless you know ahead of time that you will need capabilities that CRA doesn't easily support, or you're very comfortable with configuring Webpack and Babel already. All that said, if you _do_ want to know how to set up Webpack and Babel, this is a good article, and I'll be adding it to my React/Redux links list as a useful resource.

stankot 9y ago
Of course, Create React App is the best place to start, and I totally agree with your points. I never said learning these tools are the basics. But if you need to setup a bigger project CRA doesn't cut it by default. For example, it is missing HMR and CSS preprocessing (or postporcessing) which are must have on a larger scale. Again, you can eject and start from there, but in that case it will be much easier if you understand these tools. Thank you for the constructive feedback!
- acemarke 9y ago
  I'll nitpick a bit: CRA _does_ actually support "plain HMR", just not use of React-Hot-Loader. I wrote a post that clarifies the difference between the two: http://blog.isquaredsoftware.com/2017/08/blogged-answers-webpack-hmr-vs-rhl/ http://blog.isquaredsoftware.com/2017/08/blogged-answers-web... .