But here we are going to install the create-react-app (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 React using the Node Package Manager(NPM). So first, it needs to install Nodejs on our system. NPM will be installed with Nodejs itself.
So, the latest version of Node.js can be downloaded and installed from the official website. The URL is given below. Currently, 12.8.0 is the latest version of Nodejs.
An alternative method(Using Chocolatey)
We can also install Node.js from Command Prompt. Follow the two steps below to do this.
1.1 Install Chocolatey
Chocolatey is a popular package manager for Windows. We can install all the packages and dependencies required to install React using Chocolatey. So at first, we need to install it on our system.
To install Chocolaty, Open Command Prompt with administrator privileges and run the command below.
@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
1.2 Install Nodejs
Now the LTS version of Node.js can install on our system using Chocolatey.
choco install -y nodejs-lts
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 also combine the steps 3 and 4 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 be run locally on our system.
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!