Reakitで稼働中

この記事では、ReactUIを構築するためのツールキットであるReakitについて説明します。 一緒に、Reakitコンポーネントを使用して顧客情報フォームを作成します。 短時間でコンポーネントの作成を開始する方法を理解したい場合は、このまま読み進めてください。

私たちが構築するもの

Reakitは、ReactでさまざまなUIをすばやくまとめることができるコンポーネントのライブラリを提供しています。 これにより、ラピッドプロトタイピングから生産まですべてに最適です。 この記事では、連絡先情報フォームを作成することにしました。

プロジェクトの設定

CreateReactAppを使用して新しいプロジェクトをセットアップします

Reakitは、物事を軽く保つReactにのみ依存しています。 Create React App を活用して、開発をスピードアップします。 Reakitを活用する必要はないことを理解してください。

$ 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！」を生成します。 メッセージ。

まず、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 をチェックして、それが提供するすべての強力な機能を確認してください。 きっと驚かれることでしょう。 今後のプロジェクトでそれを使用したくなるかもしれません。