-You should try learning React, it’s 2016. First you need to add React and React DOM as a library in your webpage. -If I add these two libraries then I can use React? -Not quite. You need to add Babel, and then you are able to use React.

“How it feels to learn JavaScript in 2016”

After first learning React, I made this short toy project to practice creating components and rendering them to a webpage. Although I loved React’s functional views and Redux’s single state object, I spent too much time fiddling with config files and installing development dependencies and not enough time coding.

The reason that React can be a pain to set up is that it’s not supposed to be a complete framework with batteries included. According to the Facebook docs, it’s a view library for building user interfaces. However, as React development matures, most developers will use a standard set of tools such as webpack and Babel to deal with some of the common challenges when developing in React. However, these tools often change and/or are updated so it can be a little frustrating to set up your environment for React the first time.

To help you abstract away the pain, I’ve included my setup for this project in this Gist, with separate webpack configs for development and production versions for the app, as well as the Express.js server code to run the app on a host, like Heroku. I’ll also show you how to include Hot Module Reloading, which allows your browser to render components as you edit them, without reloading the entire page. The entire project is also available on GitHub here.

Although you could just take my configs and go, I’d like to walk through what each of these files does, so that when the inevitable bugs show up, you will have some threads to hang onto when you’re unravelling that big fuzzy knot. When I was trying to set up my project, a lot of the tutorials for Webpack/ React used the old ES5 syntax or deprecated module. If you’re coding in React in ES6+, like the cool kids are, hopefully this will be really useful for you.

/* Note: after writing this blog post, I began to develop with Create-React-App, which is an opinionated framework that makes getting to Hello World in React really simple because it hides the complexities of using webpack and Babel. However, setting up Webpack and Babel are skills that you’ll eventually need to know to develop in React, and this tutorial will give you a better understanding of them.*/

To quickly go back to where you left off, all steps are linked in the Table of Contents below:

Table of Contents:

1. What do you need to start a React project?

Technically, you just need two libraries: React and React-DOM (which allows you to render React components to the browser).

But to use React right, you need to be able to write in JSX.

What is JSX? JSX is a syntax of JavaScript that allows you to write HTML-like components directly in your script files. With JSX, your React code will be super beautiful and super declarative, allowing other developers to look at your code and know exactly what your intention is. This is JSX:

const Component = () => (<div><h1>I am a component></h1></div>);

Unfortunately, the JavaScript interpreter in your browser cannot read JSX and will throw an error if you try to put this in a script tag. So you could write the same code in vanilla JS:

var Component = function Component() {

return React.createElement(

"div",

null,

React.createElement(

"h1",

null,

"I am a component>"

)

);

};

Gross.

Nobody wants to write code that looks like that. It’s really long, and it’s kinda unclear whats going on. But browsers can only interpret the vanilla JS version of the code. So what’s a dev to do?

Enter Babel. Babel is a JavaScript compiler that takes code written in the way you like (i.e. with JSX and ES6 syntax) and transpiles, or converts, it into syntax that the browser can understand.

I wrote my JavaScript files with JSX and ES6 and used Babel to transpile them into a separate copy of the files that used ES5 syntax, so that any browser could run them.

Great, so now we have React, React-DOM, and Babel. What else do we need?

When writing React, we have a lot of components written in separate files, all with dependencies on each other and other modules that we’ve imported to. If we had to load all these files (modules) onto the webpage separately with individual <script> tags, this would take forever, because the browser would have to make separate HTTP requests for each of these modules.

Dependency hell

Which is why we have webpack, a module bundler that takes all our script files and JavaScript library dependencies and combines them into one file (usually called bundle.js) that can be loaded as a static asset into the webpage.

webpack also has the handy webpack-dev-server, which spins up a lightweight Express server so you can see live changes to your app as you edit. Nice.

So before we’ve written a single line of code, we need:

React React-DOM Babel Webpack

