React 项目初始化

欢迎来到第 10 章的学习。在前面的章节中，我们学习了后端集成。现在我们要学习前端集成，使用 React 和 OpenTelemetry 构建可观察的前端应用。

本节将学习：创建 React 项目、项目结构说明、以及依赖管理。

创建 React 项目

创建 React 项目有哪些方式呢？

第一种方式：Create React App。 使用

npx create-react-app shoehub-frontend

第二种方式：Vite。 使用

npm create vite@latest shoehub-frontend -- --template react

创建步骤：

第一步：运行创建命令。 在终端中运行创建命令，等待项目创建完成。

第二步：进入项目目录。 使用

cd shoehub-frontend

第三步：安装依赖。 使用

npm install

第四步：启动开发服务器。 使用

npm start

npm run dev

项目结构

React 项目的结构是什么样的呢？

src 目录： 源代码目录，包含所有的 React 组件、样式、工具函数等。

public 目录： 静态资源目录，包含 HTML 模板、图片、图标等。

package.json： 项目配置文件，包含项目信息、依赖列表、脚本命令等。

node_modules： 依赖包目录，包含所有安装的 npm 包。

关键文件：

• src/index.js： 应用入口文件，渲染根组件。
• src/App.js： 根组件，应用的顶层组件。
• src/App.css： 应用样式文件。
• public/index.html： HTML 模板文件。

依赖管理

依赖管理的作用是什么？ 管理项目依赖，安装、更新、移除依赖包，维护项目的依赖关系。

如何安装依赖？ 使用

npm install <package-name>

npm install <package-name> --save-dev

如何查看依赖？ 在 package.json 中查看 dependencies 和 devDependencies，使用

npm list

如何更新依赖？ 使用

npm update

npm update <package-name>

npm outdated

如何移除依赖？ 使用

npm uninstall <package-name>

本节小结

在本节中，我们学习了 React 项目初始化：

第一个是创建 React 项目。 使用 Create React App 或 Vite 创建项目，两种方式各有优势。

第二个是项目结构。 src 目录、public 目录、package.json、node_modules，了解项目结构很重要。

第三个是依赖管理。 使用 npm 安装、更新、移除依赖，维护项目的依赖关系。

React 项目初始化流程： 创建项目 → 了解项目结构 → 管理依赖 → 准备集成 OpenTelemetry。

这就是 React 项目初始化。创建好项目后，我们就可以开始集成 OpenTelemetry 了。

在下一节，我们将学习 OpenTelemetry Web SDK 安装。学习如何安装 OpenTelemetry 的前端 SDK。