React Webの目的と重要性は非常に明確です。WebでNative Native CodeをWebで実行し、さまざまなモバイル端子でコードのセットを実行します。フロントエンドとビジネスの場合、これは開発効率の質的改善です。プロジェクトの初期段階では、同様の質問でReactチームにも相談しました。チーム@vjeuxの中核クラスメートは、これが非常にクールなことであり、将来彼らがやりたいことだと考えました。 AndroidのNative NativeのReactがリリースされる可能性があります。 （YY）
技術アーキテクチャ
Reactネイティブに基づいたいくつかの適応ソリューションがあります：
1.ブリッジ標準を開発し、RNとRWはそれぞれこの一連の標準を最適な方法で実装します。
たとえば、フレックスレイアウトに基づいて、一貫したフレックスコンポーネント、<flex>、<cell>などを実装します。
2。RNと完全に整合すると、RWはRNが実装できるすべてのAPIを実装します。
議論では、後者が最終的に選ばれました。
React Webの概念のため、React Native CodeがWeb側で実行されると、RWはRNから分離された構造とパッケージツールであり、RWの実装はそれほど重要ではないと判断します。次に、全体的な技術的方向性が非常に明確です。RN一貫したスタイル、コンポーネント、APIを実装し、最終的に構築ツールを介してWebバージョンにコンパイルします。
例
React Webプロジェクトの作成プロセスを見てみましょう。
ステップ1：React Webをインストールし、関連する構成を実行します
このステップは、主にReact-Webパッケージと関連依存関係をインストールし、Webpackパッケージスクリプトを構成することです。
このステップを簡素化するために、コマンドラインツールReact-Web-Cliを開発しました。これには、2行のコマンドの実行のみが必要です。同時に、コマンドラインツールは、デバッグサーバー、パッケージング、その他の機能の開始もサポートします。これは後で導入されます。
CLIツールのインストール：
NPMインストールReact-WEB-CLI -G
React Webなどをインストールして構成します。
React-Web init <Current Project Directory>
実行が完了すると、NPMインストール関連ライブラリがプロジェクトディレクトリに作成され、Web/webpack.config.jsファイルが自動的に作成され、書面による構成が含まれています。この時点で、ディレクトリ構造は次のとおりです。
.├。Readme.md├。─レスAndroid/├··しかindex.android.js├。）
ステップ2：エントリファイルを追加して、関連する構成を作成します
各プロジェクトにはエントリファイルが必要です。これは通常、他のコンポーネントを導入および呼び出し、index.ios.jsなどのプロジェクトを初期化するために使用され、iOSプラットフォーム上のプロジェクトのエントリファイルを表します。 Reactネイティブファイルの命名仕様に準拠するために、インデックスを入力ファイルとしてindex.web.jsを作成し、ファイルがWebpackのエントリファイルであることを指定する必要があります。 Web/webpack.config.jsファイルを開き、構成変数を変更します。
var config = {paths：{src：path.join（root_path、 '。'）、index：path.join（root_path、 'index.web'）、}、};次に、index.web.jsファイルを作成します。このファイルは実際にはindex.ios.jsに非常に似ていますが、わずかに異なります。主な違いは、iOSがappregistry.registerComponent（ 'awes'、（）=> awes）のみを必要とすることです。 XcodeのネイティブコードがJSコードを受信および処理できるようにするには、Web側を使用する前にDOMノードに挿入する必要があります。したがって、index.web.jsの下部に次のコードを追加する必要があります。
appregistry.registerComponent（ 'awes'、（）=> awes）; if（platform.os == 'web'）{var app = document.createelement（ 'div'）; document.body.appendChild（app）; appregistry.runapplication（ 'awes'、{roottag：app}）;}次に、プラットフォームコンポーネントを上部に導入する必要があります。このようにして、構成部分が処理されました。 React-Webスタートコマンドを実行して、デバッグサーバーを起動します！
自由に変更できます。これは、React Native Simulatorの経験とほぼ同じです。
ステップ3：Webバージョンコードをテストしてパッケージ化します
Webサイドの変更と開発とテストが完了したら、パッケージ化および公開できます。 React-Web-Cliツールによってパッケージ化されたコマンドは次のとおりです。
React-Webバンドル
パッケージング後、ファイルはWeb/出力/ディレクトリに保存されます。 index.htmlを直接開くことができます（アプリが操作を要求した場合、ローカルサーバーからチェックする必要があります）。その後、チェック後に公開できます。
このプロセス中に何が起こったのですか？
好奇心の強い学生は、これを見たときにいくつかの質問があるかもしれません。上記のコマンドラインツールのコマンドは何をしましたか？ React WebパッケージがネイティブコードをWeb側で使用したコードのコピーに反応するのはなぜですか？ React Webは安全で信頼性がありますか？中のものは何ですか？
ここでは、React Webの実装原則と、ステップが実際に行ったことを簡単に紹介します。
React Web実装は、Webサイドでネイティブコンポーネントを反応させる
Reactは、コードをプラットフォーム環境から分離し、レイヤーを追加して、開発者がプラットフォーム環境レベルで何らかの処理を行うことができるようにし、同じコードがより多くのプラットフォーム環境などに適応できるようにします。
たとえば、React-CanvasはReactの構文に従ってコードを書き込み、プラットフォーム環境レベルで処理を行い（Reactコードを実行してキャンバスでレンダリングします）、特定の目標（モバイル側のパフォーマンスの向上）を達成します。
Reactネイティブでは、iOSとAndroidで同時に実行するコードが同時に実行される場合も同じことが当てはまります。 Reactネイティブチームは、対応するプラットフォームのネイティブアプリでいくつかの処理を行い、React構文を実行するコードを解析できるようにします。
同型アプリケーションもあります。サーバーはReact + node.jsを使用してHTMLを生成し、クライアントはReactを使用してクライアント関連の相互作用と機能を取得します。同じことが当てはまります。
この目的のために、React V0.14.xバージョンは2つのライブラリ、ReactとReact-Domから始まり、実際にブラウザプラットフォームの特別な処理を剥奪し、それをReact-Domライブラリだけに変えました。
Reactネイティブの特別な点は、コンポーネントの最低レベルの実装はネイティブの実装であるため、SpanやDivなどのタグをサポートしていないことです。アニメーションなども、インターフェイスレンダリングのためにネイティブを直接呼び出します。したがって、Web側はサポートされていませんが、ほとんどのコンポーネントはWebテクノロジーを使用してシミュレートおよび実装できます。アニメーションはCSS3で使用でき、基本要素は同じHTMLタグでシミュレートでき、レイアウトと互換性の問題はCSSで処理できます。そのため、React WebはWebテクノロジーを使用してReactネイティブコンポーネントを再実装する必要があり、このレイヤーの助けを借りて、複数のプラットフォームにコードを実装できます。
非常に簡単な例を示すために、テキストコンポーネント：
Reactネイティブの実装は、Reactネイティブの基礎となるコード実装の多くを呼び出します。
Web側の場合、<Span>タグを使用してテキストの行を出力するだけで、React Webの実装は<Span>タグを直接作成します。いくつかのイベントなどをバインドすることは問題ありません。
自信を持ってUIエクスプローラーデモで実行できるReactネイティブコンポーネントを使用できます。
Webpackは、パッケージングのターゲットを切り替えるのに役立ちます
Web側と互換性のあるコンポーネントを作成した場合、要件（ 'React-Web'）でパッケージ化するコンポーネント内のすべての必要な（「React-Native」）を交換する必要はありませんか？それ以外の場合は、Webコンポーネントを使用してパッケージ化するにはどうすればよいですか？
強力なWebpackには、この問題を解決するのに役立つエイリアス構成アイテムが付属しています。
Resolve：{alias：{'React-native'： 'React-Web'、 'ReactnativeArt'： 'React-Art'、}、拡張：[''、 '.JS'、 '.jsx']、}、このようにして、パッケージングの場合、必要なすべての場所（「React-Native」）がReact-WEBパッケージに置き換えられ、React-Webのモジュール。ExportsはReact-Nativeと一致しているため、コードは交換せずに機能します。
さらに、別の導入方法をプラグインで実装できます。以下を参照してください。
パフォーマンスを向上させるために、急いでコンポーネントを紹介します
CommonJS仕様をサポートするWebpackおよびその他のパッケージツールは、ファイル内のすべてのコンポーネントを一緒にパッケージ化します。 Reactネイティブの場合、コードのサイズは無関係ですが、モバイルWebの場合、もう少し重要です。特に、プロジェクトがテキストコンポーネントのみを必要とする場合は、必要（「React-Web」）がすべてのコンポーネントを梱包するため、悲しいことです。
WebPackプラグインに基づいて、この問題を解決するためにコンポーネントを導入する別の方法があります。急いで呼ぶことができます。この方法では、WebpackプラグインHast-Resolver-Webpack-Pluginをロードする必要があります。デフォルトのWebpack構成がロードされています。次のように、コンポーネントで直接使用できます。
var text = require（ 'ReactText'）;
前のことの代わりに：
var {text} = require（ 'React-native'）;このようにして、Webpackがパッケージ化されると、前者はそのコンポーネントのコンテンツのみをパッケージ化し、サイズを縮小してパフォーマンスを向上させることができます。これはどのように達成されますか？
プラグインのWebpackがロードされると、すべてのコンポーネントが最初にスキャンされ、コンポーネントヘッダーの@ProvidesModuleの情報（テキストコンポーネントの情報など）があり、その後、他のファイルでコンポーネント名が必要な場合、ファイルはパッケージ用に自動的に配置されます。同時に、プラットフォームを区別することもできます。同じ名前であっても、対応するファイルをパッケージ化するときにプラットフォームが区別されます（ファイルはindex.xxx.jsの命名ルールに従って決定されます）。