5 创建React应用

在上篇文章中，我们详细介绍了如何在本地机器上成功安装 Node.js 和 npm。确保你的环境已经搭建妥当后，我们可以进入下一步：创建一个基本的 React 应用。在这篇文章里，我们将会逐步介绍如何使用 Create React App 工具快速搭建一个新的 React 项目。

使用Create React App创建新项目

Create React App 是一个支持快速启动和搭建 React 应用的命令行工具，它为我们提供了一个开箱即用的项目框架，包含了常用的配置文件和依赖。

1. 安装Create React App

在创建新应用之前，确保你已安装最新版本的 npm。在终端中输入以下命令检查安装的版本：

npm -v

如果一切正常，我们可以使用 npx（npm 5.2.0 及以上版本）来创建一个新的 React 应用。打开你的终端并运行以下命令：

npx create-react-app my-app

这里的 my-app 是你将要创建的应用名称，你可以自定义这个名称。命令运行后，Create React App 将会自动下载所需的依赖并创建相应的文件结构。

2. 进入项目目录

创建完项目后，你会在当前目录下看到名为 my-app 的文件夹。使用以下命令进入该目录：

cd my-app

3. 启动开发服务器

为了在浏览器中查看应用效果，可以启动开发服务器。执行以下命令：

npm start

这会启动一个本地开发服务器，通常在 http://localhost:3000 上运行。打开浏览器，访问该地址，你将看到一个默认的 React 应用页面。

项目文件结构简介

在我们创建的 my-app 项目中，有一些重要的文件和文件夹，接下来将在下一篇文章中详细介绍。但现在，我们先简单了解一些重要的目录和文件：

• node_modules：存放项目安装的依赖包的地方。
• public：存放静态资源的文件夹，包含 index.html 文件，你可以在这里修改 HTML 结构。
• src：是我们主要开发的地方，React 组件将会放在这个文件夹中。

如果我们打开 src 文件夹，我们会看到一个名为 App.js 的文件，这个文件是应用的主要组件。我们可以在这里进行修改，来观察我们应用的变化。

示例：修改App.js

打开 src/App.js 文件，你会看到一些默认的代码。我们可以简单地修改其中的内容，比如将原来的内容替换为：

function App() {
  return (
    <div className="App">
      <h1>欢迎使用React学习教程</h1>
      <p>这是我们第一个React应用！</p>
    </div>
  );
}

保存修改后，浏览器会自动更新，你将看到新的内容已经出现在页面上。这个过程证明了 React 应用的开发和预览是实时的。

小结

在本篇文章中，我们学习了如何使用 Create React App 快速搭建 React 应用，启动开发服务器，并简单修改了默认的组件。下篇文章将深入探讨我们项目的文件结构以及如何管理和组织我们的组件代码。确保你已经成功创建了应用，并对文件夹的基本结构有所了解，准备好在下篇文章中进一步探索吧！