路漫漫其修远兮,吾将上下而求索。
背景
完全是出于实践的目的,在一个小业务中,将最新的react工程撸了一遍。【虽说是小业务,两个人也开发了近一周,七个工作日。】
贡献
于是有了这篇文章和【开箱即用】的脚手架工程,其中Options的选项,可以自行移除。不过好消息是这个脚手架工程,我将跟进维护,力保第一时间和react以及其生态周边的库在版本上保持一致。关于react v16.x react-router v4.x的资源,在网路上都有很多,这里就不重复贴了,想说明的是,官网肯定是第一去处。
【开箱即用】icepy/fighting
Options
fighting 使用MIT协议,欢迎过来添砖加瓦。
正题
在开始准备用v16.x写业务之前,还是下了一番苦工,花了一天时间大概的扫了一遍和其他东西的契合度,这才敢下决心试试,不然还真会坑了自己。
由于在v15.x的版本中已经开始使用PureComponent,于是在v16.x中依然沿用着PureComponent,整体上来看v16.x更多的是在“内核”上的改进,书写过程中很好的和上一个版本的知识积累契合,只是多了一些不同的东西,比如错误捕获【生命周期中的一个方法】,直接返回数组等。在react上真正花了点时间的是在表单的处理上,一直到最后发布上线才解决掉那行警告。如果你可以阅读到fighting项目,基本上可以了解到我是怎么看待这个项目的。
标准的redux,定义action,reducers,使用
来做异步处理。
- redux-thunk
- // constants.js
- export const DEFAULT_SYNC_DEFAULT = 'DEFAULT_SYNC_DEFAULT';
- export const DEFAULT_ASYNC_DEFAULT = 'DEFAULT_ASYNC_DEFAULT';
- // actions
- import { DEFAULT_SYNC_DEFAULT, DEFAULT_ASYNC_DEFAULT } from './constants';
- export const getDefault = (params) => {
- return {
- type: DEFAULT_SYNC_DEFAULT,
- payload: {
- data: 'wower'
- }
- }
- }
- export const getAsyncDefault = (params) => (dispatch) => {
- setTimeout(() => {
- dispatch((() => {
- return {
- type: DEFAULT_ASYNC_DEFAULT,
- payload: {
- data: 'icepy'
- }
- }
- })())
- },2000)
- }
- // reducers
- import { DEFAULT_SYNC_DEFAULT, DEFAULT_ASYNC_DEFAULT } from './constants';
- const initState = {
- name: '',
- asyncName: '...'
- };
- export default function defaultReducers(state = initState, action){
- const { type, payload } = action;
- switch (type){
- case DEFAULT_SYNC_DEFAULT:
- return { ...state, name: payload.data }
- case DEFAULT_ASYNC_DEFAULT:
- return { ...state, asyncName: payload.data}
- default:
- return { ...state}
- }
- }
构建基于
来编写,并且对样式进行了
- webpack 3.x
处理。
- autoprefixer
Bash
提炼了三个命令来完成项目的开发:
- $ npm start // 项目启动
- $ npm run mock-server // 启动mock服务器
- $ npm run build // 打包可以发布的资源
目录结构
顶级目录结构如下:
目录结构如下:
- src
目录结构如下:
- containers
根据自己的业务,创建页面级别的组件
发布
使用
构建待发布的资源,请忽略根目录中的
- npm run build
。
- index.html
建议发布规则:
遗留问题
由于时间的原因,对于一些遗留的问题并没有处理好。
期待对于此感兴趣的朋友来提PR
如果有幸阅读到了此处,你对烹饪感兴趣的话推荐关注鄙人的《每周例行》。当然如果你想联系我,可以给我发送私信或关注我的微信公众号fed-talk。
来源: https://juejin.im/entry/5a09a373f265da430702c615