2.2 how to install react on your compute ?

Let's install React from scratch on a Windows machine. First we need a code editor: VS Code is a great free choice. Once it's installed, go to nodejs.org and download the LTS version of Node.js, which is the recommended one. Run the installer with the default options. We need Node because npm and npx come bundled with it and they are the tools that will create the React project for us.

Creating the project

Open the Windows command prompt from the Start menu. We create a parent folder, then move into it, then use create-react-app through npx to scaffold the application. The whole sequence is short but the last command can take a few minutes because npm downloads many dependencies. Be patient and wait for the green "Happy hacking!" message at the end. 

mkdir react-project
cd react-project
npx create-react-app my-app
cd my-app
npm start

Once npm start finishes booting, your default browser opens on http://localhost:3000 and shows the React welcome page: that's the application live and running. To stop the dev server, focus the terminal and press Ctrl + C. Finally we drag the freshly created my-app folder from your user directory onto the Desktop, open VS Code and drop the folder there: all the files appear in the explorer panel and you are ready to start coding. See you in the next video for our first example.

Summary

This lesson guides beginners through the complete React installation process on a Windows computer using Node.js and create-react-app. It covers downloading Node.js LTS, using the command prompt to scaffold a new React project, running the development server on localhost:3000, and opening the project in VS Code for editing.

Key points

  • Install Node.js LTS version from nodejs.org as a prerequisite for React development
  • Use the command prompt to create a new folder and initialize a React project with create-react-app
  • Run `npm start` to launch the local development server on localhost:3000 and preview your app in a web browser
  • Open your project folder in VS Code to view the project structure and start editing React files
  • Use Ctrl+C in the command prompt to stop the development server when needed

FAQ

Do I need to install Node.js before React?

Yes, Node.js is required because create-react-app (the tool used in this lesson) depends on npm, which comes bundled with Node.js. Download the LTS version from nodejs.org.

What code editor is recommended for React development?

The lesson recommends VS Code as the preferred code editor due to its excellent features and extensions for React development.

How do I verify that React is installed and running correctly?

After running `npm start`, a browser window automatically opens to localhost:3000 displaying the default React welcome page, confirming your installation is successful.