Minimal fuss setup for getting started with React and JavaScript ES6

December 2015 (perspective of an assistant professor)

Summary

I describe a minimal fuss setup for getting started on building web application frontends with React and the ES6 version of JavaScript.

I'm a fan of super-simple setups since I hate command-line bullshittery. Setting up software tools is 90% of the battle.

For my current project, I want to use the React library and to write my code in the ES6 version of JavaScript. However, I need my code to run on older browsers that don't yet support ES6. There are a bazillion complicated ways to set up React and ES6. Here's the simplest setup that I'm happy with.

[Update: for a more comprehensive setup guide, read How to set up a web development environment with React, Babel, Webpack, and JavaScript ES6.]

Step 1: First make sure you have npm. Everything in the modern JavaScript ecosystem uses npm, so you'll need it!

Step 2: Make a new directory for your app, cd inside, and run:

npm init --yes # to create a blank package.json file
npm install babel-cli babel-preset-react babel-preset-es2015

This will install Babel and plugins that translate React and ES6 (confusingly also known as “es2015”) JavaScript code into plain-old JavaScript that runs in most browsers.

(It's very important that you run this command inside of your app's directory!)

Step 3: Create empty src/ and build/ subdirectories.

mkdir src/ build/

All of the React-ES6 JavaScript files you edit will go into src/, and Babel will automatically translate those into plain-old JavaScript (ES5) files in build/.

Step 4: Now create a main.js file in src/ and copy this into it:

class Foo { // this is ES6 syntax!
  constructor(msg) {
    this.msg = msg;
  }
  speak() {
    console.log(this.msg);
  }
}

ReactDOM.render(
  <h1>Hello world, React!</h1>, // this is React's JSX syntax!
  document.getElementById('example')
);

var f = new Foo('Hi there, console!');
f.speak();

Note the special ES6 and React syntax in the above file. (Technically JSX doesn't need to be used with React, but people often use them together, so I refer to JSX as “React syntax.”)

This code won't run in most browsers, since they don't (yet!) have native support for ES6 and React. So we'll need to use Babel to translate that code into plain-old ES5 JavaScript.

Step 5: In your app's main directory, run:

babel --presets react,es2015 src/ --watch --out-dir build/ --source-maps
# (scroll to the right to see rest of command)

Reading this command from left to right, it tells Babel to use both React and ES6 (a.k.a. es2015), to watch all files within the src/ subdirectory, and when a file in there changes, immediately translate it and put it into build/. Finally, create source maps to ease debugging.

Step 6: Now start up a text editor and edit src/main.js. Every time you save the file, you should see Babel print out:

src/main.js -> build/main.js

build/main.js is the translated code, which you can now include into your HTML file. This setup is great because you don't have to manually invoke Babel. You can just keep editing your code, save it, and it will get translated almost instantaneously.

Step 7: Now create an HTML file named hello.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>

    <!-- update with links to latest version of React:
     https://facebook.github.io/react/downloads.html
     -->
    <script src="https://fb.me/react-0.14.3.js"></script>
    <script src="https://fb.me/react-dom-0.14.3.js"></script>
  </head>
  <body>
    <div id="example"></div>

    <script src="build/main.js"></script>
  </body>
</html>

Note the reference to build/main.js. You want to reference only files in build/, not in src/, since the latter uses non-standard JavaScript syntax! If you prefer to host the React library files locally, you can also download the files and put them into build/.

Your app's directory structure should now look like:

hello.html      <-- you directly edit this file
src/
  main.js       <-- you directly edit this file
build/
  main.js       <-- Babel generates this file
  main.js.map   <-- Babel also generates source maps
node_modules/   <-- installed by npm
  babel-cli/
  babel-preset-react/
  babel-preset-es2015/

If you now open hello.html in your browser, then you should see both “Hello world, React!” on the page and also a “Hi there, console!” message on your console. Congrats! Now you're all set up to write React and ES6 code. Remember to edit code only in src/ and never directly touch build/.

Optional: I highly recommend installing the React developer tools to ease debugging. To get these developer tools to work properly, you will need to start a local webserver and access your HTML file through it. The simplest way to do so is to run Python's SimpleHTTPServer in your app's directory:

python -m SimpleHTTPServer 8888

Now when you visit http://localhost:8888/hello.html, it will load up the page through the server and allow you to use React's developer tools.

Keep this website up and running by making a small donation.

Created: 2015-12-25
Last modified: 2015-12-25

Related pages tagged as programming: