新しいプロジェクトを始めるこの記事では主に、新規プロジェクトを0から1まで取り組むプロセスを記録し、選択、実行、起動という3つのノードを主に記録します。 プロジェクトの選択React のスキャフォールディングの初期化では、コミュニティでより人気があるのは cra (create-react-app) と umi です。以下の点を比較した後、最終的にプロジェクトにより適した umi を選択しました。
最終的に、プロジェクトを迅速に構築する必要があり、多くの成熟したプラグインのサポートが必要であることを考慮して、umi が採用されました。 antdはとても良いです! ! ! @umijs/plugin-model、このプラグインをお勧めします。内部のプラクティスを理解すれば、基本的にデータ管理をマスターできます。 ランタイムUmi は、ランタイムの機能を拡張できるランタイム構成ファイルである app.ts を提供します。簡単に言えば、ページをレンダリングするためのすべての事前操作をここに配置できます。この概念は次のように分類できる。 storybook (preview.js) と比較すると、自分で実装したい場合は、対応する HTML にスクリプトを挿入することができます。ここにはプロジェクト関連のコンテンツがいくつか含まれます。プロジェクトは既存のプロジェクトに埋め込む必要があるため、iframe アプローチを採用します。必然的に、コミュニケーションと iframe サイズの調整が必要になります。 iframe 通信の場合、ドメインが異なるため、window.postmessage が使用されます。データの可読性を維持するために、後のメンテナンスの難易度が増すことを避けるために、対応するイベント送信コンテンツを定義することをお勧めします。頻繁な通信が必要な場合は、マイクロフロントエンドソリューションを採用することをお勧めします。 iframe の適応については、iframe-resizer プラグインが解決に役立ちます。埋め込みと埋め込みの両方をインストールする必要があることに注意してください。そうしないと、通信と適応ができなくなります。ここで問題があります。ページが埋め込まれている場合、bodyノードを内部から展開することはできないため、iframe-resizerが提供するカスタム計算方法を使用して、子ページに該当する方法を提供する必要があります。コードは次のとおりです。 サブシステム 'iframe-resizer/js/iframeResizer.contentWindow.js' をインポートします。 // 埋め込まれている場合は、実行時にリスナーを開きます const iframeInit = () => { if (親 !== ウィンドウ) { (ウィンドウは任意)iFrameResizer = { 高さ計算方法: () => { document.body.children[0].clientHeightを返します。 }, }; window.onmessage = (イベント: 任意) => { Array.isArray(event.data) の場合 { if (event.data[0] === 'イベント名') { console.log(event.data[1]) // イベントパラメータ} } }; parent.postMessage({ msg: 'MessageFromIframePage' }, '*'); } }; iframeInit(); ライブ配信梱包作業を経て、ようやく発売されます。ここでは主に、リクエストを転送するように nginx を構成する方法について説明します。 開発中に、複数の異なるドメインへのインターフェースが必要な場合、フロントエンドの最初の反応はプロキシを構成することです。オンラインになったとき、少し混乱しました。 プロキシ: { '/api': { ターゲット: 'http://aaa.com', 変更元: true、 パス書き換え: { '^/api': '' }, }, '/b-api': { ターゲット: 'http://bbb.com/', 変更元: true、 パス書き換え: { '^/b-api': '' }, }, }, nginxの設定は次のとおりです サーバー{ 聞く 80; server_name アクセス アドレス; $rooturi を "xxxx/dist" に設定します。 場所 ~ .*\.(jpg|jpeg|gif|png|webp|ico|css|zip|tgz|gz|rar|bz2|pdf|txt|tar|wav|bmp|rtf|js|flv|swf|svg|proto)$ { 有効期限は365日です。 ルート $rooturi; } 場所 ^~/api/ { ^/api/(.*)$ /$1 を書き換えて、break; proxy_pass http://aaa.com; } 場所 ^~/b-api/ { ^/b-api/(.*)$ /$1 を書き換えて、break; proxy_pass http://bbb.com; } 位置 / { ルート $rooturi; try_files $uri $uri/ /index.html =404; add_header Cache-Control "no-cache"; アクセス制御許可オリジン * のヘッダーを追加します。 } } これで、React プロジェクトの作成からデプロイまでの実装例に関するこの記事は終了です。React プロジェクトの作成からデプロイまでのより関連性の高い記事については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Windows および Linux で tomcat9 を介して war パッケージを手動で展開する方法
>>: MySQL データベースの Binlog 使用法の概要 (必読)
年、月、週、日グループによる MySQL クエリ1. 学年別検索 SELECT DATE_FORMA...
MySQL の外部キー制約は、2 つのテーブル間のリンクを確立するために使用されます。 1 つのテー...
目次01 CM 02 エントリーポイント03 ワークディレクトリ04 環境05 ユーザー06巻07 ...
まず、/etc/group ファイルを確認します。 [root@localhost /]# cat ...
1. 準備例: 2 台のマシン: 192.168.219.146 (マスター)、192.168.21...
1. css: ドラッグテーブル.css @charset "UTF-8"; ....
要件:ページ コンテンツが短く、ブラウザーの高さをサポートできない場合でも、フッターをウィンドウの下...
この記事の例では、Vueドロップダウンメニューのコンポーネント開発の具体的なコードを参考までに共有し...
--1. mysql用の新しいグループとユーザーを作成する # ユーザー追加 -M -s /sbin...
目次1. 概要2. gdbデバッグ2.1. ブレークポイントを設定する2.1.1. ブレークポイント...
目次mysql マスタースレーブレプリケーションMySQL マスタースレーブレプリケーション方式My...
1: <a> タグを使用してページにリンクする場合、target 属性の役割は誰もが知っ...
端的に言うと、スクロール可能な要素には非常によくある状況があります。通常、スクロールすると、要素が現...
目次要約する要約する配列が変更されると、対応するデータを動的にロードしますシナリオ: 異なるコンポー...
背景基本概念CSS filterプロパティは、ぼかしや色の変化などのグラフィック効果を要素に適用して...