Before starting, make sure you have Node.js and npm installed. You can check if they are already installed with the following commands:\n\nnode -v npm -v\nIf your system does not yet support Node.js and NPM, you can refer to our [Node.js Tutorial](#).\n\nWe recommend using the CommonJS module system in React, such as browserify or webpack. This tutorial uses webpack.\n\nUsing npm in China can be very slow. You can use the Taobao customized cnpm (gzip compression support) command-line tool instead of the default npm:\n\n$ npm install -g cnpm --registry=https://registry.npmmirror.com $ npm config set registry https://registry.npmmirror.com\nThis way, you can use the cnpm command to install modules:\n\n$ cnpm install \nFor more information, please visit: [http://npm.taobao.org/](http://npm.taobao.org/).\n\n* * *\n\n## Quickly Build a React Development Environment Using create-react-app\n\nReact provides an official tool called Create React App for quickly setting up React projects.\n\ncreate-react-app is from Facebook. With this command, we can quickly build a React development environment without any configuration.\n\nThe project automatically created by create-react-app is based on Webpack + ES6.\n\nExecute the following commands to create a project:\n\n$ cnpm install -g create-react-app $ create-react-app my-app $ cd my-app/ $ npm start\n> You can also use the npx command to create it. npx is a tool included in npm 5.2.0 and higher versions, used to execute local or remote npm packages:\n> \n> npx create-react-app my-app\n\nOpen **http://localhost:3000/** in your browser, and the result will look like the following image:\n\n!(#)\n\nThe project's directory structure is as follows:\n\nmy-first-react-app/├── node_modules/├── public/│ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src/│ ├── App.css │ ├── App.js │ ├── App.test.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ └── setupTests.js ├── .gitignore ├── package.json ├── README.md └── yarn.lock (or package-lock.json)\n### Directory and File Descriptions\n\n`node_modules/`\n\nStores all project dependency packages. This directory is automatically generated by npm or yarn and contains all the third-party libraries and modules required for the project to run.\n\n`public/`\n\nStores static files. Webpack will not process the files in this directory. Files in the `public` directory will be copied directly to the build directory.\n\n* `favicon.ico`: The small icon on the browser tab.\n* `index.html`: The HTML template file. React components will be mounted into the `div` element in this file.\n* `logo192.png` and `logo512.png`: React logo icons of different sizes.\n* `manifest.json`: Web app manifest file, used to define metadata such as the app's name and icons.\n* `robots.txt`: Used to tell search engines which pages can be crawled.\n\n`src/`\n\nStores the application's source code. This is where you will primarily do your development.\n\n* `App.css`: The stylesheet for the `App` component.\n* `App.js`: The main component file, defining a basic React component.\n* `App.test.js`: The test file for the `App` component.\n* `index.css`: The global stylesheet.\n* `index.js`: The entry file for the application, responsible for rendering React components into the DOM.\n* `logo.svg`: The SVG file for the React logo.\n* `reportWebVitals.js`: A file used for performance monitoring, which can help you understand and analyze the application's performance.\n* `setupTests.js`: A file used to set up the testing environment.\n\n`.gitignore`\n\nLists files and directories that Git should ignore, such as `node_modules/` and the build output directory.\n\n`package.json`\n\nThe project's configuration file, containing project information, scripts, dependencies, etc.\n\n`README.md`\n\nThe project's readme file, containing basic project information and usage instructions.\n\n`yarn.lock`**or `package-lock.json`**\n\nLock files that record the exact dependency versions, ensuring that dependencies installed in different environments are consistent.\n\nTry modifying the code in the src/App.js file:\n\n## src/App.js\n\nimport React, {Component}from'react'; import logo from'./logo.svg'; import'./App.css'; class App extends Component{render(){return(); }}export default App;\n\nAfter modification, open http://localhost:3000/ (it usually refreshes automatically), and the output will be as follows:\n\n!(#)\n\nsrc/index.js is an entry file. We can try to directly modify the code in the src/index.js file:\n\n> **Note:** In React 18, ReactDOM.render is deprecated.\n\n## Instance\n\nimport React from 'react';\n\nimport ReactDOM from 'react-dom';\n\nfunction Hello(props){\n\nreturn

Hello {props.name}!

;\n\n}\n\nconst root = ReactDOM.createRoot(document.getElementById("root"));\n\n// Render the Hello component and pass the name property\n\n root.render();\n\nAt this point, when you open **http://localhost:3000/** in your browser, it will output:\n\nHello World!\n\n* * *\n\n## Create Your First Component\n\nYou can edit the `App.js` file to create your first component. Below is a simple example, modifying the `App` component to display "Hello, React!":\n\n## Instance\n\nimport React from 'react';\n\nimport'./App.css';\n\nfunction App(){\n\nreturn(\n\n\n\n);\n\n}\n\nexport default App;\n\nAfter saving the file, the browser will automatically refresh, and you should see "Hello, React!" displayed on the page.\n\nYou can create more component files in the `src` directory, for example, creating a `Hello.js` file:\n\n## Hello.js File Code:\n\nimport React from 'react';\n\nfunction Hello(){\n\nreturn

Hello from a new component!

;\n\n}\n\nexport default Hello;\n\nThen import and use this new component in `App.js`:\n\n## Instance\n\nimport React from 'react';\n\n import './App.css';\n\n import Hello from './Hello';\n\nfunction App() {\n\n return (\n\n\n\n );\n\n }\n\nexport default App;\n\nAfter saving the file, the browser will automatically refresh, and you will see the content of the new component.