fighting:React 全家桶工程,开箱即用

综合技术 2017-11-15

fighting

这是一个react工程项目,开箱即用,它拥有如下配置,如果这不是你喜欢的,可以随时移除。

标准的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 项目源文件
  • build 构建脚本
  • config 构建脚本依赖的配置信息
  • dist 构建完成可发布的资源目录

src
目录结构如下:

  • components 公共组件
  • globals 公共reducers
  • routers 路由
  • containers 页面级别的组件
  • styles 公共样式
  • shared 抽象出来的request util等
  • store redux store
  • app.js 入口.js

containers
目录结构如下:

根据自己的业务,创建页面级别的组件

  • index.js 入口.js
  • .jsx 页面级别的组件
  • .less 页面级别的样式
  • components 这个页面独用的组件
  • flow 这个页面需要的action reducers

发布

使用 npm run build
构建待发布的资源,请忽略根目录中的 index.html

建议发布规则:

  • 打包出来的dist发布到CDN中
  • 自己在服务端创建一个index.html,使用服务端输出的方式来引用一个version版本变量
  • 这个变量对应CDN的版本号

LICENSE

MIT License

Copyright (c) 2017

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

您可能感兴趣的

React.js with WordPress as a Backend: WP REST API ... Photo by Ross Findon on Unsplash Even the biggest companies in a given space need to adapt to survive. Apple w...
【译】React的8种条件渲染方法 本文是译者第一次做完整的全篇翻译,主要目的是学习一下这类文章的写作风格,所以挑了一篇相对入门、由浅入深的文章,全篇采用直译,即使有时候觉得作者挺啰嗦的,也依然翻译了原文内容。 原文地址: 8 React conditional rendering methods 相较于Javascri...
Visualising Nested Data using React & D3 We all have heard the sound bite ‘ Data Is The New Oil’ , but without the right visualisation any data is as good as useless. Data Visual...
React 同构应用 PWA 升级指南 // sw.js self.addEventListener('fetch', (e) => { console.log('现在正在请求:' + e.request.url); const currentUrl = e.request.url; // 匹配上页面路径 if (m...
The significance of React keys – a visual ex... Disclaimer: This is a gross oversimplification and should be used as a basic guide on how reconciliation works, not a perfect example! When handling...
Github

责编内容来自:Github (本文源链)

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。