You don't need to use this entire stack if you build a simple web page with a few JS interactions of course (a combination of Browserify/Webpack + Babel + jQuery is enough to be able to write ES6 code in different files with CLI compilation), but if you want to build a web app that scales, and need help setting things up, this tutorial will work great for you.
Since the goal of this tutorial is to assemble various tools, I do not go into details about how these tools work individually. Refer to their documentation or find other tutorials if you want to acquire deeper knowledge in them.
A big chunk of the stack described in this tutorial uses React. If you are beginning and just want to learn React, create-react-app will get you up and running with a React environment very quickly with a premade configuration. I would for instance recommend this approach to someone who arrives in a team that's using React and needs to catch up with a learning playground. In this tutorial you won't use a premade configuration, because I want you to understand everything that's happening under the hood.
Code examples are available for each chapter, and you can run them all with
yarn && yarn start or
npm install && npm start. I recommend writing everything from scratch yourself by following the step-by-step instructions of each chapter.
Every chapter contains the code of previous chapters, so if you are simply looking for a boilerplate project containing everything, just clone the last chapter and you're good to go.
Note: The order of chapters is not necessarily the most educational. For instance, testing / type checking could have been done before introducing React. It is quite difficult to move chapters around or edit past ones, since I need to apply those changes to every following chapter. If things settle down, I might reorganize the whole thing in a better way.
The code of this tutorial works on Linux, macOS, and Windows.
Table of contents
Coming up next
Production / development environments, Express, React Router, Server-Side Rendering, Styling, Enzyme, Git Hooks.
- 中文 by @pd4d10
- Italiano by Fabrizio Bertone
- 日本語 by @takahashim
- Русский by React Theming
- ไทย by MicroBenz
If you want to add your translation, please read the translation recommendations to get started!