返回文章列表

从一个组件开始,整理我的前端工作流

示例文章 · 从组件拆分、类型定义到样式组织,用一个小例子记录让开发变得顺手的方法。

让代码更容易理解

这是一篇用于展示代码高亮与表格的示例技术文章。

先定义数据

清晰的数据结构能让组件更容易维护。

type Note = {
  title: string;
  tags: string[];
  publishedAt: Date;
};

function formatTitle(note: Note): string {
  return note.title.trim();
}

拆分组件

组件职责
ArticleCard文章摘要与入口
Tag展示标签
ArticleBody渲染正文

做一次检查

  1. 页面在手机上是否可读?
  2. 按钮是否有明确反馈?
  3. 错误状态是否说明下一步?

比起一次写完所有功能,我更喜欢先完成一个清晰的小闭环。

— 感谢你读到这里 —

愿这些文字,给你带来一点启发。