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 つの整合性制約の紹介

推薦する

要素テーブルの多層ネスト表示の実践

複数の注文を含むリストが必要です。各注文は一意にすることも、複数の注文を結合することもできます。各注...

純粋な CSS3 でモバイルの拡大と縮小の効果を実装するためのサンプル コード

この記事では、純粋な CSS3 を使用してモバイル端末での展開と折りたたみの効果を実装するサンプルコ...

MySQL マルチバージョン同時実行制御 MVCC の実装

目次MVCCとはMVCC 実装MVCC はファントム リードを解決しますか? MVCCとはMVCC ...

Vue で Excel インポート機能を実装する詳細な手順

1. フロントエンド主導の実装手順最初のステップは、ページのインポートボタンをクリックしてExcel...

Dockerプライベートウェアハウスレジストリの導入

使用される Docker イメージが増えるにつれて、イメージを保存する場所、つまりウェアハウスが必要...

NextCloud プライベート クラウド ストレージ ネットワーク ディスクの構築に関する詳細なチュートリアル

Nextcloud は、オープンソースで無料のプライベート クラウド ストレージ ネットワーク ディ...

CSS3を使用してプログレスバー効果を実現し、動的にパーセンテージを追加する

プロジェクト中、プログレスバーを実装するために js の requestAnimationFrame...

CSS scroll-snap スクロールイベント停止と要素位置検出の実装

1. スクロールスナップはフロントエンド開発者にとって必須のスキルですCSS スクロール スナップは...

Docker、プレーヤー機能を備えたCMSオンデマンドシステムを構築

目次文章1. 機械を準備する2. Dockerをインストールする1. 依存パッケージをインストールす...

Nginx サービスを使用してサブドメイン環境を構築し、2D マップの読み込みパフォーマンスを向上させる方法を説明します。

1. 背景最近、友人が大規模なマップの読み込みが遅いという問題に遭遇しました。iServer のパ...

CSS3で実装された炎のアニメーション

成果を達成する実装コードhtml <div class="コンテナ">...

CSSリストのスライドにより、下部に隠れるのを防ぎ、長い画面モデルの処理に適応します。

1. モバイル端末がリストスライドを処理するとき、WeChat には下部にページに戻るボタンが組み...

MySQLはテーブルデータを復元するためにfrmファイルとibdファイルを使用します

目次frm ファイルと ibd ファイルの紹介frm ファイル回復テーブル構造ibd ファイル回復テ...

さまざまなReact状態マネージャーの解釈と使用方法

まず、状態マネージャーとは何か、そしてそれが何をするのかを知る必要があります。複数のページで同じプロ...

Nginxでネットワーク分離を解決した実践記録を詳しく解説

必要最近、Node オンライン サービスを移行する必要があったため、2 つの新しいオンライン サーバ...