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 -vThere 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 reactAppInsatllExampleNow, 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 -yAfter 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 --saveNow, 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 --saveInstall 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-devTo 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 > .babelrcOpen 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 startGenerate the bundle you need to run the build command.
npm run build2. 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
