In this write-up, we will discuss React JS Most importantly, how to set up a React JS Development Environment? So let’s begin.
Setting up React JS Development Environment
To run any react js application, we must have Nodejs installed on our PC. So we have to proceed through the step mentioned below:-
NodeJS and NPM
NodeJS is the platform needed for the development of ReactJS. You may visit the official download link of NodeJS to download and install the latest version of NodeJS on your PC.
After successfully installing NodeJS on your PC, we start installing ReactJS upon it using npm. You can set up the ReactJS environment in two ways:
● By creating react app using boilerplate command
● By using Web Pack and babel
Step 1: First, we will install the boilerplate globally. Then we run the below command in the command prompt to install ReactJS Boilerplate.
npm, install -g create-react-app After successfully installing the react boilerplate, the next thing is to create our react app.
Step 2: Run the below command to create a new project
Exp create-react-app my-app
This command will create the app named my-app.
Step 3: You can run the project by typing the command
It will give you the output in the terminal.
Step 4: Now, we will create the react app using the Boilerplate that we have installed. This command will create an app
This statement will create a new directory named MyApp in your device with lots of files to run a React app successfully.
The main files on which we will be working within the introductory course are index.html and index.js. This index.html file has a div element with id “root”, inside which everything will be rendered. All our react codes will be inside the index.js file.
Now that we have successfully set up the development environment, Now we will start the development server.
Step 5: Start the development server, for that go inside your current directory “MyApp” and execute the below command.
Now on successfully running the above command, your compiler will show an output like
Local: http://local host:3000/
That’s it, now the ReactJS web development environment is set up and ready.
Below mentioned steps to be performed to set up the React JS Development Environment:
We need a babel-loader for JSX file types, babel-preset-react, that will make your browser update automatically when any change occurs to your code without losing the current state of the app.
Now the question is how we will install the Web Pack which would be helpful in the ReactJS Development Environment process.
To Install the webpack, use the following command given below.
reactApp>npm install babel-core babel-loader babel-preset-env babel-preset-react babel-webpack-plugin -save-dev
You can use these commands to install separately
reactApp>npm install babel-core -save-dev
reactApp>npm install babel-loader -save-dev
reactApp>npm install babel-preset-env -save-dev
reactApp>npm install babel-preset-react -save-dev
reactApp>npm install babel-webpack-plugin -save-dev
To complete the installation process, you need to add these files to your project folder. These files are webpack.config.js, index.html, app.js, main.js, and .babelrc. You can create these files manually using a command prompt.
1) Configure Web Pack
You can configure Web Pack in webpack.config.js by adding the code given below. Configure web pack specifies the entry point of your app, the created output, and the extension that will be resolved automatically. It also set the development server’s port to 8080. It specifies the loaders for processing the different file types used inside your app, and it concludes by inserting plugins required during development.
Open the package.json file and delete the “test” echo &&” exit 1 inside the script”, then add the start and build the command instead. It is because we will not perform any testing in the app.
2) HTML WebPack for the template for index.html
Using the HtmlWeb-pack plugin module, we can use a custom template to create index.html. This allows us to add a viewport tag to our software to promote mobile-sensitive scaling. It also adds the index bundle.js script, our packaged app file, and sets the div id = “app” as the root attribute for your app.
Now, import this component and give it to your root App element to see it in the browser.
import React from ‘react’;
import ReactDOM from ‘react-dom;
import App from ‘./App.js’;
ReactDOM.render(<App />, document.getElementById(‘app’));
5) Create .babelrc file
Create a file with the name .babelrc and copy the following code.
After the installation process gets completed and the app gets set up, you can start the server by running the following command.
It will show the port number we need to open in the browser.
Generate the application kit now. The bundling method is to monitor import files and merge them into one file, a “bundle.” You can then load a whole app on a website. This kit will be included. The construct command has to be executed with the command prompt shown below to create this.
reactApp>npm run build
This command will generate the bundle in your current folder. I.e. index.html, index_bundle.js.
Original Source:-How to Set up a React JS Development Environment?