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

目录

一 项目介绍

二 项目搭建

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/1jdmm579h2BCC2Bh1J66Tgw 
提取码：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;

 项目基本结构搭建完毕