How To Install React JS Step By Step
Websolutionstuff | Aug-08-2022 | Categories : React JS
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.
- Using the npm command
- Using the create-react-app command
1. Using the npm command
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
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
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
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
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
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'
})
]
}
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>
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.
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"]
}
You can start the server using the below command.
npm start
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.
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
Now you are ready to run your first React application.
cd reactJSInstallExample
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:
- Read Also: Laravel 9 CRUD Operation Example
- Read Also: Node.js Express CRUD Example with MySQL
- Read Also: Vue Js Sweetalert Modal Notification Tutorial
- Read Also: Convert JSON String to JSON Object Javascript
Recommended Post
Featured Post
How to Upgrade PHP 7.4 to 8.0...
Hey there! I recently faced the need to upgrade my PHP version from 7.4 to the latest 8.0 on my Ubuntu server. It might...
Nov-06-2023
How To Change Datepicker Start...
In this tutorial, I will guide you through the process of changing the start date of a datepicker component in Angular 1...
Jul-03-2023
Laravel 10 Scout Search and Al...
Hey everyone! Ever wished your Laravel application could deliver lightning-fast search results? Well, I've got great...
Feb-21-2024
Google Recaptcha Example In La...
In this tutorial I will teach you about Google Recaptcha, Google Recaptcha is used for advanced risk analysis...
Jun-10-2020