Create React App

介绍

Create React App（简称 CRA）是一个由 Facebook 官方维护的工具，用于快速搭建 React 项目。它提供了一个零配置的开发环境，让你可以专注于编写代码，而无需花费时间在复杂的构建工具配置上。对于初学者来说，CRA 是学习 React 的最佳起点。

CRA 内置了 Webpack、Babel、ESLint 等工具，并提供了开箱即用的开发服务器、热更新、代码分割等功能。通过 CRA，你可以快速创建一个现代化的 React 应用，而无需手动配置这些工具。

安装 Create React App

要使用 Create React App，首先需要确保你的系统上安装了 Node.js（建议使用 LTS 版本）。然后，你可以通过以下命令全局安装 CRA：

bash
npm install -g create-react-app

安装完成后，你可以使用以下命令创建一个新的 React 项目：

bash
npx create-react-app my-app

其中，my-app 是你的项目名称。CRA 会自动创建一个名为 my-app 的文件夹，并在其中生成项目的基本结构。

项目结构

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

my-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.css
│   ├── App.js
│   ├── index.css
│   ├── index.js
│   └── ...
├── package.json
├── README.md
└── ...

public/ 文件夹包含静态资源，如 index.html，它是应用的入口文件。
src/ 文件夹包含应用的源代码，index.js 是应用的入口 JavaScript 文件。
package.json 文件包含项目的依赖和脚本。

启动开发服务器

在项目根目录下，运行以下命令启动开发服务器：

bash
npm start

默认情况下，开发服务器会在 http://localhost:3000 上运行。打开浏览器访问该地址，你会看到一个默认的 React 欢迎页面。

提示

开发服务器支持热更新（Hot Module Replacement），这意味着你在修改代码后，页面会自动刷新，无需手动刷新浏览器。

构建生产版本

当你准备好将应用部署到生产环境时，可以运行以下命令构建生产版本：

bash
npm run build

该命令会在 build/ 文件夹中生成优化后的静态文件，这些文件可以直接部署到 Web 服务器上。

实际案例

假设你想创建一个简单的待办事项应用。首先，你可以在 src/App.js 中编写以下代码：

jsx
import React, { useState } from 'react';

function App() {
  const [tasks, setTasks] = useState([]);
  const [input, setInput] = useState('');

  const addTask = () => {
    if (input.trim() !== '') {
      setTasks([...tasks, input]);
      setInput('');
    }
  };

  return (
    <div>
      <h1>待办事项</h1>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button onClick={addTask}>添加任务</button>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

在这个例子中，我们使用了 React 的 useState 钩子来管理任务列表和输入框的状态。用户可以在输入框中输入任务，点击“添加任务”按钮后，任务会被添加到列表中。

总结

Create React App 是一个强大的工具，特别适合初学者快速上手 React 开发。它简化了项目的初始配置，让你可以专注于编写代码。通过 CRA，你可以轻松创建一个现代化的 React 应用，并利用其内置的开发服务器、热更新等功能提高开发效率。

附加资源

练习

使用 Create React App 创建一个新的 React 项目。
修改 src/App.js，创建一个简单的计数器应用。
尝试将应用部署到 GitHub Pages 或其他静态网站托管服务上。

介绍​

安装 Create React App​

项目结构​

启动开发服务器​

构建生产版本​

实际案例​

总结​

附加资源​

练习​

介绍