Wednesday 3 March 2021

Part 3 : Environment Setup and Creating First React App

In this article I will show you environment setup required to work with React JS application. Download Node js from here and install.
Once Node installed verify correct version gets install using command prompt.
With the help of Node package manager, developer can install packages required to work with React applications. Yarn is another alternative to do same thing. Environment is ready.
Create Folder with name Practice in any drive, for articles I'm using D drive. Open command prompt with run as Administrator option.
From Command Prompt I move to D drive and created Practice Folder and command for creating new react app is 'create-react-app hellosample', hellosample is project name and it should start with lower case.
It give some error like 'cb.apply is not a function' to fix this issue with npn@5.3, delete npm-catche and npm folders from location 'C:\Users\Asif\AppData\Roaming'. User name different in your case.
Open command prompt again and run command 'npm install create-react-app -g'. With the help of this command you can create react application from any path in cmd. Run 'npm install -g npm@latest' command to install latest npm and once latest version of npm installed run command 'create-react-app hellosample' to create react application.
Project gets created under Practice directory.
Navigate to Practice folder and start development server.
npm start command start development server and launch your react application on browser window. I executed npm start commamnd and encountered with error 'web-vitals' module not found and unbale to compile project
To fix this error install 'web-vitals' package using npm install web-vitals and then npm start command. Refer below screen for details.
Application is up and running on port 3000 shown below.
I'm using v14.16.0 node version and 7.6.0 npm version and above fix related with version I'm using and it might be change for latest version in future.

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home