design react kit
v5.5.0
用其他语言阅读此信息：英语??。
Design React套件是一组React组件，可实现Bootstrap Italia和UI套件设计上的样式。为了浏览图书馆并查看组件，使用了故事书。故事书的公开版可用于发布最新的稳定版本。操场上的React套件可与图书馆一起玩。
要使用React Design作为对应用程序的成瘾，您可以从NPM安装它。我们建议使用create vite创建新的WebApp React，如下所示：
yarn create vite nome-app --template react
cd nome-app
yarn add design-react-kit --save更多信息以创建一个具有React的新应用：
design-react-kit不包括CSS和字体文件，因此有必要单独安装它们：
yarn add bootstrap-italia typeface-lora typeface-roboto-mono typeface-titillium-web --save./src/App.js ，如果您使用的使用create vite 。
import React from 'react' ;
import './App.css' ;
import { Alert } from 'design-react-kit' ;
import 'bootstrap-italia/dist/css/bootstrap-italia.min.css' ;
import 'typeface-titillium-web' ;
import 'typeface-roboto-mono' ;
import 'typeface-lora' ;
function App ( ) {
return < Alert > This is an Alert </ Alert > ;
}
export default App ;您可以使用Stackblitz咨询此Web模板：网络模板
Bootstrap Italia主题使用一组特定字体字体： titillium-web ， roboto-mono和lora 。这些字体的加载留在浏览器上，但是，如果需要，可以通过适当的FontLoader组件进行控制。只需在React应用程序的顶部声明FontLoader组件即可加载。
另外，有必要通过webfontloader软件包手动管理字体的加载：
const WebFont = require ( 'webfontloader' ) ;
WebFont . load ( {
custom : {
families : [ 'Titillium Web:300,400,600,700:latin-ext' , 'Lora:400,700:latin-ext' , 'Roboto Mono:400,700:latin-ext' ]
}
} ) ;该库不包括react和react-dom ，避免了版本的冲突以及捆绑包大小的无用增加。因此，对于本地开发，必须手动安装成瘾。
要执行的命令是
yarn install --peers或者手动
yarn install react react-dom？有可能以各种方式为图书馆做出贡献：
您想帮助设计套件吗？你在正确的地方！
如果您尚未这样做，请首先花几分钟，以加深您对PA Web服务的设计指南的了解，并参考有关如何为设计React React Kit做出贡献的指示。
当地环境的最低要求必须是：
克隆存储库并执行yarn以安装成瘾。然后执行
yarn storybook:serve启动开发服务器。
故事书将在http：// localhost：9001/
Storybook充满了一些addons ，使其更加说话。
本节将指导存储库中新组件的创建。所有组件都位于src文件夹中：每个组件都有一个文件夹，其中包含使其正常工作所需的所有内容。 Storybook故事是在stories之下。单位测试位于test文件夹中。例如，该Button组件存在于src/Button路由下，其结构如下：
├── src
│ └── Button
│ └── Button.tsx
├── stories
│ ├── Components
│ │ └── Button.stories.tsx
│ └── Documentation
│ └── Button.mdx
└── test
└── Button.test.tsx
构建组件的一些基本规则：
.stories.tsx文件仅应包含与组件本身相关的内容。.mdx文件应仅包含与组件本身有关的文档.test.tsx文件应仅包含与组件本身有关的测试。创建了一个新组件后，他的故事开始了Storybook，就可以检查一切都应工作。
文档：
测试系统通过一种称为“快照”测试的技术提供了对存在的故事的控制：Storybook故事的内容将被复制到一个特殊文件中，并保留以通知将来的任何更改。这意味着，新故事的添加可能会导致公关中“测试”任务的失败。如果添加了一个新故事或已经存在的故事，则有必要如下更新快照文件：
yarn test -u此时，创建一个新的佣金，并使用更新的快照文件更新PR。在更新PR之前，检查所做的更改是否已纠正。
要填写库并在dist文件夹中生成文件，只需启动专用命令：
yarn build该套件遵循公共管理设计指南中显示的指示，第6.3.1.2.1节。通过使用browserslist-config-design-italia软件包，浏览器支持。
图书馆被带到打字稿，并将其导出。
特别感谢那些使该图书馆发展成为可能的人！
 |  |  |  |
|---|---|---|---|
| Sabatino Galasso | Marco Liberati | Matteo Avesani | Federico Turbino |
并为欧洲实验室的贡献
所有贡献者（用贡献者制造）
