一项目介绍

二项目搭建

2.1 本地接口部署

1 创建并导入数据

2 启动接口

3 测试接口

2.2 初始化项目

1 创建项目

2 整理项目的目录

一项目介绍

名称: 好客租房
形式: 移动web端
介绍: 一个在线租房项目,实现了类似链家等项目的功能,解决了用户租房的需求.
核心业务: 在线找房(地图、条件搜索)、用户登录、房源发布等

技术栈:
   react核心库:react、react-dom、react-router-dom
   脚手架: create-react-app
   数据请求: axios
   UI组件库: antd-mobile
   其他组件库: react-virtualized、formik+yup、react-spring等
   百度地图API

二项目搭建

2.1 本地接口部署

1 创建并导入数据

打开navicat

需要navicat的请私信我

打开连接--新建数据库-- 打开数据库--运行SQL文件--选择sql文件--开始

sql文件在网盘里:

链接：https://pan.baidu.com/s/1WtpKB4JIk-X5s7tc7uHTfA
提取码：hkzf

刷新,表已经有了

2 启动接口

在API目录中执行 npm start

看下mysql.js 里面的密码啥的配置和自己数据库里面的是否一致

启动接口

3 测试接口

接口地址http://localhost:8080

接口文档的形式:

输入参数--点excute--就会显示接口的返回结果

2.2 初始化项目

1 创建项目

npx create-react-app hkzf-mobile

2 整理项目的目录

初始的目录结构

文件介绍:

调整src的目录结构

保留index.js、App.js、index.css 这3个文件,新建4个文件夹:assets、components、pages、utils

因为删除了一些文件,所以项目会报错,需要调整一下代码,如下:

index.js

import React from 'react';
import {createRoot} from 'react-dom/client';
import './index.css';
import App from './App';createRoot(document.getElementById('root')).render(<App/>);

App.js


function App() {return (<div className="App">项目根组件</div>);
}export default App;

项目基本结构搭建完毕

react项目实战 1 项目介绍、项目搭建相关推荐

ASP.NET Core分布式项目实战（业务介绍，架构设计，oAuth2，IdentityServer4）--学习笔记...
任务4:第一章计划与目录敏捷产品开发流程原型预览与业务介绍整体架构设计 API 接口设计 / swagger Identity Server 4 搭建登录账号 API 实现配置中心任务5: ...
【网络通信 -- SIP 电话】项目实战记录 -- SIP 服务器 OPENSIPS 搭建测试与 SIP 客户端 PJSIP 编译安装测试
[网络通信 -- SIP 电话]项目实战记录 -- SIP 服务器 OPENSIPS 搭建测试与 SIP 客户端 PJSIP 编译安装测试 [1]SIP 服务器 OPENSIPS 搭建 1.1 安装环 ...
菜鸟修行之路----项目实战：微人事项目之项目概述
菜鸟修行之路----项目实战:微人事项目之项目概述修行之路艰辛,与君共勉!! 从即日起,通过对于github上非常热门的前后端分离开发的开源项目:微人事管理系统的全面学习以及自主手写代码实现 ...
OpenCV-PyQT项目实战（5）项目案例01：图像模糊
欢迎关注『OpenCV-PyQT项目实战 @ Youcans』系列,持续更新中 OpenCV-PyQT项目实战(1)安装与环境配置 OpenCV-PyQT项目实战(2)QtDesigner 和 PyU ...
项目实战-清风粉丝的项目
项目实战-清风粉丝的项目时间紧迫,为了避免麻烦AC直接采用路由模式接入到VLAN30下面.后面给大家再演示胖挂AC 拓扑图核心交换机SW1配置划分vlan vlan10,员工上网使用,需要开启D ...
HaaS EDU物联网项目实战：野外救援项目
HaaS EDU K1是一款高颜值.高性能.高集成度的物联网开发板,板载功能强大的4核(双核300Mhz M33+双核1GHz A7)主芯片,2.4G/5G双频Wi-Fi,双模蓝牙(经典蓝牙/BLE) ...
ASP.NET Core分布式项目实战（课程介绍，MVP，瀑布与敏捷）--学习笔记
任务1:课程介绍课程目标: 1.进一步理解 ASP.NET Core 授权认证框架.MVC 管道 2.掌握 Oauth2,结合 Identity Sercer4 实现 OAuth2 和 OpenID ...
javax maven项目缺少_教育平台项目后台管理系统：介绍与搭建
项目架构项目介绍教育后台管理系统是提供给相关业务人员使用的一个后台管理系统,业务人员可以在这个后台管理系统中,对课程信息.讲师信息. 学员信息等数据进行维护. 课程管理模块课程管理新建课程条 ...
教育平台项目后台管理系统：介绍与搭建
项目架构项目介绍教育后台管理系统是提供给相关业务人员使用的一个后台管理系统,业务人员可以在这个后台管理系统中,对课程信息.讲师信息. 学员信息等数据进行维护. 课程管理模块课程管理新建课程条 ...
Python和Java结合的项目实战_[项目实战] Python高级教程项目实战篇 Python和Java结合的项目实战视频教程 [...
资源介绍课程简介:xa0xa0 Python高级教程项目实战篇 Python和Java结合的项目实战视频教程教学视频 ----------------------课程目录 Python项目实战篇 ...

react项目实战 1 项目介绍、项目搭建

一项目介绍

二项目搭建