Setting up ReactJS manually

This tutorial assumes that you have some understanding of Webpack, Babel, ReactJS and an experience of creating Node.js applications. To learn more about Webpack please view its concepts, and a simple tutorial on it. To understand more about ReactJS view this tutorial.

Let’s get started!

Installing ReactJS manually requires a combination of 3 components:

  1. npm— used to install all the required components
  2. Webpack — a front end module bundler that allows to write front end JS in a manner similar to Node.js (with the usage of require() and import) while simultaneously taking care of any dependencies that might arise
  3. Babel —a JS transpiler that can convert JSX into JS, ES6 into ES5 and etc

The greatest advantage of Webpack is that it removes the tedious use of numerous <script> tags within HTML since all all JS libraries are called with require()and import , thus facilitating cleaner front end code. Moreover, it initiates Babel to run in a manner configured by the user to convert from JSX to JS when necessary.

With a bit of understanding under our belt, let’s get coding! You may clone this Github repo to follow along. The repository is committed on the basis of checkpoints that are mentioned within the tutorial. You may use git checkout to jump between the different checkpoints of the code.

Run the following commands to set up the repository.

  1. Create an npm package with default values: $ npm init -y
  2. Add the necessary ReactJS packages with: $ npm install --save react react-dom

Create index.html in the root of the npm package with the following content:

<!DOCTYPE html>
<html>
<head>
<title>Setting up ReactJS manually</title>
</head>
<body>
<div id="root"></div>
</body>
<script src="bundle.js"></script>
</html>

Notice how bundle.js — the script with compiled (JS & ES5) ReatJS code is located after <body>. This is kept so intentionally in order to load the html document first and then execute ReactJS. Keeping bundle.js before <body> will cause a ReactJS error to occur.

Next, create index.js with the following content:

import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);

Notice that index.js holds the uncompiled (JSX & ES6) ReactJS code that will be compiled to bundle.js

Check point #1 reached!

Now set up Babel to perform two compilations: From JSX to JS and from ES6 to ES5. JSX to JS conversion is necessary as browsers don’t support JSX natively and the conversion from ES5 to ES6 is necessary is due to the fact that some browsers still don’t support ES6 syntax entirely.

  1. $ npm install --save-dev babel-cli babel-preset-react for JSX to JS
  2. $ npm install --save-dev babel-preset-es2015 for ES6 to ES5
  3. Create a Babel read command file with the conversions necessary specified: echo '{ "presets": ["react", "es2015"] }' >.babelrc

Test: run $ ./node_modules/.bin/babel index.js from the root of the package and a compiled version of index.js should be displayed on the command line.

running ./node_modules/.bin/babel index.js

Also, notice how we use the --save-dev flag rather than --save . This is done because Babel is a development environment dependency rather than a project dependency. For more information view this article.

Check point #2 reached!

We now move on to implementing Webpack within our application. As you saw before, Babel successfully allowed us to transpile ES6 JSX into ES5 JS. Now we will use Webpack to redirect this transpiled output according to our needs via a Webpack configuration file.

  1. $ npm install --save-dev webpack
  2. $ npm install --save-dev babel-loader an npm package that allows Webpack to load and run Babel
  3. Create webpack.config.js with the following content:
var path = require('path');
module.exports = {
entry: './index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, '')
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: 'babel-loader'
}
]
}
};

This simply says that “When Webpack is initiated start the process of bundling with ./index.js and create an output file bundle.js once the bundling is done in the root of where the Webpack is initiated. On running Webpack a couple of rules are applied where any file name that satisfies the regular expression /\.jsx?$/ (.js and .jsx files satisfy this expression) must be run through the Babel process, excluding files that belong to node_modules

Next change the scripts field in package.json as such:

"scripts": {
"build": "webpack"
},

On running npm run build , the Webpack process will run according to the configurations presented in webpack.config.js and create bundle.js .

Output on running Webpack

Check point #3 reached!

Now that everything is set up. We just need to run the code! We’ll use the http-server npm package as a ready made server to serve our minimal web application. Install the package as such: $ npm install http-server -g (you will have to prefix this with sudo on Ubuntu) and run it with: $ http-server in the root of your package.

running http-server

Simply navigate your browser to the designated IP address and you should see the following:

Congratulations! You just set up your ReactJS environment!