作为大前端时代的pageboy。一直运行至今，项目中一直使用Vue。遗憾的是，对React的了解仅限于几个版本之前的官方文档和在线教程。新年伊始，我有幸在下一个项目中使用React。既然是白手起家，不妨写点东西记录学习过程。这也是一上午建这个博客的初衷。首先要承担的是项目建设。相信没有人会喜欢webpack繁琐的配置，所以这里我就来学习一下CreateReactApp(CRA)的使用方法。快速入门根据官网的介绍，只需要下面两条命令就可以实现项目的基本构建：$yarnglobaladdcreate-react-app$create-react-appreact-demo生成的项目目录结构通过react-demo如下图?:和VueCli相比，还是比较简单的。VueCli通过命令行选择使用vuex还是vue-router。CRA好像需要手动添加路由库和状态管理库。这也是可以理解的。毕竟，在React生态系统中，类似路由和状态管理的库不止一个。查看package.json中的scripts命令，如下："scripts":{"start":"react-scriptsstart","build":"react-scriptsbuild","test":"react-scriptstest","eject":"react-scriptseject"}执行start命令会启动webpack-dev-server方便本地开发调试，build命令对应生产环境包。eject命令的作用是暴露webpack的配置。默认情况下，CRA生成的一些webpack配置是不能被覆盖的，比如内置的环境变量Process.env.NODE_ENV。通过eject得到具体的webpack配置后，就可以进行修改了。这里不做演示。我只是不想看到一堆webpack配置。我要的是主流前端开发工具开箱即用，执行eject后不可逆。这里会有问题。使用VueCli时，build命令提供了一个模式选项，可以将process.evn.NODE_ENV的值设置为development或production。不幸的是，CRA没有类似的选择。但是在实际开发中，测试环境部署的代码可能需要开发环境打包的代码，方便调试。比如测试环境中可能有VConsole和SourceMap，但是在生产环境中需要去掉。那么如何才能拥有开发环境的包装呢？build区分开发模式和生产模式。根据文档，为了达到区分生产环境搭建和开发环境搭建的目的，可以通过自定义环境变量来实现。请参阅如何为我的开发服务器创建构建并在项目文件夹下创建它。env.production和.env.development文件。将REACT_APP_ENV分别设置为生产和开发。在package.json中创建新命令如下：env.development文件将被加载。使用yarnbuild命令时，会加载相应的.env.production文件。因此，可以在业务代码中使用process.env.REACT_APP_ENV来区分不同的构建环境（实际的dev-build包还在生产环境中，仅用于业务代码区分）。Sass/Less处理文档中提到了如何添加Sass，但没有提及如何添加Less。难道真的是强迫症？经过多方查找，找到了一个工具react-app-rewired，可以很方便的覆盖CRA的webpack配置，而无需执行eject命令。所以，安装react-app-rewired，修改package.json中的命令如下："scripts":{"start":"react-app-rewiredstart","build":"react-app-rewiredbuild","dev-build":"dotenv-e.env.developmentreact-app-rewiredbuild","test":"react-app-rewiredtest","eject":"react-app-rewiredeject"}在同时还有一个react-app-rewire-less工具用来提供Less支持，瞬间让生活充满希望，仿佛胜利近在咫尺。撸起袖子，参考文档，在项目根目录添加config-overrides.js文件，内容如下：/*config-overrides.js*/constrewireLess=require('react-app-无重新布线');模块。exports=functionoverride(config,env){config=rewireLess(config,env);返回配置；};执行yarnstart查看效果：不幸的是，报错了。根据提示，2.0版本废弃了getBbabelLoader工具方法，可以使用customize-cra代替，安装customize-cra。修改config-overrides.js如下：const{override,addLessLoader}=require('customize-cra');module.exports=override(addLessLoader());重新执行yarnstart，demo可以正常运行，试试看，貌似也支持css模块了。虽然有点曲折，但毕竟车要上山必有路。（其实心里已经叫过很多次mmp了，整个Less还是这么麻烦~？）支持Less之后，项目中就少不了PostCSS了。幸运的是，本文档中提到了它。PostCSSCRA内部已经使用Autoprefixer添加浏览器前缀，你只需要在package.json中添加browserslist属性行来定义支持的浏览器。在开发H5应用时，通常会使用rem布局进行适配。为了方便起见，通常使用postcss-px2rem工具。如何在CRA中配置px2rem？在上面折腾customize-cra的基础上，发现这个库中提供了addPostcssPlugins函数。const{override,addPostcssPlugins}=require("customize-cra");module.exports=override(addPostcssPlugins([require('postcss-px2rem')({remUnit:37.5})]));代码如上，你可以愉快地使用px2rem。路由方案react-routerCRA的文档中提到最流行的路由方案是react-router。命令如下$yarnaddreact-router-dom那么react-router-dom到底是个什么鬼？查看react-router和react-router-dom之间的区别。react-router实现了路由的核心功能，react-router-dom是在react-router的基础上，增加了一些浏览器环境的功能。react-router4.x相比之前的版本有很多变化，但幸运的是，对于像我这样的初学者来说也是如此。状态管理方案redux或者mobx提到了React的状态管理。像我这样的新手第一时间就想到了Redux，但是作为一个初学者，在没有仔细阅读redux教程的时候，对一些名词，比如action，reducers，middleware等等，就感到很头疼。在社区里搜索了其他的状态管理方案，看到了mobx库，打算对比学习，选一个用在项目中。代码拆分（路由的懒加载）参考了React.lazy和React.Suspense，写在最后。到这里项目结构就基本搭建好了。后续关于CRA的问题，遇到以后再补充。
