React 入门指南：从零开始搭建你的第一个 React 应用》 《React 新手必看！手把手教你创建第一个 React 项目》 《React 快速上手：零基础也能学会的 React 开发教程》 《

---

🌟【定制化开发服务，让您的项目领先一步】🌟

如有需求，直接私信留下您的联系方式。谢谢。
我的邮箱：2351598671@qq.com

---

---

博客正文

React 入门指南：从零开始搭建你的第一个 React 应用

目录

1. 什么是 React？
2. 环境准备
3. 使用 Create React App 创建项目
4. 项目结构解析
5. 编写第一个 React 组件
6. 运行和调试项目
7. 下一步学习建议

---

1. 什么是 React？

React 是一个由 Facebook 开发的开源 JavaScript 库，用于构建用户界面。它的核心特点是组件化和声明式编程，能够帮助开发者高效构建复杂、动态的前端应用。React 不仅适用于 Web 开发，还可以通过 React Native 开发移动端应用。

---

2. 环境准备

在开始之前，确保你的电脑上已经安装了以下工具：

• Node.js：React 开发需要 Node.js 环境。你可以从 Node.js 官网 下载并安装最新版本。
• npm 或 yarn：Node.js 自带 npm（Node Package Manager），你也可以选择安装 yarn（一个更快的包管理工具）。

检查环境是否安装成功

打开终端（或命令提示符），运行以下命令：

node -v  # 检查 Node.js 版本
npm -v   # 检查 npm 版本
yarn -v  # 检查 yarn 版本（如果安装了 yarn）

如果显示了版本号，说明环境已经安装成功。

---

3. 使用 Create React App 创建项目

React 官方推荐使用 Create React App（CRA）工具来快速搭建 React 项目。CRA 是一个零配置的工具，适合初学者。

步骤 1：创建项目

1. 打开终端，运行以下命令创建一个新的 React 项目：

   npx create-react-app my-react-app
   

   • my-react-app 是项目名称，你可以根据自己的需求修改。
   • npx 是 npm 5.2+ 自带的命令，用于临时安装并运行包。

2. 等待项目创建完成。CRA 会自动安装所需的依赖包。

步骤 2：进入项目目录

项目创建完成后，进入项目目录：

cd my-react-app

步骤 3：启动开发服务器

运行以下命令启动开发服务器：

npm start

或者（如果你使用 yarn）：

yarn start

3. 打开浏览器，访问 http://localhost:3000，你会看到一个默认的 React 欢迎页面。

---

4. 项目结构解析

CRA 创建的项目结构如下：

my-react-app/
├── node_modules/      # 项目依赖包
├── public/            # 静态资源文件
│   ├── index.html     # 主 HTML 文件
│   └── ...            # 其他静态资源
├── src/               # 项目源代码
│   ├── App.js         # 主组件
│   ├── index.js       # 项目入口文件
│   └── ...            # 其他组件和样式文件
├── package.json       # 项目配置文件
└── README.md          # 项目说明文件

---

5. 编写第一个 React 组件

1. 打开 src/App.js 文件，你会看到默认的代码：

   function App() {
     return (
       <div className="App">
         <header className="App-header">
           <p>
             Edit <code>src/App.js</code> and save to reload.
           </p>
         </header>
       </div>
     );
   }
   export default App;
   

2. 修改 App.js，编写一个简单的组件：

   function App() {
     return (
       <div className="App">
         <h1>Hello, React!</h1>
         <p>这是我的第一个 React 组件。</p>
       </div>
     );
   }
   export default App;
   

3. 保存文件后，浏览器会自动刷新，你会看到页面上显示 “Hello, React!”。

---

6. 运行和调试项目

• 开发模式：运行 npm start 或 yarn start，项目会在开发模式下运行，支持热更新。
• 生产模式：运行 npm run build 或 yarn build，项目会打包为生产环境代码。
• 调试工具：安装 React Developer Tools 浏览器扩展，可以更方便地调试 React 应用。

---

7. 下一步学习建议

• React 基础知识：学习 JSX、组件、状态管理（useState）、事件处理等核心概念。
• React Router：学习如何实现路由管理。
• 状态管理：学习 Redux 或 Context API。
• 实战项目：尝试构建一个 To-Do 应用或博客系统。

---

总结

安装 Node.js 和 npm/yarn。

使用 Create React App 创建项目。

启动开发服务器，编写第一个 React 组件。

学习 React 的核心概念，逐步深入。

通过这篇教程，你已经成功创建了第一个 React 项目，并编写了一个简单的 React 组件。React 的学习曲线虽然有些陡峭，但只要你掌握了基础知识，后续的学习会更加轻松。希望这篇教程能帮助你快速入门 React 开发！

---

希望这篇博客教程对你有帮助！如果有其他问题，欢迎随时提问！

========================

报错

下面是安装过程中报错问题和对应的解决办法：

报错1、依赖冲突

解决办法：

从报错信息来看，问题主要出在 依赖冲突 上。具体来说，create-react-app 在安装依赖时，发现 react@19.0.0 与 @testing-library/react@13.4.0 不兼容，因为 @testing-library/react 需要 react@^18.0.0，而你安装的 React 版本是 19.0.0。

---

问题原因

