React项目实战：用React From Zero构建你的第一个示例应用

2026-01-29 12:33:42作者：郁楠烈Hubert

React From Zero是一个简单的React教程项目，专为初学者设计，几乎不使用ES2015语法，让你能够轻松入门React开发。通过这个项目，你可以快速掌握React的核心概念和基本用法，从零开始构建自己的React应用。

准备工作：获取项目代码

要开始使用React From Zero构建示例应用，首先需要获取项目代码。你可以通过以下命令克隆仓库：

git clone https://gitcode.com/gh_mirrors/re/react-from-zero

克隆完成后，你将在项目目录中看到一系列HTML文件，每个文件对应教程的一个章节，从基础的元素创建到复杂的组件应用，循序渐进地引导你学习React。

核心概念：React组件

在React中，组件是构建用户界面的基本单位。React From Zero通过多个HTML文件详细介绍了组件的创建和使用方法。例如，在04-components.html中，你可以学习到如何创建和使用React组件，了解组件的基本结构和特性。

组件可以是函数式的，也可以是基于类的。在React From Zero中，主要使用createReactClass来创建组件，这是一种简单直观的方式，适合初学者理解。例如，在10-example-app.html中，就定义了Timer和PomodoroApp等组件，展示了如何通过组件构建一个完整的应用。

实战案例：构建Pomodoro计时器应用

React From Zero中的10-example-app.html文件展示了一个完整的Pomodoro计时器应用。这个应用包含了多个组件，如Idle、Timer和PomodoroApp，演示了组件之间的状态管理和交互。

组件结构

Idle组件：显示初始状态，提供开始计时器的按钮。
Timer组件：负责计时功能，接收标题、颜色、时长等属性，并在计时结束时触发回调函数。
PomodoroApp组件：作为应用的根组件，管理整个应用的状态，包括工作状态、休息状态和闲置状态的切换。

核心代码解析

在Timer组件中，使用getInitialState初始化状态，componentDidMount和componentWillUnmount方法管理计时器的启动和停止。通过setState方法更新组件状态，实现倒计时功能。

var Timer = createReactClass({
  getInitialState: function() {
    return { seconds: this.props.minutes * 60 };
  },

  countDown: function() {
    var onFinish = this.props.onFinish;
    this.setState(function(prevState) {
      var secondsLeft = prevState.seconds - 1;

      if (secondsLeft < 1) return onFinish();

      return { seconds: secondsLeft };
    });
  },

  interval: null,
  componentDidMount: function() {
    this.interval = setInterval(this.countDown, 1000);
  },
  componentWillUnmount: function() {
    clearInterval(this.interval);
  },

  render: function() {
    // 渲染逻辑
  }
});