Antデザインを使用してReactで美しいUIを作成する

投稿日: 2022-04-20 2022-10-09
タグ: React

Ant Design は、エレガントなユーザーインターフェイスを構築するのに役立つ多数の使いやすいコンポーネントを備えたReactUIライブラリです。

中国のコングロマリットAlibabaによって作成されたAntDesignは、Alibaba（もちろん）、Tencent、Baiduなどのいくつかの有名企業で使用されています。 Material-UIはGithubで4万個以上の星を獲得した最も人気のあるReactUIライブラリですが、 Ant Design は現在すぐ近くにあり、すぐにギャップを埋めています。

Ant Designのモバイルバージョンもあり、ここで詳細を学ぶことができます。

入門

このチュートリアルでは、AntDesignのコンポーネントのいくつかを紹介するための基本的なtodoアプリケーションを作成します。最初のステップは、ボイラープレートを設定することです。 create-react-appを使用してこれを行いました。

次に、を追加する必要があります antd プロジェクトへの依存関係：

$ yarn add antd

# or, using npm:
$ npm install antd --save

構築を開始する前に <Todo /> コンポーネントの場合、ルートコンポーネントにそのコンポーネントへの参照を追加します。

index.js

import React from "react";
import ReactDOM from "react-dom";
import Todo from "./todo";

import "./styles.css";

