React is one of the popular JavaScript libraries for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. In this article, we will discuss the steps to install React on Windows 10.
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.
Install and Setup a React App on Windows 10
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.
Prerequisites
To continue with this article, the reader must know the basics of working with the Command Prompt/ Powershell in a Windows 10 system.
What we will learn?
Here in this article, we will learn the following things:-
- Install Node.js on a Windows 10 system
- Creating a new React project using create-react-app tool
- Running the React app we created
Install Nodejs
Node.js actually provides a runtime environment to execute JavaScript code from outside a browser. NPM, the default package manager for Nodejs is used for managing and sharing the packages for any JavaScript project. React uses Node.js and NPM for the management of dependencies and runtime.
In this tutorial, we are going to install the create-react-app tool using the Node Package Manager(NPM). Create-react-app is a tool developed by the React.js team that makes React’s setting up 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.
https://nodejs.org
Download the latest version and install it. Here we can choose the LTS or the latest version. Because both of the version supports React.
After the installation, check the versions using the below commands.
node -v npm -v
This will show the installed versions of Node.js and NPM.
Note:- If you are really a beginner in this field, the guide Steps to install Node.js and NPM on Windows 10 will help you.
Create a New React Project
After the successful installation of Nodejs and NPM, we can create a new React project by temporarily installing the create-react-app tool. Execute the below command on the Command prompt window.
npx create-react-app awesome-project
Here NPX will temporarily install create-react-app and create a new react project named awesome-project. Note that the awesome-project is the name I have chosen for my react project.
Running the Application
So the app we created can run locally on our system with the npm start command.
cd awesome-project npm start
This will open up the react application in a new tab of our browser with the below URL.
http://localhost:3000
Note:- If port 3000 is busy with another process, the app will start in port 3001 or any other port available.
Note: We recommend using Visual Studio code as the source-code editor for working with React projects.
Summary
So, in this article, we have discussed the steps to Install React on a Windows 10 system. These steps are verified by our team and 100% working.
