立体反应组件
开始
我们跟着 瓦伊·阿里亚 规则和规则 靴子陷阱 5 制作组件时的准则
构建
pnpm run build
林特
pnpm run lint
若为 pnpm run lint 显示问题,运行此命令以修正它们.
pnpm run fix
高级
pnpm run format
结构
组件文件夹
- 总是在 PascalCase 中的文件夹名 :
Button - PascalCase中组件文件 :
Button.tsx - 导出组件文件内的类型和接口( I)
- PascalCase + 中的故事文件
*.stories.tsx数字 :Button.stories.tsx
src
-- ComponentFolder
-- Component.tsx
-- Component.stories.tsx
-- index.ts
- 将组件在自己内部再出口
index文件 :index.ts - 如果组件有类型和接口, 则导出全部内容( I)
export { default as Component } from './Component';
export * from './Component';
构成部分 准则
- 总是用JSDoc格式记录组件的基本准则。 被"故事书"用来生成文档.
/**
* Primary UI component for user interaction
*/
界面说明
- 总是与 JSDoc 语法进行文档打字类型和接口. 被"故事书"用来生成文档.
// Interface description (e.g: TreeViewProps.tsx)
export interface ButtonProps {
/**
* Is this the principal call to action on the page?
*/
primary?: boolean;
/**
* What background color to use
*/
backgroundColor?: string;
/**
* How large should the button be?
*/
size?: "small" | "medium" | "large";
/**
* Button contents
*/
label: string;
/**
* Optional click handler
*/
onClick?: () => void;
}
内部索引文件 src 文件夹
- 此反应库的入口 .
- 在内部导入您的组件
index.ts文档.
export * from './Button';
添加图标
德维
您可以使用 Storybook。见 读取