@ac-ui/react-components 中文文档教程

Question

@ac-ui/react-components

一个 React 组件库

Installation

• 作为 npm 依赖项安装 npm i @ac-ui/react-components

• 导入组件

  • ```jsx harmony 从'~@ac-ui/react-components'导入{副标题}；

    const 示例 = () => ```

Contribution

我们鼓励并欢迎大家为@ac-ui/react-components 做出贡献！ 这个库是为（正在建造）建造的 使用和开发 Avenue Coders。 为了保持可用性，保持代码一致，并确保产品质量， linting 和预提交挂钩已添加到存储库中。

如何制作组件？

• Run $ npm run component:stub
• Rename component to desired name, and update all references
• Make component exportable by adding it to src/index.js
• Preview components in styleguidist using npm run styleguide

组件需要具备什么

• A component only needs to have:
  • index.js (with the following content export{ default as ComponentName } from './ComponentName')
  • ComponentName.jsx
• As nice to haves
  • ComponentName.md to enhance component in Styleguidist
  • ComponentName.spec.js because unit testing is always smart
  • ComponentName.scss to style things

如何为组件设置样式？

• Completely custom element?
  • Import the variables, mixins, and helpers all in one go
    • (@import "~@ac-ui/design-system/src/base";)
• Is it built around a TWBS Component
  • Import the 'bridge', which imports variables, helpers, and utility classes for the component
    • (@import "~@ac-ui/design-system/src/bridge/buttons";)
• Always style using variables, and TWBS where possible!
  • A variable doesn't exist?
    • Is there one close to it? Use that.
    • Is it going to be used only in this component? Initiate variable there
    • Is it only going to be used in many files? Add it to @ac-ui/design-system