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混写在一块儿