BestHub
Sign in
Tagged articles

ReAct

1133 articles · Page 5 of 12
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
May 8, 2024 · Frontend Development

How We Halved Cloud Music Desktop Startup Time and Fixed UI Lag with a React Refactor

This article details the migration of the Cloud Music desktop client from a legacy NEJ‑CEF hybrid to a React‑based architecture, outlines four major performance challenges, and explains the step‑by‑step optimizations—including API preloading, render memoization, virtual‑list replacement, and resource‑usage reductions—that cut startup latency by 48%, eliminated interaction stutter, and dramatically lowered CPU, GPU, and memory consumption.

CPUHybrid AppMemory
0 likes · 30 min read
How We Halved Cloud Music Desktop Startup Time and Fixed UI Lag with a React Refactor
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 8, 2024 · Frontend Development

Sharing State Between Parent and Child Components in React: useImperativeHandle vs useShareState Hook

This article examines the common React modal communication problem, compares the conventional controlled‑component callback approach with the useImperativeHandle solution, and introduces a novel pair of hooks (useShareState and useShareValue) that enable seamless state sharing between parent and child components.

Custom HooksReActfrontend
0 likes · 19 min read
Sharing State Between Parent and Child Components in React: useImperativeHandle vs useShareState Hook
MoonWebTeam
MoonWebTeam
Apr 30, 2024 · Frontend Development

Mastering Drag‑And‑Drop: From HTML5 APIs to Moveable’s Custom Able Extensions

This article explores browser drag‑and‑drop capabilities, compares native HTML5 DnD, mouse/touch events, and Canvas approaches, reviews popular libraries such as React DnD, Moveable and Interact.js, and provides a step‑by‑step guide to extending Moveable with custom ables for intelligent placement.

Drag-and-DropReActcustom-ables
0 likes · 20 min read
Mastering Drag‑And‑Drop: From HTML5 APIs to Moveable’s Custom Able Extensions
HelloTech
HelloTech
Apr 26, 2024 · Frontend Development

Understanding React Fiber Architecture: From React 15 to React 16

React 16 feels smoother than React 15 because its new Fiber architecture breaks state updates into small, priority‑aware units that the Scheduler runs asynchronously, allowing high‑priority user input to render first while lower‑priority work is paused and resumed, eliminating the lag seen in full‑tree re‑renders of React 15.

FiberFront-endPerformance
0 likes · 16 min read
Understanding React Fiber Architecture: From React 15 to React 16
Goodme Frontend Team
Goodme Frontend Team
Apr 15, 2024 · Frontend Development

Integrating AntV F2 Charts into DingTalk Mini‑Programs with Taro+React

This guide walks through selecting a suitable visualization library for DingTalk mini‑programs, explains why AntV F2 is optimal, and provides step‑by‑step instructions for integrating F2 4.x into a Taro + React project, covering canvas context handling, pixel‑ratio scaling, custom tooltips, and common pitfalls.

DingTalkMiniProgramReAct
0 likes · 17 min read
Integrating AntV F2 Charts into DingTalk Mini‑Programs with Taro+React
Goodme Frontend Team
Goodme Frontend Team
Apr 8, 2024 · Frontend Development

Eliminate observer in Formily/reactive and Keep Real‑Time Updates

An in‑depth guide shows how to remove the need for the observer wrapper in Formily/reactive by leveraging React’s internal __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, using ReactionStack, Object.defineProperty, and ahooks to automatically refresh components when reactive data changes.

HooksReAct
0 likes · 13 min read
Eliminate observer in Formily/reactive and Keep Real‑Time Updates
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 26, 2024 · Frontend Development

Zustand Best Practices: Optimization, Persistence, Debugging, and Multi‑Instance Management

This article shares practical insights and best‑practice techniques for using the Zustand state‑management library in React, covering component re‑render optimization, selective persistence, debugging with dev‑tools, handling multiple store instances, custom selectors, and a Vite plugin for automatic selector injection.

OptimizationPersistenceReAct
0 likes · 13 min read
Zustand Best Practices: Optimization, Persistence, Debugging, and Multi‑Instance Management
Goodme Frontend Team
Goodme Frontend Team
Mar 25, 2024 · Frontend Development

Mastering React Forms: When to Use Controlled vs Uncontrolled Components

This article explains modern best practices for building forms in React, compares controlled and uncontrolled approaches, shows how to mix them, discusses server‑side components, validation, error handling, and recommends using FormData over useRef for cleaner, more performant code.

Controlled ComponentsFormsReAct
0 likes · 16 min read
Mastering React Forms: When to Use Controlled vs Uncontrolled Components
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 23, 2024 · Frontend Development

Developing a LowCodeEngine Plugin for Visual Event Management and Variable Binding

This article explains how to create a LowCodeEngine plugin that enables non‑technical users to configure button‑click events and modal dialogs visually, covering background concepts, manual implementation steps, plugin‑based visual configuration, core technical details, and a concluding assessment of the engine's strengths and limitations.

