How to Initialize a React Application in Microsoft Windows

Posted on

Introduction

This article will show how to initialize an application using React Framework in Microsoft Windows operating system. Actually, there is a requirement in order to initialize a React Framework template to start build an application. It will need an execution of an npm or node package manager before the initialization of the React Framework application template. This article is the continuation of another article. The focus of that article is adding or installing the ‘create-react-app’ module using ‘npm’.  It is also very important to have the ‘create-react-app’ module in the operating system as a module in the first place. In that case, it is possible to get an application template with the style and structure of a React Framework. Just read the article with the title of ‘How to Install React Framework Module using npm in Microsoft Windows’ in this link to be able to install it.

Installing the ‘create-react-app’ module using ‘npm’ tool

Without having to read the article for installing React Framework application template, in order to keep it short, just execute the following command to install ‘create-react-app’ module using ‘npm’ as follows :

C:\node>npm install -g create-react-app
C:\Users\Personal\AppData\Roaming\npm\create-react-app -> C:\Users\Personal\AppData\Roaming\npm\node_modules\create-react-app\index.js
+ create-react-app@3.4.1
added 99 packages from 47 contributors in 35.281s

Furthermore, after finishing the installation of ‘create-react-app’ module, check whether the module is actually exist. Just execute the following command :

C:\node>npm list -g

Initializing the React Framework Application

After successfully execute the previous part for installing the ‘create-react-app’ module, just continue to the main purpose. It is the main subject of the article which is the initialization of ‘create-react-app’ module. It is a normal thing after checking the existance of the ‘create-react-app’ module. Just do the following execution of the above command pattern for installing a React Framework application template :

create-react-app ./

Executing the command to Create A React Framework Application

As in the above command pattern exist, just use it and execute it as follows :

C:\node\react-app>create-react-app ./

Creating a new React app in C:\node\react-app.

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:\node\react-app\node_modules\babel-runtime\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

> core-js@3.6.5 postinstall C:\node\react-app\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"

> core-js-pure@3.6.5 postinstall C:\node\react-app\node_modules\core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"

+ react@16.13.1
+ react-dom@16.13.1
+ react-scripts@3.4.1
+ cra-template@1.0.3
added 1606 packages from 750 contributors and audited 931196 packages in 614.83s

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

found 0 vulnerabilities

Initialized a git repository.

Installing template dependencies using npm...
npm WARN rollback Rolling back node-pre-gyp@0.14.0 failed (this is probably harmless): EPERM: operation not permitted, lstat 'C:\node\react-app\node_modules\webpack-dev-server\node_modules\fsevents\node_modules'
npm WARN rollback Rolling back readable-stream@2.3.7 failed (this is probably harmless): EPERM: operation not permitted, lstat 'C:\node\react-app\node_modules\watchpack\node_modules\fsevents'
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\watchpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @testing-library/jest-dom@4.2.4
+ @testing-library/react@9.5.0
+ @testing-library/user-event@7.2.1
added 36 packages from 56 contributors and audited 931402 packages in 60.046s

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

found 0 vulnerabilities

Removing template package using npm...

npm WARN rollback Rolling back readable-stream@2.3.7 failed (this is probably harmless): EPERM: operation not permitted, rmdir 'C:\node\react-app\node_modules\jest-haste-map\node_modules\fsevents\node_modules'
npm WARN tsutils@3.17.1 requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.1.2 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\watchpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.12 (node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.12: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

removed 1 package and audited 931401 packages in 18.882s

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

found 0 vulnerabilities

Created git commit.

Success! Created client at C:\node\react-app
Inside that directory, you can run several commands:

npm start
Starts the development server.

npm run build
Bundles the app into static files for production.

npm test
Starts the test runner.

npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

cd C:\node\react-app
npm start

Happy hacking!

C:\node\react-app>

Finally, after seeing the above output of the command execution, the initialization of the application to be able to develop using React Framework is finish.

Leave a Reply