まず、このフレームワークを学ぶ前に、次の知識をある程度理解する必要があります。
1。ネイティブJSの基本
2。CSSの基本
3.NPMパッケージ管理の基本
4。Webpackビルドプロジェクトの基本
5.ES6仕様
上記の5つの知識ポイントは、他のフロントエンドフレームワークを学習する際に理解しなければならない事前タスクでもあります。
JSとCSSについてはあまり言いません。 NPMは、現在最も提唱され、支配的なパッケージ管理ツールです。まだBowerやその他のツールを使用している場合は、考慮することができます。新世代のパッケージングツールとして、Webpackはすでにフロントエンドのパッケージツールを支配しており、Browserifyに比べて大きな利点があります。 ES6仕様については、主流のブラウザは現在互換性がありませんが、Babelなどのコンバーターを使用して変換できます。
他の主流のフロントエンドフレームワークを組み合わせて、私は個人的に、コンポーネント、ルーティング、および州管理の単一ページアプリケーションを構築するための3つの基本的なものがあると信じています。次に、これらの3つに基づいてReactを紹介します。もちろん、そこに散在する追加の知識ポイントがいくつかあります。
コンポーネント
Reactのコンポーネントの書き込みと呼び出しは、主にES6のモジュール性とJSX構文に依存します。これが例です：
// main.jsimportは、「React-dom'import myComponent from './component.js'import' ./main.css'imporent './main.css'imporents.mydemo expends rouct.component {render（）{return（<div classname = "box"> <mycomponent/> </> </> </> </> </> </> </> </>> >Vue.jsフレームワークと比較して、私は個人的には、React Reactコンポーネントの書き込みはVUEほど快適ではなく、コンポーネントのCSSスタイルはコンポーネントの外側から分離されているため、維持するのはあまり便利ではありません。
この例から、Reactの仮想DOMとJSXの機能を見ることができます。他のフレームワークと比較して、Reactの仮想DOMはページのパフォーマンスを改善するだけでなく、XSS攻撃などを防ぐこともできます。仮想DOMの特定の原則はここでは紹介されません
JSX構文に関しては、JSの一種の構文糖です。この構文砂糖を使用して、いくつかの機能を簡単に実装できます。ここで、JSXはXMLの構文を純粋なJavaScriptに変換し、XML要素、属性と子ノードがReact.CreateElementのパラメーターに変換されます。同様のJS構文糖には、タイプスクリプトやその他のタイプが含まれます。
ルーティング
フロントエンドルーティングメカニズムは、シングルページアプリケーション（SPA）の構築において最も重要なリンクの1つです。フロントエンドルーティングを通じて、ページをユーザーにすばやく表示するために、サーバーからすべてのデータを取得することなくユーザーエクスペリエンスを最適化できます。
ReactルーティングはReactルーターに依存します。 ReactルーターはUIを保持し、URLを同期します。シンプルなAPIと、コードバッファリングの読み込み、動的ルーティングマッチング、正しい位置遷移の確立などの強力な機能があります。
これがReactルーティングの例です。
'React'import {render}から' React-dom'import {router、route、indexroute、link、browserhistory}から 'race'import}から{component}をインポートします。 ActiveStyle = {Active}> home </link> </li> <li> <link to = "/userestyle = {active}> user page </link> </li> </ul> {this.props.children} </div>）}}クラスインデックスextends React.comPonent {render（）{return（<> <> <h2> </</< React.comPonent {render（）{return（<div> <h2> users </h2> </div>）}} reender（（<router history = {browserhistory}> <route path = "/" component = {app}> <indexroute component = {index}/> <route path = "ユーザーパス= < </router>）、document.getElementById（ 'app'）））Reactのルーティング方法は1つだけここにリストされています。他のフレームワークと比較して、Reactルーティングの構文は理解しやすいです。
ステータス管理
国家管理は必要な1ページのアプリケーションではありません。それを使用すると、各州の変更を統一された方法で管理することができ、プロジェクトプロセス全体を明確かつ保守可能にします。 React実装状態管理は、正式に推奨されるReduxを使用できます。
Reduxは、厳格な一方向データフローを使用します。アプリケーション状態全体がオブジェクトツリーに保存され、このオブジェクトツリーは唯一のストアにのみ存在します。
プロジェクトの例
ここでは、Reactを使用して単一ページのWebサイトを書きました。ページは次のとおりです。
フェッチ
上記の例では、AJAXインタラクションにFetchを使用したため、ここでFetchを簡単に紹介します。
Fetchを次世代のAJAXテクノロジーとして使用できます。これは、現在の人気のあるPromiseメソッドを使用しています。
フェッチを使用して、AJAXを書き込み、次のようなデータと対話できます。
// get data method fetchfn =（）=> {fetch（ '../// data.json'）。 console.log（e.message）}）}要約します
フレームワークを学ぶことで最も重要なことは、そのテクノロジーを学ぶことではなく、それがもたらす問題解決のアイデアを学ぶことです。 Reactのフレームワークを学ぶことで、そのユニークな新機能から新しい考え方を見つけることができます。思考レベルが拡張されている場合にのみ、フロントエンドの海で自由に飛ぶことができます。この記事が誰でも反応を学ぶのに役立つことを願っています。