Event ManagementLowCodeEngineReAct
0 likes · 20 min read
Developing a LowCodeEngine Plugin for Visual Event Management and Variable Binding
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Mar 15, 2024 · Frontend Development

Inside Tango’s Sandbox: Leveraging CodeSandbox for Fast Low‑Code Development

This article explains how the open‑source Tango low‑code engine uses a CodeSandbox‑based sandbox architecture—including dependency initialization, transpilation, and cross‑origin communication—to enable real‑time source‑code execution and visual drag‑and‑drop building within a secure iframe environment.

CodeSandboxReActfrontend
0 likes · 15 min read
Inside Tango’s Sandbox: Leveraging CodeSandbox for Fast Low‑Code Development
Sohu Tech Products
Sohu Tech Products
Mar 13, 2024 · Frontend Development

HTMX vs React: A Comparative Overview of Modern Front‑End Libraries

HTMX offers a lightweight, HTML‑attribute‑driven approach that adds AJAX, WebSocket and server‑sent event interactivity without JavaScript, making it ideal for simple pages, while React provides a full‑featured, component‑based JavaScript library with a steep learning curve, extensive ecosystem, and superior scalability for complex, state‑driven applications.

AJAXHTMLHTMX
0 likes · 17 min read
HTMX vs React: A Comparative Overview of Modern Front‑End Libraries
21CTO
21CTO
Mar 11, 2024 · Operations

How Netlify’s AI Debugger Turns Failed Deploys into Quick Fixes

Netlify’s new AI‑assisted deployment feature automatically analyzes build failures, offers diagnostic suggestions, and helps developers resolve issues faster, though its recommendations are best‑effort and may require manual verification.

AI debuggingNetlifyOperations
0 likes · 5 min read
How Netlify’s AI Debugger Turns Failed Deploys into Quick Fixes
21CTO
21CTO
Mar 9, 2024 · Frontend Development

Why LinkedIn’s Massive Front‑End Rewrite Stalled: Lessons from a Former Engineer

Former LinkedIn senior engineer Chris Krycho reveals how organizational constraints, technical debt, and conflicting migration strategies made modernizing a 2‑million‑line front‑end codebase a multi‑year challenge, offering key insights for large‑scale software refactoring.

Ember.jsFrontend MigrationReAct
0 likes · 5 min read
Why LinkedIn’s Massive Front‑End Rewrite Stalled: Lessons from a Former Engineer
NetEase LeiHuo UX Big Data Technology
NetEase LeiHuo UX Big Data Technology
Mar 5, 2024 · Frontend Development

Improving React Application Rendering Performance: Monitoring Tools and Optimization Techniques

This article explains why rendering performance is crucial for React applications and provides a comprehensive guide on monitoring tools such as Profiler and Developer Tools, followed by practical optimization methods including component update control, data handling hooks, code‑splitting, lazy loading, and concurrent mode.

PerformanceReActRendering
0 likes · 7 min read
Improving React Application Rendering Performance: Monitoring Tools and Optimization Techniques
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 5, 2024 · Frontend Development

Essential VS Code Plugins for Frontend Development

This guide introduces a curated collection of VS Code extensions—including themes, basic utilities, Vue and React tools, mini‑program support, code formatters, database helpers, and productivity plugins—helping developers streamline their frontend workflow and improve coding efficiency.

ReActVSCodedevelopment
0 likes · 11 min read
Essential VS Code Plugins for Frontend Development
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 1, 2024 · Frontend Development

Understanding TypeScript Type Inference in Zustand and Custom React Hooks

This article explores how TypeScript’s type inference works in the Zustand state‑management library, demonstrates practical examples such as automatic value inference, function return inference, generic‑based inference, and builds custom utilities like a pick method and a reusable useRequest hook, while also delving into middleware typing and advanced type‑level tricks.

ReActType InferenceTypeScript
0 likes · 15 min read
Understanding TypeScript Type Inference in Zustand and Custom React Hooks
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Feb 28, 2024 · Frontend Development

Implementing a Xiaomi‑Style Calendar Component with React, TypeScript, TailwindCSS and Lunar Library

This article details how the author recreated Xiaomi's calendar using React functional components, TypeScript typings, TailwindCSS styling, and the lunar‑typescript library, covering the tech stack, core date calculations, view rendering, touch‑based scrolling, and view mode switching with complete source code examples.

LunarReActTypeScript
0 likes · 29 min read
Implementing a Xiaomi‑Style Calendar Component with React, TypeScript, TailwindCSS and Lunar Library
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Feb 7, 2024 · Frontend Development

How to Boost H5 Game Performance with Offline Packages and Smart Asset Management

This article details a comprehensive approach to improving the performance and user experience of complex H5 game-like applications by using offline package splitting, native splash screens, global state management with zustand, data prefetching, image loading optimizations, transition animations, and ranking list enhancements.

H5PerformanceReAct
0 likes · 18 min read
How to Boost H5 Game Performance with Offline Packages and Smart Asset Management
Alibaba Cloud Developer
Alibaba Cloud Developer
Feb 2, 2024 · Frontend Development

