React项目实战一

1，项目搭建

• 1，本地接口部署：
  创建并导入数据：数据库名称hkzf(好客租房)

image

数据文件在hkzfAPI -> db -> .sql文件

hkzfAPI上传百度网盘由于文件过多，需要开通超级会员，所以有需要的直接找我就行！

• 2，启动接口：在hkzfAPI目录中执行npm start，启动swagger接口即可

2，项目搭建

• 1, 初始化项目：npx create-react-app hkzf-app

image

• 2, 项目初始化成功，切换到根目录hkzf-app: yarn start

image

目录结构：

image

• 3, 调整项目中src目录结构如下：

  
  image

3，项目准备

• 1，组件库: antd-mobile
  antd-mobile官方文档

image

• 2，安装：$ npm install --save antd-mobile@next / yarn add antd-mobile@next
• 3，导入要使用的组件

import { Button } from 'antd-mobile'

• 4, 使用

<Button></Button>

4, 配置基础路由

• 1,安装：yarn add react-router-dom
• 2,导入路由组件：Router / Route / Link
• 3, 在pages文件夹里创建Home->index.js和CityList->index.js两个组件
• 4，使用Route组件配置首页和城市页面
  在App.js中引入

  import { BroswerRouter as Router, Route, Link } from 'react-router-dom'
  
  // 导入两个组件
  import Home from './pages/Home'
  import CityList from './pages/CityList'
  
  <Router>
    <div className="App">
      <ul>
        <li><Link to="/home">首页</Link></li>
        <li><Link to="/CityList">CityList</Link></li>
      </ul>
      <Route path="/home" component={Home}/>
      <Route path="/cityList" component={CityList}/>
    </div>
  </Router>
  

5, 项目整体布局

• 1，两种布局页面
  分析：有tabBar的页面和无tabBar的页面

image

有tabBar布局的页面使用嵌套路由即可

• 2，嵌套路由：路由内部包含路由
  • 用Home组件表示父路由的内容
  • 用News组件表示子路由的内容

image

• 使用步骤
  • 1，在pages中创建News/index.js
  • 2，在Home组件中，添加一个Route作为子路由(嵌套的路由)的出口
  • 3，设置嵌套路由的path，格式以父路由path开头(父组件展示，子组件才会展示)
  • 4,修改pathname为/home/news,News组件的内容就会展示在Home组件中了。

  <Router>
    <div>
      <Route path="/home" component={Home}/>
    </div>
  </Router>
  
  const Home = () => {
    <div>
      <Route path="/home/news" component={News}/>
    </div>
  }
  

示例：

// Home组件
import React from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import News from '../News'
export default class Home extends React.Component {
  render() {
    return (
      <div style={{backgroundColor: 'skyblue', padding: 10}}>Home
        <Route path="/home/news" component={News}></Route>
      </div>
    )
  }
}

// News组件
import React from 'react';
export default class News extends React.Component {
  render() {
    return (
      <div style={{backgroundColor: 'green'}}>
          News
      </div>
    )
  }
}

image image

下篇开始实现tabBar，敬请期待