ReactJs: Installation and Setup the Development Environment

Facebook ReactJs is a powerful framework to develop the single page applications. Tutorial will explain you how to install and setup the ReactJs Development Environment to run in local.

React is a unique JavaScript library in that it is only the “V” in MVC. Meaning that it is only used on the View layer in web applications. This allows it to be narrowly focused on doing one thing and doing it well.

Video Tutorial

Facebook reactJs environment setup in local machine

Info: If you face npm permissions issue while installing packages, please find the “Fixing npm permissions“. This link will help you to resolve the issue.

Install RectJs dependencies

Before writing the reactJs code, we have to setup the environment and install all dependencies. Below list are the dependencies should be installed.

Installing Node

Installing NodeJs is genuinely straight forward on Mac OSX and Windows. The NodeJS site gives installers to the two stages. Simply tap on the v8.9.0 Stable catch and you’ll be off and running.

Installing NPM

You’re done already. npm is installed alongside Node. NPM, commonly referred to as “node package manager” is just that. It’s a package manager for node. Although, npm does not stand for “node package manager”. I won’t go into the details of that, but if you’d like to, you can read all about it here.

Installing React

Next we will simply ahead and get React installed. As of React, it is separated into a few modules. React and ReactDOM are the two noteworthy ones, and what we will begin with.

But first we need to create a folder for our app so we have a place to store all of this stuff. Go into whatever directory you like to store all of your code in and make a new directory inside of that one:

$ mkdir react-first-time

Now let’s cd into that directory and create a boilerplate package.json file:

$ cd react-first-time
$ npm init --yes

Using the –yes flag just skips all prompts and uses the defaults to initialize the package.json file. After this is done we can install React and ReactDOM:

$ npm install --save react react-dom

Great! React is now installed and all we need to do now is install a few more packages and get our development server up and running!

Add Dependencies and Plugins

Babel

We will require a portion of the babel modules, so we should first introduce babel by running the code in the command prompt window.

Ok now that we have that all cleared up let’s move on and install all of the Babel dependencies we will need:

$ npm install --save babel babel-core babel-loader babel-cli

We’ll also need to install the babel preset modules so it knows how to transpile all of our code:

$ npm install --save babel-preset-es2015 babel-preset-react

Installing Development server

Keeping in mind the end goal to get our advancement server up and running we will need to install a couple of modules. We should begin by installing a couple of things.

Webpack

We will use webpack bundler in these tutorial. Let’s install webpack and webpack-dev-server.

$ npm install webpack --save
$ npm install webpack-dev-server --save

Configure the server

Keeping in mind the end goal to configure the server. We will need to create a configuration file for Webpack. First create a directory for our demo application which is already created, and create the config file:

$ touch webpack.config.js

Now open up “webpack.config.js” file and copy the following code in:

var config = {
   entry: './entry.js',
	
   output: {
      path:'/',
      filename: 'main.js',
   },
	
   devServer: {
      inline: true,
      port: 8080
   },
	
   module: {
      loaders: [
         {
            exclude: /node_modules/,
            loader: 'babel-loader',
				
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}

module.exports = config;

Let’s start the server. Before start the server, open the package.json and do change the code like below

Find the package.json code below.

{
  "name": "react-first-time",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": { "test": "echo "Error: no test specified" && exit 1" },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel": "^6.23.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "react": "^16.1.0",
    "react-dom": "^16.1.0",
    "webpack": "^3.8.1",
    "webpack-dev-server": "^2.9.4"
  }
}

In the above code remove the highlighted line and add the below webpack starter

"start": "webpack-dev-server --hot"

Once the above code is changed we are ready to run the server and create reactJs project

Let’s start the server

$ npm start

In my next tutorial you will learn how to write and run the reactJs project.