在这篇文章中,我将为您介绍Reakit(https://reakit.io),一个用于构建React UI的工具包。我们将共同使用Reakit组件构建一个客户信息表格。
我们将建设什么
Reakit提供了一个组件库,允许您在React中快速组装各种用户界面,这使得它非常适合从快速原型制作到生产。
项目设置
<$>[注意]我会假设一些熟悉从CLI工作。
使用 Create React App 创建新项目
Reakit 只依赖于 React,这使事情变得轻松。我们将利用 Create React App来加速我们的发展。
创建 React 应用程序是学习 React 的舒适环境,是开始在 React 中构建新单页应用程序的最佳方式。
1$ npx create-react-app reakit-checkout
2$ cd reakit-checkout
启动发展环境
创建 React 应用程序为我们安装了 React 及其依赖,也为我们创建了一个方便的开发环境,让我们确保一切正常运行。
黄金:
1$ yarn start
或者用npm:
1$ npm run start
您应该看到默认 Create React App 页面:
安装 REAKIT
我们现在将安装Reakit及其默认主题。
黄金:
1$ yarn add reakit reakit-theme-default
或者使用npm:
1$ npm install -S reakit reakit-theme-default
你好!测试
让我们做一个更快的测试,以确保Reakit安装正确,并能够在我们的应用程序中渲染组件. 我们将利用Reakit的供应商和段落组件来生成你好!消息。
<$>[注] Reakit 提供者组件是一个主题提供商. 您可以将其传递给主题支持器来样式化您的组件。 <$> 使用上面的组件名称作为键。
让我们先在src目录中创建一个新的文件,并将其称为CustomerInfo.js。
1[label src/CustomerInfo.js]
2import React, { Component } from 'react';
3import { Provider, Paragraph } from 'reakit';
4import theme from 'reakit-theme-default';
5
6class CustomerInfo extends Component {
7 render() {
8 return (
9 <Provider theme={theme}> // Easily add theme support to your UIs
10 <Paragraph>Hello world!</Paragraph>
11 </Provider>
12 );
13 }
14}
15
16export default CustomerInfo;
接下来,让我们修改src/App.js,以返回我们刚刚创建的新CustomerInfo组件:
1[label src/App.js]
2import React, { Component } from 'react';
3
4import CustomerInfo from './CustomerInfo';
5import './App.css';
6
7class App extends Component {
8 render() {
9 return (
10 <div className="App">
11 <CustomerInfo />
12 </div>
13 );
14 }
15}
16
17export default App;
一旦你保存了你的更改,你应该看到应用程序页面更新。你应该看到一个空白的页面,上面写着你好,世界!现在你可能已经期待了一些光明的东西。然而,Reakit在DOM中呈现了一个简单的<p>元素。
最重要的是,就我们的项目而言,这意味着Reakit已经正确安装,我们已经准备好了!
构建形式
添加一些对比
让我们快速添加一些src/App.css以更改背景颜色,并为我们的表单设置宽度,这将有助于表单输入在我们开发时脱颖而出。
1[label src/App.css]
2.App {
3 background: #ccc;
4 width: 400px;
5}
6
7/* ... */
在正常情况下,你可能想做一些更精细的操作来支持不同的设备和屏幕大小。
添加我们的非风格形式
我们会回到 CustomerInfo.js 并删除我们的Hello world!``Paragraph组件,我们会使用 Reakit 的Group,Field,Input,Label和Button组件来代替它。
1[label src/CustomerInfo.js]
2import React, { Component } from 'react';
3import { Provider, Group, Field, Label, Input, Button } from 'reakit';
4import theme from 'reakit-theme-default';
5
6class CustomerInfo extends Component {
7 render() {
8 return (
9 <Provider theme={theme}>
10 <Group vertical> {/* Groups the entire form as a single child */}
11 <Field> {/* Groups label and input as a field */}
12 <Label>
13 First name <Input />
14 </Label>
15 </Field>
16 <Field>
17 <Label>
18 Last name <Input />
19 </Label>
20 </Field>
21 <Field>
22 <Label>
23 Email <Input />
24 </Label>
25 </Field>
26 <Field>
27 <Label>
28 <Input type="checkbox" /> Subscribe to our newsletter!
29 </Label>
30 </Field>
31 <Field>
32 <Label>
33 Address <Input />
34 </Label>
35 </Field>
36 <Field>
37 <Label>
38 City <Input />
39 </Label>
40 </Field>
41 <Field>
42 <Label>
43 State <Input />
44 </Label>
45 </Field>
46 <Field>
47 <Label>
48 Zip <Input />
49 </Label>
50 </Field>
51 <Button>Submit</Button>
52 </Group>
53 </Provider>
54 );
55 }
56}
57
58export default CustomerInfo;
保存我们的更改后,你会看到我们的表格在我们的应用程序中进行渲染. 虽然它看起来还不太好。 布局在大多数情况下是正确的,但它需要一些磨练,所以让我们给它一些爱。
添加一些风格
Reakit 支持以三种不同的方式添加风格: Styled Components,内线风格和主题. 我们将继续使用 Styled Components 方法。
1[label src/CustomerInfo.js]
2import React, { Component } from 'react';
3import { styled, Provider, Group, Field, Label, Input, Button } from 'reakit';
4import theme from 'reakit-theme-default';
5
6// Set custom styles using styled()
7const StyledField = styled(Field)`
8 padding: 5px 10px;
9`;
10const StyledInput = styled(Input)`
11 border: 1px solid #777;
12 margin-top: 3px;
13`;
14const StyledButton = styled(Button)`
15 margin: 5px 10px 10px;
16`;
17
18class CustomerInfo extends Component {
19 render() {
20 return (
21 <Provider theme={theme}>
22 <Group vertical>
23 <StyledField> {/* Use the styled version of Field */}
24 <Label>
25 First name <StyledInput /> {/* Use the styled version of Input */}
26 </Label>
27 </StyledField>
28 <StyledField>
29 <Label>
30 Last name <StyledInput />
31 </Label>
32 </StyledField>
33 <StyledField>
34 <Label>
35 Email <StyledInput />
36 </Label>
37 </StyledField>
38 <StyledField>
39 <Label>
40 <StyledInput type="checkbox" /> Subscribe to our newsletter!
41 </Label>
42 </StyledField>
43 <StyledField>
44 <Label>
45 Address <StyledInput />
46 </Label>
47 </StyledField>
48 <StyledField>
49 <Label>
50 City <StyledInput />
51 </Label>
52 </StyledField>
53 <StyledField>
54 <Label>
55 State <StyledInput />
56 </Label>
57 </StyledField>
58 <StyledField>
59 <Label>
60 Zip <StyledInput />
61 </Label>
62 </StyledField>
63 <StyledButton>Submit</StyledButton> {/* Use the styled version of Button */}
64 </Group>
65 </Provider>
66 );
67 }
68}
69
70export default CustomerInfo;
一旦您保存了更改,您现在应该看到一个看起来对眼睛更友好的形式. 如果我把这个带到生产中,我仍然有很长的路要走,但希望您能看到使用Reakit内置的Styled Components支持开始添加风格是多么容易。
结论
Reakit 配备了一些很棒的功能,我挑战你查看 Reakit 文档并查看它提供的所有强大的功能,我认为你会感到惊讶。