react好租客项目Day01-项目演示&项目搭建&antd-mobile的TabBar使用

好客租房移动Web - 上

目标

• 能够初始化项目
• 能够使用 antd-mobile 组件库
• 能够完成项目整体布局
• 能够理解嵌套路由
• 能够使用antd-mobile提供的TabBar组件
• 能够对TabBar进行定制
• 能够实现首页路由的处理

项目介绍

• 好客租房 - 移动 Web 端
• 项目介绍：本项目是一个在线租房项目，实现了类似链家等项目的功能，解决了用户租房的需求
• 核心业务：在线找房（地图、条件搜索）、用户登录、房源发布等

技术栈

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

项目准备

项目搭建（★★★）

• 本地接口部署
  • 创建并导入数据：数据库名称hkzf(固定名称)
• 使用脚手架初始化项目
  • 使用 npx create-react-app hkzf-mobile
  • 进入到项目根目录 使用 npm start

项目目录结构（★★★）

• 调整项目结构

antd-mobile 组件库（★★★）

介绍与使用

• 打开 antd-mobile的文档
• antd-mobile 是 Ant Design 的移动规范的 React 实现，服务于蚂蚁及口碑无线业务。

特性

• UI 样式高度可配置，拓展性更强，轻松适应各类产品风格
• 基于 React Native 的 iOS / Android / Web 多平台支持，组件丰富、能全面覆盖各类场景 (antd-mobile-rn)
• 提供 “组件按需加载” / “Web 页面高清显示” / “SVG Icon” 等优化方案，一体式开发
• 使用 TypeScript 开发，提供类型定义文件，支持类型及属性智能提示，方便业务开发
• 全面兼容 react / preact

适用场景

• 适合于中大型产品应用
• 适合于基于 react / preact / react-native 的多终端应用
• 适合不同 UI 风格的高度定制需求的应用

快速上手

• 创建一个项目

• 安装

  • npm install antd-mobile --save

• 使用

  • 导入组件
  • 导入样式

  // 导入组件
  import { Button } from 'antd-mobile';
  // 导入样式
  import 'antd-mobile/dist/antd-mobile.css';  // or 'antd-mobile/dist/antd-mobile.l