使用 React 类组件构建个人简历CV应用从 create-react-app 到部署的完整实战指南【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum本项目源自 archive/javascript/react_js/project_cv_application.md作为 React 课程的第一个实战项目它将引导你使用类组件class components构建一个可编辑、可提交的个人简历应用完整覆盖组件拆分、state 与 props 传递、受控表单、编辑/提交状态切换等 React 核心概念。读完本文你将能够独立搭建一个包含「个人信息、教育经历、实践经验」三大区块的 CV 生成器并掌握将其部署到公网的全流程。项目概览为什么第一个 React 项目是 CV 应用CV 应用是学习 React 的绝佳起点。它规模适中、复杂度可控却几乎囊括了入门阶段最核心的全部知识点组件化拆分、状态管理、父子组件通信、表单处理与事件绑定。在动手之前先明确本项目要达成的三个目标组件化思维把一个页面拆成多个职责单一、可复用的 React 组件类组件实操本课程刻意要求使用类组件因为存量代码库中有大量类组件代码掌握其写法constructor、this.state、setState、bind是阅读与维护老项目的必备能力状态驱动 UI通过「编辑 / 提交」两种模式的切换深刻体会 state 变化如何驱动界面重新渲染。关于学习心态原文档也特别提醒学习新技术时你可能会想这用原生 JavaScript 也能实现。不要因此气馁——坚持完成项目后你会获得远比能用原生 JS 实现更高的生产效率并为自己新增一项技能栈。第一步初始化项目并搭建目录结构使用 create-react-app 创建项目原文档要求使用create-react-app脚手架创建项目更现代的做法是使用 Vite但类组件项目的核心逻辑一致npx create-react-app cv-project cd cv-project关于create-react-app生成了什么可回顾 react_introduction.md 中的说明它通过一条命令完成全部必要的工程化配置让你可以立即开始编写业务代码。其中两个最重要的文件是src/index.js应用入口通过ReactDOM.createRoot(document.getElementById(root))将App组件渲染到public/index.html中 id 为root的 div 里src/App.js主应用组件是所有其他组件的父组件。创建完成后移除脚手架生成的样板代码logo、演示样式等并立即在 GitHub 上新建仓库并将初始代码推送上去这样每一步进展都有版本记录。建立 components 与 styles 目录按照原文档要求在src下建立两个目录cv-project/ └── src/ ├── components/ # 存放所有 React 组件 ├── styles/ # 存放 CSS 文件在组件文件中 import 使用 ├── App.js └── index.js在组件文件中导入样式的方式import ../styles/GeneralInfo.css;第二步规划组件结构这是本项目最重要也最容易犹豫的一步如何把应用拆分成组件。根据 react_introduction.md 中「父组件 / 子组件」的层级思想结合项目需求推荐的拆分方案如下组件职责App顶层父组件持有全局 state向各子组件分发 propsGeneralInfo个人信息表单姓名、邮箱、电话EducationExperience教育经历表单学校名称、专业/学习方向、就读时间PracticalExperience实践经验表单公司名称、职位、主要职责、任职起止时间原文档明确要求应用必须包含三个区块通用信息General Informationname、email、phone number教育经历Educational Experienceschool name、title of study、date of study实践经验Practical Experiencecompany name、position title、main tasks of your jobs、date from and until when you worked for that company。每个区块对应一个独立组件这样每个组件的职责单一、便于测试与复用也正是组件化架构的意义所在。第三步类组件核心语法速览本项目强制使用类组件因此先回顾类组件的三个关键语法点详细讲解见 state_and_props.md 与 class_based_components.md。类组件的基本骨架import React, { Component } from react; class GeneralInfo extends Component { constructor(props) { super(props); // 必须调用否则无法使用 this.props this.state { name: , email: , phone: , }; // 方法必须绑定 this见下文说明 } render() { return div{/* JSX 内容 */}/div; } } export default GeneralInfo;要点类组件通过extends Component获得 React 组件的能力组件名必须使用 PascalCase 命名规范render()方法必须存在且只能返回一个顶层 JSX 元素constructor(props)中必须调用super(props)否则无法通过this.props访问父组件传入的 props。状态管理state 与 setState在类组件中state 在 constructor 中声明为对象this.state { name: , email: , phone: , };更新状态必须调用setState绝不能直接修改 state如this.state.name xx或this.state.count因为 React 依赖 state 的不可变更新来触发重新渲染直接修改会导致难以排查的 bughandleInputChange (e) { this.setState({ [e.target.name]: e.target.value }); };关于状态更新的底层原理可参考 introduction_to_state.md调用setState后组件会重新渲染React 通过协调reconciliation算法对比新旧虚拟 DOM计算出最小变更集并提交到真实 DOM——这就是 state 驱动 UI 的机制。方法绑定bind 的缘由在类组件中把方法作为 props 传给子组件时this的指向会丢失。解决办法是在 constructor 中绑定constructor(props) { super(props); this.handleSubmit this.handleSubmit.bind(this); }也可以像上面那样直接用箭头函数定义方法箭头函数自动绑定类实例的this从而省略 constructor 中的 bind。详见 class_based_components.md 中「the-importance-of-bind」一节的说明。第四步props 传递与受控表单父组件向子组件传值props 是 React 的两大支柱之一数据从父组件单向流向子组件。父组件App持有 state通过 props 把数据和处理函数下发给子组件// App.js 中的 render render() { return ( div GeneralInfo info{this.state.generalInfo} onSubmit{this.handleGeneralInfoSubmit} onEdit{this.handleGeneralInfoEdit} / {/* EducationExperience、PracticalExperience 同理 */} /div ); }在子组件中通过this.props.xxx访问也可以在 render 内解构render() { const { info, onSubmit, onEdit } this.props; // ... }关于 props 的完整机制含函数作为 props、默认值、解构可参考 passing_data_between_components.md 与 state_and_props.md。受控组件让 React 接管输入框表单输入框默认由 DOM 维护内部状态。在本项目中我们需要随时拿到输入的最新值因此要让输入框变成受控组件——即把value绑定到 state并用onChange同步更新 state。这也是 more_on_state.md 中「Controlled components」一节的推荐做法input typetext namename value{this.state.name} onChange{this.handleInputChange} /配合下面的处理函数每次按键都会把输入同步进 statehandleInputChange (e) { this.setState({ [e.target.name]: e.target.value }); };注意 React 中的事件属性使用 camelCaseonChange而非onchange且事件监听直接写在 JSX 中。第五步编辑 / 提交模式切换——本项目的心脏原文档的核心要求是每个区块或整个 CV都要有 edit 和 submit 按钮Submit提交表单把输入字段的值渲染成 HTML 元素只读展示模式Edit重新显示输入字段且以之前展示的信息作为各字段的默认值允许修改后再次提交。也就是说每个区块都有「编辑模式」和「展示模式」两种状态通过 state 中的布尔标志如isEditing切换。一个最小实现如下class GeneralInfo extends Component { constructor(props) { super(props); this.state { name: , email: , phone: , isEditing: true, // true编辑模式false展示模式 }; } handleInputChange (e) { this.setState({ [e.target.name]: e.target.value }); }; handleSubmit (e) { e.preventDefault(); this.setState({ isEditing: false }); }; handleEdit () { this.setState({ isEditing: true }); }; render() { const { name, email, phone, isEditing } this.state; if (isEditing) { // 编辑模式渲染表单value 绑定 state受控组件 return ( form onSubmit{this.handleSubmit} input typetext namename value{name} onChange{this.handleInputChange} placeholderName / input typeemail nameemail value{email} onChange{this.handleInputChange} placeholderEmail / input typetel namephone value{phone} onChange{this.handleInputChange} placeholderPhone / button typesubmitSubmit/button /form ); } // 展示模式把 state 值渲染为 HTML 元素并保留 Edit 按钮 return ( div h2General Information/h2 p{name}/p p{email}/p p{phone}/p button onClick{this.handleEdit}Edit/button /div ); } }这段代码完整体现了本项目的三个核心练习点state 驱动模式切换isEditing决定渲染表单还是展示信息受控组件回填Edit 模式下输入框的value直接来自 state天然实现以之前显示的信息作为默认值条件渲染根据 state 条件渲染不同 JSX是 React 中最常用的模式之一。对于教育经历和实践经验两个区块模式完全相同只是字段不同。实践经验还可以更进一步把多段工作经历存成数组通过map渲染如 class_based_components.md 中的 todo 列表示例{this.state.experiences.map((exp) ( div key{exp.id} p{exp.company} - {exp.position}/p /div ))}如果你选择了整个 CV 共用一个编辑/提交按钮则把isEditing提升到App组件统一管理通过 props 下发到各子组件——这也再次练习了lifting state up状态提升与 props 传递。第六步样式组织与 React Developer Tools 调试按原文档要求CSS 文件统一放在src/styles目录并在对应组件文件中导入使用import ../styles/GeneralInfo.css;调试方面react_introduction.md 推荐安装React Developer Tools浏览器扩展它可以让你查看组件树中每个组件的 props、state 与 hooks是检查state 是否正确更新、props 是否按预期传递的首选工具——在排查编辑/提交切换 bug 时尤其有用。另一个值得一提的调试现象如果你的代码中有 console.log 且发现输出成对出现不要惊慌。这是React.StrictMode在开发模式下的双重渲染行为属于预期设计新版课程 project_cv_application.md 对此有专门说明生产构建中不会发生。第七步推送到 GitHub 并部署上线完成功能后把代码推送到 GitHub 仓库。原文档建议把成果展示给全世界部署方案可以参考新版课程 project_cv_application.md 中提供的三种 PaaS 方案部署时需结合当时实际的 Vite/React 构建命令配置Netlify登录后将 GitHub 仓库导入Netlify 导入入口选择部署分支默认main点击 Deploy site 即可Vercel同样将 GitHub 仓库导入Vercel 新建项目入口平台会自动检测构建工具设置名称后点击 DeployCloudflare Pages导入 GitHub 仓库确保创建应用时选择 Pages而非 Worker设置正确的构建命令与输出目录点击 Save and Deploy。无论选择哪个平台核心流程一致代码推送 GitHub → 平台导入仓库 → 自动构建部署 → 获得公网 URL。这些平台通常支持 deploy on push后续每次推送代码都会自动重新部署。结语从本项目继续前进完成本项目后你已亲手实践了 React 最核心的概念组合组件拆分、类组件语法、state 不可变更新、props 单向数据流、受控表单与条件渲染。这也是整个 React 课程中反复出现的基础模式——后续的 project_memory_card.mdhooks 管理状态与外部 API 数据、project_cv_application.md新版函数组件版 CV 应用都会在此基础上延伸。最后原文档还预告了一件事你会在后续课程中把这个项目从类组件重构为函数组件。届时你会对比两种写法在 state、props、生命周期上的差异——例如 lifecycle_methods.md 提到的componentDidMount/componentDidUpdate/componentWillUnmount与 hooks 的对应关系。保存好这个项目它就是你的成长参照物。【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考