主要分为 2 部分，左侧是主题列表，右侧是主题详情。

初始化项目

首先通过脚手架初始化一个 typescript + webpack 的工程

如果你会 TailwindCSS 我推荐 VSCODE 安装 这个插件tailwind-snippets 可以快速帮我们来发出一个常用的代码片段，大家可以在 https://www.tailwindsnippets.ml/snippets 查看效果，快速实现我们的 html 页面

部署

Vercel

Next.js 开发商 Vercel 获得最近 1.5 亿美元 D 轮融资。Vercel 注册什么的我就不讲了，建议使用GitHub 登录, 点击new project创建一个项目，这个项目可以从自己的 GitHub 库导入或者选择 Vercel 给的模板，Vercel 给的模板（下图）首先也会导入进自己的 GitHub 库，总之要先把内容导入进 GitHub 库才行。

Vercel 为个人用户提供了

1. 自动 HTTPS/SSL
2. 带宽 100 GB
3. 并发构建，每天 10 万次调用
4. Serverless Function

所以 Vercel 不光支持静态网站也支持 nodejs 动态网站，如果想要其他后端语言

可以选择 heroku

heroku

Heroku 是一个支持多种编程语言的云平台，并且提供了 Heroku Postgres、Heroku Redis、Apache Kafka on Heroku、

Heroku 虽然提供了比较全面的编程语言和数据库支持，免费用户还支持

1. 使用 Git 和 Docker 部署
2. 自定义二级域名
3. 容器编排
4. 自动操作系统补丁

但 heroku 对国内用户支持不是很友好，第一点访问国内速度比不上 Vercel， 第二点 163 和 QQ 邮箱都不能注册，想要注册得要其他邮箱， 第三没有免费的 ssl。第四项目源代码只能有 500M。

数据库选择

MongoDB

选择 https://cloud.mongodb.com/

创建 database 的时候选择 free；

地域可以选择日本或者新加坡。

接着创建一个用户 密码是自动生成的，要把密码拷贝下来

接着要创建一个允许链接的 IP 地址

在某种程度上，它可能在初学者看来是单调乏味或者不切实际的，但是严格按照这个步骤来做这件事，让你自己决定测试用例是否对你的组件有帮助，会让测试用例变得有意义。

本文将以创建一个 Confirmation 组件来说明，如何在 React 中如何实现测试驱动开发。

Confirmation 组件的特点:

• Confirmation 标题
• 确认描述 —— 接收外部程序想要确认的问题
• 一个确认的按钮，支持外部回调函数
• 一个取消的按钮，支持外部回调函数

这两个按钮都不知道点击时接下来要做什么事，因为它超出了组件的职责范围，但是组件应该接收这些点击按钮的回调事件。先找个设计图:

简单介绍一下自己

我是一名 90 后，12 年毕业，工作 9 年，发过传单，做过运营，也把自己当成产品经理。目前是一名小厂前端工程师，日常负责公司 2B 产品开发迭代交付，还有一些公司内部组件、脚手架维护等。这一年很少加班，调休全靠年假了 😊 。

我的 2021

完成的

除了完成开发工作之外，还完成了:

1. 在掘金发布 12 篇文章

2. 【全栈】第三次重构我的个人博客

3. 【全栈】模仿在线流程图  processon.com，目前已经下线，掘金实现文章

4. 【全栈】实现一个简易版 react 低代码平台 https://low-code.runjs.cool/， 目前只实现了视图层，后面的逻辑有些复杂，没有继续下去。

5. 在 https://dev.to/ 发布 1 篇