React 创建第一个项目

React 创建第一个项目

本章节我们将详细介绍如何使用 React 创建第一个项目。

在开始之前，你需要确保已经安装了以下工具：

Node.js 和 npm（Node 包管理器）：React 项目依赖于 Node.js 和 npm 来管理依赖和启动开发服务器。

你可以通过以下命令检查版本，确保已经安装成功：

<span style="background-color:#ecf4ee"><span style="color:#333333">node -v
npm -v</span></span>

代码编辑器推荐使用 VS Code，VS Code 使用可以详细参考： VS Code 教程。

使用 Create React App 创建项目

Create React App 是一个官方支持的脚手架工具，可以帮助你快速创建一个新的 React 项目。

在终端或命令提示符中，运行以下命令来全局安装 Create React App：

<span style="background-color:#ecf4ee"><span style="color:#333333">npm install -g create-react-app</span></span>

然后，使用 Create React App 创建一个新的项目。假设你的项目名为 my-app：

<span style="background-color:#ecf4ee"><span style="color:#333333">npx create-react-app my-app</span></span>

npx 是 npm 5.2+ 版本自带的一个工具，用于运行本地或远程的 npm 包。

执行成功后，会输出以下内容：

<span style="background-color:#ecf4ee"><span style="color:#333333">The directory my-app contains files that could conflict:

  node_modules/
  package-lock.json
  package.json
  public/
  src/

Either try using a new directory name, or remove the files listed above.</span></span>

项目的目录结构如下：

<span style="background-color:#ecf4ee"><span style="color:#333333">my-app/
├── node_modules/           # 项目依赖库
├── public/                 # 存放静态文件
│   ├── index.html          # 应用的 HTML 模板文件
│   ├── favicon.ico         # 浏览器图标
├── src/                    # 存放源代码
│   ├── App.css             # 样式文件
│   ├── App.js              # 主要的 React 组件
│   ├── index.css           # 全局样式
│   ├── index.js            # React 入口文件
├── package.json            # 配置信息和依赖列表
└── .gitignore              # Git 忽略文件</span></span>

目录结构说明参见：React 安装（NPM）。

App.js 是主组件文件，定义了一个基础的 React 组件，后期主要改这个文件。

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

<