Minimal fuss setup for getting started with React and JavaScript ES6December 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, 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 mkdir src/ build/ All of the React-ES6 JavaScript files you edit will go into Step 4: Now create a 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 Step 6: Now start up a text editor and edit src/main.js -> build/main.js
Step 7: Now create an HTML file named
Note the reference to 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 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
Keep this website up and running by making a small donation.
Created: 2015-12-25 Last modified: 2015-12-25 |