1. 什么是 fractal-react-components
fractal-react-components 是一个开源的 React 组件库，提供了一系列常用组件，如按钮、输入框、对话框、表单等等。这些组件都是基于 Fractal 设计系统构建的，保证了组件的一致性和易用性。
2. 如何使用
2.1 安装
首先，我们需要在项目中安装 fractal-react-components：
npm install fractal-react-components
2.2 引入
使用 fractal-react-components 中的组件前，还需要在你的代码中引入它们。可以选择分别引入需要的组件，比如：
import { Button, Input } from 'fractal-react-components';也可以选择全部引入，比如：
import * as FRC from 'fractal-react-components';
2.3 使用
引入之后，我们就可以像使用任何其他 React 组件一样使用 fractal-react-components 中的组件了。
-- -------------------- ---- -------
------ - ------ - ---- ---------------------------
-------- ------------- -
------ -
------- ----------------- ----------- -- ------------------
----- --
---------
--
-3. 组件文档
fractal-react-components 提供了完整的组件文档，方便开发者使用和参考。
3.1 加载文档
在项目中安装 @frctl/mandelbrot：
npm install @frctl/mandelbrot
使用 mandelbrot 主题启动 Fractal 的静态站点服务器：
npx fractal start --theme @frctl/mandelbrot
然后在浏览器中访问 http://localhost:3000，就可以看到组件文档了。
3.2 搜索文档
fractal-react-components 的组件文档支持搜索功能，可以方便地找到需要的组件和文档。
4. 示例代码
下面是一些 fractal-react-components 的组件示例代码。
4.1 按钮
-- -------------------- ---- -------
------ - ------ - ---- ---------------------------
-------- ------------- -
------ -
-----
------- ----------------------------------
------- --------------------------------------
------- ----------------------------------
------- --------------------------------
------- ----------------------------------
------- ----------------------------
------- ------------------------------
------- ----------------------------
------
--
-4.2 输入框
-- -------------------- ---- -------
------ - ----- - ---- ---------------------------
-------- ------------- -
------ -
-----
------ ----------- ------------------ ----- --
------ ------------- ------------------ ------- --
------ ------------ ------------------ ------ --
------ --------------- ------------------ --------- --
------ ------------- ------------------ ------- --
------ ---------- ------------------ ----- ------- --
------ ---------- ------------------ ---- --
------
--
-4.3 对话框
-- -------------------- ---- -------
------ - ------- ------------- ----------- ------------ - ---- ---------------------------
-------- ------------- -
----- -------- ---------- - ----------------------
----- ----------- - -- -- -
-------------------
--
------ -
-----
------- -------------------------- --------------
------- --------------- ----------------------
------------- ------------ ------ --------------------- --
------------
------- -- --- ------- -- --- ----------
-------- --- ------- ------ -- ----- ------- --- ----- -- ----- -------
-------------
--------------
------- ------------------------------------
---------------
---------
------
--
-4.4 表单
-- -------------------- ---- -------
------ - ----- --------- ------ ------ - ---- ---------------------------
-------- ------------- -
----- ------------ - --- -- -
-------------------
----------------- ------------
--
------ -
----- ------------------------
--------- -------------
------ ----------- ------------------ ---- ----- --
-----------
--------- --------------
------ ------------ ------------------ ---- ------ --
-----------
----------
------- -----------------------------
-----------
-------
--
-5. 总结
fractal-react-components 是一个非常实用的 React 组件库，提供了一系列常用组件。使用它，可以大大提高开发效率和代码复用性。同时，我们还介绍了如何安装、引入和使用 fractal-react-components 中的组件，以及如何查看组件文档和示例代码。希望这篇文章能够帮助你更好地使用 fractal-react-components。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d2e81e8991b448dae9b