/react-spa-project

基于 react.js 技术栈构建的纯前端渐进式WEB应用框架开发实践(PWA)

Primary LanguageJavaScript

react-spa-project

基于 react.js 技术栈构建的纯前端SPA项目框架.

技术栈

  • react.js(v15.6)
  • redux react-redux redux-trunk(状态管理,异步action推荐使用redux-saga会更优雅些)
  • react-router4(前端路由,组件异步加载、认证、过渡等)
  • immutable(优化、提升性能)
  • fetch(网络请求封装)
  • styled-components(css in js 方案,语法高亮请使用styled-babel-sublime
  • antd(基于react的UI组件库Ant Design Mobile
  • PWA (渐进式Web应用)
  • Webpack(工程化、自动构建)
  • Redux DevTools extension(支持Redux调试插件,非侵入式)
  • 如果需要实现组件动画效果,推荐使用:Ant Motion
  • 如果需要服务端渲染(SSR),推荐使用:NEXT
  • 如果需要显示页面加载进度,推荐使用:PACE
  • 如果需要日志收集、异常报告服务,推荐使用:Sentry
  • 组织State中的范式化数据,可使用库:normalizr

较新的学习文档

注:UI尺寸直接使用以750为基准的px(自动转rem),参见antd mobile「高清」方案设置

如果你chrome安装了[Egret Inspector](一款H5游戏引擎的调试插件),它可能会和[react-redux]冲突!原因

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:3000
npm start

# build for production with minification
npm run build