2. Installing Dependencies

So, umm… how do I get all those thingszzzz?

npm install of course!

In the root directory of your project, run the following commands to install React and React-Dom:

npm install --save react

npm install --save react-dom

Run the following commands to install developer dependencies which aren’t necessary for the final version of your app, but will help with developing and building:

npm install --save-dev babel-core

npm install --save-dev babel-cli

npm install --save-dev babel-loader

npm install --save-dev babel-preset-es2015

npm install --save-dev babel-preset-react

npm install --save-dev react-hot-loader

npm install --save-dev webpack

npm install --save-dev webpack-dev-middleware

npm install --save-dev webpack-hot-middleware

Whew! That’s a hard day’s work. But wait, you said that I only needed 4 things to start developing in React- that’s like 50 bajillion things!

Yes. However, for webpack and Babel, a lot of the code is modularized into separate packages — instead of forcing you to install and download the entire library, if you only need a small part of it. Above, we’re downloading all the modules we’ll need during the development process.

The parts of Babel we’re using are split between the core library (babel-core), the command line interface (babel-cli), and babel-loader which is a webpack plugin that allows Babel and webpack to work together when we are bundling and transpiling our files to serve on a website. Additionally we’re installing Babel presets for ES2015 (ES6) and React, which are Babel plugins that contain the rules for converting ES6 and React code to vanilla JavaScript.

I don’t want to get into the react-hot-loader and webpack middleware modules just yet, but we’ll go over them in the Hot Module Replacement section.

When you’re done your package.json file should look like this:

Also, so you can orient yourself, this is what my project directory looks like. I have all my source files in the app/ directory. Once they are transpiled and bundled, webpack outputs them into the dist/ directory. In the root directory I have a package.json file and webpack configs for development and production.

Note there is also a `node_modules` directory in the root directory. I excluded it from this picture because I couldn’t figure out how to show it with the `tree` shell command without showing a ton of modules.

3. Configure Webpack for Development

In order to get webpack working for development, we have to configure it for React. This will allow us to bundle and transpile all our source files on every save and see our live changes using webpack-dev-server.

Below is my deployment webpack.config.js file:

On lines 1 and 2, I import the path module and webpack using the require syntax.

On line 5, I specify the entry script for the bundle. This easiest way to identify the entry file for your bundle is to choose the file with the ReactDom.render invocation that renders your main React component to the DOM.

On lines 6–9, I specify that I want to bundle all my app’s script files into file called bundle.js and I specify the publicPath to my app’s assets (images, stylesheets, scripts) as /app/assets.

Lastly, on lines 12–22 I tell webpack to run the babel-loader module every time it bundles files. The babel-loader tranpiles files written with ES6 and JSX syntax into vanilla JavaScript files that the browser can interpret. On lines 14–16, I specify a regular expression that tells webpack to transpile any files ending in .jsx in the directory named app/ and exclude any scripts in the node_modules directory. On line 16, I configure Babel to use the ES2015 (ES6) and React presets when transpiling the app files.

Now, to serve your app and live edit all you have to do is run this command in the terminal:

webpack-dev-server --progress --colors

I like the progress and colors flags to make the output on your server terminal a little easier to understand.

Not too scary, huh?

4. Configure Webpack for Production

You’ll notice the webpack config for production looks might similar to the development config.

The only major change is we add the UglifyJSPlugin, which will minify the scripts for production.

You can add additional webpack plugins based on your production needs.

5. Create a Express server as your application’s entry point

While the webpack-dev-server is convenient for use in a development environment, we can’t use it in production and we can get more customization if we roll our own Express server instance. It’s a requirement to use Hot Module Replacement, which we will go over in the next section.

In the following file, I wrote a factory function that creates a new Express server instance. We’ll import this into our application’s entry script to create the Express server.

