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

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

1.React.js

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

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

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;
}

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

React(Js)学习
React(Js)学习网络请求的封装 //泛型T根据json格式规定相应的返回数据类型 async function request<T>(method: string, url: st ...
React.js -学习总结1
React.js - 第1天 1. React简介 React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 ...
React.js 学习
目录 Source Expression and statement: React styling: React Components React props Mapping data to comp ...
React.js学习（二）、三大属性statepropsref
一. 组件实例对象属性state 简单示例 <script type="text/babel">//1.创建类式组件class StateComponent exten ...
React Native学习（七）—— FlatList实现横向滑动列表效果
本文基于React Native 0.52 Demo上传到Git了,有需要可以看看,写了新内容会上传的.Git地址 https://github.com/gingerJY/React-Native-D ...
电子学习电子设计竞赛必会元件清单！！！
淘宝店铺地址: 汇诚科技 http://shop36330473.taobao.com (店铺内有相关产品) 无忧电子购物 http://shop36672033.taobao.com(店铺内有相关产 ...
react.js开发_2020 React.js开发人员路线图
react.js开发成为阅读JS开发人员的插图指南,其中包含相关课程的链接 React JS或简称React是用于开发Web应用程序的前端或GUI的领先JavaScript库之一. 在Faceboo ...
React.js开发生态系统概览 [译-转]
React.js 开发生态系统概览 [译] JavaScript领域发展速度很快,甚至有人认为这已经引起了负效应.一个前端库从早期开发的小玩具,到流行,再到过时,可能也就几个月时间.判断一个工具能否在 ...
vue.js 入门案例，双向绑定实现任务清单
vue.js 开发环境安装成功. http://localhost:8080/ 使用vue.js双向绑定实现类似这样一个任务清单页面. 下面是我的学习笔记. //app.vue页面 <templ ...

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

1.React.js

2.实现“任务清单”

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

最新文章

热门文章