React入門介紹-ReactDOM.render()等基礎
首先，React是一個用於構建用戶界面的Javascript庫,但Peact並不是一套完整的MVC或MVVM的框架，它僅涵蓋V-view視圖層。JSX是javascript的擴展，像Typescript,coffeeScript等一樣，都是Javascript的語法糖，最終都要變編譯成JS執行，建議使用JSX的代碼進行React的開發。因為Javascript代碼與JSX代碼並不兼容，凡是使用JSX的地方我們都需要加上 type="text/babel"。
在使用React之前，我們必須要先引入三個庫——react.js/react-dom.js/browser.min.js
<html>
<head>
<script src="../../react.js"></script>
<script src="../../react-dom.js"></script>
<script src="../../browser.min.js"></script>
</head>
<body>
</body>
</html>
JSX比較特殊的是允許Javascript和HTML的混寫，看一個簡單的例子：
<div id="container"></div>
<script type="text/babel">
let value = "demo1";
let buttonName = "submit";
ReactDOM.render(
<div>
<input type="text" value={value}/> //注意單標簽一定要閉合“/”,否則會報錯
<button>{buttonName}</button>//在{}中插入變量
</div>,
document.getElementById("container")
)
</script>
ReactDOM.render是React的最基本方法用於將模板轉為HTML語言，並插入指定的DOM節點。ReactDOM.render(template,targetDOM),該方法接收兩個參數：第一個是創建的模板，多個dom元素外層需使用一個標簽進行包裹，如<div>；第二個參數是插入該模板的目標位置。若要為創建的某個元素增加class屬性，不能直接定義class而要用className，因為class是javascript中的保留字。例如給input添加className並更改樣式：
<input type="text" className="userName" value={value}/>
.userName{background: yellow}//在CSS樣式中定義
同樣可以定義行內樣式,將所有的樣式包裹在一個對象中,以類似變量的形式給style屬性賦值,注意樣式屬性要用駝峰命名法表示，如:backgroundColor而不是background-color;fongSize而不是font-size,
<input type="text" style={{"backgroundColor":"yellow","color":"red"}} value={value}/>
另外可以直接將樣式賦值給一個變量，把變量賦值給style屬性，如下：
<div id="container"></div>
<script type="text/babel">
let value = "demo1";
let buttonName = "submit";
let inputStyle = {
"backgroundColor":"yellow",
"color":"red"
};
ReactDOM.render(
<div>
<input type="text" style={inputStyle} value={value}/>
<button>{buttonName}</button>
</div>,
document.getElementById("container")
)
</script>