これまでの記事はすべて私自身の学習記録であり、主に以前に遭遇した落とし穴を忘れないようにするためのものでした。今回は最も基本的なプロジェクト構築から始めて、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Dockerfile を使用して SpringBoot プロジェクトをデプロイする方法
>>: MySQL データベースに基づくデータ制約の例と 5 つの整合性制約の紹介
1. left(name,4)は左の4文字をインターセプトしますリスト: SELECT LEFT(2...
例: VMware IOInsight は、VM のストレージ I/O 動作を理解するのに役立つツー...
序文ご存知のとおり、ブラウザの相同性戦略とクロスドメイン方式も、フロントエンド面接で頻繁に遭遇する問...
目次1. 資源と建設1.1 クリエイターリソースファイルの基本1.2 リソースの構築2. アセットバ...
目次1. データ型1. MySQL空間データとは何か2. GeoJSONとは3. 空間データ型のフォ...
コードをコピーコードは次のとおりです。 <input type="text"...
目次序文1. Nginx+Tomcat 2. Nginxサーバーを構成する3. Tomcatアプリケ...
Web サービスは、アプリケーション間の通信に関係しています。SOAP は、Web サービス間の X...
序文CentOS 環境変数設定ファイル システムは階層型システムであり、他のマルチユーザー アプリケ...
<br />このタイトルを見ると、見覚えがあるかもしれません。多くのウェブサイトが同様の...
この記事では、vue+element-uiでヘッドナビゲーションバーコンポーネントを実装するための具...
CSS スクロールバースタイル変更コード .scroll::-webkit-scrollbar { ...
パラメータでのストアドプロシージャの使用IN パラメータは、プロシージャに情報を渡すためにのみ使用さ...
目次Docker Compose の使用シナリオ基本的なデモ基本的な操作とメンテナンスdocker-...
今日は断片化された画像の読み込み効果を実装します。効果は次のとおりです。 これを 3 つのステップで...