How to Install and Setup a React App on Windows 10

Image is loading...

Install and Setup a React App on Windows 10 | React is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. 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, there is no need to install it. You can simply start a project using React.




1. INSTALL NODEJS

Since React is a library of JavaScript, it requires to have Nodejs(A JavaScript runtime) installed.

The latest version of Node.js can be downloaded and installed from the official website below. Currently, 10.10.0 is the latest and you can also choose the LTS version if you are interested.

https://nodejs.org

2. INSTALL GIT

We need a terminal to go forward in this tutorial. Windows have Command Prompt and Powershell as default terminal but it feels a little bit uncomfortable. So I personally recommend git bash in place of Command Prompt. Git can be installed using the below link.

https://git-scm.com/downloads

Image is loading...

Just install the exe file. I am not explaining the steps because you can execute the commands on Command Prompt also.

So after successful installation of Git, right click on the desktop and select Git Bash Here. This will open up a terminal and from now on, you can execute all the commands in the below steps within Git Bash. But first Chain Direct to the home directory using the below command.

cd ~

Image is loading...Image is loading...




3. INSTALL REACT

Now you can install React using npm. You don’t need to worry about the complexity of React installation. create-react-app npm package will take care of it.

npm install -g create-react-app

4. CREATE A NEW REACT PROJECT

After successful installation of React, you can create a new app using create-react-app. awesome-project is the name I choose for my project

create-react-app awesome-project
Note:-

You 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 install react and creates a new app named awesome-project.




5. CHOOSING THE CODE EDITOR

You can choose your own favorite code editor for editing your project. But in my case, I choose Visual studio Code(VS code). Using the below link, you can download VS code for Windows and install.

https://code.visualstudio.com

6. DIRECTING TO YOUR PROJECT FOLDER AND EDITING

You can manually open your project directory(awesome-project) on VS code or use git bash to open up the project on VS code using the below command.

cd ~/AwesomeProject
code .




7. RUNNING YOUR APPLICATION

The app you created can be run using the command below.

npm start

This opens up a new tab on your browser with the URL below.

http://localhost:3000

Have a nice code!

You May Also Like

About the Author: Syamlal CM

Hi, I'm Syamlal, the co-founder of Redmonark. I'm a developer, writer and also have a little bit of experience in graphic designing.

1 Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.