Reakitで稼働中
この記事では、ReactUIを構築するためのツールキットであるReakitについて説明します。 一緒に、Reakitコンポーネントを使用して顧客情報フォームを作成します。 短時間でコンポーネントの作成を開始する方法を理解したい場合は、このまま読み進めてください。
私たちが構築するもの
Reakitは、ReactでさまざまなUIをすばやくまとめることができるコンポーネントのライブラリを提供しています。 これにより、ラピッドプロトタイピングから生産まですべてに最適です。 この記事では、連絡先情報フォームを作成することにしました。
プロジェクトの設定
CLIからの作業にある程度精通していることを前提としています。
CreateReactAppを使用して新しいプロジェクトをセットアップします
Reakitは、物事を軽く保つReactにのみ依存しています。 Create React App を活用して、開発をスピードアップします。 Reakitを活用する必要はないことを理解してください。
Create React Appは、Reactを学習するための快適な環境であり、Reactで新しいシングルページアプリケーションの構築を開始するための最良の方法です。
$ npx create-react-app reakit-checkout
$ cd reakit-checkout
開発環境を起動します
Create React Appは、Reactとその依存関係のインストールを処理してくれました。 また、便利な開発環境を構築します。 すべてが正しく実行されていることを確認しましょう。
糸:
$ yarn start
またはnpmで:
$ npm run start
デフォルトのCreateReactAppページが表示されます。
Reakitをインストールする
ここで、Reakitとそのデフォルトのテーマをインストールします。
糸:
$ yarn add reakit reakit-theme-default
またはnpmを使用する:
$ npm install -S reakit reakit-theme-default
“こんにちは世界!” テスト
Reakitが正しくインストールされ、アプリ内でコンポーネントをレンダリングできることを確認するために、もう1つの簡単なテストを実行してみましょう。 ReakitのProvider
およびParagraph
コンポーネントを活用して、「Helloworld!」を生成します。 メッセージ。
Reakitのプロバイダーコンポーネントはテーマプロバイダーです。 テーマプロップを渡して、コンポーネントのスタイルを設定できます。 大文字のコンポーネント名をキーとして使用します。
まず、src
ディレクトリに新しいファイルを作成し、それをCustomerInfo.js
と呼びます。
import React, { Component } from 'react';
import { Provider, Paragraph } from 'reakit';
import theme from 'reakit-theme-default';
class CustomerInfo extends Component {
render() {
return (
<Provider theme={theme}> // Easily add theme support to your UIs
<Paragraph>Hello world!</Paragraph>
</Provider>
);
}
}
export default CustomerInfo;
次に、src/App.js
を変更して、作成したばかりの新しいCustomerInfo
コンポーネントを返します。
import React, { Component } from 'react';
import CustomerInfo from './CustomerInfo';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<CustomerInfo />
</div>
);
}
}
export default App;
変更を保存すると、アプリページが更新されます。 「Helloworld!」というテキストのある空白の白いページが表示されます。 今、あなたはすでに何か輝くものを期待していたかもしれません。 ただし、ReakitはDOMで単純な<p>
要素をレンダリングします。 これは、私が本当に感謝しているReakitの側面を示しています。 単一要素パターンの実装と、その結果として残される軽量のフットプリント。
最も重要なことは、私たちのプロジェクトに関しては、Reakitが正しくインストールされており、準備ができていることを意味します。
フォームの作成
コントラストを加える
src/App.css
にいくつか追加して、背景色を変更し、フォームの幅を設定しましょう。 これにより、開発時にフォーム入力が背景に対して目立つようになります。
.App {
background: #ccc;
width: 400px;
}
/* ... */
通常のシナリオでは、さまざまなデバイスや画面サイズをサポートするために、もっと手の込んだことをしたいと思うでしょう。 私たちのプロジェクトの範囲では、それはうまく機能します。
スタイルなしのフォームを追加する
フォームの作成に取り掛かりましょう。 CustomerInfo.jsに戻り、「Helloworld!」を削除します。 Paragraph
コンポーネント。 ReakitのGroup
、Field
、Input
、Label
、Button
コンポーネントを使用してフォームに置き換えます。
import React, { Component } from 'react';
import { Provider, Group, Field, Label, Input, Button } from 'reakit';
import theme from 'reakit-theme-default';
class CustomerInfo extends Component {
render() {
return (
<Provider theme={theme}>
<Group vertical> {/* Groups the entire form as a single child */}
<Field> {/* Groups label and input as a field */}
<Label>
First name <Input />
</Label>
</Field>
<Field>
<Label>
Last name <Input />
</Label>
</Field>
<Field>
<Label>
Email <Input />
</Label>
</Field>
<Field>
<Label>
<Input type="checkbox" /> Subscribe to our newsletter!
</Label>
</Field>
<Field>
<Label>
Address <Input />
</Label>
</Field>
<Field>
<Label>
City <Input />
</Label>
</Field>
<Field>
<Label>
State <Input />
</Label>
</Field>
<Field>
<Label>
Zip <Input />
</Label>
</Field>
<Button>Submit</Button>
</Group>
</Provider>
);
}
}
export default CustomerInfo;
変更を保存すると、フォームがアプリにレンダリングされていることがわかります。 しかし、それはまだそれほど素晴らしく見えません。 レイアウトは大部分が整っていますが、多少の磨きが必要です。 だから、それにいくつかの愛を与えましょう。
いくつかのスタイルを追加する
Reakitは、スタイル付きコンポーネント、インラインスタイル、およびテーマの3つの異なる方法でスタイルを追加することをサポートしています。 先に進み、StyledComponentsメソッドを活用します。
import React, { Component } from 'react';
import { styled, Provider, Group, Field, Label, Input, Button } from 'reakit';
import theme from 'reakit-theme-default';
// Set custom styles using styled()
const StyledField = styled(Field)`
padding: 5px 10px;
`;
const StyledInput = styled(Input)`
border: 1px solid #777;
margin-top: 3px;
`;
const StyledButton = styled(Button)`
margin: 5px 10px 10px;
`;
class CustomerInfo extends Component {
render() {
return (
<Provider theme={theme}>
<Group vertical>
<StyledField> {/* Use the styled version of Field */}
<Label>
First name <StyledInput /> {/* Use the styled version of Input */}
</Label>
</StyledField>
<StyledField>
<Label>
Last name <StyledInput />
</Label>
</StyledField>
<StyledField>
<Label>
Email <StyledInput />
</Label>
</StyledField>
<StyledField>
<Label>
<StyledInput type="checkbox" /> Subscribe to our newsletter!
</Label>
</StyledField>
<StyledField>
<Label>
Address <StyledInput />
</Label>
</StyledField>
<StyledField>
<Label>
City <StyledInput />
</Label>
</StyledField>
<StyledField>
<Label>
State <StyledInput />
</Label>
</StyledField>
<StyledField>
<Label>
Zip <StyledInput />
</Label>
</StyledField>
<StyledButton>Submit</StyledButton> {/* Use the styled version of Button */}
</Group>
</Provider>
);
}
}
export default CustomerInfo;
変更を保存すると、もう少し見やすいフォームが表示されます。 これを本番環境に移行したとしても、まだ長い道のりがあります。 しかし、Reakitに組み込まれているStyled Componentsサポートを使用して、スタイルの追加を開始するのがいかに簡単であるかがわかるといいのですが。
結論
Reakitにはいくつかの優れた機能が搭載されています。 Reakit docs をチェックして、それが提供するすべての強力な機能を確認してください。 きっと驚かれることでしょう。 今後のプロジェクトでそれを使用したくなるかもしれません。