React での UI コンポーネントライブラリ antd の基本的な使用法

1. UIコンポーネントライブラリを使用する理由

UI コンポーネントライブラリを使用すると、次のような利点があります。

1. 効率の向上: UI コンポーネントライブラリを使用すると、統一されたスタイルの UI 要素を迅速に生成できるため、フロントエンド開発者は個々の UI 要素を最初から作成する必要がなくなり、時間とエネルギーを節約できます。

2. 一貫性の向上: UI コンポーネントライブラリの設計は通常、プロのデザイナーによって慎重に設計およびテストされ、アプリケーション全体のすべての UI 要素の外観と動作が一貫していることが保証されます。

3. 保守が容易: UI コンポーネントライブラリ内のコンポーネントは互いに独立しているため、開発者はコンポーネントライブラリを使用すると、アプリケーション全体に影響を与えることなく、コードの一部を保守および変更することが容易になります。

4. ユーザーエクスペリエンスの最適化: UI コンポーネントライブラリは、ユーザーインターフェイス上の事前定義された対話方法と視覚効果を提供しており、これらの方法はユーザーエクスペリエンスを向上させ、ユーザーの満足度を向上させることが証明されています。

つまり、UI コンポーネントライブラリを使用すると、フロントエンド開発の効率、一貫性、保守性が向上し、ユーザーエクスペリエンスも向上するため、最新の Web アプリケーションの開発では UI コンポーネントライブラリの使用を検討する必要があります。

2. UIコンポーネントライブラリantdの利用

2.1. antd の公式 Web サイト: antd 公式 Web サイト
2.2. antd のインストール

npm i antd

2.3. 基本的な使い方
まず、公式 Web サイトで使用したいコンポーネントスタイルを見つけます。例:
この青いボタンを使用したい:
ここに画像の説明を挿入します
次に、コードを表示するには赤い丸をクリックするだけです:

Ts またはJs コード (ここでは js コードを例にしています):
必要なのは最初のボタンのスタイルなので、最初のボタンをコピーしてコードに追加します。

import React, {
    
     Component } from 'react'
// 标签样式库
import {
    
     Button} from 'antd';
export default class App extends Component {
    
    
  render() {
    
    
    return (
      <div>
        App....
        <button>点我</button>
        <Button type="primary">Primary Button</Button>
      </div>
    )
  }
}

スタイルライブラリを忘れずに導入してください。import { Button} from 'antd';
ネイティブボタンと比較して効果を見てみましょう。
ここに画像の説明を挿入します

さらに詳しいテクニックについては、公式 Web サイトのドキュメントから学ぶことができ
ます。