学习reactJS笔记

<script type="text/jsx">
    ReactDOM.render(
    <h1>Hello, world!</h1>,
            document.getElementById('a3')
    );
</script>
直接用于将基础模板转为 HTML 语言，并插入指定的 DOM 节点。

var names = ['alice','emily','kate'];
    ReactDOM.render(
        <div>
            {
                names.map(function(name){
                    return <div>hello,{name}!!~~~~</div>
                })
            }
        </div>,document.getElementById('a3')
    );
定义一个模板，插入指定的 DOM 节点，这个模板可以是任何模式，但当需要插入的节点有样式时，模板的样式起到了增强效果

在定义模板时，当模板变量为数组或其他时，刚学习时发现有已下两种方式使用模板：
1，定义变量时，可以定义内容并定义html标签也可以不定义html标签，但是在render中必须要用html标签包裹(个人理解为格式规则，类似格式规则也有，在reactJS中html标签以<开头，代码块以{开头。)
2，render中前一个为html格式，后一个必为document代码块格式

<script type="text/babel">
      var HelloMessage = React.createClass({
        render: function() {
          return <h1>Hello {this.props.name}</h1>;
        }                    定义组件并设置需求变量
      });
      ReactDOM.render(
        <HelloMessage name="John" />,
        document.getElementById('example')
      );        定义模板，当模板采用组件形式时，也可以设置相关属性，并注意相关格式
</script>

<script type="text/jsx">                        
    var kai = 333;                                定义变量
    var Yang = React.createClass({                组件
        propTypes:{                                propTypes属性验证这个属性为必须，以逗号间隔
            title:React.PropTypes.string.isRequired
        },
        render:function(){                            
            return <small>{this.props.title}</small>;
        }
    });
    ReactDOM.render(
            <Yang title={kai}/>,                
            document.getElementById("a3")
    );
</script>

<script type="text/jsx">
    var Kai = React.createClass({
        getDefaultProps:function(){
            return {                    定义默认输出
                title:'hello'
            }
        },
        render:function(){
            return <p>{this.props.title}</p>
        }
    })
    ReactDOM.render(
            <Kai/>,                        模板中没有定义取值
            document.getElementById('a3')
    )
</script>