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

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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • React Nativeプロジェクトフレームワークの構築経験
  • ViteでReactプロジェクトを構築する方法
  • webpack5 を使用して 0 から 1 までの React プロジェクトを構築する方法
  • Webpack4とReactフックをベースにプロジェクトを構築する方法
  • React スキャフォールディング プロジェクトをゼロから構築する方法を学ぶ
  • webpack4 をベースにした React プロジェクト フレームワークの構築方法
  • ゼロからReactプロジェクトを構築する

<<:  Dockerfile を使用して SpringBoot プロジェクトをデプロイする方法

>>:  MySQL データベースに基づくデータ制約の例と 5 つの整合性制約の紹介

推薦する

mysql 5.7.18 winx64 パスワード変更

MySQL 5.7.18 が正常にインストールされた後、バージョン 5.7 では空のパスワードでのロ...

Mysql の大きな SQL ファイルの高速リカバリ ソリューションの共有

序文MySQL データベースを使用する過程では、データベースのバックアップと復元が必要になることがよ...

JavaScript インタビュー: 配列の平坦化メソッドを実装する方法

目次1 配列のフラット化とは何ですか? 2 JS標準ライブラリの配列フラット化メソッド3 フラットメ...

MySQL 8.0.15 winx64 のインストールと設定方法のグラフィックチュートリアル (Windows の場合)

この記事では、MySQL 8.0.15 winx64のインストールと設定方法を参考までに紹介します。...

JavaScript の矢印関数と通常の関数の違いの詳細な説明

この記事では、JavaScriptにおけるアロー関数と通常の関数の違いについて解説します。具体的な内...

MySQL の自動増分主キーが使い果たされた場合の対処方法

面接では、次のようなシナリオを経験する必要があります。インタビュアー: 「MySQL を使用したこと...

JavaScript 配列の include と Reduce の基本的な使用法

目次序文配列.プロトタイプ.includes文法パラメータ戻り値例配列プロトタイプの削減文法パラメー...

ネストされた HTML ページの使用例 (フレームセットの使用)

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

クールな充電アニメーションを実現する純粋なCSS

CSS のみを使用してどのような充電アニメーション効果を作成できるかを見てみましょう。バッテリーを...

Linuxネットワーク構成ツールの使用

この記事では、RHEL8 のネットワーク サービスとネットワーク構成ツール、およびネットワーク ファ...

CSS3 フレックスボックス自動記入の書き方を詳しく解説

この記事では、主に CSS3 フレックス エラスティック ボックスの自動塗りつぶしの書き方について詳...

WeChatミニプログラムのすべてのページがログインされていることを確認する方法

目次現状解決さらなる解決策やっと現状WeChat ミニプログラムには、ホームページ、個人ページ、いく...

Vueはel-tree遅延読み込みを使用して、追加、削除、変更、クエリ機能を実装します。

Vue のツリー表示については、プロジェクトが使用されています: エフェクト ダイアグラムがツリー...

HTMLとリソースがどのように読み込まれるかを理解します

このブログのすべてのコンテンツは、クリエイティブ コモンズ ライセンスの下でライセンスされています。...

登録フォームのデザインルール

随分前に「Patterns for Sign Up & Ramp Up」を読み終えました。今...