一、目标功能界面
===========================================================================
![在这里插入图片描述](https://img-blog.csdnimg.cn/83722a48a97648898ba314eea8e63174.gif#pic_center)
二、界面模块拆分
===========================================================================
![在这里插入图片描述](https://img-blog.csdnimg.cn/28e6cf093301442e8fe1f67c2dd77ec9.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5pWF6YeM5pyJ6ZW_5a6J5Li25Li2,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
![在这里插入图片描述](https://img-blog.csdnimg.cn/31817644b2ff41b6bda4292c5cdbb83b.png#pic_center)
三、搭建静态页面
===========================================================================
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 (