![](https://img-blog.csdnimg.cn/20190918140012416.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
S.React快速开发迷你记账簿
React快速开发迷你记账簿
小李科技
欢迎来到我的博客,一起学习与分享技术,欢迎交流
展开
-
React快速开发迷你记账簿 (代码及使用)
完整项目代码https://github.com/lenvo222/10_finish.gitday 01 简介 (这里是项目的简介,没有代码)day 04 使用jquery或axios请求apihttps://github.com/lenvo222/04_User_jquery_axios.git day 05 静态类型的检查和改造https://gi...原创 2018-10-30 14:50:44 · 586 阅读 · 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 · 143 阅读 · 0 评论 -
React快速开发迷你记账簿------ day 09 删除 Record
day 09 删除 Record本节目标:实现删除操作1.设置监听函数,发送请求,删除记录2.更新表单1.设置监听函数参考网址,仿照方法:https://cn.redux.js.org/docs/react-redux/api.htmlsrc\components\Records.js:deleteRecord(){ // console.log(record,"1"...原创 2018-10-30 15:29:22 · 300 阅读 · 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 · 416 阅读 · 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 · 357 阅读 · 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 · 247 阅读 · 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 · 222 阅读 · 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 · 175 阅读 · 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-shihttp://www.mockapi.io/https://github.com/typicode/json-server...转载 2018-10-30 15:02:02 · 183 阅读 · 0 评论 -
React快速开发迷你记账簿------day02 实现 records 列表页
src/components/Records.jsimport React, { Component } from 'react';import Record from './Record';class Records extends Component { constructor() { super(); this.state = { records: [...原创 2018-10-30 15:00:17 · 182 阅读 · 0 评论 -
React快速开发迷你记账簿------day01简介
React快速开发迷你记账簿------day01简介做出一个小型的记账本,效果如下https://github.com/lenvo222/10_finish.git原创 2018-10-30 14:57:28 · 309 阅读 · 0 评论