React can be used as a base for the development of single-page or mobile applications. It is a powerful library to deal with complex projects in an easy manner.
React Native, one of the most lovable hybrid mobile application development frameworks is also based on React.
Here I am going to explain the installation and set up of a React App on Windows 10 platform. As React is a library, we can start using it inside our project just by importing it.
But here we are going to install the
create-react-app tool(a tool built for us to create react applications) and build a react app using it on Windows 10 Operating System.
For visual learners, the video below will help you to do this installation faster. It is completely based on this blog post.
For others, please follow the below steps to install React on Windows 10.
1. Install Nodejs
In this tutorial, we are going to install create-react-app tool using the Node Package Manager(NPM). Create-react-app is a tool developed by React.js team that makes the setting up of React in our system easier.
So first, it needs to install Nodejs on our system. NPM will be installed with Nodejs. The current stable version of Node.js can be downloaded and installed from the official website that is given below.
You can see two versions on the main page. The stable version and the latest version. The stable version is recommended for most users. Currently, 12.16.1 is the stable version of Nodejs and we need to download it.
It downloads an exe file to your system. Now install it on your system. If there is any doubt, the screenshots I provided below will help you.
1. Start the installation wizard – The first step is to start the installation wizard by running the installation file.
2. Accept the license agreement – Now accept the license agreement and click Next.
3. Choose the installation directory – AS default, the Node.js installed in the Program Files directory. If you are preferring another, it can be chosen from this step.
4. Select the features – We can customize the features to be installed with Node.js. But here, we don’t need to bother about it. Just click Next.
5. Install tools for Native Modules – In this step, you can optionally install tools like Python2, Visual Studio Build Tools, etc. Just skip and click Next.
6. Start installation – Now click the Install button to start Node.js installation.
7. Finish the installation – After a successful installation close the installation wizard by clicking the Finish button.
Now, verify Node.js and NPM are installed on our system. Open Command Prompt and check the Node and npm versions with the below commands. You can see the versions as it shows in the below image.
Note:- If you don’t know how to open Command Prompt, Press Windows key in your keyboard and search for “cmd”.
node -v npm -v
2. Install Create-React-App Tool
Now we need to install a tool named create-react-app using NPM as global. This tool is used to create react applications easily from our system.
npm install -g create-react-app
3. Creating a New React Project
After the successful installation of create-react-app, we can create our first react application using it.
Here awesome-project is the name I have chosen for my react project.
We can combine the steps 2 and 3 with a single command using NPX(package runner tool that comes with NPM 5.2+).
npx create-react-app awesome-project
Here NPX will temporarily install create-react-app and create a new react project named awesome-project.
4. Running the Application
The app we created can run locally on our system with npm start command.
cd awesome-project npm start
This will opens up the react application in a new tab of our browser with the below URL.
Have a nice code!