React入門介紹（1）-ReactDOM.render()等基礎
阿新 • • 發佈：2019-02-15
首先，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 JSX比較特殊的是允許Javascript和HTML的混寫，看一個簡單的例子：
<div id="container" 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>原文地址:http://www.cnblogs.com/Nancy-wang/p/6985310.html