How To Install React JS Step By Step

    In this article, we will see how to install React JS step by step. we will see how to set up an environment for successful React development. React JS is an open-source front-end JavaScript library for building user interfaces. React JS is maintained by Facebook and a community of individual developers and companies.

    So, let's see install react js for beginners step by step or how to install react js using npm

    For React JS we need  NodeJS and NPM. If you don't have it installed on your system, then you need to add the official Node.js website to download and install Node, which also includes NPM (Node Package Manager).

    After you download and install Node, start your terminal/command prompt and run the below command and check the node version installed on your system.

node -v
npm -v

    There are two ways to set up an environment for the ReactJS application. They are given below.

  1. Using the npm command
  2. Using the create-react-app command

    1. Using the npm command

Step 1: Create the Root Folder

    Create a root folder with the name reactAppInsatllExample on the specific folder or where you want. Here, we create it on the C:\ Drive. You can create the folder directly or using the command given below.

C:\Users\dell\Desktop>mkdir reactAppInsatllExample
C:\Users\dell\Desktop>cd reactAppInsatllExample

    Now, you need to create a package.json file. To create any module, it is required to generate a package.json file in the project folder. You need to run the npm init command from the command prompt.

npm init
or
npm init -y

 

Read Also: How To Send Email Using Markdown Mailable Laravel 9
Step 2: Install React and React DOM

    After creating a package.json file, you need to install react and its DOM packages using the following npm command in the terminal

npm install react --save
npm install react-dom --save
Step 3: Install Webpack

    Now, we will install webpack. Webpack is used for module packaging, development, and production pipeline automation. We will use webpack-dev-server during development, webpack to create production builds, and webpack CLI to provide a set of commands.

npm install webpack --save
npm install webpack-dev-server --save
npm install webpack-cli --save
// or you can install all of them in single command
npm install webpack webpack-dev-server webpack-cli --save
Step 4: Install babel

    Install babel, and its plugins babel-core, babel-loader, babel-preset-env, babel-preset-react and, html-webpack-plugin

npm install babel-core --save-dev
npm install babel-loader --save-dev
npm install babel-preset-env --save-dev
npm install babel-preset-react --save-dev
npm install html-webpack-plugin --save-dev

// or you can install all of them in single command

npm install babel-core babel-loader babel-preset-env babel-preset-react html-webpack-plugin --save-dev
Read Also: How To Install Tailwind CSS In Laravel 9
Step 5: 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 the command prompt.

type nul > index.html
type nul > App.js
type nul > main.js
type nul > webpack.config.js
type nul > .babelrc
Step 6: Set Compiler, Server And Loaders

    Open the webpack-config.js file and add the following code. We are setting webpack entry point to be main.js.

    webpack.config.js

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']
            }
         }
      ]
   },
   plugins:[
      new HtmlWebpackPlugin({
         template: './index.html'
      })
   ]
}
Read Also: How To Install Angular In Ubuntu
Step 7: index.html

    Now, we will create the index.html file.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <meta charset = "UTF-8">
      <title>How To Install React JS Step By Step - Websolutionstuff</title>
   </head>
   <body>
      <div id="app"></div>
      <script src="index_bundle.js"></script>
   </body>
</html>
Step 8: App.jsx and main.js

    This is the first React component.

    App.js

import React, { Component } from 'react';
class App extends Component{
   render(){
      return(
         <div>
            <h1>Hello World</h1>
         </div>
      );
   }
}
export default App;

    We need to import this component and render it to our root App element, so we can see it in the browser.

Read Also: How To Install Python On Ubuntu

    main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';

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

    Whenever you want to use something, you need to import it first.

    Create a file with the name .babelrc and copy the following content to it.

{
"presets":["env", "react"]
}
Step 9: Running the Server

    You can start the server using the below command.

npm start
Step 10: Generating the bundle

    Generate the bundle you need to run the build command.

npm run build

    2. Using the create-react-app command

    Instead of using webpack and babel, you can install React JS more simply by installing create-react-app.

Step 1: Install create-react-app

    If you have npx and Node.js installed, you can create a React application by using create-react-app.

    Run this command to create a React application.

npx create-react-app reactJSInstallExample
Step 2: Run the React Application

    Now you are ready to run your first React application.

cd reactJSInstallExample
Step 3: Run the project

    Finally, run the project using the start command.

npm start

    open your browser and type localhost:3000 in the address bar.

    You might also like:

Bình luận
Vui lòng đăng nhập để bình luận
Một số bài viết liên quan