When Should You Actually Use useEffect? 12 Cases to Avoid Overusing Effects

This article explains why useEffect in React is an "escape hatch" between functional and imperative code, outlines common pitfalls, provides twelve concrete scenarios where useEffect should be avoided or replaced, and offers best‑practice alternatives such as inline calculations, useMemo, event handlers, state lifting, and custom hooks.

ReActuseEffect
0 likes · 28 min read
When Should You Actually Use useEffect? 12 Cases to Avoid Overusing Effects
21CTO
21CTO
Feb 1, 2024 · Frontend Development

Top CSS Frameworks to Boost Your UI Development in 2024

Discover the best CSS frameworks for 2024—including Bootstrap, Tailwind, Foundation, Bulma, and UIkit—detailing their key features, integration methods, and code examples, to help developers choose the right toolkit for rapid, responsive, and maintainable front‑end design.

BootstrapCSSReAct
0 likes · 12 min read
Top CSS Frameworks to Boost Your UI Development in 2024
Sohu Tech Products
Sohu Tech Products
Jan 31, 2024 · Frontend Development

An In-Depth Overview of shadcn/ui: Features, Architecture, and Usage

shadcn/ui is a rapidly popular, copy‑and‑paste component collection that provides accessible, highly customizable Tailwind‑styled UI elements with a two‑layer architecture, theme editor, dark‑mode support, and CLI, offering simplicity and fine‑grained control while requiring manual integration and careful bundle‑size management.

Component LibraryReActTailwindCSS
0 likes · 26 min read
An In-Depth Overview of shadcn/ui: Features, Architecture, and Usage
JD Tech
JD Tech
Jan 29, 2024 · Frontend Development

Micro Frontend Architecture with MicroApp: Concepts, Benefits, and Implementation Guide

This article explains the micro‑frontend pattern, introduces the MicroApp framework, outlines when to adopt micro‑frontends, compares existing solutions, and provides a step‑by‑step guide for building a React‑based micro‑frontend base with code examples, cross‑origin handling, proxy configuration, and data communication.

Frontend ArchitectureMicroAppReAct
0 likes · 14 min read
Micro Frontend Architecture with MicroApp: Concepts, Benefits, and Implementation Guide
IT Services Circle
IT Services Circle
Jan 26, 2024 · Frontend Development

Introducing React v19: New Experimental Hooks for Data Fetching and Forms

React’s upcoming v19 release introduces four experimental hooks—use, useOptimistic, useFormState, and useFormStatus—focused on simplifying data fetching and form handling, allowing developers to read promises or context directly, perform optimistic UI updates, and manage form state and submission status within React components.

Data FetchingFormsHooks
0 likes · 10 min read
Introducing React v19: New Experimental Hooks for Data Fetching and Forms
Sohu Tech Products
Sohu Tech Products
Jan 24, 2024 · Frontend Development

Five React Component Design Patterns: Compound, Controlled, Custom Hooks, Props Getters, and State Reducer

The article reviews five React component design patterns—Compound, Controlled, Custom Hooks, Props Getters, and State Reducer—explaining how each improves reusability, API simplicity, and state management while weighing their advantages, disadvantages, and ideal use‑cases for scalable, maintainable UI development.

Design PatternsHooksJavaScript
0 likes · 18 min read
Five React Component Design Patterns: Compound, Controlled, Custom Hooks, Props Getters, and State Reducer
Yunxuetang Frontend Team
Yunxuetang Frontend Team
Jan 19, 2024 · Frontend Development

Top Front-End Techniques and 2024 Trends to Boost Your Skills

This article curates essential front‑end topics—including SSE real‑time push, component design, React state‑management comparison, performance‑panel analysis, file parsing methods, and the 2024 web‑front‑end trends—while also introducing the Cloud Classroom front‑end team’s mission and structure.

2024 trendsFile ParsingPerformance
0 likes · 3 min read
Top Front-End Techniques and 2024 Trends to Boost Your Skills
Tencent Cloud Developer
Tencent Cloud Developer
Jan 16, 2024 · Frontend Development

Frontend Technology Review 2023 and Outlook 2024

The 2023 frontend review highlights TypeScript’s size and speed gains, ECMAScript 2023 features, evolving frameworks like React, Vue, Svelte, Angular and emerging Qwik, while Rust tooling, Bun, browser changes, AI‑driven low‑code, and WASM progress set the stage for 2024’s LLM‑powered, Rust‑centric, cross‑platform development.

BunD2CHarmonyOS
0 likes · 49 min read
Frontend Technology Review 2023 and Outlook 2024
HelloTech
HelloTech
Jan 11, 2024 · Frontend Development

React Fiber Workflow and Hook Implementation Overview

React’s core fiber system traverses a depth‑first tree using performUnitOfWork, splits rendering into beginWork and completeWork, then commits in before‑mutation, mutation, and layout phases, while hooks like useState and useEffect are implemented via linked‑list queues that ensure deterministic updates and side‑effect handling.

FiberJavaScriptReAct
0 likes · 8 min read
React Fiber Workflow and Hook Implementation Overview
政采云技术
政采云技术
Jan 9, 2024 · Frontend Development

