Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases now! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
React Components

You're reading from   React Components Explore the power of React components for cutting-edge web development

Arrow left icon
Product type Paperback
Published in Apr 2016
Publisher
ISBN-13 9781785889288
Length 182 pages
Edition 1st Edition
Tools
Arrow right icon
Author (1):
Arrow left icon
Christopher Pitt Christopher Pitt
Author Profile Icon Christopher Pitt
Christopher Pitt
Arrow right icon
View More author details
Toc

Table of Contents (12) Chapters Close

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
You have been reading a chapter from
React Components
Published in: Apr 2016
Publisher:
ISBN-13: 9781785889288
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime