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.