React+Ant Design開発環境をセットアップするための実装手順

React+Ant Design開発環境をセットアップするための実装手順

基礎

1. スキャフォールディングを使用してプロジェクトを作成し、開始する

1.1 足場を設置する:

npm インストール -g 作成-react-app

1.2 スキャフォールディングを使用してプロジェクトを作成する:

React アプリの作成、antd の起動、デモ

antd-start-demo はプロジェクト名です。

1.3 起動

npm スタート

2. npmをyarnに変換する

2.1 yarnをインストールする:

npm インストール -g 糸

2.2 yarnの現在のイメージソースを取得します。

yarn config レジストリを取得する

2.3 Taobaoミラーとして設定する:

yarn config レジストリ 'https://registry.npm.taobao.org' を設定します

2.4 一般的なコマンド:

yarn init --initialize yarn add --add module yarn remove --remove module yarn /yarn install --install dependency in the project

プロジェクト構築

2.1 react-router 4.0、axios、less-loaderをインストールする

yarn react-router-dom axios less-loader を追加します

2.2 webpack設定の公開

糸排出

ヒント: yarn ejectを実行してエラーが発生した場合

ここに画像の説明を挿入

ファイルを変更した後、yarn eject コマンドを使用すると、上記のエラーが報告されます。これは、scaffolding を使用してプロジェクトを作成したときに、.gitignore ファイルが自動的に追加されたが、ローカル ウェアハウスがないためです。このときは、次のコマンドを実行して、プロジェクトをローカル ウェアハウスに追加してから実行します。
解決:

git を追加します。
git コミット -m 'init'
糸排出

次に、yarn eject を実行します。

ここに画像の説明を挿入

webpack の設定

2.3 less-loaderの設定

Antd は less をベースに開発されています。less を使用すると、テーマの色やその他の構成を簡単に変更できます。

lessモジュールをインストールします: yarn add [email protected]

config/webpack.config.dev.js を開き、次の構成を追加します。

{
      テスト: /\.less$/,
      使用: [
       require.resolve('スタイルローダー'),
       {
        ローダー: require.resolve('css-loader'),
        オプション: { importLoaders: 1 },
       },
       {
        // PostCSS のオプション。これらのオプションを 2 回参照します。
        // 指定したブラウザのサポートに基づいてベンダープレフィックスを追加します
        // パッケージ.json
        ローダー: require.resolve('postcss-loader'),
        オプション:
         // 外部 CSS インポートが機能するために必要
         // https://github.com/facebook/create-react-app/issues/2677
         識別子: 'postcss',
         プラグイン: () => [
          'postcss-flexbugs-fixes' が必要です。
          'postcss-preset-env' が必要です({
           自動プレフィックス: {
            フレックスボックス: 'no-2009',
           },
           ステージ: 3,
          })、
         ]、
        },
       },
       { ローダー: require.resolve('less-loader') }
      ]、
},

図に示すように同じレベルでcssloadを構成するには

ここに画像の説明を挿入

画像の例 注: webpack.config.dev.js に追加された構成部分は、webpack.config.prod.js でも構成する必要があります。そうしないと、プロジェクトがリリースされた後にエラーが発生し、プログラムを実行できなくなる可能性があります。

2.4 antdをインストールする

糸を追加 antd

2.5 テスト使用

"antd"から{Button}をインポートします。
'antd/dist/antd.css' をインポートします。

...
 与える() {
  戻る (
   <div>
     <Button>クリック</Button>
   </div>
  );
 }
...

注: デフォルトでは、インストールされた antd はスタイルを有効にするために antd/dist/antd.css をインポートする必要があります。ただし、多くの場合、一部のコンポーネントのみを使用し、antd スタイル ファイル全体をインポートするため、損失する価値はありません。そこでオンデマンドローディングが誕生しました。

2.6 antd オンデマンド読み込み
1. babel-plugin-importを追加します。

yarn に babel-plugin-import を追加

2. webpack設定を開いて検索: JS with Babel

次の構成を見つけます。

// Babel を使用してアプリケーション JS を処理します。
     // プリセットには、JSX、Flow、TypeScript、およびいくつかの ESnext 機能が含まれています。
     {
      テスト: /\.(js|mjs|jsx|ts|tsx)$/,
      インクルード: paths.appSrc、

      ローダー: require.resolve('babel-loader'),
      オプション:
       カスタマイズ: require.resolve(
        'babel-preset-react-app/webpack-overrides'
       )、
       
       プラグイン: [
        [
         require.resolve('babel-plugin-named-asset-import'),
         {
          ローダーマップ: {
           svg: {
            Reactコンポーネント: '@svgr/webpack?-prettier,-svgo![パス]',
           },
          },
         },
        ]、
       ]、
       キャッシュディレクトリ: true、
       // 時間がそれほど重要でない場合はディスク容量を節約する
       キャッシュ圧縮: true、
       コンパクト: true、
      },
     },

