![](https://img-blog.csdnimg.cn/20191128172526209.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
React 技术栈
文章平均质量分 75
记录React相关笔记,比如react基础,路由,RN,react相关生态。
凯小默
专注前端领域开发。
展开
-
react + zarm + rc-form + crypto-js 实现个人中心页面,头像上传,密码重置,登录退出功能
需要实现的大致效果这里大致需要实现4个页面,一个个人中心的主页面,另外还有3个子页面,用户信息修改页,重置密码页,关于我们页。这里关于我们页,就不写了。重点实现一下用户信息修改以及重置密码页面功能。下面样式部分的代码就不粘贴了,有需要的参考我这篇,里面有我学习的项目地址:https://kaimo313.blog.csdn.net/article/details/122586455实现过程1.联调问题以及路由添加一个问题是上传的时候有问题,该问题由Lweilve提出https://blog.csd原创 2022-05-17 20:45:01 · 780 阅读 · 0 评论 -
react + zarm + antV F2 实现账单数据统计饼图效果
需要实现的效果为了方便展示,饼图放到右边标明:实现过程这里我们尝试用一下 antV F2 移动端可视化引擎来实现饼图效果1.F2 移动端可视化引擎F2 是一个专注于移动端,面向常规统计图表,开箱即用的可视化引擎,完美支持 H5 环境同时兼容多种环境(Node, 小程序),完备的图形语法理论,满足你的各种可视化需求,专业的移动设计指引为你带来最佳的移动端图表体验。文档:https://f2.antv.vision/zh饼图:https://f2.antv.vision/zh/exampl原创 2022-05-16 10:53:35 · 1020 阅读 · 0 评论 -
react + zarm 实现账单详情页以及编辑删除功能
需要实现的交互效果编辑的功能点击还是弹出新增账单窗口那个模块,不过需要稍微改动一下。实现过程1.封装公用的头部 Header在 components 目录下新建 Header 目录,添加两个文件 index.jsx 和 style.module.less。import React from 'react';import PropTypes from 'prop-types';import { useNavigate } from 'react-router-dom'import { Na原创 2022-05-12 11:31:34 · 694 阅读 · 0 评论 -
react + zarm 实现新增账单弹窗封装
需要实现的交互效果大致如下图:实现过程1.先编写新增按钮先实现点击新增按钮,调出弹窗的功能。在 src\container\Home\index.jsx 里面添加下面的代码import CustomIcon from '@/components/CustomIcon'import PopupAddBill from '@/components/PopupAddBill'... const Home = () => { ... const addRef = useRef()原创 2022-05-11 20:23:41 · 711 阅读 · 0 评论 -
react + zarm 实现账单列表类型以及时间条件弹窗封装
需要实现的效果点击类型,出现下面的条件弹窗点击时间,出现下面的弹窗实现过程这里用到 popup 组件 https://zarm.design/#/components/popup1.封装类型条件组件新建 components/PopupType,在其内部新建 index.jsx 和 style.module.less 内容如下:import React, { forwardRef, useEffect, useState } from 'react'import PropTypes fr原创 2022-05-07 20:05:16 · 582 阅读 · 0 评论 -
react + zarm 实现账单列表展示页
需要实现的效果实现过程1.安装 dayjsnpm i dayjs -Shttps://dayjs.fenxianglu.cn/category/display.html#%E6%A0%BC%E5%BC%8F%E5%8C%962.配置接口找到账单列表接口我们在 src\container\Home\api\index.js 里添加下面代码import { fetchData } from "@/utils/axios.js";// 获取账单列表export function q原创 2022-05-07 11:54:59 · 591 阅读 · 0 评论 -
react + zarm 实现底部导航栏
需要实现的效果需要实现下面栏目固定,并且点击时切换到不同页面路由实现过程1.使用 prop-types 库进行类型检查注意:自 React v15.5 起,React.PropTypes 已移入另一个包中。请使用 prop-types 库 代替。PropTypes 提供了使用不同验证器的例子:import PropTypes from 'prop-types';MyComponent.propTypes = { // 你可以将属性声明为 JS 原生类型,默认情况下 // 这些属原创 2022-05-06 17:19:24 · 1206 阅读 · 2 评论 -
react + zarm + react-captcha-code + classnames 实现登录注册页面
需要实现的效果代码实现过程上一篇我们搭建了开发环境的基本结构:Vite 2.x + React + Zarm + Less + React Router v6 + Axios + flexible.js 搭建前端 H5 开发环境,下面我们开始实现登记注册页面的开发。1.准备字体库首先我们在https://www.iconfont.cn/新建一个项目然后再项目里面添加字体图标,可以自己搜索想要的图标添加入库然后把入库的图标添加到项目里最后在我们项目那里生成在线链接即可2.创建图标公原创 2022-05-05 16:51:55 · 790 阅读 · 0 评论 -
Vite 2.x + React + Zarm + Less + React Router v6 + Axios + flexible.js 搭建前端 H5 开发环境
项目地址github:kaimo-cost-h5涉及知识点构架工具 Vite可以参考:【蜻蜓点水】了解一下 vite 下一代前端开发与构建工具前端框架 React 和路由 react-router-domReact 官方中文文档 – 用于构建用户界面的 JavaScript 库React Router v6React Router v5CSS 预加载器 LessLess 快速入门 | Less.js 中文文档 - Less 中文网HTTP 请求库 axiosax原创 2022-04-26 20:40:14 · 2879 阅读 · 0 评论 -
React Hooks 快速入门:从一个数据请求开始
前言Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。函数组件引入了多种钩子函数如 useEffect、useState、useRef、useCallback、useMemo、useReducer 等等,通过这些钩子函数来管理函数组件的各自状态。参考资料Hook 简介...原创 2022-04-07 15:11:30 · 2463 阅读 · 0 评论