从零搭建React全家桶框架教程

#1

从零搭建React全家桶框架教程

源码地址：https://github.com/brickspert/react-family 欢迎star
提问反馈：blog

写在前面

当我第一次跟着项目做react项目的时候，由于半截加入的，对框架了解甚少，只能跟着别人的样板写。对整个框架没有一点了解。

做项目，总是要解决各种问题的，所以每个地方都需要去了解，但是对整个框架没有一个整体的了解，实在是不行。

期间，我也跟着别人的搭建框架的教程一步一步的走，但是经常因为自己太菜，走不下去。在经过各种蹂躏之后，对整个框架也有一个大概的了解，
我就想把他写下来，让后来的菜鸟能跟着我的教程对react全家桶有一个全面的认识。

我的这个教程，从新建根文件夹开始，到成型的框架，每个文件为什么要建立？建立了干什么？每个依赖都是干什么的？一步一步写下来，供大家学习。

当然，这个框架我以后会一直维护的，也希望大家能一起来完善这个框架，如果您有任何建议，欢迎留言，欢迎fork。

在完善本框架的同时，我准备再新建一个兼容ie8的框架react-family-ie8，当然是基于该框架改造的。

目录

  1. 写在前面
  2. 说明
  3. init项目
  4. webpack
  5. babel
  6. react
  7. 命令优化
  8. react-router
  9. webpack-dev-server
  10. 模块热替换（Hot Module Replacement）
  11. 文件路径优化
  12. redux
  13. devtool优化
  14. 编译css
  15. 编译图片
  16. 按需加载
  17. 缓存
  18. HtmlWebpackPlugin
  19. 提取公共代码
  20. 生产坏境构建
  21. 文件压缩
  22. 指定环境
  23. 优化缓存
  24. public path
  25. 打包优化
  26. 抽取css
  27. 使用axios和middleware优化API请求

详情请移步 https://github.com/brickspert/blog/issues/1

3 Likes
#4

踢上天上去。

#5

没人来顶，我自己来顶！

#6

:+1:赞一下，很用心哈

#7

我用的路由是react-keeper

#8

谢谢。非常感谢您的认可。。嘿嘿

#9

最近这几天一直在看。很不错，对于新手来说入门很好

#10

谢谢。 之前我学习的时候，别人有一点地方写的不详细，就会卡很久。 所以我就尽量写的最最最详细。~

#11

嗯，我现在感觉对单向数据流没有一个深刻的认识。还是要多写一些实例了。

#12

:grinning:

#13

正准备开始学习 感觉这个会帮我大忙。先mark了。共同进步～

#14

这套教程简直太赞了，怎么没人给点星呢

#15

用得好可以去github点个star，帮我推广下。嘿嘿，以后github上还会有其他教程的。

#16

早就点啦，哈哈，很期待你兼容ie8的那套面世

#17

在搞了~~不好弄唉

#18

嗯嗯，确实，ie8坑太深了，我有一个问题，就是框架里异步action那里，请求user.json怎么老是请求不到啊，不是报错。就是loading状态完成后总是匹配到请求失败的action，是需要webpack里装json的loader吗？

#19

不需要的呀。1. 你确认你dist/api/user.json是否存在。 2.代码哪里肯定写不对了，可以和源码对比下。

#20

嗯，我localhost:8080/api/user.json是可以看到数据的。然后可以匹配到等待和错误的action，就是匹配不到成功的！你知道吗，就是代码运行的很正常，只是确实没数据的那种感觉！哈哈，我再仔细看看

#21

这个具体得看你代码如何写的了。你看看是不是promiseMiddleware没写对哦。

#22

我提个建议，使用 unfetch 替代 axois