React.js学习（一）：设计并实现一个“任务清单列表”

今日算是React.js学习的第一天，经过昨天前端基本知识的学习，让我能比较顺利的上手React框架。今日实践是一个网页记事清单，由于不是很熟练，任务删除还没写，懒得写的了，做个总结。

1.React.js 

这个框架跟Vue.js一样有名气，谁好谁坏我也不知道，但React.js的使用还是比较亲民的。这个框架跟其他框架一样，把页面分割成了一个个的“组件”，React称为“Component”。要实现一个页面，无非是逻辑上将页面模块化，然后实现一个个的模块，最后搭好积木。要使用React，至少需要了解的几个部分：

1. 属性：state，refs，props
2. 组件：函数式组件，类组件
3. jsx语法
4. 组件的生命周期
5. 事件处理
6. 脚手架（提高开发效率）

2.实现“任务清单”

任务清单与上一个时钟小案例类似，也是分离js,html,css文件。使用React脚手架，只需要修改App.js,并实现自己的组件即可。

（1）组件：TodayStamp 今日时间

import React from 'react'
import "./TodoList.css"

class TodayStamp extends React.Component{
    render() {
        let today = Date.now()
        today = new Date(today)
        return <div className={"TodayStamp"} {...this.props}>Today: {today.toDateString()}</div>
    }
}

export default TodayStamp;

（2）组件： ListForm 清单列表

import React, {createRef} from 'react'
import "./TodoList.css"

class ListForm extends React.Component{
    constructor() {
        super();
        this.state = {counter: 0}
        this.toDoListArray = []
        this.input = createRef()
        this.ul = createRef()
    }
    render() {
        return (
            <div>
                <form className={"form"} onSubmit={this.dealWithSubmit}>
                    <input ref={this.input} className="form_input" type="text" id="todo" name="to-do" size="30" required/>
                    <button className="button"><span>提交</span></button>
                </form>
                <div>
                    <ul ref={this.ul} className="List">
                        {
                            this.toDoListArray.map(function (e, idx){
                                return <li>{idx+1}.{e.text}<br/>创建时间： {e.startTime}</li>
                            })
                        }
                    </ul>
                </div>
            </div>
        )
    }
    dealWithSubmit = (event) => {
        event.preventDefault();
        // 唯一标识
        let itemId = String(Date.now());
        // 任务创建时间
        let startTime = new Date(Date.now()).toDateString()
        console.log(startTime)
        // 内容
        let todoItem = this.input.current.value;

        this.addItemToDOM({"itemID": itemId, "startTime": startTime, "text": todoItem})
    }
    addItemToDOM = (object)=>{
        this.toDoListArray.push(object)
        this.setState({counter: this.state.counter+1})
    }
}

export default ListForm;

（3） 组件：任务清单（加入上面两个组件合成）

import React from 'react'
import TodayStamp from "./TodayStamp";
import ListForm from "./ListForm";
import "./TodoList.css"

class TodoList extends React.Component{
    render() {
        return (<div className={"TodoList"}>
            <label className={"TL_title"}>任务清单</label>
            <ListForm/>
            <TodayStamp/>
        </div>)
    }
}

export default TodoList;

 （4）样式表

 样式表使用了一个免费的在线字体，@import的方式导入。

@import url(https://fonts.googleapis.com/css?family=Gochi+Hand);

body{
    background-color: rgba(121, 217, 209, 0.86);
    min-height: 70vh;
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #494a4b;
    font-family: "Gochi Hand", cursive;
    text-align: center;
    font-size: 130%;
}

.TL_title{
    font-family: 'fangsong';
    font-weight: bold;
    justify-content: center;
    margin-bottom: 1rem;
    user-select:none;
}

.TodoList{
    position: relative;

    background: #a9c6ce;
    background-image:
            linear-gradient(rgba(255,255,255,.3) 1px, transparent 0),
            linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 0),
            linear-gradient(white 1px, transparent 0),
            linear-gradient(90deg, white 1px, transparent 0);
    display: flow;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    min-height: 500px;
    max-width: 500px;
    min-width: 250px;
    background-size: 25px 25px;
    border-radius: 20px;
    box-shadow: 4px 3px 7px 2px #000000;
    padding: 1rem;
    box-sizing: border-box;
}

.TodayStamp{
    position: absolute;
    bottom: 0;
    font-size: 2pt;
    font-family: "Gochi Hand", cursive;
    border-top-width: 1px;
    border-top-color: black;
    border-top-style: dashed;
    user-select:none;
}

.form_input {
    background-color: transparent;
    border: none;
    border-bottom: dashed 3px #95a9ea;
    font-family: "Gochi Hand", cursive;
    font-size: 1rem;
    color: rgba(63, 62, 65, 0.7);
    width: 70%;
    margin: auto;
}

.form_input:focus {
    outline: none;
    border: solid 3px #95a9ea;
}

.button {
    position: absolute;
    border: black;
    transform: rotate(4deg);
    transform-origin: center;
    font-family: "SansSerif", cursive;
    font-weight: bold;
    text-decoration: none;
    padding: 0 0 4px;
    border-radius: 5px;
    box-shadow: 0 2px 0 #c5cce7;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    background-color: rgba(231, 236, 243, 0.7);
    margin: auto;
}

.List li{
    position: relative;
    left: 0;
    font-size: 1rem;
    text-align:left;
    font-weight: bold;
}