react实战记录系列（一）

先看一张图，代表我们的这次实战拆分的文件结构

文件配置信息

1、入口的index.js文件

import React from 'react';  // 引入react
import ReactDOM from 'react-dom';  // 引入react-dom
import {
   BrowserRouter} from 'react-router-dom'  // 引入react路由，这里我们是用BrowserRouter
import 'antd/dist/antd.css'; // 引入antd的css文件
import App from './app'; //app作为我们的页面结构页
import {
   Provider} from 'react-redux' // 利用Provider向下传递store//↓
import store from './store/index'; // store文件			        //↓
ReactDOM.render(												//↓
  <BrowserRouter>							//工作当中BrowserRouter包Provider
   <Provider store={
   store}> 			    //或者Provider包BrowserRouter都可以，store在这里传递下去
        <App />
   </Provider> 
   {
   /* <App />*/}
  </BrowserRouter>,
  document.getElementById('root')
);

在入口的index.js文件引入一些我们需要的东西（配置完，这个index.js就完事了，不用管了）

2、入口的app.js文件（app）

在入口的app.js中，我们做整体的布局配置

import React from 'react';
import {
   Layout} from "antd";//用到了antd中的layout(布局组件)
import './static/css/common.css'
import {
    Switch, Route } from 'react-router-dom';
import Header from './component/header';//头部是公用的，单独摘出去
import Footer from './component/footer';//尾部是公用的，单独摘出去
import {
   routes} from './routes/index';  //单独建一张路由表便于维护

function App(){
   
    return (
        <Layout className="layout">
            <Header />//头部组件
            <Layout.Content className="layout-content">
                <div