首先要引進在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

這裡舉個栗子，每次做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>

具體的可以看

引入同樣的元件