最火的一款前端框架----React

首先要引进在cdn的几个文件

<script src="https://cdn.bootcss.com/react/0.14.7/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/0.14.7/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

注意：

/react/0.14.7/react.min.js

react 在0.14.7后不再对ie支持

这里举个栗子，每次做web的时候导航条很多页面都有，且共同。对此不用后端的weigete，我们也可以自己封装一个组件，从而达到weigette的效果

创建导航件，独立一个js文件

react_component.js

var NavMenu = React.createClass({
    getInitialState: function() {
        return {
            loading: true,
            data:''
        };
    },
    componentDidMount :function() {
        $.ajax({
            type : "post",
            url : "http://tpapi.prient.top/api/index/get_all_menu?callback=JSON_CALLBACK",
            dataType : "jsonp",
            jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
            success : function(json){
                this.setState({data:json});
                this.setState({loading:false});
                console.info(json)
            }.bind(this)
        });

    },
    componentDidUpdate :function(){
        //判断active
        var url=window.location.pathname;
        console.info(url);
        $('.navbar-nav').find('li').each(function(){
            var this_url= $(this).find('a').eq(0).attr('href');
            if(url=='/'+this_url){
                $(this).addClass('active');
            }
            console.info(url);
            console.info(this_url);
        })
    },
    render : function () {
        if(this.state.loading){
            return <div style = {myStyle}>loading...</div>
        }else{
            var menu_list=this.state.data.map(function(item,index){

                    if(typeof(item.under_menu)!="undefined") {
                        var under_menu=item.under_menu.map(function(n){
                            return( <li ><a href="#">{n.title}</a></li>);
                        })
                        return (
                            <li className="dropdown"  key={index}>
                            <a href="react_demo1.html" className="dropdown-toggle" data-toggle="dropdown">
                            {item.title} <b className="caret"></b></a>
                            <ul className="dropdown-menu">
                                {under_menu}
                            </ul>
                            </li>
                        )
                    }else{
                        return(
                            <li  key={index}><a href="react_demo3.html">{item.title}</a></li>
                        );
                    }
            })

            return(
                <nav className="navbar navbar-inverse" role="navigation">
                <div className="container-fluid">
                <div className="navbar-header">
                <button type="button" className="navbar-toggle " data-toggle="collapse"
            data-target="#example-navbar-collapse">
                <span className="sr-only">切换导航</span>
                <span className="icon-bar"></span>
                <span className="icon-bar"></span>
                <span className="icon-bar"></span>
                </button>
                <a className="navbar-brand" href="#">菜鸟教程</a>
                </div>
                <div className="collapse navbar-collapse" id="example-navbar-collapse">
                <ul className="nav navbar-nav">
                {menu_list}
                </ul>
                <div>
                <ul className="nav navbar-nav navbar-right">
                <li><a href="#"><span className="glyphicon glyphicon-user"></span> 注册</a></li>
                <li className="dropdown"><a href="#" className="dropdown-toggle" data-toggle="dropdown"><span className="glyphicon glyphicon-log-in"></span> 登录 <span className="caret"></span></a>
                <ul className="dropdown-menu">
                <li><a href="#" data-toggle="modal" data-target="#myModal">11</a></li>
                <li><a href="" data-loading-text="Loading...">22</a></li>
                <li className="divider"></li>
                <li><a href="">33</a></li>
                </ul>
                </li>
                </ul>
                </div>
                </div>
                </div>
                </nav>
        );
        }
    }
})

在需要调用导航组件的页面引入底下几行代码

react_demo1.html

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="author" content="Jophy" />
        <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
        <!--[if lt IE 9]>
        <script src="bootstrap-3.3.7-dist/js/html5shiv.js"></script>
        <script src="bootstrap-3.3.7-dist/js/respond.min.js"></script>
        <![endif]-->
        <script src="bootstrap-3.3.7-dist/js/jquery-1.12.3.js"></script>
        <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="bootstrap-3.3.7-dist/js/es5-shim.min.js"></script>
        <script type="text/javascript" src="bootstrap-3.3.7-dist/js/es5-sham.min.js"></script>
        <script src="https://cdn.bootcss.com/react/0.14.7/react.min.js"></script>
        <script src="https://cdn.bootcss.com/react/0.14.7/react-dom.min.js"></script>
        <script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
    </head>
    <body >
    <div id="nav"></div>
    <script type="text/babel" src="bootstrap-3.3.7-dist/js/react_component.js"></script>
    <script type="text/babel">
        //导航主键
        ReactDOM.render(
        <NavMenu java="active"/>,
                document.getElementById('nav')
        );
    </script>
    </body>
</html>

具体的可以看

http://bootstrap.prient.top/react_demo1.html

http://bootstrap.prient.top/react_demo2.html

引入同样的组件