Yannick Weiss

React, ES2015 and Webpack

I hope this small example teaches you how to write an application in modern ES2015 Javascript. How to structure the code with separate React components and how to bundle all the modules into one single file.

Syntax Highlighting

Before we start we need to sharpen our tools. I use Sublime Text with babel-sublime. It adds language definitions for ES6+ JavaScript with React JSX syntax extensions.

Setup

npm init
npm install --global webpack
npm install --save-dev webpack
npm install --global webpack-dev-server
npm install --save-dev webpack-dev-server
npm install --save-dev babel-loader babel-preset-es2015 babel-preset-react
npm install

Webpack Configuration

webpack.config.js

module.exports = {
    context: __dirname + "/app",
    entry: "./index.jsx",
    output: {
        path: "./build",
        filename: "app.js",
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                loader: 'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
    externals: {
        'react': 'React',
        'react-dom': 'ReactDOM'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    devServer: {
        contentBase: "./build"
    }
};

Webpack starts with app/index.jsx and bundle all imported modules into app.js. It will transpile all ES2015 javascript along the way and ignore the React imports, because these will be loaded separately.

Code

build/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React, ES2015 and Webpack</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.min.js"></script>
    <script>if (!window.React) { document.write('<script src="/libs/react.min.js"><\/script>'); }</script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react-dom.min.js"></script>
    <script>if (!window.ReactDOM) { document.write('<script src="/libs/react-dom.min.js"><\/script>'); }</script>
  </head>
  <body>
    <div id="content"></div>
  </body>
  <script src="app.js"></script>
</html>

app/index.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './hello-world';

ReactDOM.render(
  <HelloWorld />,
  document.getElementById('content')
);

app/hello-world.jsx

import React from 'react';

class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

export default HelloWorld;

Run

You can now use the command webpack to build it or webpack-dev-server to start a server with live update.

CDN

Embed the React library from a CDN like Facebook or CDNJS. But don’t forget to host your own fallback.

<script>
if (!window.React) { 
  document.write('<script src="/libs/react.min.js"><\/script>'); 
}
</script>

Where to go from here

You can add embedded stylesheets so each component can have its own CSS file. And ESLint to check your javascript for errors.

More