todoList_1-实现基本样式

• 整体样式如下

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

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

   import React, { Component } from "react";

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

1. 基本样式实现 => 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;
   }

1. 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>
       );
     }
   }

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

   import React, { Component } from "react";

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

1. 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>
       );
     }
   }

1. 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>
       );
     }
   }

1. 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>
         </>
       );
     }
   }