[JavaScript知识库]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: 0;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
}

.btn-danger {
  color: #fff;
  background-color: #da4f49;
  border: 1px solid #bd362f;
}

.btn-danger:hover {
  color: #fff;
  background-color: #bd362f;
}

.btn:focus {
  outline: none;
}

.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

Header组件

Header/index.jsx

import React, { Component } from 'react'
import "./index.css";

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

Header/index.css

.todo-header input {
    width: 560px;
    height: 28px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 7px;
  }
  
.todo-header input:focus {
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

List组件

List/index.jsx

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

export default class List extends Component {
  render() {
    return (
      <ul className="todo-main">
        <Item/>
      </ul>
    )
  }
}

List/index.css

.todo-main {
    margin-left: 0px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 0px;
  }
  
.todo-empty {
  height: 40px;
  line-height: 40px;
  border: 1px solid #ddd;
  border-radius: 2px;
  padding-left: 5px;
  margin-top: 10px;
}

Item组件

Item/index.jsx

import React, { Component } from 'react'
import "./index.css";

export default class Item extends Component {
  render() {
    return (
      <li>
        <label>
          <input type="checkbox"/>
          <span>xxxxx</span>
        </label>
        <button className="btn btn-danger" style={{display:'none'}}>删除</button>
      </li>
    )
  }
}

Item/index.css

li {
  list-style: none;
  height: 36px;
  line-height: 36px;
  padding: 0 5px;
  border-bottom: 1px solid #ddd;
}
  
li label {
  float: left;
  cursor: pointer;
}

li label li input {
  vertical-align: middle;
  margin-right: 6px;
  position: relative;
  top: -1px;
}

li button {
  float: right;
  display: none;
  margin-top: 3px;
}

li:before {
  content: initial;
}

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

Footer组件

Footer/index.jsx

import React, { Component } from 'react'
import "./index.css";

export default class Footer extends Component {
  render() {
    return (
        <div className="todo-footer">
            <label>
                <input type="checkbox"/>
            </label>
            <span>
                <span>已完成0</span> / 全部2
            </span>
            <button className="btn btn-danger">清除已完成任务</button>
        </div>
    )
  }
}

Footer/index.css

.todo-footer {
  height: 40px;
  line-height: 40px;
  padding-left: 6px;
  margin-top: 5px;
}
  
.todo-footer label {
  display: inline-block;
  margin-right: 20px;
  cursor: pointer;
}
  
.todo-footer label input {
  position: relative;
  top: -1px;
  vertical-align: middle;
  margin-right: 5px;
}

.todo-footer button {
  float: right;
  margin-top: 5px;
}

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