React 学习笔记（3） B站视频总结1

视频地址

项目基础

react-cli

// 项目结构
src
│  App.js # 应用根组件
│  index.js # 入口js
├─api
├─assets    
├─components    
├─config # 配置
├─pages # 路由组件
└─utils # 工具模块

antd路由使用

import React, { Component } from 'react'
/**
 * BrowserRouter： 使用了 HTML5 history API 的高阶路由组件，保证UI 界面和 URL 保持同步。
 * Switch： 匹配路由
 * Route： 将匹配的路由导航到目标页面
 */
import { BrowserRouter, Switch, Route } from 'react-router-dom'

import Login from '../pages/login'
import Admin from '../pages/admin'

class BasicRoute extends Component {
  render() {
    return (
      <BrowserRouter>
        <Switch>
          <Route path='/login' component={Login} />
          <Route path='/' component={Admin} />
        </Switch>
      </BrowserRouter>
    )
  }
}

export default BasicRoute

封装 ajax 请求模块

src
├─api
│    ajax.js
│    index.js

// axios.js
import axios from 'axios'
import {message} from 'antd'

export default function ajax(url, data={}, type='GET') {

  return new Promise((resolve, reject) => {
    let promise
    // 1. 执行异步ajax请求
    if(type==='GET') { // 发GET请求
      promise = axios.get(url, { // 配置对象
        params: data // 指定请求参数
      })
    } else { // 发POST请求
      promise = axios.post(url, data)
    }
    // 2. 如果成功了, 调用resolve(value)
    promise.then(response => {
      resolve(response.data)
    // 3. 如果失败了, 不调用reject(reason), 而是提示异常信息
    }).catch(error => {
      // reject(error)
      message.error('请求出错了: ' + error.message)
    })
  })
}

// index.js
import ajax from './ajax'

const BASE = 'http://localhost:5000'
// 登陆
export const reqLogin = (username, password) => ajax(BASE + '/login', {username, password}, 'POST')

// 获取一级/二级分类的列表
export const reqCategorys = (parentId) => ajax(BASE + '/manage/category/list', {parentId})

// ...

封装 jsonp 请求模块

// api/index.js
// yarn add jsonp
import jsonp from 'jsonp'
import {message} from 'antd'

export const reqWeather = (city) => {
  return new Promise((resolve, reject) => {
    const url = `http://api.map.baidu.com/telematics/v3/weather?location=${city}&output=json&ak=3p49MVra6urFRGOT9s8UBWr2`
    // 发送jsonp请求
    jsonp(url, {}, (err, data) => {
      console.log('jsonp()', err, data)
      // 如果成功了
      if (!err && data.status==='success') {
        // 取出需要的数据
        const {dayPictureUrl, weather} = data.results[0].weather_data[0]
        resolve({dayPictureUrl, weather})
      } else {
        // 如果失败了
        message.error('获取天气信息失败!')
      }
    })
  })
}

注意配置代理，解决跨域

主页结构

// 后台管理主路由组件
import React, { Component } from "react"
import { Redirect, Switch, Route } from 'react-router-dom'
import { Layout } from "antd"

/**
 * 导入组件
 * 注意 侧边组件\头部\底部组件都是在定义在components文件夹下
 * 其他content中的组件定义在 pages 文件夹下
 */
import LeftNav from '../../components/left-nav'
import Home from '../home/home'
import User from '../user/user'
import Bar from '../charts/bar'
import Line from '../charts/line'
import Pie from '../charts/pie'
import Order from '../order/order'
import NotFound from '../not-found/not-found'

const { Header, Footer, Sider, Content } = Layout


export default class Admin extends Component {
  render() {
    return (
      <Layout style={{ minHeight: "100%" }}>
        <Sider>
          <LeftNav />
        </Sider>
        <Layout>
          <Header>1234</Header>
          <Content style={{ margin: 20, backgroundColor: "#fff" }}>
            <Switch>
              <Redirect from="/" exact to="/home" />
              <Route path="/home" component={Home} />
              <Route path="/user" component={User} />
              <Route path="/charts/bar" component={Bar}/>
              <Route path="/charts/pie" component={Pie}/>
              <Route path="/charts/line" component={Line}/>
              <Route path="/order" component={Order}/>
              <Route component={NotFound} /> // 精确匹配
            </Switch>
          </Content>
          <Footer>底部</Footer>
        </Layout>
      </Layout>
    )
  }
}

自定义无状态组件

import React from 'react'
import './index.less'

export default function LinkButton(props) {
  return <button {...props} className="link-button"></button>
}

.link-button {
  color: #333333;
  cursor: pointer;
}

import LinkButton from '../../components/link-button'

render(props) {
  return (<div>
        <LinkButton onClick={() => console.log('LinkButton')}>修改</LinkButton>
    </div>)
)