Fork me on GitHub

从零开始搭建自己的React应用

 Write less & Think more.

  开发中,很多人采用的项目启动方案都是使用对应框架的脚手架生成,再结合自己的业务需求加加改改…这么做无可厚非,毕竟工期赶,自己手搭工程量和踩坑成本都是要支付的。但是我还是想说,如果对技术能力和架构思维有追求的人都应当从零开始构建一遍项目,在这过程中不仅能够对全局有一个更细致的认知,即便是以后要进行定制优化亦能按照我们的想法无成本接入。

  以我自身的开发历程而言,主要技术栈是React,业内有很多成熟的脚手架项目生成工具如fb的create-react-app、dvajs生态的antd-admin等。它们的共性都是让开发者更加关注业务上的开发逻辑,而不必耗费太多的时间在项目架构搭建上,所以设计中将很多细节都黑盒化了(比如create-react-appeject才知道底下到底有哪些依赖,roadhogumi这些集成了整套的webpackmock体系),这些在项目初期带来的效率提升是显著的,但同样的到了后期想再更新或定制一些方案,开发者往往会“无从下手”。

  逼逼叨了半天,每一个人还是要视自身情况来选择实际开发中的项目构建方案。那么下面就开始本文的正题吧,如何从零开始搭建自己的React应用?

考虑方向

  • 生态依赖
  • 工具库
  • webpack
  • ESLint
  • 目录分层
  • 路由配置
  • 数据Mock方案
  • CI

踩坑日志

路由配置

  路由可以说是SPA的灵魂了,至于对应React的选型自然是react-router,本次搭建采用了最新的v5.x版本。下面是一些配置过程中的key point记录。

BrowserRouter vs HashRouter