/ReactJS_UI

Primary LanguageJavaScript

ReactJS_UI

Installing ReactJS on Windows

  1. Node.js Installation:
    • Download and install Node.js from nodejs.org.
    • Verify installation using the following commands in the command prompt:
     node -v
     npm -v
  1. Create React App Installation:
    • Open the command prompt and run the following command to install Create React App globally:

      npm install -g create-react-app

Creating a New React Project on Windows

  1. Create a New React App:

    • Navigate to the directory where you want to create your project using the command prompt.

    • Run the following command to create a new React app:

      npx create-react-app my-react-app
  2. Navigate to the Project Directory:

    cd my-react-app
  3. Start the Development Server:

    npm start
  4. Open in Browser:

Installing ReactJS on Linux

  1. Node.js Installation:

    • Install Node.js using your distribution's package manager. For example, on Ubuntu, you can use:

      sudo apt update
      sudo apt install nodejs npm
  2. Create React App Installation:

    • Use npm to install Create React App globally:

      sudo npm install -g create-react-app

Creating a New React Project on Linux

  1. Create a New React App:

    • Navigate to the directory where you want to create your project in the terminal.

    • Run the following command to create a new React app:

      npx create-react-app my-react-project
  2. Navigate to the Project Directory:

    cd my-react-project
  3. Start the Development Server:

    npm start
  4. Open in Browser:


My Installation Note

How to use Reactjs

  1. Install node.js https://nodejs.org/en/download/

  2. How to check node js install or not ( open cmd and type node -v )

  3. Install reactjs globally open cmd and type -

    npm i -g create-react-app
    OR
    npm install -g create-react-app
  4. Install reactjs project ( npx create-react-app appName ) Note no any space and capital letter in app name but you can use underscore or hyphen npx create-react-app firstproject

  • The project folder cannot be of Capital Letter
  • - can be used react-js as folder name.
  • Bring Back lost Packages - npm i

Extensions - VSCODE

  • babel Javascript
  • Auto Rename Tag
  • Pretter

Class Links

Class 1

https://transcripts.gotomeeting.com/#/s/705e46523872207afd97576c14b7609bf22535c2d1267b51d43e198488b5f796

Class 2

https://transcripts.gotomeeting.com/#/s/a4a10f3e4a6659044b4aaea68bdf2a473c04f1f2bb3923156bb4ffd49c378d2b

Class 3

https://transcripts.gotomeeting.com/#/s/28f37ccba2f53f67d4614c8233a360dce87ba83be39bde88ca571e3394c4ee30

Class 4

1st Part: https://transcripts.gotomeeting.com/#/s/2b2d9d2dacb4975f9fa377bf6ee2a1b21618ad25eb5aebe666d5fa9df24dda39

2nd Part: https://transcripts.gotomeeting.com/#/s/6477824738c7278e7d27e8e6e1a77be90784a86e46760ed6233cc2bacfcf7bf5

Class 5

https://transcripts.gotomeeting.com/#/s/1aaffcf8228764b7c758c1970dc35985e3affc968869abcb4397502d86321089