What is React?
So, let’s proceed with the installation of React in Windows.
How to Install React Js in Windows
So before installing react, we’ll require to install Node js. Node js is a dependency manager that provides dependency. It is required to develop any React js application. For downloading, just go to the official website of Node.js and download the latest version from there.
So, currently, the latest version is 13.12.0. But, we will install the stable version that is 12.16.1 LTS. So, I recommend you to install the stable version. After downloading, let’s install it.
Install Node.js in Windows
The installation of the Node.js installer is the same as the other in Windows. Simply double click on the installer and proceed with the installation process. After completing the installation of Node.js we will install React js. So, let’s finish the installation.
After clicking on Run, a setup wizard will open. So, just follow the recommended options and click to next.
Accept the license agreement and move to the next step.
We will require installing Node.js to global so that we can access it globally.
Here the installation process is started. It will take a few seconds to complete the installation.
So, here the installation has finished.
You can check whether node.js has installed successfully or not. Just open the command prompt and simply enter the below command.
The Node.js contains the npm so with the current installation of Node.js, npm has been installed too. Similarly, you can check the npm version like the node.
Now, the Windows system is ready to install react js. Let’s create our first React js application.
Install React js in Windows
Open the terminal or command prompt or Windows PowerShell and just enter the below command.
npx create-react-app my-app
Here, my-app is the application name that will be going to create.
It will take a few minutes to install the required libraries with the react js application. So, just hold on while it completes the app setup.
my-app is the name of the application. The command npx create-react-app my-app creates a folder called my-app which is the project folder. To test if everything has been installed properly, go into the project folder and start the following command.
cd my-app npm start
Now, go to your browser and open the URL localhost:3000
You should be able to see that your application is running. The application will look like this in your browser:
Install Node.js in Ubuntu
For installing Node.js, update the linux package first. So, it will update the new package.
sudo apt-get update
After updating the latest package, we will install the Node.js.
We will install the latest stable version of Node.js. Open the terminal and run the below commands.
cd ~ curl -sL https://deb.nodesource.com/setup_10.x -o nodesource_setup.sh
Now, run the download script of node source.
sudo bash nodesource_setup.sh
In the next step, we will install the node.
sudo apt-get install nodejs -y
Now, we are ready with the Node and npm. To check whether the installation has completed or not we will check the node version.
Also, you can check the npm version.
Create a new App in React
Open the terminal and create a new app in React by hitting the below command.
Install Create React App
Before starting to create the react application, we would require the development environment configuration. Hence, for the productive react development we will have to configure some tools like babel, webpack which are really a complex configuration for the newbie.
So, next, we will install create-react-app using npm. Therefore, run the install command in the terminal as shown below.
npm install -g create-react-app
Once, it is done, you can check the version by hitting the below command.
Now, you are ready to go for creating any app in react.
Create React App in Ubuntu
For creating the react app, enter the below command on the terminal.
It will take a couple of minutes to finish the installation.
Basic Folder Structure
When you have created the project, you have noticed that it creates a bunch of files. Like this
Here, I will explain some of the important files and folders that you should be knowledgeable about.
- package.json: This file contains a list of all node dependencies which are needed.
- public/index.html: When the application starts this is the first page that has loaded. This is the only HTML file in the entire project since React is generally written using JSX. This file has a line of code <div id=”root”></div> . This line is very important because all the application components are loaded into this div.
- src/index.js: This is a js file corresponding to index.html. This file contains the code ReactDOM.render(<App />, document.getElementById(‘root’)); . This means the App component has to be loaded into an html element with id root. This means the div element is present in index.html.
- src/index.css: This is the CSS file corresponding to the App component.
npm run build
After running the command npm run build you will see that build folder is created in your project.
So, in the very initial post of React, we learned how to install React in Windows as well as Ubuntu. Also, I have given you a short explanation of React and npm. That will help you out to understand the core structure of the React. I hope, you will be happy to learn here. In the upcoming post, I will try to post the real type of demo which can be implemented in your real projects. In the next post, we will grab the CRUD Application in React using the RESTful APIs. That will help you to learn the APIs implementation with the React application.