YouTip

In this chapter, we will explain in detail how to use React to create your first project. Before you start, make sure you have the following tools installed: Node.js and npm (Node Package Manager): React projects rely on Node.js and npm to manage dependencies and start the development server. You can check the version with the following command to ensure it is installed successfully: node -v npm -v VS Code is recommended as the code editor. For detailed usage of VS Code, please refer to: (#). ### Create Project Using Vite Vite is the current React official recommended tool, which is faster, lighter, and provides a better development experience than the traditional Create React App. Install using npm: npm create vite@latest my-first-react-app -- --template react Press the prompt option, just press Enter to confirm: !(#) Command explanation: * `create vite@latest`: Use the latest version of Vite to create the project. * `my-first-react-app`: Your project name (lowercase letters + hyphens recommended). * `-- --template react`: Specify the React template. **Interactive process** (will prompt for selection): * Project name: Press Enter to confirm directly or modify. * Select framework: Select **React**. * Select variant: * **JavaScript** (recommended for beginners, use pure JS first). * **TypeScript** (recommended for advanced users, better type safety, can switch later). We will select **JavaScript** here. Wait a few seconds, and the project skeleton will be created! ### Install Dependencies and Start Project Enter the project directory cd my-first-react-app, install dependencies: npm install Start the development server: npm run dev The browser will automatically open http://localhost:5173 (Vite default port). You will see a welcome page with the Vite + React Logo and a counter example. This is your first React application running! !(#) Hot Module Replacement (HMR) experience: Modify any code (will be taught later), save it, and the page updates automatically without refreshing! This is the magic of Vite. ### Create Project Using Create React App Create React App is an officially supported scaffolding tool that helps you quickly create a new React project. In the terminal or command prompt, run the following command to install Create React App globally: npm install -g create-react-app Then, use Create React App to create a new project. Assuming your project name is my-app: npx create-react-app my-app npx is a tool that comes with npm 5.2+ version, used to run local or remote npm packages. After successful execution, it will output the following: The directory my-app contains files that could conflict: node_modules/ package-lock.json package.json public/ src/Either try using a new directory name, or remove the files listed above. The project directory structure is as follows: !(#) my-app/├── node_modules/ # Project dependency libraries├── public/ # Store static files│ ├── index.html # HTML template file for the application│ ├── favicon.ico # Browser icon├── src/ # Store source code│ ├── App.css # Style file│ ├── App.js # Main React component│ ├── index.css # Global styles│ ├── index.js # React entry file├── package.json # Configuration information and dependency list└── .gitignore # Git ignore file For directory structure explanation, see: [React Installation (NPM)](#). App.js is the main component file, which defines a basic React component. You will mainly modify this file later. After creating the project, enter the project directory: cd my-app In the project