On line 10, I direct the Express instance to use the /dist directory when fulfilling requests for static assets, such as CSS, images, and JavaScript files. Remember that webpack is configured to output the bundled version of our React components into the /dist directory.

On line 11, I tell Express to respond to GET requests to the root URL by serving the indexDep.html page. This page has a script tag that imports our bundled JavaScript file in the dist folder into the page, allowing React to render components onto the DOM.

In the next section, we’ll call this factory function, to instantiate our Express Server instance.

6. Add Hot Module Replacement

One of the coolest things about developing in React is that you can take advantage of development features such as Hot Module Replacement, which allows only re-renders the component that was modified instead of reloading the entire webpage. Using Hot Module Replacement, you can have a very responsive live-editing experience, because components will re-render continuously as you edit them, so you can see your changes immediately.

I’ve found the easiest way to use Hot Module Replacement is to plug Webpack middleware into the Express development server.

Before I go on I would like to spend just a second discussing middleware. In Express, middleware are functions that act like a pipe, taking in a stream of data and outputting a modified stream of data.

Because response objects (the data you are sending to the client, i.e. the React scripts) are a stream, you can modify the stream (i.e. React scripts) before it flows to the client by using middleware functions.

In this case we will use the webpack-dev-middleware to transpile our React code into vanilla JS that the browser can understand and bundle it into a single JavaScript file for efficient network requests from the client.

Additionally, we will use the the webpack-hot-middleware, which allows hot module reloading, but sending notifications to the client to re-render when it detects a change in a specific component.

This is how the webpack-hot-middleware works, according the its docs:

The middleware installs itself as a webpack plugin, and listens for compiler events. Each connected client gets a Server Sent Events connection, the server will publish notifications to connected clients on compiler events. When the client receives a message, it will check to see if the local code is up to date. If it isn’t up to date, it will trigger webpack hot module reloading.

Below is the app.js file, which we will use as the entry point on our server. The entry point is the first file that the server will call, and should link to all other files in our app. The entry file in node apps is usually called app.js or index.js. For a better understanding of node entry points, this answer was helpful.

Basically, our entry file will create a new Express server instance to serve our webpack, and listen on a specific port (either supplied through an environment variable or a default port). The server will serve the index.html page, which calls all the React components through a script tag. Additionally, our entry file uses middleware in a development environment to allow us to the use Hot Module Replacement.

On line 1, I import a factory function (we’ll go over it in the next section) and create an Express server instance.

On line 5, I check to make sure we are still in a development environment (doesn’t make sense use HMR in production)

On lines 12–16, I configure the Express server to use Webpack as middleware.

Now that we have a development server we can just use the following command in the terminal to serve our site locally:

node dist/app.js

But instead of typing in the same command over and over, let’s save all our run scripts into the package.json file. This will also help with deployment to a service like Heroku, which will run the start script to deploy the app.

Note that I also wrote a build script that uses webpack to transpile and bundle React files before serving them. This build script uses the webpack config that we went over earlier.

When you deploy to a service like Heroku, the service will just run the script defined in “start”, which points to the entry point of the node app. In this case, it will use webpack to first build the site (meaning that it transpiles and bundles), then it will call the entry point(app.js) to begin to serve the site.

For a more in-depth walkthrough on using Heroku to serve an Express app, I wrote this tutorial.

Yay, we’re done! Give yourself a pat on the back. It was a really frustrating experience to set up my React development environment the first time, but I think going through all the steps really gives you a good understanding of the build chain from JSX components to a deployed app.

I found it helpful to remember that when you’re frustrated, it means that you’re in the golden spot of learning, pushing yourself into areas where you face discomfort and learn faster.

Hope this was useful, that you had fun, and happy hacking!

If this article was helpful and enjoyable for you, I’d be super stoked if you hit that heart button on the bottom! And feedback and comments are always super welcome.

If you’re interested in learning along with me as I study JavaScript web development or want to follow my transition from the military to software engineering, follow my Medium blog here!