React学习笔记(二):react全家桶项目实战

说明

技术栈: react+redux+react-redux+react-router-dom+redux-thunk+axios
ui框架是采用蚂蚁金服的 antd design
脚手架工具是:create-react-app
使用的后台数据接口是cnode官方的 api,大家有需要的话也可以去用

当然了,大家可能觉得做这个项目用这个技术栈太复杂了,不过我主要是为了学习react技术栈的搭配使用才用的,同时网上也有相关的视频可以看,不过主要是参考,后来我主要是自己看文档完成代码的。

废话不多说,直接上代码 源代码github地址,欢迎star,有纰漏的地方也欢迎评论指正,谢谢。

项目部分截图

在这里插入图片描述

src目录结构

在这里插入图片描述
因为只实现了几个功能,页面较少,所以采用的架构是按照类型划分页面结构,并且采用容器组件与UI组件分离的方式,这样的话UI组件就与数据逻辑解耦了,具有高度的可复用性。actions的话,因为项目的action不算太多,所以就没有用Action Creator,也没有单独出一个action type文件,如果在项目中action type比较多的话,单独出一个action type文件出来最好,方便管理。总的来说,这个项目用来入门react技术栈还是不错的。

运行项目

1、首先在github将项目压缩包下载下来,解压
2、在项目目录里面运行cmd
3、使用如下命令初始化node_modules

npm install

这个过程可能有点慢,因为有很多依赖包要下载,需耐心等待噢~
注意,本地需要node环境
4、node_modules包下载完毕之后,再用如下命令启动项目

npm start

注意,项目使用的是3000端口,所以需要本地的3000端口没有被占用噢

5、运行了npm start之后,等一会儿,就会自动在浏览器启动页面首页了~

中文文档

为了方便大家学习,我在学习过程中看的一些文档在这里列出来,当然了,如果大家英文好的话还是推荐大家去看官方的英文文档噢~

react中文文档

redux中文文档

react-redux中文文档

axios中文文档

最后,谢谢大家看到这里,如果大家有什么意见或建议可以评论留言,我一定虚心接受,谢谢。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值