Official React tutorial rewritten in ES.next
JavaScript CSS HTML
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
00-start
01-modules
02-classes
03-block-scoping
04-destructuring
05-arrow-functions
06-enhanced-object-literals
07-spread-operator
08-promises
09-async
final
.gitignore
LICENSE
README.md

README.md

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:

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