How To Install And Setup A React App On Windows 10

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是用于构建用户界面的流行JavaScript库之一。它由Facebook以及由个人开发人员和公司组成的社区维护。在本文中，我们将讨论在Windows 10上安装React的步骤

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可以用作开发单页或移动应用程序的基础。它是一个功能强大的库，可以轻松地处理复杂的项目

React Native, one of the most lovable hybrid mobile application development frameworks is also based on React.

最受人喜爱的混合移动应用程序开发框架之一React Native也基于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.

在这里，我将解释Windows 10平台上React应用程序的安装和设置。由于React是一个库，因此我们只需导入即可开始在项目中使用它

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.

但是在这里，我们将安装create-react-app工具（为我们创建React应用程序而构建的工具），并在Windows 10操作系统上使用它来构建React应用程序

Installation

1. 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 projects. React uses Node.js and NPM for the management of dependencies and runtime.

实际上，Node.js提供了一个运行时环境以从浏览器外部执行JavaScript代码。NPM是Nodejs的默认软件包管理器，用于管理和共享任何JavaScript项目的软件包。React使用Node.js和NPM来管理依赖项和运行时

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.

在本教程中，将使用Node Package Manager（NPM）安装create-react-app工具。Create-react-app是由React.js团队开发的工具，可简化系统中React的设置

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. You can choose LTS or latest version.

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.

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作为全局安装一个名为create-react-app的工具。该工具用于从我们的系统轻松创建React应用程序

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.

成功安装create-react-app后，我们可以使用它创建第一个React应用程序

create-react-app awesome-project

Here awesome-project is the name I have chosen for my react project.

这里的awesome-project是我为我的React项目选择的名称

Note:

We can combine the steps 2 and 3 with a single command using NPX(package runner tool that comes with NPM 5.2+).

我们可以使用NPX（NPM 5.2+随附的打包运行程序工具）将第2步和第3步与单个命令结合使用

npx create-react-app awesome-project

Here NPX will temporarily install create-react-app and create a new react project named awesome-project.

NPX将在此处临时安装create-react-app并创建一个名为awesome-project的新React项目

4. Running the Application

The app we created can run locally on our system with npm start command.

我们创建的应用可以使用npm start命令在我们的系统上进行本地运行

cd awesome-project
npm start

This will opens up the react application in a new tab of our browser with the below URL.

这将在浏览器的新标签页中打开带有以下URL的react应用程序

http://localhost:3000

Note:

If port 3000 is busy with another process, the app will start in port 3001 or any other port available.

如果端口3000忙于其它进程，则该应用程序将从端口3001或任何其它可用端口启动

TechoTip:

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 for the installation of React.js on a Windows 10 system. These steps are verified by our team and 100% working.

Have a nice code!