Five React Component Design Patterns with Advantages, Disadvantages, and Use Cases

This article introduces five reusable React component design patterns—Compound Component, Controlled Component, Custom Hook, Props Getters, and State Reducer—explaining their implementations, pros and cons, and suitable scenarios to help developers balance flexibility, complexity, and control in UI development.

Design PatternsReActcomponent design
0 likes · 17 min read
Five React Component Design Patterns with Advantages, Disadvantages, and Use Cases
Goodme Frontend Team
Goodme Frontend Team
Jan 9, 2024 · Frontend Development

Mastering Formily JSON Schema Rendering: A Deep Dive into Form Rendering Mechanics

This article explains how Formily parses JSON Schema, builds a form tree, handles data binding, validation, and submission, and walks through the internal rendering flow—including createSchemaField, RecursionField, and ReactiveField—while providing practical examples and discussing complex linked‑field scenarios and performance considerations.

Form RenderingJSON SchemaReAct
0 likes · 23 min read
Mastering Formily JSON Schema Rendering: A Deep Dive into Form Rendering Mechanics
Sohu Tech Products
Sohu Tech Products
Jan 3, 2024 · Frontend Development

Mastering Conditional Rendering in React: 9 Essential Techniques

This article reviews the most common conditional rendering approaches in React—including if‑else, ternary operators, logical AND, nullish coalescing, switch statements, strategy patterns, ErrorBoundary, higher‑order components, and render props—explaining their usage, advantages, code examples, and best‑practice cautions.

Conditional RenderingJavaScriptReAct
0 likes · 8 min read
Mastering Conditional Rendering in React: 9 Essential Techniques
Sohu Tech Products
Sohu Tech Products
Jan 3, 2024 · Frontend Development

Controlled vs Uncontrolled Forms in React: Modern Form Management with Hooks

The article compares React's controlled and uncontrolled form patterns, explains how modern hook‑based techniques—such as useForm, Context, and react‑hook‑form—streamline state management, improve performance, and simplify validation, illustrated by the evolution from antd3’s HOC approach to antd4’s Context‑driven architecture.

Form ManagementFormsReAct
0 likes · 9 min read
Controlled vs Uncontrolled Forms in React: Modern Form Management with Hooks
政采云技术
政采云技术
Dec 21, 2023 · Frontend Development

Understanding Controlled and Uncontrolled Forms in React: Ant Design, Hooks, and React‑Hook‑Form

This article explains the concepts, use‑cases, and performance trade‑offs of controlled versus uncontrolled forms in React, demonstrates how Ant Design 3 and 4 implement form handling with HOC or Context + hooks, and introduces the lightweight, non‑controlled approach of react‑hook‑form with practical code examples.

ControlledFormsHooks
0 likes · 12 min read
Understanding Controlled and Uncontrolled Forms in React: Ant Design, Hooks, and React‑Hook‑Form
DevOps
DevOps
Dec 20, 2023 · Frontend Development

Understanding the Evolution, Complexity, and Design Philosophy of Frontend Frameworks

This article examines the history, design motivations, and trade‑offs of modern frontend frameworks—covering Svelte’s new runes feature, the rise of component‑based architectures, template abstraction, cross‑platform compilation, and the differing philosophies of React, Vue, and Svelte—to explain why added complexity ultimately improves developer productivity and code maintainability.

ComplexityFrameworksReAct
0 likes · 28 min read
Understanding the Evolution, Complexity, and Design Philosophy of Frontend Frameworks
Liangxu Linux
Liangxu Linux
Dec 7, 2023 · Backend Development

Deploy Homebox: Open‑Source Home Inventory System with Docker

Homebox is an open‑source inventory and organization system for home users, built with React and Node.js, that can be quickly tried online or deployed locally via Docker Compose using a few simple commands and a GitHub repository.

DockerReActdeployment
0 likes · 4 min read
Deploy Homebox: Open‑Source Home Inventory System with Docker
php Courses
php Courses
Dec 7, 2023 · Backend Development

Building a Native Desktop Application with NativePHP, Laravel, and Electron

This guide explains how to package a Laravel‑based PHP application into a standalone desktop app using NativePHP and Electron, covering installation, development workflow, adding native features like notifications, and creating production builds for Windows, macOS, and Linux.

DesktopAppElectronLaravel
0 likes · 7 min read
Building a Native Desktop Application with NativePHP, Laravel, and Electron
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 7, 2023 · Frontend Development

Custom Ant Design Select Component with Integrated Table and Dumi Documentation Guide

This article explains how to create custom Ant Design select components that display additional information via integrated tables, covering form implementation, basic and advanced versions with infinite scrolling, handling Ant Design bugs, and documenting the components using Dumi, complete with code examples.

Custom SelectReActant-design
0 likes · 26 min read
Custom Ant Design Select Component with Integrated Table and Dumi Documentation Guide
ByteFE
ByteFE
Dec 6, 2023 · Frontend Development

