哪些组件写外面？先写路由还是先写组件。对antd不是很熟

antd-pro 拉一个现成的项目下来看看，你就知道怎么写了

来一步一步说吧

第一步 setup你的项目，比如使用create-react-app

npx create-react-app your-project

第二步 建立的的项目结构，我写个一般常见结构

...
/src
assets/ 素材 图标一类
components/ ui组件
lib/
redux/ redux 的action reducers
hooks/ 自定义hook
helpers/ 帮助函数
utils/ 通用函数
pages/ 页面组件
styles/ 全局css
App.js App组件
index.js React renderDom
Routes.js 应用路由
...

我一般喜欢把整体路由写在src/Routes.js里，然后再App里面引用它，然后再Routes文件里面引用所有pages里面的页面级组件，如果你的路由非常多，可以单独写一个路由文件夹，分片引用。

第三步 其实就是安装一些常用的东西

  • react-router-dom 实现路由
  • react-redux，redux 状态管理

上面两个一般是必须的，下面的也是经常用到的。

  • react-helmet 动态控制页面meta信息
  • react-intl 国际化一些单位，日期等等
  • react-i18next，i18next 多语言支持

还有一些js项目常用的库

  • lodash 难以用语言形容，总之就是基本上能干大部分事
  • react date， momentjs 时间处理的库，时区，日期等等
  • rxjs 事件处理的lodash

总结

既然你用了antd了，应该是ui定制化也不高，八成也是企业业务，其他的就不介绍了。应该是你用antd提供的基础组件来构建你的业务组件，然后最终由page级组件调用业务组件，由路由引用。

最后呢，react怎么用，就看看官方文档吧，这个看上了一两天就够了，官网并不需要梯子。

这里给一些通用的前端开发思想。

分析

首先在拿到一个前端项目的时候，先分析设计稿。把所有页面上能公用的组件列出来，现在找不全不要紧，在以后开发的时候会慢慢发现哪些组件可以重用。有了这些分析好的组件之后，就能够对以后的开发有一个计划，清楚有多少个组件需要开发。开始开发时，有两种方式，对于小一点的项目可以采用自上而下的方法，大一点的项目可以采用自下而上的方法，方便在写组件时进行测试。

自上而下

自上而下的方法，从大局开始。首先开发页面的布局组件 Layout，然后定下头部、导航、测导航、内容和底部区域，再接著定下导航菜单 Navbar，借助 React Router 把页面的导航关系规划好。接下来，从首页开始（或者按项目进度、页面紧急程度来确定先开发哪个页面），把首页各种内容区块分配好，定义成 React 组件。接著再对每个部分更细一点的组件进行定义并实现，直到无法再分割。在开发过程中，就很可能发现一些组件可以拿出来定义成公共的，比如说同样显示的是列表，一个是文章，一个是评论，那么就可以把这个列表定义成可复用的组件，用于控制下拉刷新、控制数量和分页等。对于其它页面也是如此

自下而上

自下而上则跟上边的相反，先从组件入手，可以从首页开始，然后从左到右，从上到下，把最小的组件单元定义好，比如按钮、文本、图标、头像等，定义完之后，把首页划分成区块，用定义好的组件去拼装好这个区块的内容，然后再用 CSS 控制这个区块的布局，这样像搭积木一样，最终把一个页面搭建成型，最后再去加上页面之间的导航关系。

实现功能

上边的开发逻辑是第一步，先把 UI 实现，过程中不考虑状态和事件的处理，包括不限于用户发起的事件、组件请求后端的数据等。因为写 UI 一般是体力活，管理状态是脑力活，要思考很多逻辑，分开会使得开发更有效率。在处理事件和状态的时候，可能会发现有些组件设计的不合理，比如传递多层处理回调函数，或者不方便统一管理状态，这样就需要对组件进行重构，利用 children 减少组件的层级等。在实现功能时，可以按功能块来实现，比如实现列表类的组件功能。也可以按页面来实现，先实现首页，再实现其他页，这个就看公司要求的进度了，如果想快点看到效果就按页面，如果考虑开发效率就按功能。

这些就是我做为前端工程师总结的一些开发套路，希望对你有帮助。

去github上使用 react 关键字进行搜索，看一下多星项目的react代码实践，再对照著写一下，run一下，然后试著改写一下，比如把class改成使用hooks，慢慢地照著写，总归是有收获的，不要太纠结与原理什么的，先写溜了再去研究原理。

安利下自己搭的基于react生态相关技术的脚手架，结合代码学习比较好。

sunnut/react-easy-start

推荐阅读：
相关文章