反応とは何ですか？アントデザインとは何ですか？

react は Facebook がユーザー インターフェイスを構築するために立ち上げた JavaScript 開発フレームワークで、主に UI の構築に使用され、インタラクティブな UI を簡単に作成できます。 Ant Design は、Alibaba Ant Financial チームによって React に基づいて開発された UI コンポーネントです。主にミドルおよびバックエンド システムに使用されます。TypeScript を使用して構築され、完全な型定義ファイルを提供します。

#このチュートリアルの動作環境: Windows7 システム、react18 バージョン、Dell G3 コンピューター。

反応とは何ですか?

#React は、ユーザー インターフェイスを構築するための JavaScript ライブラリです。Facebook の内部プロジェクトとして誕生しました。Facebook は、市場に出回っているすべての JavaScript MVC フレームワークに満足していなかったので、 Instagram Web サイトのセットアップに使用される独自の Set を作成します。作ってみてこのセットがとても便利だったので、2013年5月にオープンソース化しました。

React は、ユーザー インターフェイスを構築するための宣言的で効率的かつ柔軟な JavaScript ライブラリです。 React を使用すると、短い独立したコード スニペットを組み合わせて複雑な UI インターフェイスを作成できます。これらのコード スニペットは「コンポーネント」と呼ばれます。

React の設計思想は非常にユニークであるため、革命的なイノベーションであり、優れたパフォーマンスを備えており、コード ロジックは非常にシンプルです。そのため、将来の Web 開発の主流のツールになるのではないかと考え、注目し、使用する人が増えています。

React は、HTML にレンダリングされたデータのビューを提供するオープン ソースの JavaScript ライブラリです。 React ビューは通常、カスタム HTML タグで指定された他のコンポーネントを含むコンポーネントを使用してレンダリングされます。 React は、子コンポーネントが外部コンポーネントに直接影響を与えないモデル、データ変更時の HTML ドキュメントの効率的な更新、最新のシングルページ アプリケーションにおけるコンポーネント間の明確な分離をプログラマーに提供します。

React を使用すると、インタラクティブな UI の作成が簡単になります。データが変更されたときに React が効率的にコンポーネントを更新し、正しくレンダリングできるように、アプリ内のすべての状態に対して簡潔なビューを設計します。コンポーネント ロジックはテンプレートではなく JavaScript で記述されるため、アプリ内でデータを簡単に受け渡し、状態を DOM から切り離して維持できます。

React の特徴

• 宣言型設計: React は宣言型パラダイムを採用しているため、アプリケーションの記述が容易になります。

• 効率的: React は DOM をシミュレートすることで、DOM との対話を最小限に抑えます。

• 柔軟性: React は既知のライブラリやフレームワークとうまく連携します。

• JSX: JSX は JavaScript 構文の拡張です。 JSX は React 開発には必須ではありませんが、推奨されます。

• コンポーネント: React を通じてコン​​ポーネントを構築すると、コードの再利用が容易になり、大規模プロジェクトの開発にうまく適用できます。

• 一方向応答データ フロー: React は一方向応答データ フローを実装しているため、重複するコードが削減されます。そのため、従来のデータ バインディングよりもシンプルになります。

React をマスターすると、フロントエンド アプリケーション開発に対処できるだけでなく、そのプログラミングのアイデアは React Native ネイティブ アプリ開発やサーバーサイドのバックエンド開発にも適用できます。レンダリング。したがって、フロントエンド開発に従事しているかどうかに関係なく、React を学ぶことはスキルの向上とキャリア開発に非常に役立ちます。

Ant デザインとは何ですか?

Ant Design は、Alibaba Ant Financial チームによって React に基づいて開発された UI コンポーネントで、主にミッドエンドおよびバックエンド システムの使用に使用されます。

公式ウェブサイト: https://ant.design/index-cn

## 機能:

#エンタープライズ レベルのミドルおよびバックエンド製品のインタラクティブな言語とビジュアル スタイルから抽出されています。
すぐに使える高品質な React コンポーネント。
TypeScript を使用して構築され、完全な型定義ファイルが提供されます。
フルリンクの開発および設計ツール システム。

はじめに

Ant Design の紹介
Ant Design はいエンタープライズレベルの製品を提供する設計システムであり、コンポーネント ライブラリはその React 実装であり、antd は開発者がインストールして使用できる npm パッケージとして公開されています。

開発には npm または Yarn を使用できます。開発環境で簡単にデバッグできるだけでなく、安全にパッケージ化して実稼働環境にデプロイすることもでき、エコシステム全体とツールによってもたらされる多くのメリットを享受できます。鎖。

$ npm install antd --save
$ yarn add antd

umi では、プラグイン セット umi-plugin-react で antd を構成することで、antd プラグインを開くことができます。antd プラグインは、antd の導入とオンデマンド コンパイルの実装に役立ちます。

config.js ファイルで設定します:

export default {
    plugins: [
        ['umi-plugin-react', {
            dva: true, // 开启dva功能
            antd: true // 开启Ant Design功能
        }]
    ]
};

小さなテスト
次に、antd コンポーネントの使用を開始します。例としてタブ コンポーネント、アドレス: https://ant.design/components/tabs-cn/

効果:

公式の例を参照してください。それを使用して、MyTabs.js ファイルを作成します:

import React from 'react'
import {Tabs} from 'antd'

const TabPane = Tabs.TabPane;
const callback = (key) => { console.log(key);
}

class MyTabs extends React.Component {
    render() {
        return (
            <Tabs defaultActiveKey="1" onChange={callback}>
                <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
                <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
                <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
            </Tabs>
        )
    }
}
export default MyTabs;

効果:

この時点で、antd コンポーネントの基本的な使い方をマスターしました。

[関連する推奨事項: Redis ビデオ チュートリアル ]

以上が反応とは何ですか？アントデザインとは何ですか？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。