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.

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.

Installation

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

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.

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.

https://nodejs.org

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.

create-react-app awesome-project

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

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 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.

http://localhost:3000

TechoTip: We recommend using Visual Studio code as the source-code editor for working with React projects.

Have a nice code!

18 thoughts on “How to Install and Setup a React App on Windows 10

  1. Nice page.I tried to follow various other sites but could not succeed but this page lead me to success in installation hanks a ton!!

  2. Guys, I m getting below error how can I fix it.

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\Syneotek\AppData\Roaming\npm-cache\_logs\2019-06-17T11_01_26_298Z-debug.log

  3. Hey guys, when I run the “npm start” command, I am getting the below message on the terminal, and a pop up appears saying “application not found”. Can someone help me fix this? Thanks in advance.

    Compiled successfully! You can now view my-app in the browser. Local: http://localhost:3000/ On Your Network: http://192.168.2.8:3000/ Note that the development build is not optimized. To create a production build, use npm run build.

  4. 0 info it worked if it ends with ok
    1 verbose cli [
    1 verbose cli ‘C:\\Program Files\\nodejs\\node.exe’,
    1 verbose cli ‘C:\\Users\\Ankit\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js’,
    1 verbose cli ‘start’
    1 verbose cli ]
    2 info using [email protected].3
    3 info using [email protected].0
    4 verbose run-script [ ‘prestart’, ‘start’, ‘poststart’ ]
    5 info lifecycle [email protected]~prestart: [email protected]
    6 info lifecycle [email protected]~start: [email protected]
    7 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
    8 verbose lifecycle [email protected]~start: PATH: C:\Users\Ankit\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\Ankit\Documents\JavaScript\React\my-app\node_modules\.bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\Program Files\Python37\Scripts\;C:\Program Files\Python37\;C:\oraclexe\app\oracle\product\11.2.0\server\bin;;C:\oraclexe\app\oracle\product\11.2.0\server\bin;C:\ProgramData\Oracle\Java\javapath;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files\Microsoft SQL Server\120\Tools\Binn\;C:\Windows\Microsoft.NET\Framework64\v4.0.30319;C:\xampp\php;C:\ProgramData\ComposerSetup\bin;C:\Program Files\Java\jdk1.8.0_212\bin;C:\Program Files\Java\jre1.8.0_212\bin;C:\Windows\system32\config\systemprofile\.dnx\bin;C:\Program Files\Microsoft DNX\Dnvm\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\nodejs\;C:\Users\Ankit\AppData\Local\Programs\Python\Python37-32\Scripts\;C:\Users\Ankit\AppData\Local\Programs\Python\Python37-32\;C:\Program Files\JetBrains\PyCharm 2018.3.4\bin;;C:\Users\Ankit\AppData\Roaming\Composer\vendor\bin;C:\Users\Ankit\AppData\Local\Programs\Microsoft VS Code\bin;C:\Users\Ankit\AppData\Roaming\npm
    9 verbose lifecycle [email protected]~start: CWD: C:\Users\Ankit\Documents\JavaScript\React\my-app
    10 silly lifecycle [email protected]~start: Args: [ ‘/d /s /c’, ‘react-scripts start’ ]
    11 silly lifecycle [email protected]~start: Returned: code: 1 signal: null
    12 info lifecycle [email protected]~start: Failed to exec start script
    13 verbose stack Error: [email protected] start: `react-scripts start`
    13 verbose stack Exit status 1
    13 verbose stack at EventEmitter. (C:\Users\Ankit\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:332:16)
    13 verbose stack at EventEmitter.emit (events.js:210:5)
    13 verbose stack at ChildProcess. (C:\Users\Ankit\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
    13 verbose stack at ChildProcess.emit (events.js:210:5)
    13 verbose stack at maybeClose (internal/child_process.js:1021:16)
    13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
    14 verbose pkgid [email protected]
    15 verbose cwd C:\Users\Ankit\Documents\JavaScript\React\my-app
    16 verbose Windows_NT 10.0.10240
    17 verbose argv “C:\\Program Files\\nodejs\\node.exe” “C:\\Users\\Ankit\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js” “start”
    18 verbose node v12.11.0
    19 verbose npm v6.11.3
    20 error code ELIFECYCLE
    21 error errno 1
    22 error [email protected] start: `react-scripts start`
    22 error Exit status 1
    23 error Failed at the [email protected] start script.
    23 error This is probably not a problem with npm. There is likely additional logging output above.
    24 verbose exit [ 1, true ]

  5. hello,

    Please help me, I am beginner in react js programming. I am trying to install react js in command prompt in local xampp and when i install webapck it shows error cannot find the module webpack .

    please help because if this problem will not sort then i can’t go forward and nothing start my first project in react js .

    please reply

  6. bro you solved my problem i was trying install and it was already install but did not know how to run. And i searched in youtube and also in google it was not clear to me but know i found your page it works very well than i went to the directory where i created project and ran with npm start. THANK YOU SO MUCH

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.