使用 React 构建静态页面：frontend-bootcamp Step 1.5 组件划分与 JSX 实战

示例工程【免费下载链接】frontend-bootcampFrontend Workshop from HTML/CSS/JS to TypeScript/React/Redux项目地址https://gitcode.com/gh_mirrors/fr/frontend-bootcamp点击查看免费下载导读本文围绕 frontend-bootcamp 工作坊第 1.5 步Step 1.5的 Demo 文档展开讲解如何按照 React 官方《Thinking in React》方法论的第一步——拆分组件层级结构——把一份静态 HTML 页面逐步改造成 React 组件树。读完本文你将掌握.tsx文件的组织约定、class到className的转换规则、以及遇到重复复杂元素就抽象成组件的实战判断并能在本地运行该 demo 亲眼验证渲染结果。一、起点从 Thinking in React 的第一步说起在 frontend-bootcamp 的课程体系中Day 1 的前四步分别带你掌握了 HTML、CSS、JavaScript 与 React 基础见主 README而 Step 1.5 的标题是Building a static page in React。这一步的官方 Demo 文档step1-05/demo/README.md开宗明义我们将遵循《Thinking in React》中概述的步骤来构建我们的 todo 应用第一步就是把应用拆分为一个组件层级结构component hierarchy。《Thinking in React》将 React 开发拆解为五步先拆组件层级、再搭静态版本、找最小状态集、确定状态归属、最后接反向数据流。Step 1.5 只完成前两步中的拆分与静态搭建后续课程Step 1.6 状态驱动 UI、Step 1.7 类型与反向数据流会依次走完剩余步骤。按照官方指引本应用被拆为四个简洁的组件TodoHeader应用头部含标题、添加输入框与筛选按钮TodoList待办列表容器TodoListItem单条待办项TodoFooter底部统计与Clear Completed按钮。这个四件套结构从 Step 1.5 一直延续到后续的 step1-06、step1-07、step2-02 等目录是贯穿整个工作坊的骨架理解它是后续一切状态管理与 Redux 改造的地基。二、静态 HTML 骨架组件的待拆迁原型在动手写任何 React 组件之前先看看被拆分的对象长什么样。Demo 文档明确指出应用的 HTML 原型存放在 step1-05/TodoApp.html其完整结构如下!DOCTYPE html html body header h1todos small(1.5)/small/h1 div classaddTodo input classtextfield placeholderadd todo / button classsubmitAdd/button /div nav classfilter button classselectedall/button buttonactive/button buttoncompleted/button /nav /header ul classtodos li classtodo labelinput typecheckbox / Todo 1/label /li li classtodo labelinput typecheckbox / Todo 2/label /li li classtodo labelinput typecheckbox / Todo 3/label /li li classtodo labelinput typecheckbox / Todo 4/label /li /ul footer span4 items left/span button classsubmitClear Completed/button /footer /body /html对照这份 HTML 与上面四个组件映射关系一目了然header块对应TodoHeaderul classtodos对应TodoList每个li classtodo对应TodoListItemfooter对应TodoFooter。这正是《Thinking in React》第一步的精髓——先看视觉结构再沿 HTML 的嵌套关系勾勒组件树。值得注意的是列表中四条待办项的结构完全相同只是文字编号不同这恰好为下文 TodoListItem 的抽象提供了最直观的动机。三、目录约定components 文件夹与 .tsx 扩展名Demo 文档要求所有组件存放在step1-05/demo/src下的components文件夹中step1-05/demo/src/ ├── components/ # 新建用于存放全部组件 │ ├── TodoHeader.tsx │ ├── TodoList.tsx │ ├── TodoListItem.tsx │ └── TodoFooter.tsx ├── App.tsx # 组合所有组件 ├── index.tsx # ReactDOM 挂载入口 └── style.css关于扩展名文档特别强调.tsx告诉编辑器这个文件包含用 TypeScript 书写的 React 代码。同时给出了一个重要承诺我们很快会讲到 TypeScript但现在你只需要知道所有合法的 JavaScript 都是合法的 TypeScript。这意味着此刻你可以把组件当成普通 JavaScript 函数来写类型系统的威力留待 Day 2step2-01再释放。从仓库的构建配置也可以印证.tsx的入口地位webpack.config.js 会自动扫描各 step 目录下demo/、exercise/、final/、lesson/前缀的src/index.{js,jsx,ts,tsx}作为入口ts-loader 负责把.tsx?文件转译成浏览器可执行的 JavaScript。四、TodoHeader第一个 React 组件的完整写法文档给出了TodoHeader的完整实现存于src/components/TodoHeader.tsximport React from react; export const TodoHeader () { return ( header h1todos/h1 div classNameaddTodo input classNametextfield placeholderadd todo / button classNamesubmitAdd/button /div nav classNamefilter button classNamecompletedall/button buttonactive/button buttoncompleted/button /nav /header ); };这段代码浓缩了函数式组件Function Component的几个基本要素值得逐点拆解import React from react每个包含 JSX 的组件文件都必须引入 React因为 JSX 最终会被编译为React.createElement(...)调用export const TodoHeader () { ... }用箭头函数定义组件并以命名导出named export方式暴露便于其他文件通过import { TodoHeader } from ./components/TodoHeader引用返回 JSX 树函数的返回值就是组件渲染出的标记与 HTML 几乎一一对应。最关键的一点是文档中用 Note标出的提醒因为在 React 中我们必须把class改成className除此之外其他一切都不变。这是从 HTML 迁移到 JSX 最容易踩的坑class在 JavaScript 中是保留字因此 JSX 中类名属性一律写作className。对照 step1-05/TodoApp.html 中的classaddTodo、classtextfield可以看到它们逐一变成了classNameaddTodo、classNametextfield。类似地for属性在 JSX 中也要改写成htmlFor——不过本组件暂未用到。顺带一提组件中的 CSS 类名并不是凭空设计它们与 demo 的样式表 一一对应.addTodo用display: flex让输入框与按钮横向排列.textfield通过flex-grow: 1撑满剩余宽度.filter .selected用蓝色下边框标识当前筛选项。也就是说JSX 只负责结构样式仍然由常规 CSS 承担这也是静态页面阶段的特点之一。五、TodoListItem识别重复元素抽象可复用组件TodoListItem 的引入来自文档中一条重要的工程判断任何时候看到重复出现的复杂元素通常就意味着应该创建一个新组件。借助少量 props你通常可以把所有这些元素抽象进一个组件。四条结构相同的li classtodo正是教科书级的例子。Demo 文档给出的实现import React from react; export const TodolistItem () { return ( li classNametodo label input typecheckbox / Todo 1 /label /li ); };注意demo 文档中组件名写作TodolistItem小写 l而 exercise 目录下实际落盘的实现是TodoListItemstep1-05/exercise/src/components/TodoListItem.tsx后者才是贯穿全工作坊的标准命名后续所有 step 均使用TodoListItem。练习环节可按TodoListItem命名保持与其他步骤一致。此时组件内部是硬编码的Todo 1尚不接收任何 props——这正是静态页面的含义界面有了数据还是死的。等到 Step 1.6 引入状态后同一组件将演进为通过{[01, 02, 03, 04].map((todo) TodoListItem /)}批量渲染见 step1-06/demo/src/components/TodoList.tsx再到 Step 1.7 用TodoListItemProps接口显式约束传入的字段见 step1-07/demo/README.md。现在写死的静态版本正是为了让你先看清结构再逐步引入数据。六、练习环节补全 TodoFooter、TodoList 并组装 App仓库中与该 demo 配套的练习说明给出了完整的动手路径建议在 VS Code 中完成从 Step 1.5 起练习从 CodePen 迁移到本地 VS Code。练习步骤共分三块TodoFooter在step1-05/exercise/src/components下新建TodoFooter.tsx把 TodoApp.html 中的footer标记改写成 React 组件——记得import React、导出组件、把class改为classNameTodoList新建TodoList.tsx导入TodoListItem并把四条li放进ul classtodos。文档明确提示这里是加分项可以用for循环或用map基于数组[1, 2, 3, 4]生成四个列表项——这直接为后续用真实数据渲染列表做了铺垫App在 exercise 的 App.tsx 中导入TodoHeader、TodoList、TodoFooter把它们依次放进组件的返回 JSX 中。练习目录下已预置了部分实现供对照TodoHeaderexercise 版与 demo 版几乎一致只是标题多了(1.5 exercise)字样、筛选按钮用classNameselected标出当前项TodoListItemexercise 版与 demo 版相同。App.tsx 目前只引入了TodoHeader留待你把剩余两个组件拼装进去。七、运行与验证让静态页面跑起来要亲眼看到静态页面需要先把工作坊项目跑起来。按主 README 的指引完成初始准备npm install # 安装全部依赖 npm start # 启动开发服务器dev servernpm start实际是通过 package.json 中的run-p start:server start:client并行启动两个进程Express 后端server/index.js与 webpack-dev-server 前端webpack-dev-server --mode development --progress --open。启动后在首页 index.html 的 React Components 板块点击demo或exercise链接即可查看对应页面。渲染链路本身非常直观index.tsx 通过ReactDOM.render(TodoApp /, document.getElementById(app))把根组件挂载到index.html中唯一的div idapp/div节点上而TodoApp目前是 demo 的占位版仅渲染 Hello World就是你逐步组装起来的组件树的根。你还可以为浏览器安装 React Developer Tools见主 README在 DevTools 中直观检视组件层级——这正好呼应了本步组件层级结构的主题。八、小结与下一步Step 1.5 用一份静态 HTML 完整示范了《Thinking in React》的前置动作先拆层级把 todo 应用切成TodoHeader/TodoList/TodoListItem/TodoFooter四个职责清晰的组件先搭静态用.tsx函数组件 1:1 还原 HTML 结构只做class → className的语法迁移不掺任何状态与交互抽象信号遇到重复的复杂片段就抽组件为后续以 props 注入数据预留接口。这一静态版本是后续课程的地基Step 1.6 将在此基础上引入 state 实现状态驱动的 UI见 step1-06/demo/README.mdStep 1.7 再为组件补上类型约束与反向数据流见 step1-07/demo/README.md最终在 Day 2 演化出完整的 Redux 架构。组件拆分的功夫下在这里后面每一步都会因此轻松许多。图todos 应用组件层级划分示意对应本文拆出的 TodoHeader、TodoList、TodoListItem、TodoFooter 四个组件。赞分享示例工程【免费下载链接】frontend-bootcampFrontend Workshop from HTML/CSS/JS to TypeScript/React/Redux项目地址https://gitcode.com/gh_mirrors/fr/frontend-bootcamp点击查看免费下载相关推荐Frontend Bootcamp React Hooks实战状态管理新方式Frontend Bootcamp React Hooks实战状态管理新方式 在现代前端开发中React Hooks已成为简化组件逻辑、优化状态管理的关键技示例工程Frontend Bootcamp React Context深入组件通信新方案Frontend Bootcamp React Context深入组件通信新方案 为什么需要React Context 在传统的React应用中组件间通信示例工程Frontend Bootcamp组件性能优化memo与useCallback使用技巧Frontend Bootcamp组件性能优化memo与useCallback使用技巧 你是否经常遇到React应用随着功能增加而变得越来越卡顿特别是当页面示例工程上一篇在虚拟板子上跑PythonVelxio上的MicroPython与REPL实战教程下一篇CS146S 提示词技术实战基于 Ollama 本地 LLM 掌握六种核心 Prompting 方法创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考