1.react例
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<タイトル>タイトル</ TITLE>
<！ - コアライブラリに反応 - >
<スクリプトSRC = "libに/ react.development.js"> </ SCRIPT>
<！ - あなたのreact.development.jsに応じて、アプリケーション層をレンダリングするために決意を実施する責任 - >
<スクリプトSRC = "./ libに/反応-dom.development.js"> </ SCRIPT>
</ head>の
<身体>
<DIV ID = "て、myApp">
</ div>
</ BODY>
<スクリプト>
//最初のパラメータには、表示したいコンテンツがあり、2番目のパラメータは、指定された位置が示されています
ReactDOM.render（ "Hello World" の、document.querySelector（ "＃myappの"））
</ SCRIPT>
</ HTML>
2.JSX文法
ReactDOM.render（ "<H2>のHello World </ H2>"、document.querySelector（ "＃myappの"））;
可変要素：
CONST DOM = <H5> I要素は変数である</ H5> //変数値は、素子可変要素と呼ばれ
ReactDOM.render（DOM、document.querySelector（ "＃myappの"））
外部JSの導入
<！ - タイプを追加する必要が導入されます - >
ます。<script type = "text /バベル" SRC = "./ libに/反応-jsx.js"> </ SCRIPT>
ます。<script type = "text /バベル">
//最初のパラメータには、表示したいコンテンツがあり、2番目のパラメータは、指定された位置が示されています
ReactDOM.render（DOM、document.querySelector（ "＃myappの"））
</ SCRIPT>
3.className
<スタイル>
。1{
色：黄色;
}
。二{
赤色;
}
</スタイル>
ます。<script type = "text /バベル">
=「1」しましょう。
B =「2」をしましょう。
ReactDOM.render（（
<DIVクラス名= {B}>
私はあなたがウールで鳥馬のオオカミだと確信しています
</ div>
）、document.querySelector（ "＃myappの"））
// ReactDOM.render（（
// <DIVクラス名= "1">
//私はあなたがウールで鳥馬のオオカミだと確信しています
// </ div>
//）、document.querySelector（ "＃て、myApp"））
</ SCRIPT>
指定された属性値（属性値が外部二重引用符より可変であり、{}）場合
=「1」しましょう
B =「2」をしましょう。
ReactDOM.render（（
<DIVクラス名= {B}>
私はあなたがウールで鳥馬のオオカミだと確信しています
</ div>
）、document.querySelector（ "＃myappの"））
4. style.html
ます。<script type = "text /バベル">
{= OBJてみましょう
背景：「黄」、
赤色"
}
ReactDOM.render（（
<div>
<Pスタイル= {{色： "青"}}>あなたも、私が知っている。</ P>
<Pスタイル= {{色：「赤」}}>あなたは来ない来るか、私はここにいる、あなたが行って行くかどうか、私は</ P>あなたを待っていません
<Pスタイル= {OBJ}>あなたが来るか来、私はここにいる、あなたが行って行くかどうか、私は</ P>あなたを待っていません
</ div>
）、document.querySelector（ "＃myappの"））
</ SCRIPT>
</ SCRIPT>
リストをレンダリング5.
ます。<script type = "text /バベル">
// JSXあなたの配列は、拡大を指示します
= [1,2,3,4,5,6]みましょう
ReactDOM.render（<DIV> {} </ DIV>、document.querySelector（ "＃MyAppを"））
</ SCRIPT>
6.//だけルート要素を持ちます。
遭遇した大文字のタグがコンポーネントとして扱われます場合は、//遭遇小文字のタグは、通常のラベルとみなされています。あなたは{}が発生している場合は、出力されるように考慮される、または式を解析します。
ReactDOM.render（<DIV> adsfasdf </ DIV>、document.querySelector（ "＃myappの"））
// 番号
//ましょうARR = [1,2,3,4]。
// ReactDOM.render（{ARR}、document.querySelector（ "＃MyAppを"））
// はい：
//ましょうARR = [1,2,3,4]。
// ReactDOM.render（編曲、document.querySelector（ "＃myappの"））
// はい：
ReactDOM.render（ "123123123"、document.querySelector（ "＃myappの"））
//はい：
ReactDOM.render（の<div> asdfasdf </ DIV>、document.querySelector（ "＃myappの"））
//番号：
// ReactDOM.render（
<H1>こんにちは、世界</ H1>の<div> asdfasdf </ DIV>、document.querySelector（ "＃myappの"））