React论坛 今日: 0|主題: 520|排名: 78 

前言 本文是作为一个额外内容，主要介绍 tailwindcss 的用法 tailwindcss 是一个功能类优先的 CSS 框架，我在以前的文章里有描述为什么使用功能类优先：为什么我在 css 里使用功能类优先 在上一章中我们的 react 组件有了一个简单的样式，在这一篇我们将使用 tailwindcss 来重新编写它的样式。我将使用我们上一章的代码为例 ...

本项目是基于taro框架的react语言开发，项目中有需要做图片上传的需求，需要支持多图上传，支持图片删除，支持自动添加新增按钮，支持预览功能，支持显示默认图片等功能 要实现以上功能，使用小程序自带的上传组件已经不能够满足项目需求了，于是抱着学习的态度，开始动手撸一个图片上传框架 目录介绍布局操作图片添加图片 ...

其他章节请看： react实战 系列 My Dashboard 上一篇我们在 spug 项目中模仿”任务计划“模块实现一个类似的一级导航页面（”My任务计划“），本篇，我们将模仿“Dashboard”来实现一个仪表盘“My Dashboard”。 主要涉及 antd 的 Grid、Card、Descriptions等组件、bizcharts 的使用、moment 日期库和页面适配。 注：实现 ...

本文使用 React-i18next 库结合 React， 介绍如何在 React 中配置使用国际化。 官方地址：i18next | react-i18next 简介 react-i18next 是基于 i18next 的一款强大的国际化框架，可以用于 react 和 react-native 应用； react-i18next 特点： 提供多种组件可以在hoc, hook 和 class 的情况下进行国际化操作； 基于 i18next ...

官方文档：Refs 转发 语法 React.forwardRef(render); 上面的代码中，forwardRef 函数接收一个名为 render 的函数(也可以将 render 方法理解成一个函数组件)，返回值是 react 组件； const render = (props, ref) => { return <></>; } 上面的代码中，render 函数接收 2 个参数，第一个参数为 props(父组件传递的参数对 ...

目录结合React+TypeScript进行Electron开发1. electron基本简介为什么选择electron？2. 快速上手2.1 安装React(template为ts)2.2 快速配置React2.3 安装electron2.4 配置main.js、preload.js和package.json文件2.5 运行electron项目2.6 打包项目3. 自动刷新页面4. 主进程和渲染进程5.定义原生菜单、顶部菜单5.1 自定义菜单5 ...

Prompt 文档 Prompt 示例 使用场景：在离开页面之前，需要判断当前编辑的内容是否已经保存，如果没保存，则弹出提示框，提示用户保存。 查看 API 文档 【总结】：Prompt 有两个属性：message-当用户离开页面时给出的提示信息，when-是否渲染，设置为 true 时，离开页面时总会渲染，设置为 false 时，离开页面时不 ...

前言 项目到一段落，先来记录一下，本文以前端新手的角度记录React、TypeScript、Taro相关技术的开发体验以及遇到的问题和解决方法。 之前总说要学React（这篇博客：代码使我头疼之React初学习），这次项目需要做H5前端+小程序，我终于能用上React了~ 使用React的开发框架之前就听过京东的Taro，所以就这个了，直接开码。 ...

React Flow流程组件用起来还是挺简单的,能满足一些基本的流程配置.可以通过自定义配置节点实现不同需求 官网地址: https://reactflow.dev/docs/introduction/ 可以浏览一遍基本API在结合官网给的例子,快速开发.官网给了很多例子,很方便 效果图: 使用: 安装包 yarn add react-flow-renderer -D index.tsx ...

官方文档 一个神奇的链接: React Router 官方文档 安装 运行以下命令安装React Router: npm install react-router-dom@6 --save 注意：react-router-dom 包含所有内容，导入组件时应该从react-router-dom中导入，而不应该从 react-router中导入，否则，会意外地在应用中导入不匹配的库版本； 基本用法 在Web应用程序中开 ...

其他章节请看： 七天接手react项目 系列 react 脚手架创建项目 前面我们一直通过 script 的方式学习 react 基础知识，而真实项目通常是基于脚手架进行开发。 本篇首先通过 react 脚手架创建项目，分析其目录结构，接着编写第一个组件、解决样式覆盖，最后配置代理 proxy 以及通过消息发布与订阅解决兄弟组件之间的通信问 ...

其他章节请看： 七天接手react项目 系列 react 起步 背景 假如七天后必须接手一个 react 项目（spug - 一个开源运维平台），而笔者只会 vue，之前没有接触过 react，此刻能做的就是立刻展开一个“7天 react 扫盲活动”。 react 活动扫盲方针 以读懂 spug 项目为目标 无需对每个知识点深究 功能优先能实现，代码质量无需 ...

　　npx create-react-app react-intl-demo && cd react-intl-demo,创建react-intl-demo项目。npm install react-intl, 安装react-intl。使用react-intl时, 首先要提供一个provider，把整个项目包起来。怎么提供呢？使用react-intl的IntlProvider，它有1个必传参数locale, 设 ...

　　useRef 　　useRef()返回一个具有current属性的对象，称为ref对象。把对象赋值给原生的React Element元素的ref属性，就能获取到对应的真实的DOM元素。 import React, { useRef } from "react"; const CustomTextInput = () => { const textInput = useRef(); // 创建ref对象 const focusTextInput = () => textIn ...

react-window 这篇是 react-window 的源码阅读, 因为此库使用的是 flow, 所以会涉及一些特殊的东西, 和 ts 类似 使用 List 首先是 List 的使用: import {FixedSizeList as List} from 'react-window'; const Row = ({index, style}) => ( <div style={style}>Row {index}</div> ); const App = () => ( <List ...

一个路由就是一个通道，页面之间的跳转其实就是路由的切换，所以每个应用的路由配置是必须的，浅谈react中怎么配置路由 首先你要在src文件夹下新建一个router的文件下，在router文件下新建一个index.js(我用的是TS,所以是index.tsx) 然后在index.jsx里这样去配置 1 import React, { ReactNode, lazy } from "react"; 2 ...

表单状态管理曾经一直是让前端头疼的问题，错误提示，校验规则，动态表单，重置。。。搞得人头大。好在近几年也出现了不少好的社区方案，比如 Formik, react-hook-form, react-final-form等等，今天我们来谈谈其中的 react-hook-form。 useForm useForm 是最基础的表单状态管理钩子，它接受以下参数： const { handleSub ...

React中fetch---基本使用 一、fetch fetch是一种XMLHttpRequest的一种替代方案，在工作当中除了用ajax获取后台数据外我们还可以使用fetch、axios来替代ajax 二、fetch的基本使用 fetch(url).then(res => {             return res.json() //res不是需要 ...

要实现React的路由跳转，需要用react-router-dom组件。 "react-router-dom": "^6.2.1" 在App.js配置路由 import React, { Component } from 'react'; import './App.scss'; // 引入样式文件 import { HashRouter, Route, Routes, Navigate } from "react-router-dom"; import Home from './view/Home.jsx'; import Conf ...

前言 　　看过几个react hooks 的项目，控制台上几百条警告，大多是语法不规范，react hooks 使用有风险，也有项目直接没开eslint。当然，这些项目肯定跑起来了，因为react自身或者其他的包，在编译的时候弥补了一些缺陷，还有一些是不规范的警告，或者还没运行到报错的代码。 　　在这，我想分享并解析一些react开发过程中 ...