Compiling modern JavaScript
It's time for us to look at how to compile ES6 and JSX code into formats that most browsers can read. Create a folder for your React components and run the following commands inside it:
$ npm init $ npm install --save browserify babelify $ npm install --save react react-dom
The first command will kick off a series of questions, most of which should have reasonable defaults. The second command will download a builder and a cross-compiler for your ES6 code. Place the following component in a file called page.js:
import React from "react";
export default class Page extends React.Component {
render() {
return <div>{this.props.content}</div>;
}
}There are a couple of important differences between this and the previous Page component. We import the main React object from within the node_modules folder. We also export the class definition so that importing this file immediately references this class. It's a good idea to limit each file to a single class. It's also a good idea to make each file define types or use them. We use this class in main.js:
import React from "react";
import ReactDOM from "react-dom";
import Page from "./page";
ReactDOM.render(
<Page content="Welcome to my site!" />,
document.querySelector(".react")
);This code imports React and ReactDOM from within the node_modules folder, so we can render the Page class. Here we're referencing an element in the DOM again. We can use this JavaScript within an HTML page:
<!doctype html>
<html lang="en">
<body>
<div class="react"></div>
</body>
<script src="main.dist.js"></script>
</html>The final step is to compile the ES6/JSX code in main.js to ES5-compatible code in main.dist.js:
$ alias browserify=node_modules/.bin/browserify $ browserify -t babelify main.js -o main.dist.js
The first command creates a shortcut to the browserify command in the node_modules/.bin folder. This is useful for repeated calls to browserify.
Note
If you want to keep that alias around, be sure to add it to your ~/.bashrc, ~/.zshrc or ~/.profile file.
The second command starts a build. Browserify will combine all imported files into a single file, so they can be used in a browser.
We use the babelify transformer, so the ES6 code becomes ES5-compatible code. Babel supports JSX, so we don't need additional steps for that. We specify main.js as the file to transform and main.dist.js as the output file.
Note
If you want to compile React and ReactDOM into their own file, you can exclude them with the -x switch. Your command should be something like this:
browserify main.js -t babelify -x react -x react-dom --outfile main.dist.js
