【源码】基于 React 全家桶的大众点评 Web 应用

项目简介

本项目是基于 React 全家桶开发的大众点评 Web 应用，适合刚了解、熟悉 React 全家桶，缺乏项目经验或不知如何组织项目，想通过实战提高 React 技术的人员。项目运用多种方式编写组件，助力开发者快速上手 React 全家桶及相关技术。

项目的主要特性和功能

1. 丰富的技术栈：以 React 为核心框架，结合 React-router-dom 管理路由，用 Redux 及 React-redux 管理状态，Redux-Thunk 处理异步操作，还采用 antd 作为 UI 库。
2. 请求封装：封装了原生 fetch 请求库和 axios 请求库，便于数据请求。
3. 组件多样：使用 React 类组件、函数组件、React-Hook 编写组件，通过高阶组件封装部分组件，实现动态加载组件。
4. 定制功能：配置了定制 antd 主题和路径别名等功能。
5. 资源缓存：借助 workbox-webpack-plugin 插件对资源进行缓存，加快加载速度。

安装使用步骤

下载项目

用户需先下载本项目的源码文件。

安装前端依赖

开启一个命令行窗口，进入 my-app 目录，运行 npm install 或者 yarn add 安装依赖。 安装完成后，运行 npm run start 在浏览器上启动项目。若遇到 Error: Cannot find module 'react-redux' 错误，运行 npm install react-redux 进行安装。 运行 npm run build 可对项目进行打包。

启动后台服务器（可选）

开启另一个命令行窗口，进入 my-app->src->server 目录，运行 npm install 或者 yarn add 安装依赖。 安装完成后，运行 node index.js 启动服务端，服务端跑在 http://localhost:3003。若遇到 Error: Cannot find module 'cors' 错误，运行 npm install cors 进行安装。

若不启动本地服务端，可直接使用已部署好的后台接口 http://119.23.17.221:3003/，需修改 utils 目录下的 axiosRequest.js 文件，修改内容如下： javascript if( process.env.NODE_ENV === "development" ) { // axios.defaults.baseURL = "http://localhost:3003";//开发环境下的前序 axios.defaults.baseURL = "http://119.23.17.221:3003";//后台服务器提供的接口 }else if( process.env.NODE_ENV === "production" ) { axios.defaults.baseURL = "http://119.23.17.221:3003";//后台服务器提供的接口 }

注意事项

在 npm install 或 yarn add 时，请确保网络良好，如个别依赖安装不了，请设置淘宝镜像为安装源。

下载地址

点击下载 【提取码: 4003】【解压密码: www.makuang.net】