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.
Install and Setup a React App on Windows 10
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.
Prerequisites
To continue with this article, the reader must know the basics of working with the Command Prompt/ Powershell in a Windows 10 system.
What we will learn?
Here in this article, we will learn the following things:-
- Install Node.js on a Windows 10 system
- Creating a new React project using create-react-app tool
- Running the React app we created
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 project. React uses Node.js and NPM for the management of dependencies and runtime.
In this tutorial, we are going to install the create-react-app tool using the Node Package Manager(NPM). Create-react-app is a tool developed by the React.js team that makes React’s setting up 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. Here we can choose the LTS or the latest version. Because both of the version supports React.
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.
Create a New React Project
After the successful installation of Nodejs and NPM, we can create a new React project by temporarily installing the create-react-app tool. Execute the below command on the Command prompt window.
npx create-react-app awesome-project
Here NPX will temporarily install create-react-app and create a new react project named awesome-project. Note that the awesome-project is the name I have chosen for my react project.
Running the Application
So the app we created can run locally on our system with the npm start command.
cd awesome-project npm start
This will open 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.
Note: 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 to Install React on a Windows 10 system. These steps are verified by our team and 100% working.
Good
Good
It’s made my day. Great Article
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!!
Good job
Good job. This article gives good info to quick start the react js.
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
Please check your 2019-06-17T11_01_26_298Z-debug.log file for the error information. If are unable to solve it, post it here.
Thats my result as well
Pls any help
Really explanatory and clear!
Awesome
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.
thank you very much for helping me to fix my error with your solution 🙂
Very helpful Post……solved alot of my problems…thanks for taking time to explain to others
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 npm@6.11.3
3 info using node@v12.11.0
4 verbose run-script [ ‘prestart’, ‘start’, ‘poststart’ ]
5 info lifecycle my-app@0.1.0~prestart: my-app@0.1.0
6 info lifecycle my-app@0.1.0~start: my-app@0.1.0
7 verbose lifecycle my-app@0.1.0~start: unsafe-perm in lifecycle true
8 verbose lifecycle my-app@0.1.0~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 my-app@0.1.0~start: CWD: C:\Users\Ankit\Documents\JavaScript\React\my-app
10 silly lifecycle my-app@0.1.0~start: Args: [ ‘/d /s /c’, ‘react-scripts start’ ]
11 silly lifecycle my-app@0.1.0~start: Returned: code: 1 signal: null
12 info lifecycle my-app@0.1.0~start: Failed to exec start script
13 verbose stack Error: my-app@0.1.0 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 my-app@0.1.0
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 my-app@0.1.0 start: `react-scripts start`
22 error Exit status 1
23 error Failed at the my-app@0.1.0 start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
I should’ve come to this website early. Thank you!
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
You don’t need XAMP to setup React.js
You can install it using Node.js itself.
Please follow the guide in step by step.
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
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?
Open Command Prompt with administrative privileges and run
npm cache clean --force. Then start the installation from step 1.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
Here is a solution from Stackoverflow.
Try:
npm config set proxy nullnpm config set https-proxy null
npm config set registry http://registry.npmjs.org/
The first two lines will remove proxy’s if there any.
Third line will make npm download from the official package registry.
when i setup create-react-app . i got three errors.
npm ERR! Response timeout while trying to fetch http://registry.npmjs.org/@typescript-eslint%2feslint-plugin (over 30000ms)
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\sammo\AppData\Roaming\npm-cache\_logs\2020-04-18T04_14_48_806Z-debug.log
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.
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…
> core-js@2.6.11 postinstall C:\Users\joban\Desktop\hello\awesome\node_modules\babel-runtime\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”
> core-js@3.6.5 postinstall C:\Users\joban\Desktop\hello\awesome\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”
> core-js-pure@3.6.5 postinstall C:\Users\joban\Desktop\hello\awesome\node_modules\core-js-pure
> node -e “try{require(‘./postinstall’)}catch(e){}”
+ react@16.13.1
+ react-scripts@3.4.1
+ cra-template@1.0.3
+ react-dom@16.13.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|*************
Actually you have created the react application. Now you can run the app using the below commands.
cd awesomenpm start
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
+ create-react-app@3.4.1
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…
> core-js@2.6.11 postinstall C:\Users\elcot\Desktop\firstreact\myapp\node_modules\babel-runtime\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”
> core-js@3.6.5 postinstall C:\Users\elcot\Desktop\firstreact\myapp\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”
> core-js-pure@3.6.5 postinstall C:\Users\elcot\Desktop\firstreact\myapp\node_modules\core-js-pure
> node -e “try{require(‘./postinstall’)}catch(e){}”
+ react-dom@16.13.1
+ react@16.13.1
+ react-scripts@3.4.1
+ cra-template@1.0.3
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
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
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
Can you please share me a screen shot of the folder structure?
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.
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…
> core-js@2.6.11 postinstall C:\Users\User\marvel\node_modules\babel-runtime\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”
> core-js@3.6.5 postinstall C:\Users\User\marvel\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”
> core-js-pure@3.6.5 postinstall C:\Users\User\marvel\node_modules\core-js-pure
> node -e “try{require(‘./postinstall’)}catch(e){}”
+ react@16.13.1
+ cra-template@1.0.3
+ react-scripts@3.4.1
+ react-dom@16.13.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
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…
> core-js@2.6.11 postinstall C:\Users\User\marvel\node_modules\babel-runtime\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”
> core-js@3.6.5 postinstall C:\Users\User\marvel\node_modules\core-js
> node -e “try{require(‘./postinstall’)}catch(e){}”
> core-js-pure@3.6.5 postinstall C:\Users\User\marvel\node_modules\core-js-pure
> node -e “try{require(‘./postinstall’)}catch(e){}”
+ react@16.13.1
+ cra-template@1.0.3
+ react-scripts@3.4.1
+ react-dom@16.13.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
I think you have successfully created a react app. Now you can enter the project and start the app.
cd marvelnpm start
after still not working in our sysyem……………………
again npm start command use error will occur
hey i am Parth,
When i create react app, this error found..
found 1 low severity vulnerability
run `npm audit fix` to fix them, or `npm audit` for details
pls, help to solve this
Nice and easy 🙂
I’m getting this error can you please help me out. Thanks
npm install -g create-react-app
npm ERR! code ERR_OSSL_PEM_NO_START_LINE
npm ERR! error:0909006C:PEM routines:get_name:no start line
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\mishshrc\AppData\Roaming\npm-cache\_logs\2021-07-02T13_23_07_589Z-debug.log
This is dated. Now Nov 2021. The global option no longer works. You follow these instructions and it does NOT create a Public and src folder in awesome-project so when you do npm start it has no script file. Tried npx option also. Same result. The public and src folders are not being created so project cant start. Tried without -g option, same result.