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

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

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

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!

35 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

  7. I am beginner.When i set up react js I have 3 errors
    npm ERR! Unexpected end of JSON input while parsing near ‘…OOjDfzTrV1DxQL3cUfmkI’

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:UsersUserAppDataRoamingnpm-cache_logs2020-04-11T04_26_51_107Z-debug.log
    How can i do?

  8. hello guys, when i was trying to set up “npm i -g create-react-app”. am getting the below error
    npm ERR! code ECONNREFUSED
    npm ERR! errno ECONNREFUSED
    npm ERR! FetchError: request to http://registry.npmjs.org/create-react-app failed, reason: connect ECONNREFUSED 192.168.43.230:56027
    npm ERR! at ClientRequest. (C:\Program Files\nodejs\node_modules\npm\node_modules\node-fetch-npm\src\index.js:68:14)
    npm ERR! at ClientRequest.emit (events.js:310:20)
    npm ERR! at Socket.socketErrorListener (_http_client.js:426:9)
    npm ERR! at Socket.emit (events.js:310:20)
    npm ERR! at emitErrorNT (internal/streams/destroy.js:92:8)
    npm ERR! at emitErrorAndCloseNT (internal/streams/destroy.js:60:3)
    npm ERR! at processTicksAndRejections (internal/process/task_queues.js:84:21)
    npm ERR! FetchError: request to http://registry.npmjs.org/create-react-app failed, reason: connect ECONNREFUSED 192.168.43.230:56027
    npm ERR! at ClientRequest. (C:\Program Files\nodejs\node_modules\npm\node_modules\node-fetch-npm\src\index.js:68:14)
    npm ERR! at ClientRequest.emit (events.js:310:20)
    npm ERR! at Socket.socketErrorListener (_http_client.js:426:9)
    npm ERR! at Socket.emit (events.js:310:20)
    npm ERR! at emitErrorNT (internal/streams/destroy.js:92:8)
    npm ERR! at emitErrorAndCloseNT (internal/streams/destroy.js:60:3)
    npm ERR! at processTicksAndRejections (internal/process/task_queues.js:84:21) {
    npm ERR! message: ‘request to http://registry.npmjs.org/create-react-app failed, reason: connect ECONNREFUSED 192.168.43.230:56027′,
    npm ERR! type: ‘system’,
    npm ERR! errno: ‘ECONNREFUSED’,
    npm ERR! code: ‘ECONNREFUSED’,
    npm ERR! stack: ‘FetchError: request to http://registry.npmjs.org/create-react-app failed, reason: connect ECONNREFUSED 192.168.43.230:56027\n’ +
    npm ERR! ‘ at ClientRequest. (C:\\Program Files\\nodejs\\node_modules\\npm\\node_modules\\node-fetch-npm\\src\\index.js:68:14)\n’ +
    npm ERR! ‘ at ClientRequest.emit (events.js:310:20)\n’ +
    npm ERR! ‘ at Socket.socketErrorListener (_http_client.js:426:9)\n’ +
    npm ERR! ‘ at Socket.emit (events.js:310:20)\n’ +
    npm ERR! ‘ at emitErrorNT (internal/streams/destroy.js:92:8)\n’ +
    npm ERR! ‘ at emitErrorAndCloseNT (internal/streams/destroy.js:60:3)\n’ +
    npm ERR! ‘ at processTicksAndRejections (internal/process/task_queues.js:84:21)’
    npm ERR! }
    npm ERR!
    npm ERR! If you are behind a proxy, please make sure that the
    npm ERR! ‘proxy’ config is set properly. See: ‘npm help config’

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:\Users\sammo\AppData\Roaming\npm-cache\_logs\2020-04-17T20_32_13_003Z-debug.log

    1. Here is a solution from Stackoverflow

      I had to execute the command below:
      npm config set registry http://registry.npmjs.org/
      However, that will make npm install packages over an insecure HTTP connection. If you can, you should stick with
      npm config set registry https://registry.npmjs.org/
      instead to install over HTTPS.

  9. HI,
    I am joban i got stuck:-

    PS C:\Users\joban\Desktop\hello> npx create-react-app awesome

    Creating a new React app in C:\Users\joban\Desktop\hello\awesome.

    Installing packages. This might take a couple of minutes.
    Installing react, react-dom, and react-scripts with cra-template…

    > [email protected] postinstall C:\Users\joban\Desktop\hello\awesome\node_modules\babel-runtime\node_modules\core-js
    > node -e “try{require(‘./postinstall’)}catch(e){}”

    > [email protected] postinstall C:\Users\joban\Desktop\hello\awesome\node_modules\core-js
    > node -e “try{require(‘./postinstall’)}catch(e){}”

    > [email protected] postinstall C:\Users\joban\Desktop\hello\awesome\node_modules\core-js-pure
    > node -e “try{require(‘./postinstall’)}catch(e){}”

    + [email protected].1
    + [email protected]
    + [email protected]
    + [email protected].1
    added 1606 packages from 750 contributors and audited 931196 packages in 105.623s
    58 packages are looking for funding
    run `npm fund` for details

    found 0 vulnerabilities

    ******************IT STUCKS HERE AFTER THAT ITS NOT WORKING|*************

      1. Microsoft Windows [Version 10.0.14393]
        (c) 2016 Microsoft Corporation. All rights reserved.

        C:\Users\elcot>cd C:\Users\elcot\Desktop\firstreact

        C:\Users\elcot\Desktop\firstreact>npm install -g create-react-app
        C:\Users\elcot\AppData\Roaming\npm\create-react-app -> C:\Users\elcot\AppData\Roaming\npm\node_modules\create-react-app\index.js
        + [email protected]
        updated 1 package in 7.986s

        C:\Users\elcot\Desktop\firstreact>create-react-app –version
        3.4.1

        C:\Users\elcot\Desktop\firstreact>create-react-app myapp

        Creating a new React app in C:\Users\elcot\Desktop\firstreact\myapp.

        Installing packages. This might take a couple of minutes.
        Installing react, react-dom, and react-scripts with cra-template…

        > [email protected] postinstall C:\Users\elcot\Desktop\firstreact\myapp\node_modules\babel-runtime\node_modules\core-js
        > node -e “try{require(‘./postinstall’)}catch(e){}”

        > [email protected] postinstall C:\Users\elcot\Desktop\firstreact\myapp\node_modules\core-js
        > node -e “try{require(‘./postinstall’)}catch(e){}”

        > [email protected] postinstall C:\Users\elcot\Desktop\firstreact\myapp\node_modules\core-js-pure
        > node -e “try{require(‘./postinstall’)}catch(e){}”

        + [email protected].1
        + [email protected].1
        + [email protected]
        + [email protected]
        added 1616 packages from 750 contributors and audited 1620 packages in 423.046s

        59 packages are looking for funding
        run `npm fund` for details

        found 1 low severity vulnerability
        run `npm audit fix` to fix them, or `npm audit` for details

  10. only 3 things are created in the awesome:-
    1) node_modules
    2){}package-lock.json
    3){}{}package.json

    I did not get the Public and Src in it.
    So when i run npm start it shows me error:-

    PS C:UsersjobanDesktophello> cd .awesome
    PS C:UsersjobanDesktophelloawesome> npm start
    npm ERR! missing script: start

    npm ERR! A complete log of this run can be found in:
    npm ERR! C:UsersjobanAppDataRoamingnpm-cache_logs2020-04-22T02_13_33_923Z-debug.log

    1. Hello CM,
      i still have this issue below, would you help me to know how you solve it?

      thank you for your help

      issue :
      npm ERR! missing script: start

      npm ERR! A complete log of this run can be found in:
      npm ERR! C:\Users\user\AppData\Roaming\npm-cache\_logs\2020-05-17T18_45_42_047Z-debug.log

        1. Please run Command Line as an administrator and run “npm cache clear –force” then run “create-react-app `the-name-of-your-app`” it should work.

          Remember to remove the back tick and quotation marks and replace `the-name-of-your-app` with the actual name of the app you want to create.

  11. Hello, I always get its errors when I install an application on my Windows 10 machine.
    thank you in advance for a solution because I cannot find a solution

    PS C:\Users\User> create-react-app marvel

    Creating a new React app in C:\Users\User\marvel.

    Installing packages. This might take a couple of minutes.
    Installing react, react-dom, and react-scripts with cra-template…

    > [email protected] postinstall C:\Users\User\marvel\node_modules\babel-runtime\node_modules\core-js
    > node -e “try{require(‘./postinstall’)}catch(e){}”

    > [email protected] postinstall C:\Users\User\marvel\node_modules\core-js
    > node -e “try{require(‘./postinstall’)}catch(e){}”

    > [email protected] postinstall C:\Users\User\marvel\node_modules\core-js-pure
    > node -e “try{require(‘./postinstall’)}catch(e){}”

    + [email protected].1
    + [email protected]
    + [email protected]
    + [email protected].1
    added 1606 packages from 750 contributors and audited 931425 packages in 72.31s

    58 packages are looking for funding
    run `npm fund` for details

    found 1 low severity vulnerability
    run `npm audit fix` to fix them, or `npm audit` for details

  12. Hello, I always get its errors when I install an application on my Windows 10 machine.
    thank you in advance for a solution because I cannot find a solution

    PS C:\Users\User> create-react-app marvel

    Creating a new React app in C:\Users\User\marvel.

    Installing packages. This might take a couple of minutes.
    Installing react, react-dom, and react-scripts with cra-template…

    > [email protected] postinstall C:\Users\User\marvel\node_modules\babel-runtime\node_modules\core-js
    > node -e “try{require(‘./postinstall’)}catch(e){}”

    > [email protected] postinstall C:\Users\User\marvel\node_modules\core-js
    > node -e “try{require(‘./postinstall’)}catch(e){}”

    > [email protected] postinstall C:\Users\User\marvel\node_modules\core-js-pure
    > node -e “try{require(‘./postinstall’)}catch(e){}”

    + [email protected].1
    + [email protected]
    + [email protected]
    + [email protected].1
    added 1606 packages from 750 contributors and audited 931425 packages in 72.31s

    58 packages are looking for funding
    run `npm fund` for details

    found 1 low severity vulnerability
    run `npm audit fix` to fix them, or `npm audit` for details

    Répertoire : C:\Users\User\marvel

    Mode LastWriteTime Length Name
    —- ————- —— —-
    d—– 04/05/2020 17:34 node_modules
    -a—- 04/05/2020 17:34 601426 package-lock.json
    -a—- 04/05/2020 17:34 199 package.json

  13. after still not working in our sysyem……………………
    again npm start command use error will occur

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.