リーンReact学習ガイド(Lean React)-1.2 JSX構文

書籍カタログ
1.2 JSX構文
公式ドキュメントhttps://facebook.github.io/react/docs/jsx-in-depth.html
JSX文法は嫌そうに聞こえますが、実際に使うと、JSXの書き方はコンポーネントの組み合わせや属性の伝達に非常に柔軟な解決策を提供していることがわかります.
この節を勉強する時、読者が読むと同時に実際にJSXをコードして体験することができることを望んで、コードの意味を書くのは本当に書きます.代コード.
1.2.1 React運転環境の準備
JSXの学習を迅速に開始するために、次のような方法で迅速にReact開発環境に入ることができます.
方式一:Babel REPL
Babel REPL
直接REPLにJSX構文を書いて、コンパイルした結果をリアルタイムで見ることができます.
方法2:JSPedgle
オンラインモードReact Fiddle
方式3:ローカル開発
ステップ1:エディタを開き、hello-react.htmlファイルを新規作成するステップ2:Hello,worldコードの貼り付け

  
    
    
    
    
    
  
  
    

    
        var Hello = React.createClass({
          render: function render() {
            return <div>Hello {this.props.name}</div>;
          }
        });

        ReactDOM.render(
          <Hello name="World" />,
          document.getElementById('example')
        );
    
  

方式四:clone Github hello-world分岐コード
https://github.com/leanklass/leanreact/tree/hello-world
1.2.2 JSX構文
JSX本質
JSX構文を作成する本質的な目的は、xmlベースでコンポーネントのネストを表現し、HTMLと一致する構造を維持することであり、構文的には記述コンポーネントが特別である以外は通常のJavascriptと区別されない.そして最終的にはすべてのJSXがオリジナルJavascriptにコンパイルされます.
読者に注意しなければならないのは、Reactの多くの例はES 6を通じて書かれているが、これはJSX文法ではなく、後でES 6の基本文法を個別に説明する節があるが、これまではJSXに集中してきた.
xml基本ルール
JSX構築コンポーネントのルールはxmlルールと一致する
ネスト規則
ラベルは任意にネストできます
eg:

function render() {
  return 

           text content 
           

             
....
             
....
           
         
}

タブを閉じる
ラベルは厳密に閉じなければなりません.そうしないとコンパイルできません.
セルフクローズ:

function render() {
  return 
}

ラベルを閉じる:

function render() {
  return 
....
}

JSXコンポーネント
JSXコンポーネントはHTMLコンポーネントとReactコンポーネントに分かれています
HTMLコンポーネントは、HTMLのオリジナルラベルです.たとえば、次のようになります.

function render() {
  return  
 hello, React World 
}

function render() {
  return 
 
            
list item 1
            
list item 2
         
}

Reactコンポーネントは、カスタムコンポーネントです.

//          
var CustomComponnet = React.createClass({
  render: function() {
    return 
 custom component 
  }
});

//        
function render() {
    return 
  
}

コンポーネントのプロパティ
htmlと同様、JSXではコンポーネントにも属性があり、属性を渡す方法も同じです
HTMLコンポーネントの場合

 function render() {
   return  
hello, React, world 
 }

Reactコンポーネントがカスタム属性を定義できる場合、カスタム属性を渡す方法は次のとおりです.

  function render() {
    return 
  
  }
}

属性は文字列であってもよいし、任意のJavascript変数であってもよい.

  function render() {
    var data = {a: 1, b:2};
    return 
  
  }

注意すべき点としては、属性の書き方にHTMLと違いがあり、JSXを書く際には、すべての属性がアルパカ式の書き方になっています.

function render() {
    return  

                
                
            
}

原生の書き方は

主に標準的な理由から、アルパカ式はJavascriptの標準的な書き方であり、Reactの下層は属性を直接原生DOMの属性に対応させ、原生DOMの属性はアルパカ式の書き方であり、ここではクラス名がclassではなくclassNameである理由を理解することができ、またclassとforがjsキーワードであるため、jsxでは:

