Create a React Project

 

Pequisites

• node
• vscode

 

 

Create New React Appliation (Using CLI)

• npx create-react-app react-practice
• might get following errors
  • 
  • That means you're running like a newer version of react. That's totally fine.
• once you install everything with react you can see that it gives you some starting information.
  • 

 

 

 

Run React Application

• Go into your react application- cd react-practice
• Run Application- npm start
  • Build the app, compile and transpile the application
  • Start the server
  • Watches the source file
  • Rebuilds the app when the source is updated (hot reload)

 

 

 

Change the default port

• By default react is running on port 3000
• If you wish to change this port while running the app 
  • Let server listen on port 5100
    • Create a .env file: In the root directory of your React project (the same level as package.json), create a new file named .env
      • Add the port variable: Inside the .env file, add the following line:
      • PORT=5100
      • Restart your development server:
      • Start your application using npm start 
    • OR Modifying package.json (for react-scripts)
      • Modify the start script: Change the start script to include the PORT environment variable:
      • 

 

 

 

Dependencies

• All dependencies exists inside folder node_module
• When we create a new application, React automatically does an MPLM install which will install all dependencies to make react work.
• To install additional libraries use npm install

 

 

Important files by default

• index.html - the HTML and the DOM for the React application.
• manifest.json - provides information about the project name, author, icon and a bunch of other information 
• robots.txt - used to prevent search engines and bots to crawl on the React application.
• src/app.css - our global CSS for React application.
• src/app.js - global JavaScript component for a React application.
• scr/app.test.js - global test directory for React Application.
• src/index.css - our CSIS for index HTML file.
• src/index.js - the main root component which hooks onto the indexed HTML file to be able to start rendering react components.
• package.json - used for dependencies, defining project properties, descriptions, author licensing and more.
• package-locl-json - which locks all the dependencies to a specific version and records versioning for installation purposes.

 

 

 

Install Important NPM Packages

• Web Vitals
  • npm install web-vitals