Skip to content

这是一个react得demo/脚手架项目,包含react16+redux+antd+webpack4+react-router4+sass/less+axios+immutable+proxy技术栈

Notifications You must be signed in to change notification settings

596121109/react_home

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

42 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

react_home

这是一个react的脚手架项目,其中包含着当前最新得脚手架配置方式,技术技术栈包括react16+redux+antd+react-router4++webpack4+sass/less+axios+immutable+proxy,我会长期,并定期维护这个脚手架,将当下react生态圈最新技术运用进去,适用于新手或者关注进阶的朋友学习参考。(广大撸友觉得能用上的,也不要吝啬自己的star哦)

脚手架工具

地址: https://github.com/aiyuekuang/ztao.git(具体用法可直接看该工具的README.md)

更新日志

2018.04.27 日志地址

  1. 将webpack3更新至v4.6,这个版本是稳定的
  2. 还是原来的配方,还是原来的味道,加入了相对简单一点的config配置(这么长时间没更新,不是懒,是实在没的更)

列表图

功能与特色

  1. 项目集成了当前react中最好得ui轮子antd,不解释,已配置好,直接使用
  2. 项目具备了本地开发和打包上线得2个不同状态得场景,在开发状态,本地服务已配置了http-proxy,方便用户跨域调用后端开发得接口,并且本地调试阶段用得是根目录下得index.html,打包上线得时候部署到服务器得是加过hash得index.html这样就避免了测试人员总是无法刷新出新得界面得问题
  3. 项目集成了sass和less这2种样式开发,方便2个阵营得都能愉快使用
  4. 项目没有containers功能块,大家可以看下,我已将这块得代码写入component中,这是因为,在实际得开发过程中,会发现重复写containers非常烦躁,所以我就将他整合进component中,减少不必要得代码量,提高效率与代码清晰度
  5. 本项目使用得axios来作为ajax,有简单得库在utils中的fetchData
  6. immutable我觉得是如今和reducers配合最好得数据处理库,没有之一,新手朋友百度学习吧
  7. 本项目引入了esn得库,一个很小巧得数据操作库,在开发过程中,里面得很多功能都能用到,2个字方便
  8. 本项目没有尝试服务器端渲染,笔者认为,spa最大得特色就是使得前后端得开发模式发生了变化,让整个开发流程变得舒服,前端人员开发出来得代码可以随意得部署在任何地方,而不需要考虑服务器上得问题,而首屏加载过慢得问题可以通过gzip来解决,我想这能满足大多数人得需求,当然了,项目有特殊性,还是有很多项目需要用到服务端渲染,这可以加强研究

注意

如果在build或者start的时候出现node-sass之类的报错,可以使用 npm rebuild node-sass来处理下,再build或start,有不了解的同学可以issues告诉我。

使用方法:

安装模块:npm install  

开发模式:npm start  

打包:npm run build

访问地址:http://localhost:3012

打包上线

  • 将webpack.config.js中的publicPath的 ./ 改成你线上的绝对地址,比如 http://129.0.0.111 之类,然后再执行npm run build
  • 打包后直接将build文件夹提交至你们项目得根目录中
  • 命令并且呵斥你们得后端人员,将404指向build/index.html,这样基本就可以愉快得查看了
  • 如果在上线后首屏调用速度较慢,这样得情况得话,可以鞭挞后端人员,开启服务器得gzip压缩功能将js压缩一下,压缩后大小基本只有原来得三分之一,这个很实用

希望

  • 本项目是根据react社区一些朋友分享得脚手架综合,并且实际项目运用后所得出得经验
  • 朋友们如果有一些对本项目得建议,或者想法欢迎issues,将持续改进

About

这是一个react得demo/脚手架项目,包含react16+redux+antd+webpack4+react-router4+sass/less+axios+immutable+proxy技术栈

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 92.2%
  • JavaScript 7.5%
  • HTML 0.3%