Use React to make a small demo
aims:
1) Initialize the project
2) Use ant-mobile component library
3) Complete the overall layout of the project
4) Complete the carousel picture on the homepage
5) Use Baidu Map API to complete the positioning function
6) Use react-virtualized to complete the city selection function
Project preparation
Overall project layout
Home Module
City selection module
react developer tools (Google Chrome) : https://www.cnblogs.com/gopark/p/12253892.html
1. Project preparation
1) Project introduction
Core business: online house search (map, condition search), login, house release
Technology stack:
a）React核心库：react react-dom react-routerrouter-dom
b) Scaffolding: creat-react-app
c) Data request: axois
d) UI component library: antd-mobile
e) Baidu Map API
2) Project construction
a) Local interface deployment (database, interface)
b) Initialize the project using scaffolding
Local interface deployment
Initialize the project
a) Initialize the project: npx create-react-app projectName
b) Start the project: npm start
c) Adjust the structure of the project directory src
3) Configure basic routing
a) Install the routing plug-in react-router-dom
npm i react-router-dom -Sb) Import routing components: Router/Route/Link
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'c) Create Home/index.js CityList/index.js file in pages
d) Use the Route component to configure the homepage and city selection page
<Route path="/home" component={Home} />
<Route path="/cityList" component={CityList} />The content of the app.js file is as follows
2. Project layout
The page has two styles with TabBar and without TabBar
The TabBar is implemented by routing nesting
1. Nested routing
The routing contains routing: Home component represents the parent routing content, News component represents the child routing content
Steps for usage
a) Create News/index.jx component under the pages folder
b) The Home component adds Route to indicate that it is used as a sub-route exit
const Home = () => (
<div>
<Route path="/home/news" component={News} />
</div>
)c) Set the path of the nested road, starting with the parent route path (displayed by the parent component, and only displayed by the child component)
2. Implement TabBar
1) Basic use
a) Open the component TabBar document in the antd-mobile component library
b) Select the "APP type tab" menu, click "</>" to display the source code
c) Copy the core code to the Home component
d) Adjust the code to make the project run
2) Modify the appearance style of TabBar
a) Modify the text title of the TabBar menu item
b) Modify the text title color of the TabBar menu item (selected and unselected)
Refer to the official website document for the above two steps
c) Use the font icon to modify the icon of the TabBar menu
Introduce font library files in the assets of the project
Introduce the style file of the font icon library in index.js
// 导入字体图标库的样式文件
import './assets/fonts/iconfont.css'Use the font icon in TabBar.Item, when the selected font color is set in TabBar, the color of the selected icon is the same as the selected font color
icon={<i className="iconfont icon-ind" />}
selectedIcon={<i className="iconfont icon-ind" />}The default icon is modified
d) Modify the icon size of the TabBar menu item
Since the size of the font icon is controlled in iconfont.css, it needs to be resized
Create a new Home/index.scss file
.home{
.iconfont{
font-size: 20px;
}
}
Introduce styles in the Home component
// 导入组件自己的样式
import './index.scss';Increase the style weight in Home/index.scss, that is, write the class under .home
<div className="home">e) Modify the position of the TabBar menu so that it is fixed at the bottom of the page
Modify the style of .am-tab-bar-bar
.home{
.iconfont{
font-size: 20px;
}
.am-tab-bar-bar {
position: fixed;
bottom: 0;
}
}3) Implement TabBar
Use TabBar with routing
a) According to the TabBar component document, set the content not to be rendered (the menu item is retained, and the content is not displayed), and set noRenderContent to true
<TabBar
tintColor="#21b97a"
barTintColor="white"
noRenderContent={true}
>b) Bind the click event to TabBar.Item, and realize the routing switch function through programmatic navigation
c) In the click event, call props.history.push() to realize routing switch
<TabBar.Item
title="首页"
key="home"
icon={<i className="iconfont icon-ind" />}
selectedIcon={<i className="iconfont icon-ind" />}
selected={this.state.selectedTab === 'blueTab'}
onPress={() => {
this.setState({
selectedTab: 'blueTab',
})
this.props.history.push('/home/list')
}}>
</TabBar.Item>d) Create the other 3 components corresponding to the TabBar component menu item, and configure routing information in the Home component
e) Add the selected attribute to the menu item, and set the currently matched menu item to light up, that is, to highlight the matching component through location.pathname
slectedTab = this.props.location.pathname
<TabBar.Item
selected = {selectedTab === '/home/list'}
/>Some key codes are given below
constructor(props) {
super(props)
this.state = {
selectedTab: this.props.location.pathname
}
} {/* 渲染子路由 */}
<Route path="/home/index" component={Index} />
<Route path="/home/list" component={List} />
<Route path="/home/news" component={News} />
<Route path="/home/profile" component={Profile} /> <TabBar.Item
title="首页"
key="home"
icon={<i className="iconfont icon-ind" />}
selectedIcon={<i className="iconfont icon-ind" />}
selected={this.state.selectedTab === '/home/index'}
onPress={() => {
this.setState({
selectedTab: '/home/index'
})
this.props.history.push('/home/index')
}}
data-seed="logId"
>
</TabBar.Item>TabBar.Item code refactoring
Now the code has 4 TabBar.Item, and their structure is the same, but the data is different, so that the data can be encapsulated, and then JSX can write one, and realize DOM writing through Array.map
a) Provide menu data (including unique information of menu items)
const tabItems = [
{
title: '首页',
icon: 'icon-ind',
path: '/home/index'
}
]b) Use the map method to traverse the data and render TabBar.Item, that is, to achieve deduplication in the same place through traversal
// 渲染TabBar.Item
renderTabBarItem() {
return tabItems.map((item) => {
return (
<TabBar.Item
icon={<i className={`iconfont ${item.icon}`}/>}
selectedIcon={<i className={`iconfont ${item.icon}`} />}
title={item.title}
key={item.title}
selected={this.state.selectedTab === item.path}
onPress={() => {
this.setState({
selectedTab: item.path
})
this.props.history.push(item.path)
}}
/>
)
})
}
Third, the home page module
1. Homepage routing processing
Redirect to the home page when the path does not match; redirect to the home page when the default route
a) Modify the routing rule in Home/index.js to: /home (remove /index), exact match
<Route exact path="/home" component={Index}/>b) With the default route path="/", use the render attribute and the <Redirect> component to realize the default jump to the /home route document and write in the root component
<Route exact path="/" render={() => <Redirect to="/home" />} />c) The render property is a function props that specifies the content of rendering
d) Redirect component, which implements routing redirection, the to attribute specifies the routing address to be redirected to
App.js content is as follows
import {BrowserRouter as Router, Route, Redirect} from 'react-router-dom'
// 导入组件
import Home from './pages/Home'
import CityList from './pages/CityList'
function App() {
return (
// Router包裹整个应用
<Router>
<div className="App">
{/* 配置默认路由 */}
<Route exact path="/" render={() => <Redirect to="/home" />} />
{/* 配置路由 */}
<Route path="/home" component={Home}/>
<Route path="/cityList" component={CityList}/>
</div>
</Router>
);
}
export default App;