第02節、初識JSX文法
9120 ワード
JSXは、XMLタグを使用して仮想DOMを作成し、宣言コンポーネントを作成するJavaScript XMLです.
JSX構文サポートへの参加
JSX構文サポートを使用する場合は、Babelを使用して変換できます.ここではBabelのコアファイルbrowser.jsを使用します.ネット上で提供されている静的リポジトリへの参照(http://www.bootcdn.cn/)、自分でダウンロードすることもできます.しかし、実際のプロジェクト開発では、コードにjsファイルを直接導入するのではなく、コードを静的ファイルに変換してサーバに配備します.
ハローワールドを書き直す
上のコードでJSXのメリットを見つけることができます.は、よく知られている構文模倣HTMLを使用して仮想DOMを定義することができる. プログラムコードはより直感的です. JavaScript間で等価に変換され、コードがより直感的になります.
注意: reactコンポーネントを宣言する場合は、頭文字を大文字にする必要があります. createClassで作成されたコンポーネントにはルートノードが1つしかありません.このルートノードには、任意のレイヤのサブノードがあります.つまり、返されるコードの最外層には1つのラベルしかありません.このラベルには多くのラベル(ノード)が含まれていますが、returnの後ろには複数の兄弟ノードが存在しません. JSX構文を使用すると、scritpのtype=「text/babel」になります.そうしないと、コードは解析できません.
JSXでの式
JSXは式をサポートしています.カッコを使うだけで式を使うことができます.HelloWorldプログラムを使用式に書き換えました.
上のコードを
式はif...elseのような文をサポートしませんが、三元演算子と二元演算子をサポートします.
JSX構文サポートへの参加
JSX構文サポートを使用する場合は、Babelを使用して変換できます.ここではBabelのコアファイルbrowser.jsを使用します.ネット上で提供されている静的リポジトリへの参照(http://www.bootcdn.cn/)、自分でダウンロードすることもできます.しかし、実際のプロジェクト開発では、コードにjsファイルを直接導入するのではなく、コードを静的ファイルに変換してサーバに配備します.
ハローワールドを書き直す
/span>html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> Reacttitle>
head>
<body>
<div id="reactContainer">div>
<script src="react.js">script>
<script src="react-dom.js">script>
<script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js">script>
<script type="text/babel">
var HeComponent =React.createClass({
render:function () {
return <h1>Hello Worldh1>;
}
});
ReactDOM.render(
<HeComponent/>,
document.getElementById('reactContainer')
)
script>
body>
html>上のコードでJSXのメリットを見つけることができます.
注意:
JSXでの式
JSXは式をサポートしています.カッコを使うだけで式を使うことができます.HelloWorldプログラムを使用式に書き換えました.
上のコードを
var Ij =React.createClass({
render:function () {
return <h1>Hello {this.props.name?this.props.name:'world'}h1>;
}
});
ReactDOM.render(
<Ij name="js"/>,
document.getElementById('reactContainer')
)式はif...elseのような文をサポートしませんが、三元演算子と二元演算子をサポートします.