JavaScript Stack from Scratch

Welcome to my modern JavaScript stack tutorial: JavaScript Stack from Scratch.

This is a minimalistic and straight to the point guide to assembling a JavaScript stack. It teaches you how to set up ES6, Babel, Gulp, ESLint, React, Redux, Webpack, Immutable, Mocha, Chai, Sinon, and Flow. It requires some general programming knowledge, and JavaScript basics. It focuses on wiring all these tools together and giving you the simplest possible example for each tool. You can see this tutorial as a way to write your own boilerplate from scratch.

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. A lot of React tutorials completely skip the setup part, which makes newcomers build their learning on weak foundations. Instead of giving beginners a "black box" configuration, the approach I'm taking here is to set up the foundations in the simplest possible way, for a thorough understanding.

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.

1 - Node, NPM, Yarn, and package.json

2 - Installing and using a package

3 - Setting up ES6 with Babel and Gulp

4 - Using the ES6 syntax with a class

5 - The ES6 modules syntax

6 - ESLint

7 - Client app with Webpack

8 - React

9 - Redux

10 - Immutable JS and Redux Improvements

11 - Testing with Mocha, Chai, and Sinon