ReactJS from Scratch

ReactJS ships a tool called create-react-app that can generate a new project for you. This gets one started very quickly. But I see several problems with a generated project:

  1. The build process is heavily abstracted. Meaning, it hides how Webpack and Babel are used and configured.
  2. It launches a web server that uses Websocket to automatically refresh a web page when you modify any code.

These may sound like conveniences rather than problems. But neither will be acceptable in most real life projects. We need to be able to configure Webpack and Babel the we like. Also, most likely we will need to go through a regular web server like Nginx etc.

This is also inconvenient for someone who is new to ReactJS and Webpack. So many things are hidden away from you that you think you are not quite learning how the system operates.

In this article I will create a ReactJS project from scratch. We will use Webpack and Babel. We will learn how to configure them.

Why do we need Webpack?

If you have experience with jQuery or AngularJS 1.x then you may be wondering why we need a build system like Webpack. There are several reasons but the main one is module loading. Let me explain. When we code a large application using ES6 we break up the code in several JavaScript files called modules. We can import a module from another using a syntax like this:

import React from 'react';
import {render} from 'react-dom';

Although this is valid JavaScript, today’s browsers do not support module loading yet. Webpack will inspect your module files and build a dependency tree between the modules. It will then combine all JavaScript files in the correct order in a single file. This built output file can then be used from an HTML document. Webpack builds this output file in a very clever manner. For example, in case of an exception you will see the original file and line number in the stack trace. This makes debugging easy.

(Note: NodeJS runtime does support ES6 import. So we do not need to use Webpack there.)

Why do we need Babel?

When we code ReactJS we embed HTML tags as JSX code. We will use Babel to translate JSX code into proper JavaScript.

You can also transpile ES6 code into ES5 JavaScript. But increasingly web browsers support most of ES6. In this article we will not transpile ES6.

OK, that’s enough theory. Let’s get started.

Create the Project

mkdir simple-app
cd simple-app
npm init

Now we will install the packages we need to develop and build ReactJS.

npm i react react-dom \
webpack babel-core babel-loader babel-preset-react -S

Configure Webpack

In the root folder of your project create a file called webpack.config.js.

Here APP_DIR points to the root of our JavaScript files. That will be the src folder. We will create this folder shortly and write all of our JS code there.

BUILD_DIR points to where the combined output JavaScript file will be stored.

The core configuration is being done through the config object here. The entry property is one of the most important. When Webpack builds the dependency tree it starts by inspecting the entry JS file. This module is at the very top of the tree. In ReactJS this will be the root level component that includes all other components.

The output property should be obvious. It names the combined JS file name and location.

Then comes the loaders. A loader is used by Webpack to process a source JS file. In this case we are using the babel-loader that will transpile each JS file using Babel before being included in the combined output file. Of course we have to configure Babel so that it knows how to transpile JSX. We will do so next.

Configure Babel

In your project’s root folder create a file called .babelrc. Add this to the file.

{
"presets" : ["react"]
}

This tells Babel to transpile JSX (but not ES6).

We are done with build configuration. We can start writing some code.

Develop a ReactJS component

Create a folder called src. Recall, all our JS files should go there.

Within the src folder create a file called index.js.

Add this code:

Use the component in HTML

In the root folder of the project create a file called index.html. Add this code:

Note how we are loading the combined output file build/bundle.js.

Build and test

From the root folder of your project run this command to do a Webpack build.

./node_modules/.bin/webpack -d

This will create the build/bundle.js file. Feel free to look at it. This will have the code for all modules required by index.js including the ReactJS modules.

Open the index.html file in a browser. You don’t need a web server. In Mac you can do:

open index.html

You should see this page.

Create convenience scripts

Running the build as shown above can become tedious. Let’s define a few NPM scripts to make things easier.

Open package.json. Add the build and watch scripts as shown below.

"scripts": {
  "build": "webpack -d",
  "watch": "webpack -d --watch",
  "test": "echo \"Error: no test specified\" && exit 1"
}

Now you can have Webpack watch your code:

npm run watch

Try changing your JS code and refreshing the browser. You should see the changes right away.

Summary

In this article we learned how Webpack and Babel work with ReactJS. We learned how to configure these build systems.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s