JSXを反応させます
従来の使用JSX JavaScriptを置き換えるために反応します。
XMLは、JavaScriptの構文を拡張したものですようJSXに見えます。
私たちは、必ずしもJSXを使用していないが、それは次の利点があります。
- それは最適化後のJavaScriptコードにコンパイルされるので、JSXは速く実行されます。
- それはコンパイルエラー中に発見することができ、タイプセーフです。
- JSXのオーサリング・テンプレートは、簡単かつ迅速に使用します。
JSXを使用してください
JSXは、我々は例を見ることができ、HTMLのようになります。
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
私たちは、あなたがそれを囲むdiv要素を使用する必要があり、複数のHTMLタグ上記のコードで入れ子にすることができ、インスタンスのp要素は、カスタム属性データ-myattributeを追加し、カスタム属性を追加するデーター接頭辞を使用する必要があります。
ReactDOM.render(
<div>
<h1>本教程</h1>
<h2>欢迎学习 React</h2>
<p data-myattribute = "somevalue">这是一个很不错的 JavaScript 库!</p>
</div>
,
document.getElementById('example')
);
独立したファイル
あなたのリアクトJSXコードは、例えば、我々が作成し、別の文書に配置することができますhelloworld_react.js次のように、ファイルを：
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
その後、HTMLファイル内のJSファイルに導入されました：
<body> <div id="example"></div> <script type="text/babel" src="helloworld_react.js"></script> </body>
JavaScript式
私たちは、JSXでJavaScript式を使用することができます。 中括弧{}内の式を記述します。 例としては、次のとおりです：
ReactDOM.render(
<div>
<h1>{1+1}</h1>
</div>
,
document.getElementById('example')
);
JSXでelse文は、単一ではなく、条件付き（三項演算子）式を使用できる場合は、使用することはできません。 次の例で、変数iが真の出力、あなたがiの値を変更した場合、それが出力偽意志1ブラウザに等しいますである場合。
ReactDOM.render(
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
,
document.getElementById('example')
);
スタイル
インラインスタイルを使用することをお勧めします反応します。 私たちは、インラインスタイルを設定するには、キャメルケースの構文を使用することができます。リアクト指定された要素番号の後に自動的にピクセルを追加します。次の例では、H1要素のためのMyStyleはインラインスタイルを追加することを示しています。
var myStyle = {
fontSize: 100,
color: '#FF0000'
};
ReactDOM.render(
<h1 style = {myStyle}>本教程</h1>,
document.getElementById('example')
);
ノート
次のように中括弧で記述する必要があります、例を示します。
ReactDOM.render(
<div>
<h1>本教程</h1>
{/*注释...*/}
</div>,
document.getElementById('example')
);
配列
JSXは、アレイが自動的にすべてのメンバーに展開され、テンプレート配列に挿入することができます。
var arr = [
<h1>本教程</h1>,
<h2>学的不仅是技术，更是梦想！</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);
HTMLタグは対アセンブリを反応させ、
HTMLタグ（文字列）をレンダリングするか、コンポーネント（クラス）を反応させることができる反応します。
HTMLタグをレンダリングするには、ちょうどJSXで小文字でタグ名を使用します。
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
成分を反応させレンダリングするには、単に大文字で始まるローカル変数を作成します。
var MyComponent = React.createClass({/*...*/});
var myElement = <MyComponent someProperty={true} />;
ReactDOM.render(myElement, document.getElementById('example'));
JSXは、ローカルコンポーネントとHTMLタグのクラスを区別するために大文字と小文字の規則を使用して反応します。
注意：
JSXには、JavaScriptのような識別子の数であるため
classとforXML属性名としてはお勧めしません。 別の方法として、DOMを使用リアクトclassNameとhtmlFor対応するプロパティを実行します。