Comprehensive Guide to Building Chrome Extensions with React/Vue, Debugging, and E2E Testing

This article explains the overall architecture of Chrome extensions, how to create popup, DevTools, and content scripts using React or Vue, configure manifest.json, set up multi‑entry Webpack builds, debug each component, and perform end‑to‑end testing with Puppeteer and Xvfb for CI environments.

Chrome extensionsE2E testingPuppeteer
0 likes · 18 min read
Comprehensive Guide to Building Chrome Extensions with React/Vue, Debugging, and E2E Testing
Tencent Cloud Developer
Tencent Cloud Developer
Dec 5, 2023 · Frontend Development

Understanding the Evolution, Design, and Complexity of Modern Front-End Frameworks

The article traces the historical evolution of front‑end frameworks—from static pages and jQuery to modern component‑based libraries like React, Vue, and Svelte—explaining why added complexity and compile‑time features such as Svelte’s runes improve maintainability, reactivity, and cross‑platform capabilities while weighing each framework’s design philosophy and trade‑offs for developers.

ComplexityDesignFrameworks
0 likes · 27 min read
Understanding the Evolution, Design, and Complexity of Modern Front-End Frameworks
Sohu Tech Products
Sohu Tech Products
Nov 22, 2023 · Frontend Development

How Does Next.js v14 Implement React Server Components (RSC)?

This article explains the origins of React Server Components, how Next.js v14 integrates RSC and App Router, the three release channels (Latest, Canary, Experimental), and provides step‑by‑step guidance for using RSC both inside and outside of Next.js with code examples and webpack configuration.

Next.jsRSCReAct
0 likes · 9 min read
How Does Next.js v14 Implement React Server Components (RSC)?
ByteDance Data Platform
ByteDance Data Platform
Nov 22, 2023 · Frontend Development

How HookStore Revamps DataWind’s Frontend Data Flow with Redux and Hooks

This article explains how DataWind’s frontend team replaced the outdated Dva‑based data flow with a new Redux‑plus‑hook solution called HookStore, detailing the pain points of complex initialization, legacy async syntax, tight module coupling, and showing migration steps, code examples, and benefits such as multi‑instance support and OpenAPI decoupling.

HooksReActRedux
0 likes · 14 min read
How HookStore Revamps DataWind’s Frontend Data Flow with Redux and Hooks
ByteFE
ByteFE
Nov 20, 2023 · Frontend Development

Solving Component Lookup Pain Points in Large React Projects with Chrome Extensions and react-dev-inspector

This article discusses the difficulty of locating source code in a massive React component library and evaluates three solutions—Chrome React Developer Tools, other Chrome plugins, and the react-dev-inspector npm package—providing installation steps, code integration details, advantages, and drawbacks.

Chrome extensionComponent NavigationReAct
0 likes · 7 min read
Solving Component Lookup Pain Points in Large React Projects with Chrome Extensions and react-dev-inspector
Weimob Technology Center
Weimob Technology Center
Nov 10, 2023 · Frontend Development

How Design Tokens Enable Consistent UI Across Platforms in Titian

This article explains how the Titian component library uses Design Tokens to abstract visual attributes like color, typography, spacing, and shadow, allowing seamless theme customization, global and component-level styling, dark mode support, and multi‑framework integration for consistent front‑end development.

Component LibraryReActTheme customization
0 likes · 14 min read
How Design Tokens Enable Consistent UI Across Platforms in Titian
Ctrip Technology
Ctrip Technology
Nov 9, 2023 · Backend Development

Exploring Ctrip Flight IVR Visual Platform: Architecture, Evolution, and Implementation

This article details the evolution of Ctrip's flight IVR system from a simple Chinese‑only version to a multilingual, fully visualized low‑code platform, describing its architecture, core components such as data definition, rule and script engines, version management, and the underlying Node.js and React technologies.

Backend DevelopmentIVRNode.js
0 likes · 14 min read
Exploring Ctrip Flight IVR Visual Platform: Architecture, Evolution, and Implementation
vivo Internet Technology
vivo Internet Technology
Nov 8, 2023 · Frontend Development

Design and Performance Optimization of a Cross‑Tab Component in Vivo's Agile BI Visualization Platform

This article details the design evolution and performance optimization of Vivo's Agile BI cross‑tab component—from a jQuery prototype to a React‑based solution—highlighting worker‑offloaded preprocessing, virtual scrolling, and micro‑frontend integration that enable sub‑second rendering of massive data sets and match or surpass competing BI tools.

Cross TabData VisualizationReAct
0 likes · 16 min read
Design and Performance Optimization of a Cross‑Tab Component in Vivo's Agile BI Visualization Platform
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 7, 2023 · Frontend Development

Implementing Fixed, Variable, and Dynamic Height Virtual Lists with react-window

This article explains the core principles of virtual scrolling and provides complete React implementations for three types of virtual lists—fixed‑height, variable‑height, and dynamic‑height—using react-window, including detailed code snippets, performance considerations, and optimization suggestions.

