基于react+如何搭建一个完整的前端框架

Posted 2021-01-05 落花有情随流水，流水无情怨落花

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