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 + [email protected] 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... > [email protected] postinstall C:\node\react-app\node_modules\babel-runtime\node_modules\core-js > node -e "try{require('./postinstall')}catch(e){}" > [email protected] postinstall C:\node\react-app\node_modules\core-js > node -e "try{require('./postinstall')}catch(e){}" > [email protected] postinstall C:\node\react-app\node_modules\core-js-pure > node -e "try{require('./postinstall')}catch(e){}" + [email protected] + [email protected] + [email protected] + [email protected] 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 [email protected] 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 [email protected] failed (this is probably harmless): EPERM: operation not permitted, lstat 'C:\node\react-app\node_modules\watchpack\node_modules\fsevents' npm WARN [email protected] 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: [email protected] (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\webpack-dev-server\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\jest-haste-map\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) + @testing-library/[email protected] + @testing-library/[email protected] + @testing-library/[email protected] 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 [email protected] 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 [email protected] 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: [email protected] (node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\webpack-dev-server\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\jest-haste-map\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: 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.