All Projects → icepy → Fighting

icepy / Fighting

Licence: mit
React全家桶工程 ^_^ 不谢;

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Fighting

React Redux Graphql Apollo Bootstrap Webpack Starter
react js + redux + graphQL + Apollo + react router + hot reload + devTools + bootstrap + webpack starter
Stars: ✭ 127 (+130.91%)
Mutual labels:  webpack3, react-router-v4
React Universal Ssr
webpack3+router4+按需加载+webpack-dev-server热加载
Stars: ✭ 69 (+25.45%)
Mutual labels:  webpack3, react-router-v4
Koa React Universal
lightweight React-Koa2 universal boilerplate, only what is essential
Stars: ✭ 112 (+103.64%)
Mutual labels:  webpack3, react-router-v4
React Blog
personal blog design by react
Stars: ✭ 170 (+209.09%)
Mutual labels:  webpack3, react-router-v4
electron-react
A simple and compact boilerplate for electron and react (redux, router)
Stars: ✭ 66 (+20%)
Mutual labels:  react-router-v4, webpack3
react-chat
react-chat
Stars: ✭ 14 (-74.55%)
Mutual labels:  react-router-v4, webpack3
react-router-v4-redux-ssr
Walkthrough for SSR with rr@v4 and rrr@v5
Stars: ✭ 58 (+5.45%)
Mutual labels:  react-router-v4, webpack3
React Director Admin Template
ReactJS version of Director Responsive Admin Template Free
Stars: ✭ 304 (+452.73%)
Mutual labels:  webpack3, react-router-v4
Typescript React Express
typescript react express example
Stars: ✭ 12 (-78.18%)
Mutual labels:  webpack3
Push Starter
React Redux Starter with SSR 🤖
Stars: ✭ 43 (-21.82%)
Mutual labels:  react-router-v4
React Firebase Authentication
🔥 Boilerplate Project for Authentication with Firebase in React.
Stars: ✭ 863 (+1469.09%)
Mutual labels:  react-router-v4
Tvrboreact
Dream starter project: React, Redux, React Router, Webpack
Stars: ✭ 13 (-76.36%)
Mutual labels:  react-router-v4
React Redux Antdesign Webpack Starter
react + redux + ant design + react-router 4 + webpack 4 starter
Stars: ✭ 44 (-20%)
Mutual labels:  react-router-v4
React Redux Saga Starter
Basic, Opinionated starter kit for React+Redux+Redux Saga with support for SCSS CSS Modules, Storybook, JEST testing, and ESLint
Stars: ✭ 12 (-78.18%)
Mutual labels:  react-router-v4
Universal React Demo
ES6 demo of a simple but scalable React app with react-router, code splitting, server side rendering, and tree shaking.
Stars: ✭ 50 (-9.09%)
Mutual labels:  react-router-v4
React Native Starter Kit
React Native starter kit, get up and running !
Stars: ✭ 9 (-83.64%)
Mutual labels:  react-router-v4
React Router With Props
Custom routes for react router dom
Stars: ✭ 23 (-58.18%)
Mutual labels:  react-router-v4
Koa Vue Ssr Template
This template built with vue 2.x, vue-router & vuex & webpack3 with server-side rendering by koa
Stars: ✭ 53 (-3.64%)
Mutual labels:  webpack3
React Mobx Project
react-mobx-router开发模版
Stars: ✭ 49 (-10.91%)
Mutual labels:  react-router-v4
React Starter
React Starter repository: cache bursting, css extraction, production, hot, react, redux, router, babel, eslint, jsx, webpack 3, editorconfig
Stars: ✭ 33 (-40%)
Mutual labels:  webpack3

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].