プラグインを変更して以下を追加します:

["import", { "libraryName": "antd", "style": true }]

この時点で、CSS ファイルの導入をキャンセルできます。Babel は、導入されたコンポーネントに基づいて、デフォルトで対応する CSS を自動的にロードします。

2.7 テーマカラーを変更する

 {
        ローダー: require.resolve('less-loader'),
        オプション:
         モジュール: false、
         変数の変更: {
          "@プライマリカラー": "#f9c700"
         }
        }
       }

webpack の less の設定で変更できます。 @primary-color は antd に組み込まれた less 変数です。テーマの色を変更するには、デフォルトの設定を上書きするだけです。

注: yarn run start を実行するとエラーが報告されます ValidationError: 無効なオプション オブジェクト。Less Loader はオプション オブジェクトを使用して初期化されています

解決策: less-loader をアンインストールし、[email protected] をインストールします。

糸を取り除く 少ないローダー
yarn [email protected] を追加します

React+Ant Design開発環境の構築手順については以上です。React Ant Design構築に関するより詳しい内容については、123WORDPRESS.COMの過去の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • React Ant ツリーテーブルの複雑な追加、削除、変更操作を設計する
  • React ant Designはフォームの値を手動で設定します
  • React+antデザインはテーブルの追加、削除、変更のためのサンプルコードを実装します
  • React プロジェクトで AntDesign を使用する方法

<<:  Docker の詳細なイラスト

>>:  Linux オペレーティング システムでよく使用される MySQL コマンドの概要

推薦する

JavaScript 非同期プログラミングにおける Promise の初期の使用法の詳細な説明

1. 概要Promise オブジェクトは、ES6 で提案された非同期プログラミングの仕様です。非同期...

Nginx ログ管理の概要

Nginx ログの説明アクセス ログを通じて、ユーザーの地理的起源、ジャンプ元、使用端末、特定の U...

HTMLのテーブルタグの基本学習チュートリアル

表ラベルの構成HTML 内の表は <table> タグで構成されており、ブラウザはタグを...

Linux で履歴レコードを表示し、タイムスタンプを追加するためのヒント

Linux で履歴レコードを表示し、タイムスタンプを追加するためのヒントbashに詳しい人なら、hi...

CSSレコードテキストアイコン配置のいくつかのソリューション

開発中に画像とテキストが 1 行に表示されることはよくあります。2 つのインライン要素を揃えるのは通...

MySQL の一般的なログの概要

序文: MySQL システムには、さまざまな種類のログが存在します。さまざまなログにはそれぞれ独自の...

JavaScript ループトラバーサルの 24 種類のメソッドをすべてご存知ですか?

目次序文1. 配列走査法1. 各() 2. マップ() 3. 〜のために4. フィルター() 5. ...

MySQL 5.7 でルートパスワードを忘れた後に変更する方法の詳細なチュートリアル

序文長い間、MySQL のアプリケーションおよび学習環境は MySQL 5.6 以前のバージョンであ...

Nginx アップロードファイルのサイズを変更する簡単な方法

オリジナルリンク: https://vien.tech/article/138序文私は、マークダウン...

検証コードケースのJavaScript実装

この記事では、検証コードの効果を実現するためのJavaScriptの具体的なコードを参考までに共有し...

OpenLayersはポイントフィーチャーレイヤーの集約表示方法を実現します

目次1. はじめに2. ポイントフィーチャーレイヤーの集約3. 重合の特殊処理4. 重合の特殊処理 ...

データベースクエリ、どのオブジェクトにどのフィールドが含まれているか、メソッドステートメント

データベースは、どのオブジェクトにどのフィールドが含まれているかを照会します。 *を選択 sysob...

ウェブページ作成に役立つコード

<br />ホームページの右側にあるスクロールバーを削除するにはどうすればよいですか? ...

MySQLの行ロックとテーブルロックの意味と違いの詳細な説明

1. はじめに行ロックとテーブルロックの違いは面接で頻繁に出てくるはずです。MySQL のロックにつ...

Linux でファイルの作成時間を取得する方法と実践的なチュートリアル

背景ファイルの作成時刻を取得する必要がある場合があります。例えば: 「xtrabackup スキーマ...