PerformanceReActfrontend
0 likes · 17 min read
Implementing Fixed, Variable, and Dynamic Height Virtual Lists with react-window
Alibaba Cloud Developer
Alibaba Cloud Developer
Oct 24, 2023 · Frontend Development

How to Refactor a Complex React Component for Easy Relocation

This article walks through a real‑world micro‑refactor of a React page, detailing the analysis of component dependencies, the step‑by‑step extraction of a tangled UI block into a reusable component, and the testing strategy that ensures the new code works without breaking existing functionality.

ReActTypeScriptcomponent design
0 likes · 12 min read
How to Refactor a Complex React Component for Easy Relocation
ByteFE
ByteFE
Oct 18, 2023 · Frontend Development

Using React’s Built‑in Features to Handle Loading and Error States with Promises

This article explains how to display loading and error states in React by passing Promise objects through props, context, or state libraries, leveraging Suspense, ErrorBoundary, and custom hooks such as usePromise and use to simplify asynchronous UI patterns while avoiding unnecessary re‑renders and side‑effects.

Error BoundaryLoading StatePromise
0 likes · 13 min read
Using React’s Built‑in Features to Handle Loading and Error States with Promises
HelloTech
HelloTech
Oct 17, 2023 · Frontend Development

Running React Code in Mini Programs with Taro: Compilation vs Runtime Approaches

Unlike Taro 1/2, which compiles React code into native mini‑program files through a complex Babel‑based pipeline, Taro 3 runs the original React source at runtime by injecting a lightweight simulated DOM/BOM layer, simplifying development but adding a performance‑overhead that is mitigated with pre‑rendering and virtual lists.

CompilationDOM SimulationReAct
0 likes · 21 min read
Running React Code in Mini Programs with Taro: Compilation vs Runtime Approaches
政采云技术
政采云技术
Oct 11, 2023 · Frontend Development

A Comprehensive Guide to React Grid Layout: Usage, Breakpoint & Grid Implementations, Drag‑and‑Drop and Resize Features

This article introduces React Grid Layout, explains how to install and configure it, and provides detailed implementations of responsive breakpoint layouts, grid positioning, component rendering, drag‑and‑drop handling, and resizing logic, complete with code examples and performance considerations.

Drag-and-DropGrid LayoutReAct
0 likes · 20 min read
A Comprehensive Guide to React Grid Layout: Usage, Breakpoint & Grid Implementations, Drag‑and‑Drop and Resize Features
HomeTech
HomeTech
Oct 11, 2023 · Frontend Development

Implementing a Sticky Tabs Component with Custom Scroll Behavior in React

This article explains how to build a customizable Tabs component with a sticky header, click‑to‑scroll navigation, and collapsible content sections using React, CSS position:sticky, IntersectionObserver, and JavaScript, providing complete code examples and compatibility notes for modern web and mobile applications.

CSSIntersectionObserverJavaScript
0 likes · 10 min read
Implementing a Sticky Tabs Component with Custom Scroll Behavior in React
JD Tech
JD Tech
Oct 9, 2023 · Frontend Development

Design and Implementation of a Flexible H5 Navigation Bar Component for Mobile Applications

This article analyzes the limitations of native navigation bars on mobile pages, proposes a reusable H5 navigation‑bar component (@pango/navigation-bar) with performance, cost, and user‑experience benefits, details its architecture, configuration, code usage, exception handling, and adaptation for foldable screens, and outlines the open‑source plan.

ComponentConfigurationMobile Web
0 likes · 17 min read
Design and Implementation of a Flexible H5 Navigation Bar Component for Mobile Applications
KooFE Frontend Team
KooFE Frontend Team
Sep 24, 2023 · Frontend Development

Mastering React Design Patterns: Composite, Uncontrolled, and Render Props

Explore essential React design patterns—including component composition, uncontrolled composite components, and render props—through detailed explanations, practical code examples, and best practices that improve maintainability, scalability, and developer experience in modern frontend development.

Compound ComponentContextPortal
0 likes · 15 min read
Mastering React Design Patterns: Composite, Uncontrolled, and Render Props
Airbnb Technology Team
Airbnb Technology Team
Sep 22, 2023 · Backend Development

Improving Page Performance with HTTP Streaming: Airbnb’s Early Flush Implementation

Airbnb boosted page performance by implementing HTTP streaming with an early‑flush strategy that sends the head chunk first, allowing browsers to start loading CSS and JavaScript while the server fetches data, cutting First Contentful Paint by roughly 100 ms despite challenges like tag handling, buffering, and latency.

Early FlushHTTP streamingNode.js
0 likes · 11 min read
Improving Page Performance with HTTP Streaming: Airbnb’s Early Flush Implementation
21CTO
21CTO
Sep 21, 2023 · Frontend Development

What’s New in Next.js 13.5? Key Features and Performance Boosts Explained

Next.js 13.5, the latest version of Vercel’s React‑based full‑stack framework, introduces significant performance improvements, new middleware capabilities, enhanced image handling, and expanded documentation, while supporting edge runtime, IPv6, and experimental features, positioning it as a leading tool for modern web development.

