Sunday, April 29, 2018

Installation Steps or Guides for ReactJS

Today, we will see how to install an environment and require dependencies for development of reactjs application. The environment and configuration files installation process is bit time taking but not that complex. First thing First, we need NodeJS, so if you don't have it installed, check the below official website link for NodeJS Installation :
Website Link :

react installation, react installation steps, react installation in windows, react installation npm,react installation tutorial

Lets follow the below steps for the react application development :

React installation tutorial

1. Install the NodeJS application from the official website.


2. Create the root folder for you project. After the folder is created, we need to open it and create empty package.json file inside by running npm init from the command prompt and follow the instructions.
C:\project > mkdir reactApp
C:\project\reactApp >npm init

3.  As we are using the react for application development, we need to install react packages :
C:\project\reactApp >npm install react react-dom --save

4. To use the webpack bundler, we need to install webpack and webpack-dev-server.
C:\project\reactApp >npm install webpack webpack-dev-server --save

5. Now that our bundling tool is taken care of, we need a transpiler for interpreting our ES6 code. This is where Babel comes in. Let’s install the babel-loader and babel-core packages that we’ll use to work with Webpack, as well as the ES2015 and React presets for loading the code
C:\project\reactApp >npm install babel-loader babel-preset-es2015 babel-preset-react babel-core --save

6. Now create webpack.config.js file in the root directory and add the following code in it. 
  • Set the entry point in webpack.config.js file, where you place the actual source code and react components.
entry: ['./src/main.js'],

  • Set the output path in webpack.config.js file, where bundled app will be served.
output: {
      path: APP_DIR,
      filename: 'bundle.js',
   },

lets see the complete file :
var path = require('path');

var BUILD_DIR = path.resolve(__dirname, 'src');
var APP_DIR = path.resolve(__dirname, 'static/build');

var config = {
   entry: ['./src/main.js'],
   output: {
      path: APP_DIR,
      filename: 'bundle.js',
   },
   devServer: {
      inline: true,
      port: 8080
   },
   module: {
      loaders: [
         {
            test: /\.jsx?$/,
   include : BUILD_DIR,
            exclude: /node_modules/,
            loader: 'babel-loader',
            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}
module.exports = config;

7. Compare the package.json file, it should look like this.
{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "My first react app",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --hot",
    "build": "./node_modules/.bin/webpack --watch"
  },
  "author": "Sumit",
  "license": "ISC",
  "dependencies": {    
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",    
    "react": "^16.2.0",
    "react-dom": "^16.2.0",    
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.10.0"
  }
}

8. Create the index.html file inside the root folder, this is just regular HTML. We are setting div id = "app" as a root element for our app and adding main.js script, which is our bundled app file. Lets see the complete source code details  :
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Starter Template for Bootstrap</title>

  </head>

  <body>      
      <div id = "app"></div>      
    
    <script src = "static/build/bundle.js"></script>
  </body>
</html>

9. Lets create the first react component "Home.jsx'. This component will render "Welcome react application demo".
Home.jsx
import React from 'react';

class Home extends React.Component {
  render() {
    return (
     <h1> Welcome react application demo </h1>
    );
  }
}

export default Home;

We need to import this component in main.js and render it to our root App element, so we can see it in the browser.
main.js
import React from 'react';
import ReactDOM from 'react-dom';
import Home from "./components/home.jsx";

ReactDOM.render( <Home />, document.getElementById('app'));

NOTE : Whenever you want to use something, you need to import it first. If you want to make the component usable in other parts of the app, you need to export it after creation and import it in the file where you want to use it.

10. Now you need to build the complete package before you run in browser. so use the following commands in CMD
C:\project\reactApp >npm run build

11. Once you generated the final build for your package without any errors, Then write the below commands in CMD that helps you to start the server. Once the server is started then you can see the output of your project at this location http://localhost:8080/
C:\project\reactApp >npm start

12. Final output of your project is as follow :
Final Project structure :


Download Link :

Let me know your queries in comment box below if any ?


2 comments: