5 创建第一个React应用之创建React应用

在上一篇中，我们完成了Node.js和npm的安装。现在，我们将使用这些工具来创建我们的第一个React应用。React是一个用于构建用户界面的JavaScript库，它能让我们以组件的方式组织我们的前端代码。在这个章节中，我们将一步一步地创建一个新的React项目。

1. 使用Create React App创建项目

为了快速搭建React应用，我们可以使用Create React App这个命令行工具。它为我们提供了一个预配置的开发环境，省去了很多繁琐的配置步骤。接下来，请按照以下步骤进行。

安装Create React App

我们首先需要全局安装Create React App。打开终端（Terminal），输入以下命令：

npm install -g create-react-app

-g标志意味着全局安装，这样我们就可以在任何地方使用create-react-app命令。

创建新项目

安装完成后，我们可以使用Create React App来生成一个新的React应用。假设我们要创建一个名为my-first-app的项目，可以使用以下命令：

npx create-react-app my-first-app

此处的npx是npm包执行器，用于运行create-react-app包。命令执行后，终端将显示创建项目的相关信息，包括依赖包的安装进度。

进入项目目录

创建过程完成后，我们需要进入新创建的项目目录：

cd my-first-app

启动开发服务器

在该目录下，我们可以启动React应用的开发服务器。执行以下命令：

npm start

此命令将启动一个开发服务器，并在浏览器中打开http://localhost:3000，你将看到React应用的初始页面，通常是一个简单的React标识页。

2. 了解项目中的基本文件

在我们创建项目后，可以使用ls命令查看项目的基本结构：

ls

你应该会看到如下的文件结构：

my-first-app
├── node_modules
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    └── logo.svg

重要文件和目录说明

• node_modules：此目录包含项目依赖包，通常不需要手动更改。

• public：包含应用的静态文件。从这里加载的文件会被服务器直接提供。例如，index.html是应用的主HTML文件。

• src：此目录是我们主要的代码库。所有React组件和样式都存放在这里。主要的文件包括：

  • App.js：这是应用的主要组件，我们将在这里编写我们的应用逻辑。
  • index.js：这是应用的入口文件，负责加载和渲染App组件。

3. 完成React应用的创建

到目前为止，我们已经完成了React应用的创建。在开发过程中，我们可以随时修改src目录下的文件，保存后，开发服务器会自动刷新浏览器，使我们看到最新的改动。这种开发体验极大地提高了开发效率。

接下来，在下一章节中，我们将详细介绍项目的结构，讨论文件的内容以及如何使用这些文件构建我们的React应用。

通过上述步骤，我们成功创建了一个React应用，并开始探索它的基础结构。你准备好开始你自己的React旅程了吗？让我们在下一章节继续深入了解这个项目的内容和组织。