1，创建项目目录
首先，创建一个项目目录，并在终端中进入该目录。
- mkdir my-react-app
- cd my-react-app
2，初始化项目
使用以下命令初始化一个新的 npm 项目。按照提示，你可以设置项目名称、版本、描述等信息。
npm init
3，安装 React 和 ReactDOM
使用 npm 安装 React 和 ReactDOM，这两个包是构建 React 应用所必需的。
npm install react react-dom4，安装 Babel
React 使用 JSX 语法，需要通过 Babel 转译成标准的 JavaScript。安装 Babel 相关依赖：
npm install @babel/core @babel/preset-react @babel/preset-env babel-loader --save-dev
5，创建项目文件
在项目目录中，创建一个简单的 React 组件文件和一个 HTML 文件。
在项目根目录创建一个名为 src 的文件夹。
在 src 文件夹中创建一个名为 index.js 的文件，用于编写 React 组件。
在项目根目录创建一个名为 index.html 的文件，用于加载 React 应用。
6，配置 Babel
在项目根目录创建一个名为 .babelrc 的文件，并配置 Babel 的预设：
- {
- "presets": ["@babel/preset-env", "@babel/preset-react"]
- }
7，创建 React 组件
编写一个简单的 React 组件，例如：//在这里插入代码片 src/index.js
- import React from 'react';
- import ReactDOM from 'react-dom';
-
- function App() {
- return <h1>Hello, React!</h1>;
- }
-
- ReactDOM.render(<App />, document.getElementById('root'));
8，创建 HTML 文件
在项目根目录的 index.html 文件中创建一个容器元素，该元素将用于渲染 React 应用。示例：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>React App</title>
- </head>
- <body>
- <div id="root"></div>
- <script src="dist/bundle.js"></script>
- </body>
- </html>