PerformanceReActVercel
0 likes · 7 min read
What’s New in Next.js 13.5? Key Features and Performance Boosts Explained
Qunar Tech Salon
Qunar Tech Salon
Sep 14, 2023 · Frontend Development

Micro‑Module Framework for Frontend Code Reuse and Efficient Deployment

This article describes the design, implementation, and benefits of a low‑intrusion micro‑module framework that enables cross‑stack code reuse, dynamic loading, fast deployment, and robust monitoring for large‑scale front‑end applications, while addressing challenges such as React version compatibility and incremental packaging.

Module FederationReActcode reuse
0 likes · 18 min read
Micro‑Module Framework for Frontend Code Reuse and Efficient Deployment
php Courses
php Courses
Sep 12, 2023 · Frontend Development

9 Popular Front-End Admin Dashboard Templates Recommended by Veteran Developers

This article introduces nine widely used front-end admin dashboard templates—ranging from Bootstrap‑based solutions to Vue, React, and Angular frameworks—highlighting their key features, GitHub star counts, and demo screenshots to help developers choose the most suitable tool for their projects.

Admin DashboardAngularBootstrap
0 likes · 5 min read
9 Popular Front-End Admin Dashboard Templates Recommended by Veteran Developers
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 12, 2023 · Frontend Development

Front‑End Project Architecture, Code Standards, and Engineering Practices

This article shares a comprehensive guide on front‑end project organization, directory conventions, coding standards, state‑management patterns, request abstraction, local storage handling, CSS modularization, Immer usage, npm private registry setup, template creation, CLI scaffolding, git workflow, and documentation practices, illustrated with practical TypeScript/React code examples.

ReActcode standardsengineering
0 likes · 21 min read
Front‑End Project Architecture, Code Standards, and Engineering Practices
IT Services Circle
IT Services Circle
Sep 8, 2023 · Backend Development

Implementing Server-Sent Events (SSE) with NestJS and React

This article explains how to use HTTP Server-Sent Events (SSE) as an alternative to WebSocket for one‑way data push, demonstrating a NestJS backend implementation with @Sse decorator and Observable streams, and a React frontend using EventSource to receive real‑time JSON messages, including handling logs and binary data.

BackendEventSourceNestJS
0 likes · 7 min read
Implementing Server-Sent Events (SSE) with NestJS and React
Goodme Frontend Team
Goodme Frontend Team
Sep 4, 2023 · Frontend Development

How Formily Revolutionized Our Store‑Headquarters Form Workflow

This article details how Guming's frontend team evolved from simple page‑per‑work‑order implementations to a high‑performance, low‑code Formily ecosystem, covering the technical stack, form configuration platform, custom expression parser, and future visual builder for dynamic business workflows.

Form ArchitectureReActdynamic forms
0 likes · 15 min read
How Formily Revolutionized Our Store‑Headquarters Form Workflow
Ximalaya Technology Team
Ximalaya Technology Team
Sep 1, 2023 · Frontend Development

Using Rematch for State Management in React Applications

This guide walks through creating a React Todo List app with Rematch, showing how to define typed models, initialize a Redux‑compatible store, provide it via React‑Redux, and use useSelector and typed useDispatch in components, highlighting Rematch’s concise syntax and similarity to Redux‑Toolkit.

ReActReduxRematch
0 likes · 11 min read
Using Rematch for State Management in React Applications
Ctrip Technology
Ctrip Technology
Aug 24, 2023 · Frontend Development

Automatic Front‑End Code Generation from Visual Designs: Architecture, Implementation, and Practice

This article presents a comprehensive approach to automatically generate front‑end code from visual design drafts by introducing a customizable code‑generator workflow, detailing UIDL‑based intermediate representation, plugin‑based architecture, template‑driven development, platform optimizations, and real‑world deployment results, while also outlining future AI‑assisted enhancements.

DSLReActUIDL
0 likes · 18 min read
Automatic Front‑End Code Generation from Visual Designs: Architecture, Implementation, and Practice
Ximalaya Technology Team
Ximalaya Technology Team
Aug 24, 2023 · Frontend Development

Using Redux Toolkit for State Management in React and React Native

This article demonstrates how to replace classic Redux boilerplate with Redux Toolkit in a React Todo List app by creating a slice, configuring the store, providing it via Provider, and using useSelector and useDispatch, highlighting the simplified setup and clearer state management for both React and React Native.

JavaScriptReActRedux Toolkit
0 likes · 10 min read
Using Redux Toolkit for State Management in React and React Native
Sohu Tech Products
Sohu Tech Products
Aug 23, 2023 · Frontend Development

Can Clean Architecture Transform Your Frontend? A Practical React/TypeScript Guide

This article explains how to apply Clean Architecture principles to a frontend React/TypeScript project, covering the three‑layer structure, dependency rules, domain modeling, use‑case design, adapter implementation, code organization, trade‑offs, and practical tips for building a cookie‑store example.

Dependency RuleDomain-Driven DesignReAct
0 likes · 34 min read
Can Clean Architecture Transform Your Frontend? A Practical React/TypeScript Guide
IT Services Circle
IT Services Circle
Aug 21, 2023 · Frontend Development