function App() {
  return (
    <div className="App">
      <Todo />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Todoコンポーネントの構築

これで、構築を開始できます <Todo /> 成分。と呼ばれる新しいファイルを開きます todo.js 次の内容で：

todo.js

import React from "react";

export default class Todo extends React.Component {
  render() {
    return (
      <div className="todoContainer">
        <h1>TODO App</h1>
      </div>
    );
  }
}

スタイルシートを編集して、 .todoContainer ページの中央に配置されています。

styles.css

.App {
  font-family: sans-serif;
  text-align: center;
}

.todoContainer {
  width: 75%;
  margin-left: auto;
  margin-right: auto;
}

涼しい！次に、に入力を追加しましょう <Todo /> 成分。提供されているものを使用します antd、ライブラリのCSSファイルもインポートしてください。

todo.js

import React from "react";
import { Input } from "antd";

// Don't forget to include the CSS styles for antd!
import "antd/dist/antd.css";

export default class Todo extends React.Component {
  render() {
    return (
      <div className="todoContainer" />
        <h1>TODO App</h1>

        <Input
          placeholder="What needs to be done?"
        />
      </div>
    );
  }
}

これで、テキスト入力ボックスをレンダリングしています。ただし、何もしません。 ToDoのリストをレンダリングできるように、コンポーネントの状態にコンテンツを追加するための入力が必要です。を使用します onPressEnter 私たちの小道具 <Input /> ユーザーが新しいToDoを送信したことを検出するには：

todo.js

// --- snip ---

export default class Todo extends React.Component {
  constructor() {
    super();

    // Initialize the state
    this.state = {
      todos: []
    };
  }

  handlePressEnter = e => {
    // Create a todo object containing its index and content
    const todo = {
      index: this.state.todos.length,
      content: e.target.value
    };

    // Add the todo to our array
    const newTodos = this.state.todos.concat(todo);

    this.setState({
      todos: newTodos
    });

    // Clear input
    e.target.value = "";
  };

  render() {
    return (
      <div className="todoContainer">
        <h1>TODO App</h1>

        <Input
          placeholder="What needs to be done?"
          onPressEnter={this.handlePressEnter}
        />
      </div>
    );
  }
}

今 handlePressEnter() ユーザーが新しいtodoアイテムを入力するたびにコンポーネントの状態を更新しますが、それでもレンダリングする必要があります。

この目的のために、AntDesignの <List /> 成分。それはそのとして配列を取ります dataSource に渡された関数に応じてプロップしてレンダリングします renderItem 小道具。

todo.js

import React from "react";
import { Input, List } from "antd";

import "antd/dist/antd.css";

export default class Todo extends React.Component {
  // --- snip ---

  render() {
    return (
      <div className="todoContainer">
        <h1>TODO App</h1>

        <Input
          placeholder="What needs to be done?"
          onPressEnter={this.handlePressEnter}
        />

        <List
          {/* emptyText sets the text to display in an empty list */}
          locale={{ emptyText: "No todo items" }}
          dataSource={this.state.todos}
          renderItem={item => (
            <List.Item>{item.content}</List.Item>
          )}
        />
      </div>
    );
  }
}

タダ！これで、基本的なtodoアプリが機能するようになりました。ただし、それを改善するためにできることはまだまだあります。

ファンシーになる

ToDoアプリケーションが稼働しています。ただし、追加する必要があるものは他にもあります。最も重要なのは、削除ボタンです。日付ピッカーも追加します。なぜですか？

私たちを作るのを避けるために <Todo /> 非常に複雑なので、抽出します <List.Item /> 独自の個別のコンポーネントに。また、新しいメソッドを定義します。 removeTodo() インデックスを指定してToDoアイテムを削除します。次に、そのメソッドを新しいコンポーネントに渡します。

削除ボタンとして機能するために、Antを使用できます <Icon /> 成分。に追加します <List.Item />の action コンポーネントの配列を取るprop。アイコンの完全なリストを表示するには、AntDesignWebサイトのこのページを参照してください。

todo.js

import React from "react";
import { Input, List, Icon } from "antd";

import "antd/dist/antd.css";

export default class Todo extends React.Component {
  // --- snip ---

  removeTodo = index => {
    let newTodos = [...this.state.todos];

    // Remove element
    newTodos.splice(index, 1);

    // Decrement greater indexes
    for (let i = index; i < newTodos.length; i++) {
      newTodos[i].index -= 1;
    }

    // Update state
    this.setState({
      todos: newTodos
    });
  };

  render() {
    return (
      <div className="todoContainer">
        <h1>TODO App</h1>

        <Input
          placeholder="What needs to be done?"
          onPressEnter={this.handlePressEnter}
        />

        <List
          locale={{ emptyText: "No todo items" }}
          dataSource={this.state.todos}
          renderItem={item => (
            <TodoItem
              todo={item}
              removeTodo={this.removeTodo}
            />
          )}
        />
      </div>
    );
  }
}

class TodoItem extends React.Component {
  remove = () => {
    // Remove this TodoItem
    this.props.removeTodo(this.props.todo.index);
  };

  render() {
    return (
      <List.Item
        actions={[
          <Icon
            type="close-circle"
            theme="filled"
            onClick={this.remove}
          />
        ]}
      >
        {this.props.todo.content}
      </List.Item>
    );
  }
}

素晴らしい！あとはAntを追加するだけです <DatePicker /> 成分。そのために、更新します handlePressEnter() 追加する方法 date と dateString 状態で保存しているtodoオブジェクトのプロパティ。次に、追加のメソッドが必要になります。 setDate()、これらのプロパティを更新します。

todo.js

import React from "react";
import { Input, List, Icon, DatePicker } from "antd";

import "antd/dist/antd.css";

export default class Todo extends React.Component {
  // --- snip ---

  handlePressEnter = e => {
    // Create a todo object containing its index, content,
    // as well as an empty date
    const todo = {
      index: this.state.todos.length,
      content: e.target.value,
      date: null,
      dateString: ""
    };

    // Add the new todo to our array
    const newTodos = this.state.todos.concat(todo);

    this.setState({
      todos: newTodos
    });

    // Clear input
    e.target.value = "";
  };

  setDate = (index, date, dateString) => {
    // Set the date of the given todo
    let newTodos = [...this.state.todos];
    newTodos[index].date = date;
    newTodos[index].dateString = dateString;

    // Initialize the state
    this.setState({
      todos: newTodos
    });
  };

  render() {
    return (
      <div className="todoContainer">
        <h1>TODO App</h1>

        <Input
          placeholder="What needs to be done?"
          onPressEnter={this.handlePressEnter}
        />

        <List
          locale={{ emptyText: "No todo items" }}
          dataSource={this.state.todos}
          renderItem={item => (
            <TodoItem
              todo={item}
              removeTodo={this.removeTodo}
              setDate={this.setDate}
            />
          )}
        />
      </div>
    );
  }
}

class TodoItem extends React.Component {
  remove = () => {
    // Remove this TodoItem
    this.props.removeTodo(this.props.todo.index);
  };

  handleDateChange = (date, dateString) => {
    // Update the date when changed
    this.props.setDate(this.props.todo.index, date, dateString);
  }

  render() {
    return (
      <List.Item
        actions={[
          <DatePicker
            format="MM/DD/YYYY"
            onChange={this.handleDateChange}
            value={this.props.todo.date}
          />,
          <Icon
            type="close-circle"
            theme="filled"
            onClick={this.remove}
          />
        ]}
      >
        {this.props.todo.content}
      </List.Item>
    );
  }
}

そして、voilà！ 🎉

これで、AntDesignを利用した完全に機能するtodoアプリができました。 Antについて詳しく知りたい場合は、ドキュメントをご覧ください。

この投稿の完全なコードはCodeSandboxにあります。

getdocs

13036