1. React 版本问题
   你安装的 React 版本是 19.0.0，而 @testing-library/react 依赖的是 react@^18.0.0，导致依赖冲突。

2. 依赖树解析失败
   npm 7+ 版本默认使用严格的依赖解析机制，如果发现依赖冲突，会直接报错并停止安装。

---

解决方法

方法 1：使用 --legacy-peer-deps 参数

--legacy-peer-deps 参数可以让 npm 忽略 peer dependency 冲突，继续安装依赖。
在终端中运行以下命令：

npx create-react-app my-react-app --legacy-peer-deps

方法 2：手动修复依赖

1. 进入项目目录：

   cd my-react-app
   

2. 手动安装兼容的 React 版本（例如 React 18）：

   npm install react@18.2.0 react-dom@18.2.0
   

3. 重新安装测试库：

   npm install @testing-library/react@13.4.0 @testing-library/jest-dom@5.14.1 @testing-library/user-event@13.2.1
   

方法 3：使用 --force 参数

--force 参数会强制安装依赖，即使存在冲突。
在终端中运行以下命令：

npx create-react-app my-react-app --force

方法 4：降级 Create React App 版本

如果你希望避免 React 19 的兼容性问题，可以尝试使用旧版本的 create-react-app：

1. 全局安装旧版本的 create-react-app：

   npm install -g create-react-app@5.0.1
   

2. 使用旧版本创建项目：

   create-react-app my-react-app
   

---

注意事项

1. React 19 的兼容性
   React 19 是一个较新的版本，可能部分第三方库（如 @testing-library/react）尚未适配。如果你不需要 React 19 的新特性，建议使用 React 18。

2. 检查依赖版本
   在安装依赖时，确保所有依赖的版本是兼容的。可以通过 package.json 文件查看和管理依赖版本。

3. 清理缓存
   如果问题依然存在，可以尝试清理 npm 缓存：

   npm cache clean --force
   

---

总结

• 问题是由于 React 19 与 @testing-library/react 的依赖冲突导致的。
• 可以通过 --legacy-peer-deps、--force 参数或手动修复依赖来解决。
• 如果不需要 React 19，可以降级到 React 18 以避免兼容性问题。

报错2：

运行后这样提示的：Compiled with problems:
×
ERROR in ./src/reportWebVitals.js 5:4-24
Module not found: Error: Can’t resolve ‘web-vitals’ in ‘D:\za\react\202501\01211146\my-react-app\src’

解决办法：
从错误信息来看，问题是因为 web-vitals 模块没有正确安装，导致在 reportWebVitals.js 文件中无法找到该模块。web-vitals 是一个用于测量网页性能的工具，Create React App 默认会使用它来报告性能指标。

---

解决方法

方法 1：手动安装 web-vitals

1. 打开终端，进入项目目录：

   cd my-react-app
   

2. 运行以下命令安装 web-vitals：

   npm install web-vitals
   

   或者（如果你使用 yarn）：

   yarn add web-vitals
   

3. 安装完成后，重新启动开发服务器：

   npm start
   

   或者：

   yarn start
   

---

方法 2：检查 package.json

如果手动安装 web-vitals 后问题依然存在，可以检查 package.json 文件，确保 web-vitals 已经正确添加到依赖中：

1. 打开 package.json 文件。
2. 在 dependencies 部分，确保有以下内容：

   "dependencies": {
     "web-vitals": "^2.1.0",
     // 其他依赖
   }
   

3. 如果没有，可以手动添加并运行 npm install 或 yarn install。

---

方法 3：删除 node_modules 并重新安装依赖

如果问题依然存在，可能是依赖安装不完整或缓存问题。可以尝试以下步骤：

1. 删除 node_modules 文件夹：

   rm -rf node_modules
   

   （Windows 用户可以直接在文件管理器中删除 node_modules 文件夹。）

2. 删除 package-lock.json 或 yarn.lock 文件：

   rm package-lock.json
   

   或者：

   rm yarn.lock
   

3. 重新安装依赖：

   npm install
   

   或者：

   yarn install
   

4. 重新启动开发服务器：

   npm start
   

   或者：

   yarn start
   

---

方法 4：临时注释掉 reportWebVitals.js

如果你暂时不需要性能监测功能，可以临时注释掉 reportWebVitals.js 的代码：

1. 打开 src/index.js 文件。
2. 找到以下代码：

   import reportWebVitals from './reportWebVitals';
   // ...
   reportWebVitals();
   

3. 将其注释掉：

   // import reportWebVitals from './reportWebVitals';
   // ...
   // reportWebVitals();
   

4. 保存文件后，重新启动开发服务器。

---

总结

• 问题是由于 web-vitals 模块未正确安装导致的。
• 可以通过手动安装 web-vitals、检查 package.json 或重新安装依赖来解决。
• 如果暂时不需要性能监测功能，可以注释掉 reportWebVitals.js 的相关代码。

按照以上方法操作后，问题应该能够解决。如果还有其他问题，欢迎随时提问！

推荐文章：

React 开发必备：5 个超好用的 UI 组件库推荐》 《React 新手必看！5 个 UI 组件库助你快速搭建项目》 《React 开发效率翻倍：5 个强大的 UI 组件库推荐》