Get Up and Running with React.js and Webpack using ES6

By | July 18, 2016

React and Webpack logo

If you’re new to React.js then you might find the ecosystem a bit daunting. While React itself is relatively easy to learn, learning the many tools and technologies that it is used with can be overwhelming.

Here is a simple guide to get up and running using React and Webpack. It uses Babel 6.x so you can write React components using the new JavaScript language features of ES6.

This tutorial is based on Pete Hunt’s excellent template for building React apps. If you’re new to React then I highly recommend starting with Pete’s ‘React How To Guide’. Also, I would avoid the official Webpack documentation and instead begin with Pete’s ‘Webpack How To Guide’.

Prerequisites

First make sure you have Node installed. This tutorial uses npm which is installed along with Node.

You will also need a code editor. I will be using Visual Studio Code in this tutorial. I do a lot of .NET as well as JavaScript development so I find it familiar and powerful. When combined with dotnet core, it also means I can do .NET development on my Mac. 😍

This tutorial assumes you know the basics of React. If not then have a read of the how to guide that I listed above.

Tutorial

1. Open a terminal window and create a new directory.

2. Create a package.json file in your directory. To do this you can use an npm command.

This will launch a series of questions and then create a package.json file for you. Press enter to use the suggested default values.

3. Install React and React-DOM using npm.

This will automatically add the React and ReactDOM modules along with their dependencies into a folder called node_modules.

4. Install Webpack using npm.

Note that Webpack is installed as dev dependency because it will only be required during development. The output from Webpack (in this case a bundled JavaScript file) will be used in production.

5. Install Babel 6.x core and loader using npm.

Babel will transform your ES6 (ES2015) style JavaScript into ES5 so that it can run in modern browsers. It will also transpile React JSX files into JavaScript but before it can do this though it needs a couple of presets. A preset is basically a collection of plugins.

6. Install the ES2015 and React presets using npm.

With these presets installed, Babel can now transform both ES6 and JSX code.

7. Open the folder in the editor of your choice. I’m using VS Code so I can open it from the terminal window.

Nice. 😍

8. Create a file called .babelrc and add a presets property to specify that we are using the es2015 and react presets.

This is the configuration file that Babel uses to work its magic.

9. Create a file called webpack.config.js and add the following configuration.

This is a simple configuration but it is doing a powerful thing. It is instructing Webpack to work out the dependencies of index.js and bundle everything together into a file called browser-bundle.js. It also instructs Webpack to use babel-loader to transform ES6 and JSX code into browser-complaint ES5 code.

Now you can start using ES6 import statements inside your JavaScript files. Modern browsers don’t yet support modules so cannot natively handle import or require(‘module’) .

10. Create a simple React component called app.js.

Note that this uses the ES6 class syntax rather than React.createClass({…}). It is also putting JSX into a .js rather than a .jsx file. Not everyone likes to do this but I prefer it.

11. Create a simple index.html

Note that this references the browser-bundle.js file that Webpack will create for us.

12. Create an entry point for the application. This will be called index.js.

This code instructs React to render the app.js component into the DOM, specifically at the <div> with id=“app”.

13. Open package.json and add a “build” command to the scripts property.

We can now use npm to transform ES6 and JSX files using Webpack by running a simple command.

14. Run npm run build in the terminal window.

npm run build

We used the --watch flag so Webpack will watch for changes to the .js files and rebuild the browser-bundle.js on the fly. Note that Webpack also adds a .map file because we asked it to in the webpack.config.js.

15. Open another terminal window and cd to the working folder. As I’m using VS Code I can simply open a new window using the integrated terminal and it will default to the currently open folder location. Run open index.html if you are using a Mac or start index.html if you are using Windows.

open index.html

That’s it! The code for this tutorial can be found on GitHub here.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.