Image is loading...

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 (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. Angular uses Node.js and NPM for the management of dependencies and runtime.

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.

https://nodejs.org

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.

create-react-app awesome-project

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

Note:-

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.

http://localhost:3000

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

Have a nice code!

You Might Also Like
15 Comments
  • Ankit Giri
    says:

    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 ]

  • harshal
    says:

    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.

  • ilahi
    says:

    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

  • Anujaa
    says:

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

Leave a Reply

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

%d bloggers like this: