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は文字列関数のSQL文をインターセプトします

1. left(name,4)は左の4文字をインターセプトしますリスト: SELECT LEFT(2...

VMware IOInsight を使用して、仮想マシンのストレージ パフォーマンスの監視を改良する

例: VMware IOInsight は、VM のストレージ I/O 動作を理解するのに役立つツー...

フロントエンドインタビューに必要なホモロジーとクロスドメインの詳細な説明

序文ご存知のとおり、ブラウザの相同性戦略とクロスドメイン方式も、フロントエンド面接で頻繁に遭遇する問...

CocosCreator の新しいリソース管理システムの分析

目次1. 資源と建設1.1 クリエイターリソースファイルの基本1.2 リソースの構築2. アセットバ...

MySQL 空間データストレージと関数

目次1. データ型1. MySQL空間データとは何か2. GeoJSONとは3. 空間データ型のフォ...

Nginx+Tomcat 負荷分散クラスタのインストールと構成のケースの詳細な説明

目次序文1. Nginx+Tomcat 2. Nginxサーバーを構成する3. Tomcatアプリケ...

W3C チュートリアル (12): W3C SOAP アクティビティ

Web サービスは、アプリケーション間の通信に関係しています。SOAP は、Web サービス間の X...

CentOS の環境変数と設定ファイルの詳細な説明

序文CentOS 環境変数設定ファイル システムは階層型システムであり、他のマルチユーザー アプリケ...

デザインのヒント: きっと気に入っていただけると思います

<br />このタイトルを見ると、見覚えがあるかもしれません。多くのウェブサイトが同様の...

vue+element-uiはヘッドナビゲーションバーコンポーネントを実装します

この記事では、vue+element-uiでヘッドナビゲーションバーコンポーネントを実装するための具...

CSS スクロールバースタイル変更コード

CSS スクロールバースタイル変更コード .scroll::-webkit-scrollbar { ...

MySql ストアド プロシージャ パラメータの初歩的な使用法の詳細な説明

パラメータでのストアドプロシージャの使用IN パラメータは、プロシージャに情報を渡すためにのみ使用さ...

docker compose の使い方の詳しい説明

目次Docker Compose の使用シナリオ基本的なデモ基本的な操作とメンテナンスdocker-...

HTMLコードに基づく画像断片化読み込み機能の実装

今日は断片化された画像の読み込み効果を実装します。効果は次のとおりです。 これを 3 つのステップで...