react+antdプロジェクトをゼロから構築する方法を教えます

これまでの記事はすべて私自身の学習記録であり、主に以前に遭遇した落とし穴を忘れないようにするためのものでした。今回は最も基本的なプロジェクト構築から始めて、ReactとAntdをベースにバックグラウンド管理システムを作っていきます。ステップバイステップで進めていくので、この記事を読んだ後には、Reactを知らなくても、Reactを使って簡単なプロジェクトを作ることができるようになるはずです。さっそく始めましょう。完全なプロジェクトを表示するには GitHub にアクセスし、ここをクリックして体験してください。大丈夫だと思ったら星を付けてください、ありがとうございます。

1. 開発環境:

ノード.js -v 12.16.3

作成-react-app -v 3.4.1

antd -v 4.3.3

プロジェクトを開始する前に、create-react-app をグローバルにインストールしてください。macOS の場合は、コマンドの前に sudo を追加してください。そうしないと、ハードディスクにアクセスする権限がないというエラーが発生します。

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

2. プロジェクトの構築：

スキャフォールディング ツール create-react-app の指示に従ってプロジェクトを直接初期化します。この記事では tsx を使用します。 jsx バージョンが必要な場合は、テンプレート設定をスキップしてください。ここでは、JavaScript の構文糖である jsx について簡単に紹介します。これは react によって構築されています。マルチプラットフォームを実現するために、 react は js に基づいていくつかの合成イベントをカプセル化します。たとえば、React の onClick イベントは、実際にはネイティブ js の click イベントとは異なります。

ディレクティブの jsx バージョンは次のとおりです。

npx create-react-app プロジェクト名

tsx バージョンは次のとおりです。

インストールが完了するのを待った後、プロジェクトの初期化が完了しました。

次に、プロジェクト ディレクトリに移動します: cd react-admin (これをプロジェクト名に置き換えます) し、コマンドを実行して開発モードに入ります。

npm スタート

では本題に入ります。 react にはデフォルトではルーター機能がないので、 react-router と react-router-dom をインストールする必要があります。

状態管理が必要な場合は、redux、react-redux、redux-actions をインストールできます。

オンデマンドでロードする必要がある学生は、@loadable/component をインストールできます。ts バージョンではエラーが報告される可能性があることに注意してください。問題を解決するには、loadable.d.ts ファイルを作成し、その中に次のコードを記述します。

モジュール '@loadable/component' を宣言します。

loadash を使用する必要がある学生は、自分で loadash をインストールできます。

次に、antd コンポーネント ライブラリをインストールします。

npm i antd react-router react-router-dom redux react-redux redux-actions @types/redux-actions @types/react-router-dom @loadable/component axios loadash --save

デフォルトでは、create-react-app は sass を使用します。less などの他の CSS プリプロセッサを使用する必要がある場合は、自分でインストールしてください。

また、ここで少し脱線させてください。 create-react-app はデフォルトで react-scripts を使用するため、webpack 構成は変更できません。 webpack の設定を変更する必要がある場合、次の 2 つの解決策があります。

1. react-app-rewired などのコミュニティのサードパーティ ライブラリを使用します。

2. コマンド npm run eject を実行します。これにより、現在のディレクトリにスクリプトと構成フォルダーが生成されます。 webpack の設定を変更できます。注意: この操作は永続的であり、元に戻すことはできません。

これらの基本ライブラリをインストールした後、トピックに戻ります。プロジェクト ディレクトリを初期化します。ディレクトリ構造は好みに応じて設定できます。私のディレクトリ構造は次のとおりです。

次に、ルーターディレクトリを開き、router.tsx のコードを記述します。ここではメインコードのみを示します。

次に、配列を使用してルート構成を完了できます。次に例を示します。

'@loadable/component' から loadable をインポートします。
'react-router' から RouteComponentProps をインポートします。

const Index = loadable(() => import('../pages/index'));
const Login = loadable(() => import('../pages/login'));

エクスポートインターフェース RouteConfigProps {
  パス: 文字列、
  正確: ブール値、
  コンポーネント: React.ComponentType<RouteComponentProps<any>> | React.ComponentType<any>,
  id: 番号、
  名前?: 文字列、
  ルート?: 配列<RouteConfigProps>
}
エクスポートconst routeConfig: Array<RouteConfigProps> = [
  {
    パス: '/login',
    正確: 真、
    コンポーネント: ログイン、
    id: 1,
    名前: 'ログイン',
    ルート: []
  },
  {
    パス: '/index',
    正確: 偽、
    コンポーネント: インデックス、
    id: 2,
    名前: 'ホームページ',
    ルート: []
  }
]

次に、ルーティング構成を app.tsx にインポートし、いくつかの antd 構成を整理しましょう。

'react' から React をインポートします。
import { Provider } from 'react-redux'; // redux によって提供されるプロバイダー。
import zhCN from 'antd/es/locale-provider/zh_CN'; // antd 中国語パッケージ import { HashRouter } from 'react-router-dom'; 
'./router' から { MyRouter } をインポートします。 // router.tsx
'antd' から { ConfigProvider、message、notification } をインポートします。 
import storeConfig from './store'; // redux warehouseimport moment from 'moment'; // momentjs.
import 'moment/locale/zh-cn'; // 中国語パッケージ moment.js
import 'antd/dist/antd.css'; // antd のスタイルシートをインポート import './App.css'
moment.locale('zh-cn'); // moment.js を中国語に設定します。const store = storeConfig(); // redux ストアを初期化します。状態マネージャーが必要ない場合は、redux 関連の情報は無視できます。

message.config({ // Antd のメッセージ コンポーネント設定、期間は秒単位、maxcount は表示される期間の最大数: 2、
  最大数: 2
});
通知.config({
  placement: 'topRight', // antd 通知コンポーネントの構成、配置ポップアップの位置。ボトム 継続時間中のボトムからの距離（秒単位）ボトム：50、
  期間: 2,
});
関数App() {
  戻る （
    <プロバイダーストア={store}>
      <ConfigProvider ロケール = {zhCN}>
        <ハッシュルーター>
          <マイルーター />
        </ハッシュルーター>
      </ConfigProvider>
    </プロバイダー>
  );
}

デフォルトのアプリをエクスポートします。

これで完了です。次のステップは、必要なコンポーネントを記述することです。

react+antd プロジェクトをゼロから構築する方法を説明するこの記事はこれで終わりです。 react+antd プロジェクトの関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続きご覧ください。 今後も 123WORDPRESS.COM を応援していただければ幸いです。