Modern JavaScript Stack Training

Welcome to my modern JavaScript stack tutorial. This is a minimalistic and straight to the point guide to building a modern Front-End stack from scratch, with some bits of Back-End as well. The goal is to take you from zero to knowing how to setup ES6, Babel, Gulp, ESLint, React, and Webpack. It requires some general programming knowledge, and JavaScript basics. It focuses on wiring all these tools together, rather than teaching you how to use one of them specifically. To acquire deeper knowledge in one particular tool, refer to the official documentation, or find other tutorials.

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 teach the foundations in the simplest possible way, so you understand what happens in the entire stack of tools.

Code examples are available for each section, and you can run them all with npm install && npm start (see section 1). I recommend writing everything from scratch yourself for a better understanding.

1 - Node, NPM, and package.json

2 - Installing and using an NPM 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 Browserify

8 - React

9 - Webpack

Next: Testing, Redux and Immutable