todoList_1-实现基本样式

新建 4 个组件, 目录如下

$ ls -R src/
  src/:
  App.css App.js  components/  index.js

  src/components:
  Footer/  Header/  Item/  List/

  src/components/Footer:
  index.jsx

  src/components/Header:
  index.jsx

  src/components/Item:
  index.jsx

  src/components/List:
  index.jsx

单个组件内容, 例如 Footer => index.jsx

import React, { Component } from "react";

export default class Footer extends Component {
  render() {
    return <div>footer</div>;
  }
}

基本样式实现 => App.css

* {
  padding: 0;
  margin: 0;
  border: none;
  box-sizing: border-box;
}

button {
  position: absolute;
  right: 0;
  cursor: pointer;

  padding: 4px 8px;
  border-radius: 5px;
  color: #fff;
  background-color: red;
}

/* App样式 */
.App {
  width: 400px;
  margin: 20px;
  border: 1px solid #eee;
  padding: 0 10px;
  border-radius: 5px;
  font-size: 10px;
}

/* Header */
.header-input {
  border: 1px solid #eee;
  margin-top: 10px;
  width: 100%;
  padding: 10px;
  border-radius: 3px;
}

/* Footer */
.footer {
  position: relative;
  display: flex;
  align-items: center;
  padding: 20px 0;
}

/* List */
.list {
  margin-top: 5px;
  border: 1px solid #eee;
  padding: 0 10px;
}

/* Item */
li {
  position: relative;
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}

li:last-child {
  border-bottom: 0;
}

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="App">
        <Header />
        <List />
        <Footer />
      </div>
    );
  }
}

Header 内容, 实现输入框 => index.jsx

import React, { Component } from "react";

export default class Header extends Component {
  render() {
    return (
      <>
        <input
          className="header-input"
          type="text"
          placeholder="请输入任务名称, 摁回车键确认"
        />
      </>
    );
  }
}

Footer 内容, 实现底部布局 => index.jsx

import React, { Component } from "react";

export default class Footer extends Component {
  render() {
    return (
      <div className="footer">
        <label>
          <input
            type="checkbox"
            style={{ verticalAlign: "middle", marginTop: 0 }}
          />
        </label>
        <span>
          <span>已完成0</span> / 全部0
        </span>
        <button>清除已完成任务</button>
      </div>
    );
  }
}

List 内容, 包裹 Item => index.jsx

import React, { Component } from "react";
import Item from "../Item";

export default class List extends Component {
  render() {
    return (
      <div className="list">
        <Item />
        <Item />
      </div>
    );
  }
}

Item 列表 => index.jsx

import React, { Component } from "react";

export default class Item extends Component {
  render() {
    return (
      <>
        <li>
          <label style={{ display: "flex" }}>
            <input
              type="checkbox"
              style={{ verticalAlign: "middle", marginTop: 0 }}
            />
            <span>{123}</span>
          </label>
          <button style={{ display: "none" }}>删除</button>
        </li>
      </>
    );
  }
}