react入门小项目（ant design，路由，mock和axios）

一、配置环境

• 搭建脚手架：
  全局安装create-react-app：

npm install -g create-react-app

此时，默认安装了
初始化项目：npm init
安装依赖包：

npm install -S react react-dom babel-standalone create-react-app

react 核心库
react-dom 与dom相关的功能
babel-standalone 将jsx解析为js
create-react-app 搭建react脚手架（待更详细更准确）

npm install -S antd react-router-dom

antd:ant design
react-router-dom:路由

前面的没记笔记，QAQ

二、路由

本次实践中，主要使用路由实现同级组件间的参数单向传递,
实现功能：点击组件A按钮，获取相应参数a，传递给组件B，组件B根据接收到的数据a，想服务器发送请求，获取a对应的数据，在页面渲染。
1.传递方组件A：
导入：import {NavLink} from 'react-router-dom';
布局：<NavLink to={'/Details/1'}>{n.title} </NavLink>

2.父级组件：（组件导入就不写了）
导入：import {BrowserRouter,Route,Switch,Redirect} from 'react-router-dom';
布局：

<BrowserRouter>
<Row>
    {/* 传递方组件A */}
    <Col span={6}><ChildMenu /></Col>
    <Col span={18}>
    <Switch>
        {/* 接收方组件B */}
        <Route path='/Details/:id' component={Details}/>
    </Switch>
    </Col>
</Row>
</BrowserRouter>

3.接收方组件B：

• this.props.match.params.id为组件B传递过来的参数，其中id对应父组件Line7中的id
• 为了保存数据，采用同步请求，不知道有没有更好的方法

var ListA = [];
// 接收的id
const dId = this.props.match.params.id; 
const dUrl = 'https://easy-mock.com/mock/5d12d456205f5f5de286bc0b/luory/'+