• jQuery
  • PHP
  • SQL Tutorial
  • JSP
  • Struts
  • Core Java
  • RubyonRails
  • Spring
  • JavaScript

  • <

    Reactjs Tutorial

    React is a JavaScript library used to build single page applications for building user interfaces.React allows us to create reusable UI components.It was maintained by facebook.

    Reactjs Installation

    After installation of NodeJS, we can start installing React upon it using npm. You can install NodeJS in two ways:

      webpack and babel.
      create-react-app command.

    Installing ReactJS using webpack and babel

    Webpack is a module bundler . It takes dependent modules and compiles them to a single (file) bundle.

    Babel is a JavaScript compiler and transpiler. It is used to convert one source code to other.

    Create the Root Folder

    Create a folder with name reactApp on the desktop to install all the required files using the mkdir command.

    C:\Users\tutorial\Desktop>mkdir reactApp
    C:\Users\tutorial\Desktop>cd reactApp

    After Creating the folder, we need to create a package.json file. To do so you need to run the npm init command from the command prompt.

    C:\Users\tutorial\Desktop\reactApp>npm init

    This command asks information about the module such as packagename, description, author etc. you can skip these using the ??y option.

    C:\Users\username\Desktop\reactApp>npm init -y
    Wrote to C:\reactApp\package.json:
       "name": "reactApp",
       "version": "1.0.0",
       "description": "",
       "main": "index.js",
       "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1"
       "keywords": [],
       "author": "",
       "license": "ISC"

    Install React and react dom

    Using install react and react-dom commands of npm respectively. You can add the packages we install, to package.json file using the --save option.

    C:\Users\tutorial\Desktop\reactApp>npm install react react-dom --save

    Install webpack

    Since we are using webpack to generate bundler install webpack, webpack-dev-server and webpack-cli.

    C:\Users\username\Desktop\reactApp>npm install webpack webpack-dev-server webpack-cli --save

    Install babel

    You can install all of them in single command as

    C:\Users\tutorial\Desktop\reactApp>npm install babel-core babel-loader babel-preset-env 
       babel-preset-react html-webpack-plugin --save-dev

    Create the Files

    To complete the installation, we need to create certain files namely, index.html, App.js, main.js, webpack.config.js and, .babelrc. You can create these files manually or, using command prompt.

    C:\Users\username\Desktop\reactApp>type nul > index.html
    C:\Users\username\Desktop\reactApp>type nul > App.js
    C:\Users\username\Desktop\reactApp>type nul > main.js
    C:\Users\username\Desktop\reactApp>type nul > webpack.config.js
    C:\Users\username\Desktop\reactApp>type nul > .babelrc

    Set Compiler, Server and Loaders

    Open webpack-config.js file and add the following code. We are setting webpack entry point to be main.js. Output path is the place where bundled app will be served. We are also setting the development server to 8001 port. You can choose any port you want.

    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
       entry: './main.js',
       output: {
          path: path.join(__dirname, '/bundle'),
          filename: 'index_bundle.js'
       devServer: {
          inline: true,
          port: 8001
       module: {
          rules: [
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                query: {
                   presets: ['es2015', 'react']
          new HtmlWebpackPlugin({
             template: './index.html'

    Open the package.json and delete "test" "echo \"Error: no test specified\" && exit 1" inside "scripts" object.

    "start": "webpack-dev-server --mode development --open --hot",
    "build": "webpack --mode production"


          React App


    import React, { Component } from 'react';
    class App extends Component{

    Hello World

    ); } } export default App;


    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App.js';
    ReactDOM.render(, document.getElementById('ap

    Run the Server

    C:\Users\tutorial\Desktop\reactApp>npm start


    Hello World

    © copyright 2017-2021 Completedone pvt ltd.