react+redux实现仿大众点评webapp

发布时间:2019-08-05 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了react+redux实现仿大众点评webapp脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

项目简介

此项目是学习react+redux过程中跟着慕课网做的一个练手项目,模仿大众点评做的一个webapp,项目不是很复杂,适合有一定react+redux基础的同学参考。
慕课网地址:https://coding.imooc.com/clas...

项目的前端界面使用react+less编写,后端使用的exPress框架搭建,后台返回的数据全部是模拟的数据,不涉及数据库交互。

后续可能会再写一篇文章(看心情),讲解部分代码,如果项目对大家学习react有一点帮助,麻烦在clone的同时顺手给个☆star☆

项目

gIThup项目源码:https://github.com/wenyuntian...
使用git clone地址:git@github.COM:wenyuntian/webapp.git

运行步骤

1.clone到本地后,在项目文件夹的根目录和mock文件夹下面运行npm install命令安装项目依赖
2.接着在根目录和mock目录下运行命令npm start启动项目,在浏览器中访问http://localhost:3000/查看项目运行效果

最终效果展示

react+redux实现仿大众点评webapp

react+redux实现仿大众点评webapp

react+redux实现仿大众点评webapp

react+redux实现仿大众点评webapp

react+redux实现仿大众点评webapp

react+redux实现仿大众点评webapp

涉及的知识点

@H_360_58@前端:
  1. react:使用的create-react-app构建工具快速搭建的前端框架(需要在Package.json配置跨域代理)。
  2. redux:使用redux管理react组件的状态,实现各组件之间的通信。
  3. axios使用axios对get、post方法进行了简单的封装,用于前后端数据交互。
  4. localStorage:简单的了解了一下localStorage,封装了get和set方法,将城市选择的城市信息存储在localStorage中。
  5. less:使用less编写css样式。(注意:在create-react-app中默认不使用less,需要自行安装less-loader模块,并在webpack进行配置)
  6. 图标:项目中使用到的所有图标都是从icoMoon上下载的(学习过程中发现的素材网站,很好用,推荐!)

后端:

  1. 后端使用exPRess快速搭建的一个后台数据,为了简单没有链接数据库,所有的数据都是模拟的数据。

脚本宝典总结

以上是脚本宝典为你收集整理的react+redux实现仿大众点评webapp全部内容,希望文章能够帮你解决react+redux实现仿大众点评webapp所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。