实战项目一：React CommentBox 留言板

一、项目介绍

CommentBox 留言板是一个非常常见的 UI 模块。通过对简单组件的多次练习，帮助你掌握 React 相关知识点在组件开发中的运用，并且养成刻意拆分组件的习惯。

Comment 评论组件可用于对事物的讨论，例如页面、博客文章、问题等等，对网站内容的反馈、评价和讨论。

任务 1：基础评论框

一个最基本的评论框组件，带有作者头像、文本输入框，以及取消或评论操作按钮。

任务 2：留言列表

多个评论能够显示列表，并且包含列表数量和排序，并且每一条评论可以进行点赞或踩的操作。

任务 3：嵌套评论

评论可以嵌套，并且可以再次回复，保留 2 个层级，或可以支持无限层级的嵌套。

任务 4：评论回复框

回复他人留言时，评论框组件需要相同的样式，想一想怎么复用呢？当然也需要支持自定义回复框。

二、教学目标

• 掌握 React 组件 State & Props 用法

• 掌握 React Hooks 基础用法

• 掌握 React 表单与事件处理

三、前置技能

HTML、JavaScript（ES6）、CSS 基础知识

四、技能提升目标

React 了解 -> 熟悉

五、学习周期

总时长约 3 小时

• 至少练习 3 遍 CommentBox 组件开发

• 能在 1 小时内完成 CommentBox 题目

准备好代码库，快来尝试一下！

git clone https://github.com/JimmyLv/react-commentbox.git
cd react-commentbox

yarn install #安装依赖
yarn start #启动应用

当然，我还通过 CodeSandbox 的方式作为你的快速入口：https://codesandbox.io/s/github/JimmyLv/react-commentbox (可能需要科学上网)

帮助你去除设置开发环境的障碍，一键打开 Cloud IDE 即可开始编码，右边则是你的网站运行效果预览，比如：https://react-commentbox.jimmylv.now.sh/

CodeSandbox 代码编辑

六、配套资料

• 请反复阅读，并体会 React 哲学：Thinking in React
• 可参考 Ant Design 组件接口，自行实现 评论 Comment - Ant Design