Setting up a React development environment

Recently, I have started to give a shape to my long standing idea. I decided to use React UI library to build the UI along with D3.js. Although 'create-react-app' serves the purpose to kickstart a react project, I decided to set up my own environment as this would enable me to understand and control what is going on when I build. After surfing through the net I have come up with few sites which I felt I could understand. The following process/procedure for setting up the environment is largely borrowed from them.
I set this environment up in Debian stretch. I have installed my nodejs as follows,

Add NodeSource repository to the sources.list by downloading and running the setup script by typing the following,

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -

sudo apt install nodejs -y 




Optionally you can also install build-tools, if you want as below, 

sudo apt install build-essential -y




This will update nodejs, if any available when you try to run system updates.




'npm' is nodejs package manager. It is like every other system package managers, 

however, it does take care of javascript libraries.




Step - 1:

Create a project directory,

> mkdir




Step - 2:

cd




Step - 3:

npm init




This will ask few questions like Author name, License, entry-point, test, version etc., just defaults should be fine, since we will be editing this in a while.




Step - 4:

npm install webpack




Webpack is an opensource javascript bundle manager. It processes your application and builds a dependency graph that includes every module your application needs, then packages all of those modules in to a smaller number of bundles - often only one - to be loaded by the browser.This is incredibly configurable, however only four concepts are most important.

Entry: Webpack creates a graph of all your application's dependencies. The starting point of this graph is the entry point.Entry point tells webpack where to start and follows graph of dependencies to know what to bundle. "CONTEXTUAL ROOT or FIRST FILE TO YOU KICK OFF YOUR APPLICATION"




Output: Once the assests have been collected together webpack has to be told where to bundle the application code. Output property tells "HOW TO TREAT YOUR BUNDLED CODE".




Loaders: Loaders in webpack treats html, css, javascript, scss, jpeg and etc as modules. And transform these files into modules as they are added to your dependancy graph. 

Two high level purpose of Loaders is,

1. Idenitfy which file or files should be transformed by a certain loader (eg: test property)

2. Transform those files so that they can be added to the dependancy graph (and eventually your bundle) (eg: use property).




Plugins: Loaders execute transoformation on per file basis but plugins are commonly used for executing transformation or custom functionality on "compilaitons" or "chunks". In order to use plugins, you just need to "require" them and add to plugins array.




Step - 5:

touch webpack.config.js




Add the following code using your favourite editor.

const webpack = require('webpack');
const path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src/client/public');
var APP_DIR = path.resolve(__dirname, 'src/client/app');

var config = {
    entry: APP_DIR + '/index.js',
    output: {
        path: BUILD_DIR,
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.jsx?/,
                include: APP_DIR,
                loader: 'babel-loader'
            }
        ]
    },
    devServer: {
        inline: true,
        port: 2323
    }
};

module.exports = config;

first two lines:
requesting webpack and path modules from webpack.

second two lines:
declaring variables APP_DIR and BUILD_DIR. path.resolve is a method that combines the current (root) directory path and add the application code path.

fifth line declares the config variable which is exported at the end by
module.exports = config;

Webpack looks for the entry point @ src/client/app directory. Create a file names index.js and it is the landing page for webpack dependency graph generation.Output directory (src/client/public) is where the file names bundle.js will be written. This bundle.js file is what has all our application code for browser. This bundle has to be linked to the index.html through script tag which we will see in a moment.




To run the webpack and see whether this setup produces the bundle.js filename run the following command

./node_modules/.bin.webpack -d




If this produces the bundle.js then everything is fine.




Now setting up the Babel6.




npm install babel-cli babel-loader babel-preset-react babel-preset-es2015 --save-dev




touch .babelrc




include,




{

     preset: ["react", "es2015"]

}

Babel is the compiler that compiles tomorrows javascript syntax for todays browsers.

Now install react and react-dom

npm install react react-dom --save

By using webpack we do not have to install react-scripts as webpack can be configured to be a development server.

Populate the src/client/app/index.js with the following,

import React from 'react'

import ReactDom from 'react-dom'

class App extends React.Component {

    render() {

        return

            Hi Russell!!

       

;

        }

    }

ReactDom.render (

 , document.getElementById('app'))

The content of index.html @ src/client directory is