ReactJS Installation

ReactJS is a popular JavaScript library that is used to build a single page website. Reusable UI component can be created by using reactjs. It creates a virtual DOM in the memory that makes the application faster.  It changes the changes the content of the browser automatically when any modification is done. It is developed by a Facebook software engineer named Jordan Walke. It is first used for facebook newsfeed in 2011 and it is released publically in 2013.

ReactJS Automatic Installation:

      1. Download nodejs according to your operating system from the following link

https://nodejs.org/en/download/

      2. Run the command prompt and create the project folder and go to the folder location and install reactjs modules.

npm install -g create-react-app

      3. Check reactjs is installed properly or not

create-react-app --version

      4. Create a new reactjs app

create-react-app new-app

      5. Go to project folder

cd new-app

      6. Start the server

npm start

     7. Modify App.js file and run the file.

ReactJS Manual Installation

1. Create the project folder and go to the folder location.

2. Setup for new reactjs app

npm init

3. Install mandatory modules

npm i -S react react-dom

4. Install required babel modules

npm i -D babel-core babel-loader babel-preset-env babel-preset-react

npm i -S @babel/core @babel/preset-env @babel/preset-react

6. Install webpack

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin

7. create .babelrc file and add the following content


{

"presets": [

     "@babel/preset-env",

     "@babel/preset-react"

]

}

8. Create webpack.config.js file and add the following content


const path = require('path');

const HWP = require('html-webpack-plugin');

module.exports = {

     entry: path.join(__dirname, '/src/index.js'),

     output: {

           filename: 'build.js',

           path: path.join(__dirname, '/dist')
      },

      devServer: {

           inline: true,

           port: 8800

      },

      module:{

           rules:[{

           test: /\.(js|jsx)$/,

           exclude: /node_modules/,

           loader: 'babel-loader'

      }]

},

plugins:[

new HWP(

       {template: path.join(__dirname,'/src/index.html')}

)

]

}

9. Create a folder src and add two files index.js and index.html
10. Add the following content into index.html


<!DOCTYPE html>

<html lang="en">

<head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>React app</title>

</head>

<body>

       <div id="root"></div>

</body>

</html>

11. Add the following content into index.js

12. Run the server

npm start

13. Build the project

npm run built

 

You can check the next tutorial on react from the following link.

Introduction to React JSX