1。ReactJSの紹介
Reactは最近非常に人気のあるフロントエンド開発フレームワークです。 ReactはFacebookの内部プロジェクトから生まれました。これは、会社が市場にあるすべてのJavaScript MVCフレームワークに満足していなかったため、Instagram Webサイトを設定するために独自のセットを作成することにしました。私がそれを作った後、私はこの一連のものが非常に有用であり、2013年5月にオープンしたことがわかりました。反応のデザインのアイデアは非常にユニークであるため、革新的で革新的で、優れたパフォーマンスを備えていますが、コードロジックは非常に簡単です。したがって、ますます多くの人々が注意を払い始め、それを使用し始めています。これは、将来のWeb開発の主流のツールであると信じています。
Reactjs公式ウェブサイトアドレス：http://facebook.github.io/react/
Githubアドレス：https：//github.com/facebook/react
Reactjs中国の住所：http：//reactjs.cn/react/docs/getting-started.html
反応とは何ですか？
Reactは、ユーザーインタラクションインターフェイスを開発するためにFacebookで作業する優れたプログラマーによって開発されたJSライブラリです。そのソースコードは、Facebookとコミュニティの優れたプログラマーによって維持されているため、技術サポートを提供するために非常に強力な技術チームがあります。 Reactは、コンポーネント、JSX、仮想DOMなど、多くの新しいものをもたらします。それが提供する仮想DOMは、レンダリングコンポーネントを非常に高速にし、DOMを頻繁に動作させる重い作業から解放されます。 Reactを知っている人なら誰でも、それがMVCのVレイヤーにもっと焦点を合わせていることを知っています。フラックスなどの他のものと組み合わせることで、強力なアプリケーションを簡単に構築できます。
2。ReactJS機能
1。仮想Dom
DOM Diffアルゴリズムを介して、ページ全体をレンダリングせずに差別化された部品のみが更新され、それにより効率が向上します
2。コンポーネント化
論理構造やスタイルなど、ページをいくつかのコンポーネントに分割します
コンポーネントには独自のロジックのみが含まれています。これは、コンポーネントを更新するときに予測できます。これは、メンテナンスを助長するコンポーネントです。
ページは複数のコンポーネントを分割し、再利用できます
3.一方向のデータフロー
データは、トップレベルのコンポーネントからサブコンポーネントに渡されます
データ制御可能
3。反応を始めましょう。こんにちは、世界を書いてください。まず、JSXが何であるかを理解しましょう。
Reactのコアメカニズムの1つは、仮想DOM：メモリ内で作成できる仮想DOM要素です。 Reactは仮想DOMを使用して、実際のDOMの操作を削減し、パフォーマンスを向上させます。実際のネイティブDOMと同様に、仮想DOMはJavaScriptを介して作成することもできます。たとえば、：
var child1 = React.createelement（ 'li'、null、 'first text content'）; var child2 = race.createelement（ 'li'、null、 'second text content'）; var root2 = race.createelement（ 'ul'、{classname： 'my-list'}、child1、 child2）; React.render（<div> {root2} </div>、document.getElementById（ 'container5'））;このメカニズムを使用して、JavaScriptを使用してJavaScriptを使用して実際のDomsを作成できるように、JavaScriptを使用して完全なインターフェイスDOMツリーを構築できます。ただし、そのようなコードはうまく読めないため、ReactはJSXを発明し、おなじみのHTML構文を使用して仮想DOMを作成しました。
var root =（<ul classname = "mylist"> <li>最初のテキストコンテンツ</li> <li> 2番目のテキストコンテンツ</li> </ul>）; race.render（<div> {root} </div>、document.getElementbyid（ 'container6'））;4。5つの方法でhello in Reactを始める方法
方法1
<div id = "example1"> </div> <script type = "text/jsx"> race.render（// direct html <h1 classname = "classn1"> 1 hellow direct html world </h1>、document.getelementbyid（ 'embles1'））; </scrip>
方法2
<div id = "embome2"> </div> <script type = "text/jsx"> race.render（//要素を直接React.createelement（ 'h1'、{classn2 '}、' 2 hello、create real world！ '）、document.getelementbyid（' embles2 '））;方法3
<div id = "example3"> </div> <script type = "text/jsx"> var createel = react.createclass（{render：function（）{// return <h1> hellowコンポーネントの作成html world </h1> //ブラケットの有無にかかわらず戻る（<h1 classname = 'classn3'> </h1>）;}}）; React.render（// create element <createel/>、// create <createel> </createel> document.getElementById（ 'emple3'））; </script>方法4
<div id = "embles4"> </div> <script type = "text/jsx"> var jsxcreateel = react.createclass（// jsxモードでrenderを直接作成：function（）{react.createelement（ 'h1'、{classname： "classn4"}、 "コンポーネントメソッドの要素React.CreateElement（jsxCreateel、null）、document.getElementById（ 'emple4'））; </script>方法5
<div id = "embles5"> </div> <script type = "text/jsx"> var hello = race.createclass（{// template hello render：function（）{return（<span> {this.props.data} </span>）}}}）;ステッチ</span>）}}）; React.render（// 2テンプレートコンポーネントに要素を作成<H1 classname = "classn5"> <hello data = '5 hello'/> <world/> </h1>、document.getElementByid（ 'example5'））; </scrip>5。上の結果画像
添付コード：
<！doctype html> <html> <head> <meta charset = "utf-8"> <title> unt titled document </title> <meta name = "viewport" content = "inviartscale = 1.0、user-scalable = no、maximing-scale = 1、width = device-width"/>パディング：0;} body {background：＃333;}＃box {background：url（loveimg/qioa-fxehfqi8208393.jpg）ノーレピートセンタートップ;幅：550px;国境：8pxソリッド#ffff; -webkit-box-sizing：border-box;マージン：50px auto;}＃example1、＃example2、＃example3、＃emple4、＃example5 {margin：20px auto;幅：100％;背景：RGBA（255,255,255、.3）;パディング：5px 10px;フォントサイズ：13px;色：＃f1f1f1; -webkit-box-sizing：border-box; } </style> <div id = "box"> <div id = "embly1"> </div> <script type = "text/jsx"> racend.render（// direct html <h1 classname = "classn1"> 1 hellow direct html world </h1>、document.getelementbyid（ 'example1'）; type = "text/jsx"> React.render（// rement React.createement（ 'h1'、{classn2 '}、' 2 hello、create element world！ '）、document.getelementbyid（' embler2 '））; </script> <div = "example3"> </div> <script = "/jsx"> jsx "> jsx"> jsx "> jsx CreateEl = React.createClass（{render：function（）{// return <h1> hellowコンポーネントはhtml world </h1> //ブラケットの有無にかかわらずreturnを作成します（<h1 classname = 'classn3'> 3 hellowコンポーネントはhtml world </h1>）;}） <CreateEL> </createEl> document.getElementById（ 'embles3'））; </script> <div id = "example4"> </div> <script type = "text/jsx"> var jsxcreateel = react.createclass（{// jsx直接：function（）{recreteelement（ 'h1」こんにちは、JSXの世界を直接作成します！ "） render：function（）{return（<span> {this.props.data} </span>）}}）; var world = race.createclass（{//テンプレートworld render：function（）{return（<span> and <span> and <span> and </span>）}}） > <hello data = '5 hello'/> <world/> </h1>、document.getElementbyid（ 'example5'））; </script> </div> <scrip = "build/race.min.js"> </script> <scrip = "build/jsxtransformer.js"> </body> </html>ここにあなたのためのいくつかの追加の知識があります：
対応用語
反応要素
HTML要素を表すJavaScriptオブジェクト。これらのJavaScriptオブジェクトは、最終的に対応するHTML要素にコンパイルされます。
コンポーネント
1つ以上の反応要素を含む反応要素をカプセル化します。コンポーネントは、ページング、サイドバーナビゲーションなどの再利用可能なUIモジュールを作成するために使用されます。
JSX
JSXは、XMLと同様に、Reactで定義されたJavaScriptの構文拡張です。 JSXはオプションであり、JavaScriptを使用してReactアプリケーションを書き込むことができますが、JSXはReactアプリケーションを書き込む簡単な方法を提供します。
仮想dom
仮想DOMは、DOMツリーをシミュレートするJavaScriptオブジェクトです。 Reactは仮想DOMを使用してUIをレンダリングし、仮想DOMのデータの変更を聞き、これらの変更をUIに自動的に移行します。