Reactjs逐漸加深理解

 

Reactjs

 

React.render(參數1，參數2)使用：

做用：React.render是React的最基本方法，用於將模板轉爲HTML語言，並插入指定的DOM節點。(其實能夠簡單的理解爲：將標籤內容插入到頁面中目標Dom節點中)

說明：

參數1：html存在的標籤對（能夠含內容），好比<span>這是標籤內容</span>，也能夠是已經經過React.createClass建立好的組件（其實能夠理解爲標籤），若是建立的組件名爲Zujian1,那麼這裏的參數1就須要寫成標籤的形式，<Zujian1></Zujian1> （注意組件名首字母都必須是大寫，下面會將怎麼建立）

參數2：頁面Dom目標，即這個第一個參數所指的這個標籤及內容將會插入到頁面的這個位置，好比插入到頁面中id爲example1的dom節點 :document.getElementById('example1')

舉例使用：

將<span>這是標籤內容</span> 插入到頁面中ID爲example1 的節點：

React.render(<span>這是標籤內容</span>, document.getElementById('example1'));

 

 

建立組件：

使用React.createClass()方法;

用法說明：

var 組件名 = React.createClass({

　　render: function(){

　　　　return <p>組件1內容</p>

　　}

})

 特別注意組件名首字母必須大寫，好比組件名爲:zujian1 則不會起任何做用，須要寫成 Zujian1

具體用法：

<div id="example1"></div>
<div id="example2"></div>
<script type="text/jsx">

    var Zujian1 = React.createClass({
        render: function(){
            return <p>內容1</p>
        }
    });

    React.render(<Zujian1></Zujian1>, document.getElementById('example1'));

    var Zujian2 = React.createClass({
        render: function(){
            return <p>內容2</p>
        }
    });

    React.render(<Zujian2></Zujian2>, document.getElementById('example2'));

</script>

頁面中將輸出結果（固然這兩個內容都分別在id='example1'及id='example2'的div裏）：

內容1

內容2

 

 

JSX語法：

Html語言直接寫在javascript語言中，不加任何引號就是JSX的語法，它容許HTML與javascript混寫在一塊兒