基於react+如何搭建一個完整的前端框架（1）

  1.使用 create-react-app 快速構建 React 開發環境

　　create-react-app 是來自於 Facebook，經過該命令咱們無需配置就能快速構建 React 開發環境。

　　create-react-app 自動建立的項目是基於 Webpack + ES6 。

　　執行如下命令建立項目：

　　$ cnpm install -g create-react-app
　　$ create-react-app my-app
　　$ cd my-app/
　　$ npm start

2.安裝react-router-dom ，主要用來路由設置，安裝完成之後就能夠後期使用。

3.接下來須要單首創建一個設置全局路由的js，好比叫作router.js
這個js 裏面須要導入react-router-dom模塊，
關於react-router-dom的使用須要自行百度。
這個js 返回的是放置全部路由的一個大組件，這個組件替代</app>組件，由於你的任何東西都須要經過路由去展現的，能夠看一下：

  render(){
    return (
      <Router history={history}>
        <div>
          <Switch>
            <Route path={ util.LOGIN_ROUTE } render={() => <Login/>} />
            <Switch>
  

　　　　　　　　　　<Route path={url1} render={() => <layerout id=xxx/>} />
　　　　　　　　　　<Route path={url2} render={() => <layerout id=xxx/>/>

            </Switch> 
          </Switch>
        </div>
      </Router>
    );
  }
};
返回的這個組件裏面是路由適配到之後須要展現render的頁面，可是其實這個頁面裏面的的不少東西都會放到另一個組建好比上面的layerout組件，當頁面路徑是url1的時候，會渲染layerout組件，當是url2的時候也會渲染這個組建，可是每一個頁面裏的內容是如何區分，就須要在layerout組件裏面根據不一樣的路由進一步區分。當渲染組件的時候，就能夠經過自定義屬性給當前的組件內部傳入一些須要的參數，好比id,這個組建內部經過props就能夠拿到id 。

好比當前頁面路徑匹配到url1了，那麼這個組件會render layerout組件，

那麼layerout組件裏裏面是有什麼構成呢？
 通常一個頁面就是導航區，完了加一個頭部，內容區三部分，還有就是頁腳。layerout裏面就是放這些各個分區的。

render() {  return (    <div>      <navMenu />      <div>        <Header />        <div>          <container />        </div>      </div>    </div>  );}到這裏很很明顯了，你須要展現哪一個頁面，須要你在container裏面根據不一樣的路由設置不一樣的組件顯示在container裏面。導航的選中與否，其實也是這個原理。接觸沒多久react，學習中。