ReactJS installation and environment setup:
ReactJS installation methods:
Before we start with ReactJS installation, we must first download and install Node.JS program in our PC. Once installed, we open the Node.JS Command Prompt and start installing ReactJS.
Installation of ReactJS is done in any of the following two ways-
- Using the [npm] command
- Using the [create-react-app] command
The difference in both the methods is nothing but the way of proceedings.
- Going through [npm] command is a little complicated since it requires manual commands to install each and every component that we discussed in the prerequisites.
- [create-react-app] command on that note is quite easy to use. It takes a significant time of few minutes but each and every component is installed automatically.
[create-react-app] command:
Ensure that Node.JS and NPM are installed in the machine.
Install React by running the following command in Node.JS Command Prompt-
It’ll take significant time to install React. Once installed, we can start creating an app.
Creating the very first app:
Once React is installed successfully, we can create an app by running the following command in Node.JS Command Prompt-
It’ll also take significant time to create the relevant directory structure and set-up all necessary files to help us develop and run a React app.
We can also combine the separate commands of React installation and creation of React app by using the npx command.
The npx is a package runner tool which comes with npm 5.2 and above version.
Running the server:
Once the app [myfirstapp] is created successfully, we can run our app by using following commands in Node.JS Command Prompt-
The Node.JS server is now on. The default ReactJS page can be opened up in the browser by typing the URL- [http://localhost:3000]
Modifying the app:
Till the time, we have learnt about how to install React, how to create an app and how to run the app. Now we’ll discuss about how to be able to modify the app that has just been created.
If you get into the path- [C:\Users\Your Name], there you’ll find a directory of the same name as of your app. Now follow the following steps:
- Open the [myfirstapp] directory. There you’ll find a directory named [src].
- Open that [src] directory. There you’ll find a JavaScript file named [app.js].
- Open that [app.js] file. There you can easily replace each and everything coded between
<div className="App"> . . . . </div> - As you edit the code in [app.js] and save the file, you’ll see that the browser is showing updated result. This shows that you need not to refresh the browser every-time you edit the code of a React app.
Demo:
