前端是什么，我们要做什么

Corey2026/8/21大约 5 分钟

Web · React TodoList · 第 1/10 篇
下一篇：《从 0 新建 Vite 项目》
成品仓库：web-todolist · 线上成品：www.code-corey.com/web-todolist

这一球要做成什么

打开一个网址，两三秒后页面上出现了按钮、输入框、视频。这个过程里，你的电脑（浏览器）和别人的电脑（服务器）做了一笔交易：

关键认知：画面是在你的电脑上画出来的，服务器只发文件。所谓「前端开发」，就是写这三份文件里「用户看得见摸得着」的部分。

不按「是什么」背，按「没有它会怎样」记：

三者通过 HTML 里的标签挂钩：CSS 管「长什么样」，JS 管「干什么」。后面写的 React 代码，最终也是被工具翻译成这三件套再交给浏览器——这一点第 02、08 篇会亲眼看到。

TodoList 里的数据（待办列表）需要「记住」，正常项目会存到后端数据库。但本系列刻意不接后端：数据存在浏览器自带的 localStorage 里，效果一样（刷新不丢），门槛砍掉一大截。localStorage 是什么、怎么用，第 05 篇完整讲。

十篇之后，你会得到一个部署在公网上、任何人都能打开的 TodoList：

能力	说明
添加	输入文字，回车或点「添加」
勾选	标记完成 / 取消完成
删除	删掉单条
筛选	全部 / 未完成 / 已完成三挡切换
持久化	刷新浏览器、关掉重开，列表还在
上线	代码推 GitHub，页面部署到 GitHub Pages

技术选型三件套，每一件都是冲着某个具体问题去的：

技术	解决的问题	不用它会怎样
Vite	开发时改代码要立刻看到效果；发布时要把源码打包成浏览器认识的静态文件	手写 HTML 引 script，改一次手动刷新一次，没有类型检查和打包
React	页面状态一多，「改了数据再手动更新界面」的代码会缠成一团	用原生 JS 逐个 `document.querySelector` 改 DOM，状态散落各处
TypeScript	JS 里字段名拼错只有运行到那行才炸	`todo.titel` 拼错没有报错，页面悄悄出 bug

React 的核心思路一句话：你只声明「界面长什么样」（数据是什么样，页面就是什么样），React 负责把界面改到一致。这句话现在是直觉，第 03 篇会变成肌肉记忆。

需要装的东西只有一样硬性的：Node.js（选 LTS 版本，安装包自带 npm）。编辑器推荐 VS Code 或 Cursor；第 09、10 篇还需要 GitHub 账号。

装完在终端里验证。以下是我本机的真实输出（Windows 10，2026-08）：

$ node -v
v25.7.0

$ npm -v
11.10.1

两条命令都出版本号，环境就绪。版本号不一致没关系——本系列不依赖任何新特性，Node 20 以上都行；文中所有「版本相关」的结论，都以这两行输出为准。

易混点：node 和 npm 是什么关系？
node 是运行 JavaScript 的环境；npm 是随它一起装的「包管理器」，负责下载别人写好的库（第 02 篇 npm install 就是用它）。类比：node 是发动机，npm是加油站。

每一篇对应成品仓库里的一个 commit，跟丢了自己开 web-todolist 对照——仓库里每个阶段的代码就是当时文章的完整现场。

下一篇真正动手：在空目录里用官方脚手架生成项目，第一次跑起开发服务器，并完成第一个 commit。