手把手教你做一个React Hooks （Todos）应用（一）

项目概述

本文将指导你构建一个基于React Hooks的待办事项(Todos)应用。我们将使用现代化的开发工具Vite作为构建工具，采用Stylus作为CSS预处理器，并注重移动端适配和用户体验。

项目结构与技术选型

技术栈

React 18：使用函数式组件和Hooks
Vite：下一代前端构建工具，提供极速的开发体验
Stylus：富有表现力的CSS预处理器
现代CSS：使用rem单位和系统字体栈优化移动端体验

实现步骤

1. 初始化项目

使用Vite创建React项目：

sql 复制代码

npm create vite@latest todos-app -- --template react
cd todos-app
npm install

2. 安装Stylus

css 复制代码

npm install stylus --save-dev

3. 基础样式设置 (index.styl)

arduino 复制代码

/* 基础样式重置 */
*, *::before, *::after
  box-sizing: border-box
  margin: 0
  padding: 0

/* 使用系统字体栈提高跨设备体验 */
body
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
  line-height: 1.6
  color: #333
  background-color: #f5f5f5

/* 设置根元素字体大小用于rem计算 */
html
  font-size: 16px

/* 移动端适配 */
@media (max-width: 768px)
  html
    font-size: 14px

/* 主容器样式 */
.app
  max-width: 600px
  margin: 2rem auto
  padding: 1.5rem
  background: white
  border-radius: 0.5rem
  box-shadow: 0 2px 10px

项目概述

项目结构与技术选型

技术栈

React 18：使用函数式组件和Hooks
Vite：下一代前端构建工具，提供极速的开发体验
Stylus：富有表现力的CSS预处理器
现代CSS：使用rem单位和系统字体栈优化移动端体验

实现步骤

1. 初始化项目

使用Vite创建React项目：

sql 复制代码

npm create vite@latest todos-app -- --template react
cd todos-app
npm install

2. 安装Stylus

css 复制代码

npm install stylus --save-dev

3. 基础样式设置 (index.styl)

arduino 复制代码

/* 基础样式重置 */
*, *::before, *::after
  box-sizing: border-box
  margin: 0
  padding: 0

/* 使用系统字体栈提高跨设备体验 */
body
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif
  line-height: 1.6
  color: #333
  background-color: #f5f5f5

/* 设置根元素字体大小用于rem计算 */
html
  font-size: 16px

/* 移动端适配 */
@media (max-width: 768px)
  html
    font-size: 14px

/* 主容器样式 */
.app
  max-width: 600px
  margin: 2rem auto
  padding: 1.5rem
  background: white
  border-radius: 0.5rem
  box-shadow: 0 2px 10px

核心设计理念

1. 单向数据流架构

父组件（Todos）作为唯一数据源，通过props向下传递数据，子组件通过回调函数向上通信

2. 组件职责分离

TodoForm: 专注任务创建
TodoList: 管理列表渲染
TodoItem: 处理单个任务交互

3. 移动端优先的样式方案

采用rem相对单位，确保在不同设备上的适配性

样式设计亮点

字体栈优化

css 复制代码

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto;

使用系统原生字体，提升加载速度和视觉一致性

响应式单位系统

放弃px绝对单位，采用rem和vw/vh等相对单位，实现真正的响应式设计

下一步开发计划

在接下来的续篇中，我们将深入实现：

TodoForm组件的具体实现和表单处理逻辑
TodoList列表渲染和性能优化策略
完整的交互功能（添加、删除、状态切换）
Stylus样式的具体编写技巧

这样的架构设计为后续功能扩展奠定了良好基础，无论是添加过滤功能、本地存储还是动画效果，都能轻松集成。

下一篇我们将实现TodoForm组件，探讨表单处理的最佳实践和用户体验优化技巧