React 是一个用于构建用户界面的 JavaScript 库。创建你的第一个 React 项目非常简单，借助一些工具，我们可以迅速启动并运行一个基本的 React 应用程序。

目录

  1. 使用 Create React App 创建项目
  2. 通过 GitHub 或 NPM 克隆项目
  3. 项目目录结构说明
  4. 运行和测试 React 项目
  5. 参考资料

1. 使用 Create React App 创建项目

Create React App 是一个由 Facebook 提供的工具，用于快速创建 React 项目。它配置好了一切构建工具和开发环境，免去了手动配置 Webpack、Babel 等开发工具的麻烦。

1.1 安装 Node.js 和 NPM

要使用 Create React App，首先确保你已经安装了 Node.js 和 NPM（Node 包管理器）。你可以在终端输入以下命令来检查：

node -v
npm -v

如果没有安装，访问 Node.js 官网 下载并安装 Node.js，它会自动安装 NPM。

1.2 使用 Create React App 创建项目

  1. 打开命令行或终端。
  2. 使用 npx 命令来创建一个新的 React 项目：
npx create-react-app my-first-react-app

这条命令会：

  • 创建一个名为 my-first-react-app 的新目录。
  • 安装 React、React DOM 和其他必需的工具和依赖。

1.3 进入项目目录并启动开发服务器

创建完成后，进入项目目录并启动开发服务器：

cd my-first-react-app
npm start

此时，React 开发服务器会启动，并自动打开浏览器，通常会访问 http://localhost:3000。你会看到一个默认的欢迎页面，表示 React 项目已经成功创建。

2. 通过 GitHub 或 NPM 克隆项目

你还可以通过克隆一个 React 项目模板来启动开发。以下是通过 GitHub 或 NPM 安装的两种方式。

2.1 通过 GitHub 克隆项目模板

  1. 访问 Create React App GitHub 仓库。
  2. 复制项目链接，使用 Git 克隆到本地：
git clone https://github.com/facebook/create-react-app.git
  1. 进入克隆的目录并安装依赖：
cd create-react-app
npm install
npm start

2.2 使用 NPM 安装

同样也可以使用 npm 创建 React 项目：

npm init react-app my-first-react-app
cd my-first-react-app
npm start

3. 项目目录结构说明

创建 React 项目后，你会看到以下的目录结构：

my-first-react-app/
├── node_modules/          # 安装的依赖模块
├── public/                # 公共静态文件
│   ├── index.html         # 根 HTML 文件
├── src/                   # 源代码
│   ├── App.css            # 样式文件
│   ├── App.js             # 主应用组件
│   ├── index.css          # 根样式文件
│   ├── index.js           # 入口文件
├── package.json           # 项目配置文件
└── README.md              # 项目说明文件

3.1 关键文件说明

  • public/index.html：根 HTML 文件，这里只有一个 <div id="root"></div> 元素，它是 React 应用的挂载点。
  • src/index.js：入口文件，用于将 React 组件渲染到 DOM 中。通常会有如下代码： import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );
  • src/App.js：React 应用的主要组件，你会在这里编写你的业务逻辑和组件。

4. 运行和测试 React 项目

4.1 运行项目

当你执行 npm start 时，开发服务器会启动，并自动在浏览器中打开 http://localhost:3000。你应该会看到如下的默认页面：

Edit src/App.js and save to reload.

你可以修改 src/App.js 文件，并保存更改，浏览器会自动刷新并显示更新的内容。

4.2 测试 React 项目

如果你想要在 React 项目中编写和运行单元测试，可以使用 Jest 测试框架，它已与 Create React App 集成。

  1. 你可以运行以下命令来启动测试：
npm test
  1. 这将启动 Jest 并在控制台中显示测试结果。你可以编写测试文件（例如 App.test.js），并使用 Jest API 进行断言和测试。

5. 参考资料

出站链接

站内链接

通过上述步骤，你已经成功创建并启动了你的第一个 React 项目。接下来，你可以开始添加自己的组件、状态管理、路由等功能，逐步构建出自己的 React 应用。