todoList案例（react版本）之搭建静态页面

本篇搭建todoList案例的静态页面。包括以下组件：

1. App组件
2. Header组件
3. List组件
4. Item组件
5. Footer组件

代码涉及以下几个文件：

1. main.js，入口文件。
2. App.js、App.css，即App组件。
3. components/Header文件夹下的index.jsx、index.css，即Header组件。
4. components/List文件夹下的index.jsx、index.css，即List组件。
5. components/Item文件夹下的index.jsx、index.css，即Item组件。
6. components/Footer文件夹下的index.jsx、index.css，即Footer组件。

create-react-app创建的react应用，当前默认使用react的18版本。

入口文件main.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

App组件

App.js

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 (
    <div className="todo-container">
      <div className="todo-wrap">
        <Header/>
        <List/>
        <Footer/>
      </div>
    </div>
    )
  }
}

App.css

body {
   
   
  background: #fff;
}

.btn {
   
   
  display: inline-block;
  padding: 4px 12px;
  margin-bottom