react-基础-入门第二篇；对于我们这些菜鸟来说，并不是仅仅想要hello 世界

鉴于读完大牛阮的入门篇效果不明显，链接：http://www.ruanyifeng.com/blog/2015/03/react.html，怒删自己入门第一篇，然后去扒了官网，中间有些看不懂，又找了点资料，这篇仅仅是针对我们这些菜鸟来说的接地气的入门，55k发言：不给你多BB(不废话了）

概念性的东西

react 是什么？来源于Facebook，那个大学为追女孩的程序员写的一个社交网站。和我一样的菜鸟，现在在入门，进去再说好吗？理解那么深，干啥，知道是一个可复用的web组件库，一个js库就ok了，等你是大牛了，啥都懂了，还用教科书一样的搬出来？

上篇说：最好的学习方式，先懂es6=>react官网，还是有必要的，最起码的要懂

先看个实例吧

最简单的demo组件

var MessageBox = React.createClass({
    alertMe(){alert('你刚才点了我一下。。。。');},
    render(){return ( <h1 onClick={this.alertMe}>你好世界！！！</h1> )}
    });
    React.render( <MessageBox/>, 
    document.getElementById('app'),
    function(){console.log('渲染完成啦！！');})

对了，在进行这些代码的时候先引入

<script src="JSXTransformer.js"></script>
前面的不说了，后面的就是一个混血儿，html和js混合的玩意，具体作用就是帮我们能自由编辑jsx呢，同时script 的type="text/jsx"就行我不会解释的，
下载包包我给个云盘链接: https://pan.baidu.com/s/1kVjwYr1 密码: u2jm

最简单组件组合的页面-嵌套组件

代码贴的优点烦，不过接地气的适应菜鸟绝对要这样，代码如下。

    <script type="text/jsx">
        var MessageBox = React.createClass({//创建的第一个组件
            render:function(){
                var submessages = [];
                for(var i=0; i<3; i++){
                    submessages.push(
                        <Submessage key={'subMsg'+i}/>
                    )
                }
                return ( 
                    <div>
                        <h1>点我！点我！快点嘛！</h1>
                        {submessages}
                    </div>
                )
            }
        });

        var Submessage = React.createClass({//创建的第2个组件
            render:function(){
                return (
                    <div>
                        <h3>写代码很有意思</h3>
                        <Footer/>
                    </div>
                )
            }
        });

        var Footer = React.createClass({//创建的第3个组件
            render: function(){
                return (
                    <small>因为我们在用代码创造</small>
                )
            }
        })

        React.render( <MessageBox/>, 
            document.getElementById('app'),
            function(){
                console.log('渲染完成啦！！');
            }
        )
    </script>

最后一个

<pre>组件状态</pre>

<script type="text/jsx">
    var MessageBox = React.createClass({
        getInitialState(){
            return {
                isVisible: true,
                titleMessage: '你好react！（来自扎个膊胳）',
            }
        },
        render(){
            var styleObj={
                display: this.state.isVisible ? 'block' : 'none',
            }
            return ( 
                <div>
                    <h1 style={styleObj}>{this.state.titleMessage}</h1> 
                    <Submessage/>
                </div>
            )
        }
    });

    var Submessage = React.createClass({
        render(){
            return (
                <h3>这里应该写点什么</h3>
            )
        }
    });


    var messageBox = React.render( <MessageBox/>, 
        document.getElementById('app'),
        function(){
            console.log('渲染完成啦！！');
        }
    )
</script>

“`

其次：在编辑器上写好了，稍等。今天时间有点早。。明日更新吧。