/reactSPA

A Demo SPA developed with React, ES6, Webpack (2.x), and Antd (1.0.1) 【move to react-seed】

Primary LanguageJavaScriptMIT LicenseMIT

Target

使用React技术栈开发SPA.

Tech Stack

  • UI库:React & React-Dom
  • UI组件:Antd
  • 路由:React-Router & History
  • 框架:Reflux
  • JS:ES6
  • 样式:Less
  • 图标:Antd自带/FontAwesome
  • 动画:Animate.css
  • 与后台通信:Fetch/Ajax
  • 日期处理:Moment
  • 假数据模拟:MockJS
  • 打包构建:Babel Webpack
  • 包管理:Npm & Yarn

Features

  • 自主配置开发环境
  • 支持ES6
  • React-Router配置路由
  • Less代替Css
  • Fetch代替Ajax
  • MockJs模拟数据
  • AnimateCSS提供动画效果
  • 支持jQuery
  • 支持浏览器自动刷新

Usage

1、安装依赖:$ yarn install
2、启动服务:$ npm start
3、生成文件:$ npm run build

Articles

Diary(填坑日志)

1、如果引入FontAwesome,会严重增加编译后的CSS文件体积
2、通过定义Vendors,可以抽取出第三方库文件,避免所有js文件打包在一起
3、通过安装babel-plugin-import插件,可以自动抽离用到的ant组件
4、路由的history配置,如果配置成browserHistory,服务器端也需要做相应的配置
5、路由的history配置,如果配置成hashHistory,则url地址里会有难看的后缀
6、编译静态文件的webpack配置中,插件项目需要设置成生产环境NODE_ENV:JSON.stringify("production")
7、实现路由的跳转,页面内的导航,请使用history(自行Github之),这绝壁是个大坑!
8、本项目使用的是antd 1.x版本,想升级到最新版本(2.x),结果需要改动的地方实在太多,于是放弃
9、本项目由于很久以前开发的,导致服务启动后控制台会有大量Warnnings
10、现在使用yarn管理版本,避免了版本冲突,请使用yarn命令安装卸载依赖包:yarn add|remove packages

License

MIT