Skip to main content

Reactjs Environment Setup Step by Step for Beginners and React JS Developer

ReactJS Overview: What is ReactJS , How to build website with react

ReactJS is a JavaScript library developed by Facebook. It is used for handling the view layer for the website and mobile application. ReactJS is the most popular library in 2018 to build website with react, it helps to create responsive and fast performance application.  The latest version of  reactjs is v16 in which Facebook team added many new features.

Advantages of ReactJS :

  • ReactJS can be used at client side as well as server side, compatible with other frameworks.
  • It uses virtual DOM which is a JavaScript object, this will improve application performance since DOM is faster than regular DOM.
  • React component and data pattern improve readability, maintainability, and scalability which help to maintain a large application.

ReactJS Library Limitations:

ReactJS covers only view layer of the application not data flow layer. That’s why we are dependent on other libraries to build a website with react, for data flow we have libraries Flux and Redux. Redux is a most popular framework which helps to data flow, it provides single store to handle data in the application.

Prerequisites to learn ReactJS:

Basic knowledge and understanding of JavaScript, HTML, JavaScript object and events. Understanding client-server architecture to build a large application.

Prerequisites Software for React Development:

  • NodeJS : latest  version
  • IDE : there are many IDE like Visual Studio Code , Atom etc.
  • Client: any browser
  • GitHub: setup github for versioning control 

     Setup React JS Application Step By Step:

Step 1- Create Application folder
This is root label folder of application. Folder name must be meaningful.
Suppose folder name is ReactWebApp which is in D drive.

Step 2- Create package.json file for register dependency 
Open the command prompt and run init command in app folder label.
D:\ReactWebApp>npm init 

After running above command a package.json file will create in ReactWebApp folder.

Step 3- Install Global Packages
D:\ReactWebApp>npm install –g babel
D:\ReactWebApp>npm install –g babel-cli 

Step 4- Install dependencies package and Plugins
Here we are installing the limited package as we need at initial label .you can install unlimited whatever you need.

D:\ReactWebApp>npm install webpack --save
D:\ReactWebApp> npm install webpack-dev-server --save
D:\ReactWebApp>npm install react --save
D:\ReactWebApp>npm install react-dom  --save

The ‘--save’ command will add these packages in package.json.
We will need some babel plugins, so let’s install too.

D:\ReactWebApp>npm install babel-core
D:\ReactWebApp> npm install babel-loader
D:\ReactWebApp>npm install babel-preset-react
D:\ReactWebApp>npm install babel-preset-es2015
D:\ReactWebApp>npm install webpack-dev-server -g

Step 5- Create initial files
Files can be added manually or by command prompt. Files are index.html, App.js, main.js, and webpack.config.js.

Step 6- Set server, loaders and compiler
Let’s open webpack.config.js file and add the following code. Here webpack entry point to be index.js.

Webpack.config.js

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

Step 7-  Setting index.html
We are adding root element as div id=”reactapp” and adding the bundle.js  script which is our bundle app file.

index.html
<html lang ="en">
   <head>
      <meta charset ="UTF-8">
      <title>React App</title>
   </head>
   <body>
      <div id ="reactapp"></div>
      <script src ="bundle.js"></script>
   </body>
</html>


Step 8- Setting App.js and main.js
App.js
import React from 'react';
class ReactApp extends React.Component {
   render() {
      return (
         <div>
            React Redux Tutorials
         </div>
      );
   }
}
export default ReactApp;


main.js
import React from 'react';
import ReactDOM from 'react-dom';
import ReactApp from './App.js';
ReactDOM.render(<ReactApp />, document.getElementById('reactapp'));


Step 9- Start the server
D:\ReactWebApp>npm start
Open browser and type localhost:8080 and application will launch.

Friends please do like, share, subscribe and comment. Please comment for any specific topic.


Comments

  1. you have a misspell in step 3 npm install –g babe-cli, it is npm install -g babel-cli.

    ReplyDelete
    Replies
    1. Thanks for visiting blog and I fixed typo misspelled.
      Have a good day!

      Delete
  2. Excellent and useful blog Reactjs admin. Keep up the good work and share more like this.
    ReactJS Training Institutes in Chennai | ReactJS Training Chennai

    ReplyDelete

Post a Comment

Thanks for visiting blog. Have a good day.

Popular posts from this blog

React Redux Tutorials: React Redux Data Flow and Redux Lifecycle Methods With Examples

React Redux Data Flow and Redux Lifecycle Methods Overview What is Redux and why do we need Redux Redux is an open source JavaScript library which is designed for maintaining application state. Redux JS is a powerful and popular library nowadays. The command to install Redux library npm install redux --save . Nowadays JavaScript single-page applications are very popular and powerful. As the requirements for single-page applications have become complicated, our code must manage more state than ever before. This state can include server responses and cached data, as well as locally generated data that has not yet been persisted to the server. Front-end state is also increasing in complexity, as we need to manage active routes, selected tab, spinners, pagination controls etc. That's why we need Redux. click here to learn React Redux Architecture, folder structure. Three Principles of Redux: Changes are made with pure functions You write pure reducers to specify

React Redux Application Structure, Architecture and React Folder Structure Best Practices

React Redux Application Structure, Architecture and  React Folder Structure Best Practices: There some questions comes our mind when we are going to create a new react redux application structure from scratch. What folder structure should be followed especially when we are implementing a large react redux application . How to connect react with redux  What should be the naming convention of folder and react js files. What are the best practices of react redux project structure. The structure might be different for each of us but I am sharing the standard react redux application structure which is followed by most of the UI developers in IT industry. High Level React Redux Application Architecture There are many folders and files in above application screen shot, let discuss one by one. The application name is REACTWEBAPP and folders are config, public, script, server, src, reducers, sagas, store and package.json. Config: react redux application configurations

ReactJS Routing And Single Page Application Tutorial

React Router: ReactJS Single Page Application Why do we need React Router Nowadays single page application is the most popular. For making single page application, we need to react router. Single page application is very powerful and provides performance features as well. What is React Router React router is a library, it provides routing feature through which we can redirect from one page to another page. Mainly there are two types of routing. 1. Browser Specific routing: In general or e-commerce web application have browser routing and it helps in search engine optimization. npm command to install routing package npm install react-router --save . --save is used to save the package entry in project specific package.json file. import React from 'react'; import ReactDOM from "react-dom"; import { Router, Route, Link, browserHistory, IndexRoute } from 'react-router'; import Home from './Home'; import About from './About'; import