基于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，学习中。