博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
react+redux实现仿大众点评webapp
阅读量:7191 次
发布时间:2019-06-29

本文共 808 字,大约阅读时间需要 2 分钟。

项目简介

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

慕课网地址:

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

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

项目源码

githup项目源码:

使用git clone地址:git@github.com:wenyuntian/webapp.git

运行步骤

1.clone到本地后,在项目文件夹的根目录和mock文件夹下面运行npm install命令安装项目依赖

2.接着在根目录和mock目录下运行命令npm start启动项目,在浏览器中访问查看项目运行效果

最终效果展示

首页搜索列表详情页面登录页面用户中心城市选择页面

涉及的知识点

前端:

  1. react:使用的构建工具快速搭建的前端框架(需要在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. 图标:项目中使用到的所有图标都是从上下载的(学习过程中发现的素材网站,很好用,推荐!)

后端:

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

转载地址:http://hzxkm.baihongyu.com/

你可能感兴趣的文章
C#运算符大全_各种运算符号的概述及作用
查看>>
移动web开发之像素和DPR
查看>>
排序算法总结之快速排序
查看>>
JAVA 爬虫Gecco
查看>>
iOS开发之三个Button实现图片无限轮播(参考手机淘宝,Swift版)
查看>>
JAVA-开发IDE版本
查看>>
$.ajax()方法详解
查看>>
【Coursera】Fourth Week(1)
查看>>
自定义控件
查看>>
C10K 问题原文
查看>>
BoneCP 升级遇到的问题
查看>>
常用chrome插件推荐
查看>>
python的最最最最最基本语法(3)
查看>>
随机抽样一致性算法(RANSAC)
查看>>
[LeetCode] Repeated Substring Pattern 重复子字符串模式
查看>>
Linux下makefile(一)
查看>>
OAF 使用 javascript 使某个按钮在5秒内不能重复点击
查看>>
编程语言的可移植性
查看>>
ArcGIS Spatial Query
查看>>
Axel替代wget
查看>>