React 的一个参考结构
config/
default.js
production.js
components/
button/
styles/
input/
src/
home/
user/
__tests__/
stores/
__tests__/
userStore.js
actions/
userActions.js
styles/
userComponent.jsx
other/
因为牵扯到不同环境中的部署,我们需要一个统一配置管理这些可变量的地方,
config 和 envify-config 这两个库可以确保我们更好的维护这些配置, 并且在需要的时候替换某个代码。
config/
文件夹便是用于存放配置处理的地方。
React 其实算是 Web Component 的 JavaScript 的一种实现,
它解决了 Component 间模块化管理的问题。
而同业务的关联程度的高低,我们是可以抽成通用 Component
和业务 Component
的, 这里分别放在 components/
和 src/
文件夹下。
对于 通用 Component
是和业务没有直接关系的,仅作为对某种类型的数据或数据结构的封装(含交互),
以及内容的容器,并且往往是需要进行自动文档的的部分,
我们可以用 react-docgen 来生产这样的文档,以方便业务模块的使用。
因为和业务没有直接关系,flux(reflux)的通信是不与 通用 Component
直接通信的,只需要确保一点,在相同的 props 传入和内部 state 的状态一致的时候,render 而成的 html 必须一致。
对于第三方库的处理也应该如此,直接将基于 jQuery 的代码直接放在 React 不是一个好主意,需要改造,成本也不算高。
jQuery 的意义不大,与后端通信的部分,可换功能更单一的 superagent
然后,业务 Component
,一是将上面提到的 通用 Component
组装成我们需要的业务,
另一,确定好数据的流向,定义好 actions 与 store 等,与 flux 框架直接通信,当然,也包含与后端的交互。
测试文件(单元测试部分),建议是伴随文件,像这样,「矩阵」的方式难免遗漏。