Vite is a modern front-end build tool designed to provide a fast development experience by leveraging native ES module support in modern browsers.\\n\\nVite is currently the preferred tool officially recommended by React, offering a faster, lighter, and better development experience compared to the traditional Create React App.\\n\\nBased on native ES Modules, Vite supports second-level Hot Module Replacement (HMR), and startup time usually takes only a few hundred milliseconds.\\n\\nFor more details on Vite, see: (#).\\n\\n!(#)\\n\\n### Why Choose Vite + React?\\n\\n* **Extremely Fast Startup**: The dev server starts in seconds, and hot updates are almost real-time.\\n* **Modern Features**: Out-of-the-box support for JSX, TypeScript, CSS Modules, PostCSS, etc.\\n* **Lightweight and Flexible**: Simple configuration file, easy to customize.\\n* **Production Optimization**: Built-in Rollup build, outputting small size and high performance.\\n* **Official Endorsement**: The React official documentation has listed Vite as the default recommendation.\\n\\n* * *\\n\\n## Create Your First Vite + React Project\\n\\nOpen the terminal (Windows: PowerShell/Command Prompt; macOS/Linux: Terminal).\\n\\nInstall using npm:\\n\\nnpm create vite@latest my-first-react-app -- --template react\\n**Recommended command (using pnpm, fastest and saves disk space)**:\\n\\npnpm create vite@latest my-first-react-app -- --template react\\nOther package manager commands:\\n\\nInstall using yarn:\\n\\nyarn create vite my-first-react-app --template react\\nCommand explanation:\\n\\n* `create vite@latest`: Use the latest version of the Vite creation tool.\\n* `my-first-react-app`: Your project name (lowercase letters + hyphens recommended).\\n* `-- --template react`: Specify the React template.\\n\\n**Interactive process** (will prompt you to select):\\n\\n* Project name: Press Enter to confirm or modify.\\n* Select a framework: Choose **React**.\\n* Select a variant:\\n * **JavaScript** (Recommended for beginners, start with pure JS).\\n * **TypeScript** (Recommended for advanced users, better type safety, can switch later).\\n\\nHere we choose **JavaScript**.\\n\\nWait a few seconds, and the project skeleton will be created!\\n\\n### Install Dependencies and Start the Project\\n\\nEnter the project directory cd my-first-react-app, and install dependencies:\\n\\nnpm install\\nStart the development server:\\n\\nnpm run dev\\nThe browser will automatically open http://localhost:5173 (Vite's default port).\\n\\nYou will see a welcome page with the Vite + React logo and a counter example. This is your first React application running!\\n\\n!(#)\\n\\nHot Module Replacement (HMR) experience: Modify any code (we'll teach you later), and the page updates automatically after saving, no refresh needed! This is the magic of Vite.\\n\\n### Project Structure Details\\n\\nOpen the project folder (recommended to use VS Code: use the `code .` command to open it with one click).\\n\\ncd my-first-react-app code .\\n!(#)\\n\\nThe typical structure is as follows:\\n\\nmy-first-react-app/├── public/ # Static assets (copied directly to build output)│ └── vite.svg # Vite Logo├── src/ # Main source code directory (Important!)│ ├── assets/ # Resources like images│ │ └── react.svg │ ├── App.jsx # Main component (App entry)│ ├── main.jsx # Entry file (Mounts root component)│ ├── index.css # Global styles│ └── vite-env.d.ts # TypeScript declarations (Can be ignored in JS projects)├── .gitignore ├── index.html # HTML entry template├── package.json # Dependencies and scripts├── vite.config.js # Vite configuration file (Currently empty, customizable)└── README.md\\nKey file explanations:\\n\\n* **index.html**: Page entry, `` is the React mount point.\\n* **src/main.jsx**: React startup file, uses React 18's new API to create the root node.\\n* **src/App.jsx**: Your main component, comes with a counter example by default.\\n\\n### Modify Code: Your First React Component\\n\\nOpen `src/App.jsx` and replace all content with the following code (let's start with a simple greeting):\\n\\n## Example\\n\\nimport{ useState } from 'react'\\n\\nimport reactLogo from './assets/react.svg'\\n\\nimport viteLogo from '/vite.svg'\\n\\nimport'./App.css'\\n\\nfunction App(){\\n\\nconst[count, setCount]= useState(0)\\n\\nreturn(\\n\\n\\n\\n)\\n\\n}\\n\\nexport default App\\n\\nAfter saving, the page updates automatically! You have written a complete functional component:\\n\\n* `import { useState } from 'react'`: Import the Hook.\\n* `useState(0)`: Declare the state variable `count`, with an initial value of 0.\\n* `onClick` event: Clicking the button updates the state, triggering a re-render.\\n* JSX syntax: Looks like HTML, but is actually JavaScript.\\n\\n**Small Exercise**:\\n\\n1. Change the title to your name: `

Hello, !

`\\n2. Add a new button: Display a subtraction count. setCount(count - 1)}> Minus One \\n\\n### Understand the Entry File: src/main.jsx\\n\\nOpen `src/main.jsx`:\\n\\n## Example\\n\\nimport React from 'react'\\n\\nimport ReactDOM from 'react-dom/client'\\n\\nimport App from './App.jsx'\\n\\nimport'./index.css'\\n\\nReactDOM.createRoot(document.getElementById('root')).render(\\n\\n)\\n\\nExplanation:\\n\\n* `ReactDOM.createRoot`: React 18 new API, enables concurrent features.\\n* ``: Renders your main component.\\n* ``: Strict checking in development mode, helps find problems.\\n\\n### Add a New Component (Componentization Practice)\\n\\nCreate a new file `components/HelloWorld.jsx` under `src/` (create the folder manually first):\\n\\n!(#)\\n\\n// src/components/HelloWorld.jsxfunction HelloWorld({ name }) { return

Welcome,{name || 'Stranger'}！

}export default HelloWorld\\nImport and use it in `App.jsx`:\\n\\nimport HelloWorld from './components/HelloWorld.jsx'// Add in return：\\nSave and refresh, you will see the new component rendered. This is the charm of **componentization**: reusable and composable!\\n\\n### Styling and Asset Handling\\n\\n* **CSS**: Directly import `./App.css`, supports regular CSS.\\n* **Images**: Use as a variable after importing (Vite automatically optimizes).\\n* **Advanced**: Supports CSS Modules (filename `.module.css`), Tailwind CSS (can be configured later).\\n\\n### Build Production Version\\n\\nWhen development is complete, build the static files for deployment:\\n\\nnpm run build\\nOutput is in the `dist/` folder: pure HTML/CSS/JS, which can be uploaded to Vercel, Netlify, etc.