前文では、React-機能紹介、設置配置説明(簡単な入門見本をいくつか添付します.)、ReactJSを使ってページ開発を行う方法を実証しました.この文章は主にJSXを紹介します.Reactは強制しませんが、私達は必ずJSXを使います.JavaScriptだけ使ってもいいです.しかし、JSXを使うと、より効率的にコードを開発できます.
JSXはJavaScript XMLであり、Reactコンポーネントの内部にラベルを構築するクラスXML文法である.JSXは新しい言語ではなく、文法飴だけで、開発者がJavaScriptにHTML文法を書くことができます.最後に、HTMLタグごとにJavaScriptコードに変換して実行します.このように、JavaScriptを使用してコンポーネントとコンポーネントの間の関係を構築するためのアプリケーションは、コードレベルでより明確になる.また、あまりにも多くのように、JavsScriptでDOMを操作してコンポーネントとコンポーネントの間のネスト関係を作成しない.
1.運転環境

JSXはReactJS環境を借りる必要がありますので、使う前にReactJSファイル(react.js、react-dom.js)

をロードしてください.

は、ReactJS環境の他に、JSXの解像度(browser.js)

をロードする必要がある.
具体的なダウンロードアドレスとロード方法は、私の前の文章を参照してください.React-機能紹介、設置配置説明(簡単な入門見本をいくつか添付します.)
2.ロード方式
JSXは現在2つの方法でロードされています.(1)インライン方式のロード

    ReactDOM.render(
      <h1>hello jianshu.com</h1>,
      document.getElementById('example')
    );

(2)外連結方式は、まもなくJSXコードをロードして単独で一つ.jsxファイルに入れる.

ReactDOM.render(
     
hello jianshu.com
,
     document.getElementById('example')
);

このファイルをページ上に次のように紹介します.

3,ラベルの
たちはJavaScriptにHTMLタグを くことができます.また、それらはReactJSによって されたコンポーネントのラベルを することができます.

var Hello = React.createClass({
    render: function() {
        return 
  
;
    }
});
ReactDOM.render(
     ,
     document.getElementById('example')
);

たとえば のコードの でハローというコンポーネントを りました.この はHTMLタグを うように、それを することができます. :ReactJSでカスタマイズしたコンポーネントのラベルの は ず にしてください.これはコンポーネントのラベルですか?それともHTMLラベルですか?
4.コード
JSXを って くのは、コンポーネントのDOM をより に るためです. には、 をJavaScriptコードに することによって、ブラウザ で できます.たとえば、 たちは のコードを きました.

var msg = 
hello jianshu.com
;

そうすると、 は のようになります.

var msg = React.createElement("h1", {width: "10px"}, "hello jianshu.com");

つまり、ラベルを くごとに、React.creat Elementメソッドを び して にReactElementオブジェクトを してくれるということです.もちろんJSXを わずに、React.creat Element でReactElementオブジェクトを してもいいです.React.creat Element における パラメータの は の りです.

の のパラメータ: であってもよく、 なHTML を しています.または、React Classタイプのオブジェクトは、 にパッケージされたカスタムコンポーネントを します.

のパラメータは、オブジェクト( )です.この の の はすべて されています.

は、 3のパラメータから する.すべては、 のサブ として される.

5,JavaScript を する
JSXでJavaScript を するには、 を｛｝で む があります. えば、まず を してから、JSXで を び します.

var str = "    jianshu.com";
var msg = 
{str}
;

6,コメント
JSXでは、 の はJavaScriptと じであり、 の の と の の にも けられる.

var str = "    jianshu.com";
//
{str}
/**
  
{str}
**/

7、ES 6
JSXでは、ES 6の は く えます. な はES 6 に していないブラウザに して に を うからです.たとえば、 の では、ES 6の しい 「…」を って、その はオブジェクトを しています.

var props = {};
props.key1 = "1";
props.key2 = "2";
jianshu.com

で すると、h 1の には2つの があります.key 1=「3」、key 2=「2」です.(key 1はもともと1だったが、 に された でカバーされて3になる)
8、カスタム
ラベル の にも、いくつかの をカスタマイズできます.これらのカスタム は、 のページにレンダリングされた 、ページに されるかどうかは のようなルールによって まります.

は、すべてdata-で まるカスタム で、ページをレンダリングした にすべてページに することができます.

は、data- のカスタム ではなく、ページレンダリング は されません. えば、 はJSXを って のコードを きます.

var msg = 
jianshu

にページにレンダリングした は の りです.data-で まるカスタム のみがページに され、 のカスタム は されます.
9,HTML を します.
HTMLノードではなくHTML を する がある があります.このように いてもいいです

{'
   html   
'}

10,スタイルの
(1)JSXのスタイルはスタイル で されています. のWeb とは なり、 ではなくJavaScriptオブジェクトである. えば、 の では、 の はJSX であり、 の はJavaScriptオブジェクトである.

    jianshu.com

(2) はラクダのピークの に します. えたくないなら、カギカッコを けてくくります. えば、'font-size':'20 px'(3)は、クラスName='xxx'の でスタイルを することもできます.(クローズはクラスではなく、クラスです.)
11,イベントバインディング
コードは の りです.JSXはすべてのHTML のイベントをサポートします.ただし、イベント は ずラクダのピークを って しなければなりません.OClickをオンロックに すると がありません.

div id="example">

function testClick(){
alert(「ボタンを しました!」)
)
var ap=<button onClick={testClick.bind}style={fontSize:'28 px'}gt;
ボタン
<buttongt;
ReactDOM.render(
アプリ、
Dcument.getElemenntById('example')
)0
(2)bind の のパラメータは、 を するためのものです. されたイベントにパラメータを する は、bind の のパラメータから が なパラメータを くことができます.

function testClick(value) {
  alert(value);
}
var app = 
              
          
 
ReactDOM.render(
     app,
     document.getElementById('example')
);