Understanding the History API and How React Router Implements It

This tutorial explains the fundamentals of the browser History API—including length, back, forward, go, pushState, replaceState, and scrollRestoration—demonstrates their behavior with visual examples, and then shows step‑by‑step how React Router leverages these APIs to match routes, render components, and handle navigation events such as popstate.

History APIReActfrontend
0 likes · 10 min read
Understanding the History API and How React Router Implements It
Ximalaya Technology Team
Ximalaya Technology Team
Aug 19, 2023 · Frontend Development

Using React and Redux to Build a Todo List Application

This guide walks through creating a React Todo List app with Redux by installing the libraries, defining TypeScript state and actions for adding and deleting items, implementing an immutable reducer, configuring a store, wrapping the root with Provider, and connecting UI components to dispatch and display the todo array, illustrating the full Redux workflow and its debugging advantages.

ReActReduxTodo App
0 likes · 10 min read
Using React and Redux to Build a Todo List Application
Yunxuetang Frontend Team
Yunxuetang Frontend Team
Aug 18, 2023 · Frontend Development

Must‑Know JavaScript Tricks, Async useEffect Guide, and Front‑End Architecture Overview

This article compiles essential JavaScript coding tricks, explains how to correctly use async functions within React’s useEffect, outlines the full spectrum of front‑end infrastructure technologies, and shares a practical jsPDF PDF‑export tutorial along with an interview about Evan You’s life beyond code.

Coding TipsEvan YouFrontend Architecture
0 likes · 3 min read
Must‑Know JavaScript Tricks, Async useEffect Guide, and Front‑End Architecture Overview
政采云技术
政采云技术
Aug 16, 2023 · Frontend Development

Why rc-form Fields Do Not Disappear: The Importance of Ref Callbacks and clearField in Custom Components

This article explains why fields registered with rc-form may persist and continue to run validation when using functional custom components, analyzes the internal mechanisms of getFieldMeta, clearField, and saveRef, and shows that adding forwardRef support resolves the disappearance and validation issues.

Custom ComponentsReActRef
0 likes · 14 min read
Why rc-form Fields Do Not Disappear: The Importance of Ref Callbacks and clearField in Custom Components
ELab Team
ELab Team
Aug 11, 2023 · Blockchain

Build and Deploy a Web3 Smart Contract Project with React, Vite, and Hardhat

This guide walks you through understanding blockchain contracts, setting up a React‑Vite‑Tailwind front‑end, installing ethers and Hardhat, writing and testing a Solidity contract, configuring Hardhat, deploying to Goerli via Alchemy, and integrating the contract with a React application.

EthereumHardhatReAct
0 likes · 14 min read
Build and Deploy a Web3 Smart Contract Project with React, Vite, and Hardhat
Goodme Frontend Team
Goodme Frontend Team
Aug 11, 2023 · Frontend Development

Master AMap Integration with Reusable React Hooks and Responsive Info Windows

This article details how to integrate Gaode (AMap) maps into a React frontend, covering script and npm imports, reusable map hooks, responsive marker info windows, event handling strategies, rendering abstractions for various map entities, and addressing common pitfalls such as marker overlap, bubble penetration, and memory leaks.

AmapMap HooksReAct
0 likes · 18 min read
Master AMap Integration with Reusable React Hooks and Responsive Info Windows
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 5, 2023 · Frontend Development

Second‑Level (秒级) Front‑End Rollback: A Step‑by‑Step Demo Using Vite, React, and Node

This article presents a complete tutorial for implementing a near‑instant (second‑level) rollback mechanism for single‑page front‑end applications, covering the underlying idea, project setup with Vite and React, history recording, a lightweight Node server, and a petite‑Vue visual interface for selecting and applying previous builds.

NodeReActVite+
0 likes · 20 min read
Second‑Level (秒级) Front‑End Rollback: A Step‑by‑Step Demo Using Vite, React, and Node
Sohu Tech Products
Sohu Tech Products
Aug 2, 2023 · Frontend Development

How JSX Works and Building a Simple JSX Parser from Scratch

This article explains the fundamentals of JSX, why JSX expressions must have a single root element, and provides a step‑by‑step guide with complete code to implement a minimal JSX parser that translates JSX syntax into plain JavaScript createElement calls.

Code GenerationJSXJavaScript
0 likes · 13 min read
How JSX Works and Building a Simple JSX Parser from Scratch
Architect's Tech Stack
Architect's Tech Stack
Jul 31, 2023 · Frontend Development

DripTable: An Open‑Source, High‑Performance Enterprise Table Solution for React

This article introduces DripTable, a JD‑open‑source, React‑based enterprise table framework that uses JSON Schema for low‑code configuration, outlines its features, advantages, usage scenarios, and provides step‑by‑step installation and code examples for both the visual configuration side and the runtime side.

JSON SchemaReActTable
0 likes · 5 min read
DripTable: An Open‑Source, High‑Performance Enterprise Table Solution for React