Build Status Release Dependencies Dev Dependencies Gitter
React Redux React Router Flow ESLint Jest Yarn Webpack Bootstrap
🎉 This is the V2 of the tutorial, major changes happened since the 2016 release. Check the Change Log!
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), but if you want to build a web app that scales, and need help setting things up, this tutorial will work great for you.
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 pre-made 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 pre-made 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. I recommend writing everything from scratch yourself by following the step-by-step instructions though.
Final code available in the JS-Stack-Boilerplate repository, and in the releases. There is a live demo too.
Works on Linux, macOS, and Windows.
Table of contents
01 – Node, Yarn, package.json
02 – Babel, ES6, ESLint, Flow, Jest, Husky
03 – Express, Nodemon, PM2
04 – Webpack, React, HMR
05 – Redux, Immutable, Fetch
06 – React Router, Server-Side Rendering, Helmet
07 – Socket.IO
08 – Bootstrap, JSS
09 – Travis, Coveralls, Heroku
Coming up next
Setting up your editor (Atom first), MongoDB, Progressive Web App, E2E testing.
If you want to add your translation, please read the translation recommendations to get started!
Bulgarian by mihailgaberov
Chinese (simplified) by @yepbug
French by Naomi Hauret
Italian by Fabrizio Bertone – fbertone.it
Check out the ongoing translations.
Chinese (simplified) by @pd4d10
Italian by Fabrizio Bertone
Japanese by @takahashim
Russian by React Theming
Thai by MicroBenz
Created by @verekia – verekia.com.