This project is from b station dark horse video, I just used to learn sorting

Project Introduction: This project is an online rental project, which realizes functions similar to lianjia and other projects and solves users’ rental needs. Core business: 1. Online map search; 2. Conditional search; 3. Listing display

The technology stack involved

  1. React core library: React, React -dom, React -router-dom
  2. Scaffolding: create-react-app
  3. Data request: Axios
  4. UI component library: ANTD-Mobile
  5. Other components: React – Virtualized, Formik, React – Spring, etc
  6. Baidu Map API

The local interface is not deployed temporarily

Project initialization

  1. Initialization project:npx create-react-app hkzf-mobile
  2. Go to the project root directorycd hkzf-mobile
  3. To start the project, run the following command in the project root directory:yarn start
  4. Adjust the SRC directory structureThe effect is as follows:

The routing configuration

  1. Installation route:yarn add react-router-dom
  2. Importing a routing component:Router/Route/Link
import { HashRouter as Router, Route, Link } from 'react-router-dom'
Copy the code
  1. Create it in the Pages folderHome/index.jsandCity/index.js 和 Map/index.jsThree components
  2. Use the Route component to configure the home page, city selection, and map pages
<Switch>
    <Route path="/home" component={Home}></Route>
    <Route path="/city" component={City}></Route>
    <Route path="/map" component={Map}></Route>
</Switch>
Copy the code

About 404

In real mobile, you do not need the navigation link above, but you can generally configure 404 pages

<Router>
  <div className="app">
    <Switch>
      <Route path="/home" component={Home}></Route>
      <Route path="/city" component={City}></Route>
      <Route path="/map" component={Map}></Route>
      <Route component={NoMatch}></Route>
    </Switch>
  </div>
</Router>
Copy the code

/Processing redirects to the home page

<Redirect from="/" to="/home" exact></Redirect>
Copy the code

Introduce the antd – mobile

Basic operation procedure

/ / installation
yarn add antd-mobile
/ / import
import { Button } from 'antd-mobile'
// Import the component library styles (import all the component library styles => will be required in the future)
import 'antd-mobile/dist/antd-mobile.css'
// Render the imported component
render() {
    return <div><Button>This is a button</Button></div>
}
Copy the code

Style to deal with

/** Global style */
* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

html.body {
  height: 100%;
}

body {
  font-family: 'Microsoft YaHei'.'宋体', Tahoma, Arial, sans-serif;
  color: # 333;
  background-color: #fff;
}
Copy the code

Install the sass

Sass is already configured in the React scaffolding, so you only need to install sASS dependencies to use sASS directly

// Configure taobao mirror
yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g
Copy the code
1. Install the sASS dependency package
yarn add node-sass -D
// 2. Change index.css to index.scss
// 3. Import the 'index. SCSS' file

Copy the code

If the SASS version is too high, an error will be reported. You only need to lower the SASS version