React + ES.next = ♥

A step-by-step example of how to leverage ES6+/ES2015+ in React by rewriting (an adapted version of) the official React tutorial.

To run completed app

Assuming you have a version of node installed, install nvm and then close & reopen your terminal.

Install the latest stable version of node:

nvm install node

Fork this react-esnext repo and create a local clone (be sure to replace YOUR-USERNAME with your own):

git clone https://github.com/YOUR-USERNAME/react-esnext.git

Change to final directory:

cd react-esnext/final

Install all of the dependencies:

npm install

Start API server (running at http://localhost:3000/):

npm run start:api

In a separate console window/tab, start the web server (in the same directory):

cd react-esnext/final
npm run start

Once the initial bundle is built, visit http://localhost:8080/.

Exercises

Each step in the workshop builds on top of the previous one. You can begin at the Start. Afterwards follow these steps:

0. Modules
1. Classes
2. Block scoping
3. Destructuring
4. Arrow functions
5. Enhanced object literals
6. Spread operator
7. Promises
8. Async functions