class => className

for => htmlFor

それ以外の特殊な点はdata-*とaria-*の2種類の属性がHTMLと一致していることです.
JSXかっこ
テキストの表示
多くの場合、JSのテキストを直接表示する必要があります.変数の属性を表示するのと同じように、カッコで

  function render() {
    var text = "Hello, World"
    return 
 {text} 
  }

えんざん
カッコの中には実際に変数以外にJS式があります.カッコを使って簡単な演算をすることができます.

  funtion render() {
    var text = text;
    var isTrue = false;
    var arr = [1, 2, 3];
    return 

      {text}
      {isTrue ? "true" : "false"}

      {arr.map(function(it) {
        return  {it} 
      })}

      
  }

JSXコメント
コメントの書き方は以下の通りです.

  function render() {
    return 

            /*         */
           
  }

制限ルール
renderメソッドが返すコンポーネントは、ルートコンポーネントが1つしかなく、エラーの例である必要があります.

  //       ，JSX        
  function render() {
    return (
 .... 
           
 .... 
)
  }

コンポーネントネーミングスペース
JSXは名前空間でコンポーネントを使用することができ,名前空間で同じ名前で異なる用途のコンポーネントが衝突する問題を解決することができる.
次のようになります.

  function render() {
    return 

           
           
           
  }

1.2.3 JSXの理解
JSXのコンパイル方式
JSXの書き方は最終的にオリジナルのJavascriptにコンパイルされます.もしよろしければ、コンパイルされたJSを直接書くこともできますが、JSXを書くのが望ましいです.JSXの目的は書き方を簡略化し、HTMLと同じ開発体験を維持することです.
JSXの具体的なコンパイル方法は2種類あります

は、Hello Worldプログラムと同様にHTMLにbabelコンパイラを導入します.

オフラインでJSXをコンパイルし、babelでJSXをコンパイルします.詳細は第2章で説明します.

JSXからJSへの変換
Hello WorldプログラムがJSに変換されたコードは以下の通りです.

  var Hello = React.createClass({
    displayName: 'Hello',
    render: function() {
      return React.createElement("div", null, "Hello ", this.props.name);
    }
  });

  ReactDOM.render(
    React.createElement(Hello, {name: "World"}),
    document.getElementById('container')
  );

次のことがわかります.
<=> React.createElement(Hello, ....)
xmlの書き方は実際にReactのファクトリメソッドcreateElementを呼び出す.
JSXが最終的にJSにコンパイルされることを理解すると、JSXのいくつかの特性、例えばネーミングスペースを理解することができます.コンポーネントは実際にはJavascriptオブジェクトであり、ネーミングスペースの下のコンポーネントはオブジェクトの属性に相当します.
1.2.4実例練習:データによるTODOMVC代行事項リストのレンダリング
TODOMVCは代行事項リストを需要モデルとし,様々なフレームワークの実現を含んでいる.本例の目的は,JSXの使い方を読者に身近に感じてもらうことである.
もんだいようきゅう
JSONオブジェクトに基づいて、TODOMVCページをReact JSXでレンダリングします.
JSONの対象は以下の通り:

var todolist = {
    name: "todos",
    todos: [{
            completed: false,
            title: 'finish exercise'
        }, {
            completed: false,
            title: 'lean jsx'
        }, {
            completed: true,
            title: 'lean react'
        }]
}

hello world indexを変更します.htmlのコードは、問題を簡略化するためにTODOMVCのHTMLとCSSを直接コピーすることができます.
Tips

classはclassName

と書く

inputタグが閉じていない

配列を巡回した後にkey属性を追加する必要があります.そうしないと、error情報(コンポーネントのセクションで説明)

がプロンプトされます.

html変換JSXツール、Facebookはhtml変換JSXコンポーネントのツールを提供し、htmlを直接コピーしてJSXコンポーネント

に変換することができる.
参考答案
https://github.com/leanklass/leanreact/tree/jsx