S.React快速开发迷你记账簿
React快速开发迷你记账簿
小李科技
欢迎来到我的博客,一起学习与分享技术,欢迎交流
展开
-
React快速开发迷你记账簿 (代码及使用)
完整项目代码 https://github.com/lenvo222/10_finish.git day 01 简介 (这里是项目的简介,没有代码) day 04 使用jquery或axios请求api https://github.com/lenvo222/04_User_jquery_axios.git day 05 静态类型的检查和改造 https://gi...原创 2018-10-30 14:50:44 · 593 阅读 · 0 评论 -
day 10 完结 ,增加统计金额
day 10 完结 ,增加统计金额 本节目标:增加统计金额 1.画页面 src\components\AmountBox.js: import React from "react"; /* 内插变量 */ const AmountBox = ({ text ,type}) => { return ( <div className="col">原创 2018-10-31 08:51:40 · 162 阅读 · 0 评论 -
React快速开发迷你记账簿------ day 09 删除 Record
day 09 删除 Record 本节目标:实现删除操作 1.设置监听函数,发送请求,删除记录 2.更新表单 1.设置监听函数 参考网址,仿照方法: https://cn.redux.js.org/docs/react-redux/api.html src\components\Records.js: deleteRecord(){ // console.log(record,"1"...原创 2018-10-30 15:29:22 · 305 阅读 · 0 评论 -
React快速开发迷你记账簿------day08 day 08 更新 Record
day 08 更新 Record 本节目标:实现更新,编辑操作 1.显示Edit Delete按钮 src\components\Record.js: import React, { Component } from "react"; import PropTypes from "prop-types"; //添加这一行导入静态检查的库 export default class Reco...原创 2018-10-30 15:25:55 · 448 阅读 · 0 评论 -
React快速开发迷你记账簿------day07 发送api请求 创建record
src/components/RecordForm.js 使用mr -1更改间距(bootstrap 语法) ... render() { return ( <form className = "form-inline mb-3"> <div className = "form-group mr-1" >...原创 2018-10-30 15:25:06 · 383 阅读 · 0 评论 -
React快速开发迷你记账簿------day06 创建表单
day 06 创建表单 本节目标:实现这个表单 Records.js文件添加如下代码 ... render(){ const { error, isLoaded, records } = this.state; let recordsComponents;//添加组件 if (error) { recordsComponents...原创 2018-11-12 09:40:26 · 269 阅读 · 0 评论 -
React快速开发迷你记账簿------day05 静态类型的检查和改造
day 05 静态类型的检查和改造 本节目标:学会使用静态类型检查语法 为了保证获取到数据类型的正确性,应该进行静态类型(int 型 or float型)的检查 在Record.js文件中导入PropTypes库(这是个静态检查的库) import React, { Component } from 'react' import PropTypes from 'prop-types' //添加...原创 2018-10-30 15:15:05 · 226 阅读 · 0 评论 -
React快速开发迷你记账簿------day04 使用axios 请求 API 数据
day 04 使用jquery或axios请求api 使用axios 请求api 安装axios库 npm install axios 导入axios库 import axios from 'axios'; 将上一节的生命周期方法的getJSON 更改为axios.get 错误请求error更改为 catch方法 componentDidMount() { ax...原创 2018-10-30 15:04:09 · 180 阅读 · 0 评论 -
React快速开发迷你记账簿------day03 前端模拟 API 数据的两种方式
https://www.rails365.net/movies/react-ji-chu-shi-jian-pian-xiao-xing-cai-wu-xi-tong-3-qian-duan-mo-ni-api-shu-ju-de-liang-zhong-fang-shi http://www.mockapi.io/ https://github.com/typicode/json-server ...转载 2018-10-30 15:02:02 · 208 阅读 · 0 评论 -
React快速开发迷你记账簿------day02 实现 records 列表页
src/components/Records.js import React, { Component } from 'react'; import Record from './Record'; class Records extends Component { constructor() { super(); this.state = { records: [...原创 2018-10-30 15:00:17 · 204 阅读 · 0 评论 -
React快速开发迷你记账簿------day01简介
React快速开发迷你记账簿------day01简介 做出一个小型的记账本,效果如下 https://github.com/lenvo222/10_finish.git原创 2018-10-30 14:57:28 · 337 阅读 · 0 评论