一、目标功能界面
===========================================================================
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/34b3d7862661c08d1f37ddc06ebe3069.gif)
二、界面模块拆分
===========================================================================
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/61b2d14479143388b9b3297e409aa14f.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/64eac05cd63dd70c3df3143f351c7c10.png)
三、搭建静态页面
===========================================================================
index.js
import React from “react”;
import ReactDDOM from “react-dom”;
import App from “./App”;
ReactDDOM.render(, document.getElementById(“root”));
App.jsx
import React, { Component } from “react”;
import Header from “./components/Header”;
import List from “./components/List”;
import Footer from “./components/Footer”;
import ‘./App.css’
export default class App extends Component {
render() {
return (