BestHub
Sign in
Tagged articles

ReAct

1114 articles · Page 4 of 12
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Dec 13, 2024 · Frontend Development

Using CustomEvent for Global Event Broadcasting in Frontend Development (React & Vue)

This article explains how to leverage the JavaScript CustomEvent API to create and dispatch custom events for efficient, decoupled communication between components in complex React and Vue applications, providing syntax details, practical code examples, and guidance on appropriate usage scenarios.

CustomEventEvent BroadcastingJavaScript
0 likes · 6 min read
Using CustomEvent for Global Event Broadcasting in Frontend Development (React & Vue)
Code Mala Tang
Code Mala Tang
Dec 12, 2024 · Frontend Development

Master URL State Management in React with Nuqs: A Complete Guide

This article introduces the Nuqs library for React, explaining how it synchronizes application state with the browser URL, outlines its key features, provides step‑by‑step installation and usage examples—including query hooks, type‑safe parsers, transition handling, multiple query states, and server‑side parsing—enabling developers to build more intuitive front‑end applications.

NuqsReActURL State
0 likes · 7 min read
Master URL State Management in React with Nuqs: A Complete Guide
Java Architect Essentials
Java Architect Essentials
Dec 11, 2024 · Frontend Development

Why OpenSumi Becomes the Go‑to Framework for Customizable Cloud and Desktop IDEs

OpenSumi is a dual‑target (Web and Electron) IDE framework from Alibaba that offers high performance, deep view‑customization, vertical‑domain experience, pure front‑end deployment, and full VS Code plugin compatibility, positioning it as a strong alternative to Theia and other open‑source IDE solutions.

Cloud IDEIDE frameworkOpenSumi
0 likes · 11 min read
Why OpenSumi Becomes the Go‑to Framework for Customizable Cloud and Desktop IDEs
Sohu Tech Products
Sohu Tech Products
Dec 11, 2024 · Frontend Development

Mastering React Rendering: When and How Components Re‑Render

This article explains React's rendering pipeline—including initial and update renders—identifies the factors that cause component re‑rendering, and demonstrates how to use React.memo, useMemo, and useCallback to eliminate unnecessary renders and improve performance.

PerformanceReActReact.memo
0 likes · 12 min read
Mastering React Rendering: When and How Components Re‑Render
大转转FE
大转转FE
Dec 9, 2024 · Frontend Development

ZhuanZhuan Frontend Weekly – Curated Highlights of Recent Technical Articles

This edition of the ZhuanZhuan Frontend Weekly presents a curated selection of recent technical articles covering React 19 release, HarmonyOS adaptation in a travel app, the Vision animation platform at Kuaishou, migration from Electron to Tauri, and WebAssembly‑enhanced WebCodecs for high‑performance video frame extraction.

HarmonyOSReActTauri
0 likes · 4 min read
ZhuanZhuan Frontend Weekly – Curated Highlights of Recent Technical Articles
IT Services Circle
IT Services Circle
Dec 7, 2024 · Frontend Development

React 19 New Features and Updates Overview

React 19 introduces a suite of new features including Actions with useActionState, optimistic UI with useOptimistic, the use hook for resource reading, enhanced form handling via useFormStatus, server components, static rendering APIs, improved hydration, ref-as-prop, metadata handling, stylesheet and async script support, and advanced resource preloading.

HooksPerformanceReAct
0 likes · 20 min read
React 19 New Features and Updates Overview
Code Mala Tang
Code Mala Tang
Dec 2, 2024 · Frontend Development

How to Replace Complex JSX Ternary Logic with a Simple Show Component in React

This article explains how to improve React conditional rendering readability by adopting Solid.js's Show component pattern, implementing a reusable Show component in React, and extending it to support asynchronous data loading, ultimately making JSX templates clearer and more maintainable.

Conditional RenderingJSXReAct
0 likes · 7 min read
How to Replace Complex JSX Ternary Logic with a Simple Show Component in React
Sohu Tech Products
Sohu Tech Products
Nov 27, 2024 · Frontend Development

Optimizing React Applications with Code Splitting and Dynamic Imports

By using code splitting and dynamic imports, React developers can break large bundles into on‑demand chunks—loading only needed libraries, components, or routes after user actions—thereby shrinking initial download size, speeding up first render, and delivering a more responsive, scalable application.

Code SplittingPerformance OptimizationReAct
0 likes · 9 min read
Optimizing React Applications with Code Splitting and Dynamic Imports
DaTaobao Tech
DaTaobao Tech
Nov 18, 2024 · Frontend Development

Technical Design of General Capabilities for Taobao Playground New‑User Activity

The design outlines reusable Taobao Playground capabilities—event messaging via mx, unified popup/announcement delivery, subscription management, a modular task system, and reusable animation components—enabling rapid development of short‑term new‑user activities while maintaining a scalable, maintainable codebase.

EventSystemReActTaobao
0 likes · 13 min read
Technical Design of General Capabilities for Taobao Playground New‑User Activity
Full-Stack Cultivation Path
Full-Stack Cultivation Path
Nov 6, 2024 · Frontend Development

Applying SOLID Principles to Frontend Development: Practical React and Angular Examples

This article explains the five SOLID design principles, shows how they are often violated in React and Angular code, and provides concrete refactorings—including custom hooks, separate services, validator classes, and interface segregation—to make frontend applications more maintainable, testable, and extensible.

AngularJavaScriptReAct
0 likes · 18 min read
Applying SOLID Principles to Frontend Development: Practical React and Angular Examples
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Nov 4, 2024 · Frontend Development

Deep Dive into Zustand: Store Creation, TypeScript Types, and Middleware Design

This article explains how Zustand creates stores using the create function, details the TypeScript types such as StateCreator, SetStateInternal, Get and Mutate, demonstrates middleware implementation, clarifies the role of createImpl and useStore, and answers common memory‑leak concerns for React developers.

MiddlewareReActState Management
0 likes · 25 min read
Deep Dive into Zustand: Store Creation, TypeScript Types, and Middleware Design
IT Services Circle
IT Services Circle
Oct 30, 2024 · Frontend Development

A Guide to Modern Front‑End Drag‑And‑Drop Libraries and Migration Strategies

This article reviews the recent deprecation of react‑beautiful‑dnd and presents several modern front‑end drag‑and‑drop alternatives—including Pragmatic Drag and Drop, VueDraggablePlus, dnd‑kit, react‑dnd, and Swapy—while offering migration strategies, usage examples, and GitHub resources for each library.

Drag-and-DropLibraryReAct
0 likes · 6 min read
A Guide to Modern Front‑End Drag‑And‑Drop Libraries and Migration Strategies
Full-Stack Cultivation Path
Full-Stack Cultivation Path
Oct 27, 2024 · Frontend Development

How Shadcn UI Gained 73K Stars in Under Two Years

Shadcn UI, a React‑based component collection launched in early 2023, reached 73 K GitHub stars within two years by offering a highly customizable, copy‑and‑paste workflow, leveraging Tailwind CSS, Radix UI, TypeScript, and a simple CLI that together reshape the frontend component ecosystem.

ReActTailwind CSScomponent library
0 likes · 4 min read
How Shadcn UI Gained 73K Stars in Under Two Years
Code Mala Tang
Code Mala Tang
Oct 23, 2024 · Frontend Development

Master the Top 7 React Concepts to Join the Elite 5% of Developers

This article explores seven essential React concepts—including component lifecycle, advanced Hooks, virtual DOM, state management with Context and Redux, Refs, prop‑drilling solutions, and the new Suspense and Concurrent Mode—to help developers boost performance, scalability, and expertise.

ReActVirtual DOM
0 likes · 9 min read
Master the Top 7 React Concepts to Join the Elite 5% of Developers
JD Tech Talk
JD Tech Talk
Oct 22, 2024 · Frontend Development

Implementing React-Based High-Performance HarmonyOS Apps with Taro: Runtime Principles and ArkUI Integration

This article examines how the Taro framework adapts React code to run on Huawei's HarmonyOS by implementing a custom renderer that converts React components into Taro virtual nodes, then maps them to ArkUI structures through a three‑step process involving Taro Elements, RenderNodes, and native ArkUI nodes.

ArkUIHarmonyOSReAct
0 likes · 11 min read
Implementing React-Based High-Performance HarmonyOS Apps with Taro: Runtime Principles and ArkUI Integration
大转转FE
大转转FE
Oct 18, 2024 · Frontend Development

Design and Implementation of ZhiZhu Customer Service Workbench

This article explains the architecture and key features of ZhiZhu's customer service workbench, covering the overall system, the iframe‑based IM communication, multi‑tab third‑screen design, conversation caching with LRU, and full‑event tracking implementation using React, Umi and Ant Design.

Customer ServiceReActUMI
0 likes · 11 min read
Design and Implementation of ZhiZhu Customer Service Workbench
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 16, 2024 · Frontend Development

How to Listen to LocalStorage Changes Within the Same Browser Tab: Techniques and Implementations

This article explains why the native storage event only works across different tabs, evaluates traditional polling and proxy approaches, and presents four efficient solutions—including custom StorageEvent, CustomEvent, MessageChannel, and BroadcastChannel—along with practical React and Vue examples for real‑time localStorage monitoring.

JavaScriptReActVue
0 likes · 12 min read
How to Listen to LocalStorage Changes Within the Same Browser Tab: Techniques and Implementations
Code Mala Tang
Code Mala Tang
Oct 3, 2024 · Fundamentals

Mastering the Interface Segregation Principle: Why Small Interfaces Boost Code Quality

Learn how the Interface Segregation Principle (ISP) of SOLID design encourages splitting large interfaces into focused, minimal ones, reducing unnecessary method implementations, improving maintainability, and enhancing modularity across backend Java code, frontend React components, and state‑management modules, while also noting its trade‑offs.

JavaReActSOLID
0 likes · 16 min read
Mastering the Interface Segregation Principle: Why Small Interfaces Boost Code Quality
Snowball Engineer Team
Snowball Engineer Team
Sep 29, 2024 · Mobile Development

Building a Mobile Automated Testing Platform with Airtest and Poco

This article describes how a team built a custom automated testing platform for React Native mobile apps using Airtest and Poco, covering tool selection, script examples, platform architecture with React frontend and Python backend, and solutions for parallel execution and mock services.

AirtestFlaskPOCO
0 likes · 13 min read
Building a Mobile Automated Testing Platform with Airtest and Poco
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 29, 2024 · Frontend Development

drag-kit: A Lightweight Drag‑and‑Drop Library for Vue, React and Plain JavaScript

This article introduces the drag-kit library, explains why it is a good choice for high‑performance, cross‑iframe, responsive drag‑and‑drop interactions, provides quick‑start code examples, details its core features and advanced options, and shows how to integrate it with Vue, React and vanilla JavaScript.

Drag-and-DropJavaScriptReAct
0 likes · 12 min read
drag-kit: A Lightweight Drag‑and‑Drop Library for Vue, React and Plain JavaScript
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 29, 2024 · Frontend Development

Optimizing ECharts Integration in Vue and React with Lazy Loading, Theme Switching, and DOM Observation

This article presents a comprehensive solution for integrating ECharts into Vue and React projects, addressing bundle size, API complexity, and lack of CSS‑variable support by introducing custom imports, a draw helper, MutationObserver‑based resizing, theme‑aware color replacement, lazy loading, and usage examples for both frameworks.

MutationObserverReActTheme Switching
0 likes · 18 min read
Optimizing ECharts Integration in Vue and React with Lazy Loading, Theme Switching, and DOM Observation
KooFE Frontend Team
KooFE Frontend Team
Sep 28, 2024 · Frontend Development

Why Early Returns Make React Component Composition Cleaner

The article explains how treating UI as composable components, avoiding tangled conditional rendering, and using early returns can reduce cognitive load, improve type inference, and make React code easier to extend and maintain.

Component CompositionConditional RenderingEarly Return
0 likes · 11 min read
Why Early Returns Make React Component Composition Cleaner
Sohu Tech Products
Sohu Tech Products
Sep 25, 2024 · Frontend Development

From Tailwind CSS to SASS: A Frontend Technology Selection Case Study

After initially adopting Tailwind CSS for rapid UI development in a React real‑time chat app, our team reverted to SASS combined with CSS Modules because the growing utility‑class markup hurt readability, increased build times, and bloated the CSS bundle, ultimately delivering a more maintainable codebase and noticeably better performance.

CSS ModulesReActSass
0 likes · 8 min read
From Tailwind CSS to SASS: A Frontend Technology Selection Case Study
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 16, 2024 · Frontend Development

Effective Ways to Listen to Route Changes in React

This article explains why monitoring route changes in React single‑page applications is crucial, compares three primary techniques—useLocation, useNavigate, and withRouter—provides practical code examples, evaluates their pros and cons, and offers performance‑optimisation tips for reliable routing handling.

PerformanceReActRouting
0 likes · 15 min read
Effective Ways to Listen to Route Changes in React
JD Tech Talk
JD Tech Talk
Sep 9, 2024 · Frontend Development

AIGCDesign: A Cross‑Platform Frontend AI Component Library and Its Technical Implementation

The article introduces AIGCDesign, a cross‑platform frontend component library that leverages AI generation capabilities, explains its motivation, research of existing solutions, architectural layers, lifecycle hooks, configuration examples, multi‑framework support, business integration cases, and future stream‑processing enhancements.

AIAIGCReAct
0 likes · 15 min read
AIGCDesign: A Cross‑Platform Frontend AI Component Library and Its Technical Implementation
KooFE Frontend Team
KooFE Frontend Team
Sep 8, 2024 · Frontend Development

How to Evolve Ant Design Forms: Adding Dynamic Code Fields and Copy Functionality

This article walks through the iterative design of an Ant Design form component, starting with a simple name field, then adding a randomly generated code field, making it editable, and finally implementing a copyable code input with reusable prefix‑text and suffix‑icon components, while comparing implementation approaches.

FormReActant-design
0 likes · 13 min read
How to Evolve Ant Design Forms: Adding Dynamic Code Fields and Copy Functionality
Alibaba Cloud Developer
Alibaba Cloud Developer
Sep 6, 2024 · Artificial Intelligence

Zero‑Code AI Agent with Higress: Build, Deploy, and Understand ReAct

This article explains the AI Agent concept, introduces the AI Gateway plugin architecture, walks through zero‑code deployment of an AI Agent using Higress with AMap and Seniverse services, and details the ReAct‑based reasoning and tool‑calling implementation with code examples and workflow diagrams.

AI AgentAPI-gatewayHigress
0 likes · 16 min read
Zero‑Code AI Agent with Higress: Build, Deploy, and Understand ReAct
DaTaobao Tech
DaTaobao Tech
Sep 4, 2024 · Frontend Development

Best Practices for Component Design and Encapsulation in React

The article outlines React component design best practices by distinguishing generic UI components from business‑specific ones, separating UI and domain state, extracting reusable base components, applying patterns such as state lifting, context, memoization, and type‑safe props, and providing a checklist for clean encapsulation.

DDDEncapsulationReAct
0 likes · 10 min read
Best Practices for Component Design and Encapsulation in React
大转转FE
大转转FE
Sep 2, 2024 · Frontend Development

ZhuanZhuan Frontend Weekly – Curated Technical Articles

The ZhuanZhuan Frontend Weekly curates five recent technical articles—including a Rust‑based JavaScript bundler, Airbnb’s seamless React upgrade, HarmonyOS ArkUI framework, a JavaScript Super Mario game, and the Interface Segregation Principle in React—providing concise English summaries and links for developers.

BundlerJavaScriptReAct
0 likes · 4 min read
ZhuanZhuan Frontend Weekly – Curated Technical Articles
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 1, 2024 · Frontend Development

Deep Dive into a React Draggable Floating Ball Component

This article provides a comprehensive technical walkthrough of building an advanced draggable floating‑ball UI component in React, covering drag handling with react‑draggable, boundary calculations, edge‑snapping, circular menu creation via CSS transforms, right‑click context menus, and app‑switching logic, all illustrated with code snippets and visual examples.

CSS transformsContext MenuReAct
0 likes · 10 min read
Deep Dive into a React Draggable Floating Ball Component
KooFE Frontend Team
KooFE Frontend Team
Aug 29, 2024 · Frontend Development

Applying the Interface Segregation Principle to Cleaner React Components

This article explains the Interface Segregation Principle, illustrates its original intent with simple code examples, and demonstrates how applying ISP in React—by narrowing component props, avoiding prop drilling, and using context or composition—leads to cleaner, more maintainable front‑end code.

Frontend ArchitectureReActSOLID
0 likes · 7 min read
Applying the Interface Segregation Principle to Cleaner React Components
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Aug 28, 2024 · Frontend Development

Building a Flexible React Management Backend with Custom Routing, Navigation, and Plugin System

This article describes how to create a feature‑rich, extensible React admin panel by implementing a convention‑based routing system, unified navigation with menu and draggable tabs, a Redux‑centric state management strategy, and a modular plugin architecture, while also integrating MUI, Next.js, and AI‑assisted code generation.

MUIPlugin ArchitectureReAct
0 likes · 11 min read
Building a Flexible React Management Backend with Custom Routing, Navigation, and Plugin System
21CTO
21CTO
Aug 22, 2024 · Frontend Development

Is React Turning Into a Full‑Stack Framework? What You Need to Know

The article explores how React has evolved with server components, server actions, and TypeScript to bridge front‑end and back‑end development, discusses the shift from CSR to SSR, and examines the impact of tRPC and generated type interfaces on modern web engineering.

Full-StackReActServer Components
0 likes · 7 min read
Is React Turning Into a Full‑Stack Framework? What You Need to Know
大转转FE
大转转FE
Aug 16, 2024 · Frontend Development

How to Supercharge Front‑End Development with V0’s AI‑Powered Code Generator

This article introduces V0, an AI‑driven tool from Vercel that transforms natural‑language prompts or design screenshots into ready‑to‑use React, HTML, and Tailwind CSS code, compares it with other front‑end solutions, and provides step‑by‑step guidance on creating, editing, and exporting components.

AI code generationAutomationReAct
0 likes · 8 min read
How to Supercharge Front‑End Development with V0’s AI‑Powered Code Generator
Sohu Tech Products
Sohu Tech Products
Aug 14, 2024 · Frontend Development

Mastering Theme Switching in React with Context API: A Complete Guide

This article explains how to use React's Context API to implement elegant multi‑theme switching, avoid props drilling, manage multiple contexts, and apply memoization techniques to prevent unnecessary re‑renders, improving performance and maintainability.

Context APIPerformance OptimizationReAct
0 likes · 11 min read
Mastering Theme Switching in React with Context API: A Complete Guide
21CTO
21CTO
Aug 9, 2024 · Frontend Development

Why Angular and React Are Essentially the Same Framework – Insights from Google

Google’s Angular lead explains how Angular and React share core reactive principles, use similar change‑detection algorithms, and are converging around the Signals primitive, highlighting the implications for developers, performance, and future framework integration.

AngularGoogleReAct
0 likes · 14 min read
Why Angular and React Are Essentially the Same Framework – Insights from Google
Alibaba Cloud Developer
Alibaba Cloud Developer
Aug 9, 2024 · Frontend Development

Mastering useRef in React with TypeScript: Avoid Common Pitfalls

This article explains how to correctly use React's useRef hook with TypeScript across several real‑world scenarios, compares different initialization patterns, highlights typical mistakes with useLayoutEffect, and provides best‑practice solutions for forwarding refs, merging refs, and exposing imperative handles.

HooksReActRef
0 likes · 13 min read
Mastering useRef in React with TypeScript: Avoid Common Pitfalls
21CTO
21CTO
Aug 8, 2024 · Frontend Development

How to Build a Windows 11‑Style Web Desktop with React

This article showcases a React‑based Windows 11 clone web app, detailing its interactive desktop, start menu, taskbar, draggable windows, responsive design, and the modern tech stack used to recreate core OS features for educational purposes.

ReActTailwind CSSWeb UI
0 likes · 4 min read
How to Build a Windows 11‑Style Web Desktop with React
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jul 30, 2024 · Frontend Development

Varlet Icon Builder: Fast Creation of Enterprise Icon Libraries with Vue and React Support

This article introduces the Varlet icon builder toolchain, which enables rapid creation of enterprise or open‑source icon libraries, supporting SVG to Vue 3, React, ESM/CJS modules, web fonts, automatic component import, Figma integration, and provides CLI commands for development, building, and publishing.

CLIFigmaReAct
0 likes · 7 min read
Varlet Icon Builder: Fast Creation of Enterprise Icon Libraries with Vue and React Support
Model Perspective
Model Perspective
Jul 23, 2024 · Artificial Intelligence

Building Your Own AI Agent with LangChain: A Hands‑On Guide

This article walks through the author’s experience creating a custom AI agent using LangChain and OpenAI APIs, explains the concepts of AI agents and the ReAct reasoning framework, provides step‑by‑step code, discusses required libraries and APIs, and shares practical tips and challenges encountered.

AI AgentLLMLangChain
0 likes · 16 min read
Building Your Own AI Agent with LangChain: A Hands‑On Guide
Code Mala Tang
Code Mala Tang
Jul 22, 2024 · Frontend Development

Inside Zustand: How Its Core Store and Hooks Are Built for React

This article dissects the lightweight Zustand state‑management library for React, covering its project layout, core store implementation, the createStore API, the useStore hook, middleware integration, and data‑flow mechanics that enable high‑performance, flexible state handling.

ReActZustand
0 likes · 10 min read
Inside Zustand: How Its Core Store and Hooks Are Built for React
Code Mala Tang
Code Mala Tang
Jul 20, 2024 · Frontend Development

Master Zustand: A Lightweight Yet Powerful State Management Library for React

This guide introduces Zustand, a minimalist React state management library, covering its core concepts, advantages, installation, API usage, best practices, middleware options, TypeScript integration, performance optimizations, and how to integrate it with Next.js for both client‑side and server‑side rendering.

ReActZustand
0 likes · 12 min read
Master Zustand: A Lightweight Yet Powerful State Management Library for React
Code Mala Tang
Code Mala Tang
Jul 13, 2024 · Frontend Development

Why Do Some React Child Components Re‑Render While Others Don’t?

This article explains how parent and child components interact in React, why certain child components re‑render on state changes, and how techniques like React.memo, useCallback, and useMemo can be used to control rendering performance.

Component Re-renderingReActReact.memo
0 likes · 13 min read
Why Do Some React Child Components Re‑Render While Others Don’t?
Code Mala Tang
Code Mala Tang
Jul 12, 2024 · Frontend Development

Mastering React Component Communication: 7 Essential Techniques

Explore seven core methods for React component communication—including Props, State Lifting, Context, Refs, Hooks, Event Emitters, and Redux—detailing practical code examples, key considerations, and best practices to help developers choose the optimal approach for various application scenarios.

PropsReActRedux
0 likes · 16 min read
Mastering React Component Communication: 7 Essential Techniques
Code Mala Tang
Code Mala Tang
Jul 11, 2024 · Frontend Development

How React Compiler Eliminates Unnecessary Re‑renders: Real‑World Tests

This article explores React 19's new React Compiler, explains how it automatically memoizes components to cut redundant renders, and walks through three practical examples that compare its behavior with traditional React.memo, useMemo, and useCallback techniques.

Frontend PerformanceNext.jsReAct
0 likes · 8 min read
How React Compiler Eliminates Unnecessary Re‑renders: Real‑World Tests
Code Mala Tang
Code Mala Tang
Jul 10, 2024 · Frontend Development

Master TypeScript: Practical Tips, Advanced Types, and Real-World Projects

This comprehensive guide walks you through initializing a TypeScript project, explains core and advanced type features, shows how to integrate third‑party libraries, and provides real‑world examples for React and Node.js, while offering best‑practice tips to boost code quality and performance.

Node.jsReActTypeScript
0 likes · 11 min read
Master TypeScript: Practical Tips, Advanced Types, and Real-World Projects
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jul 6, 2024 · Frontend Development

Using React 19 useActionState and Server Actions in Next.js – A Complete Guide

This article explains the new React 19 useActionState hook, how it replaces useFormState/useFormStatus, and demonstrates its integration with Next.js Server Actions through four progressive examples, covering traditional implementations, the deprecated hooks, the new hook usage in forms and non‑form components, and best‑practice patterns.

Next.jsReActServer Actions
0 likes · 18 min read
Using React 19 useActionState and Server Actions in Next.js – A Complete Guide
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jul 5, 2024 · Frontend Development

Implementing an @User Mention Input Component with Highlight and Deletion Handling in React

This article explains how to build a custom React @mention input component that highlights mentioned users, treats the whole @username as a single deletable unit, tracks cursor position for a floating selector, and returns both the plain text and the list of mentioned users to the parent component.

MentionsReActTypeScript
0 likes · 12 min read
Implementing an @User Mention Input Component with Highlight and Deletion Handling in React
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Jul 1, 2024 · Frontend Development

Design and Implementation of Front‑End Animations for NetEase Cloud Music 2023 Annual Listening Report

The 2023 NetEase Cloud Music Annual Listening Report showcases a front‑end animation pipeline where the motion designer codes directly in React, using CSSTransition for page fades, CSS keyframes for text and particle effects, SVG masks for data visualisation, 3D perspective tricks, and extensive device testing to balance visual richness with performance.

3DFront-endParticle System
0 likes · 37 min read
Design and Implementation of Front‑End Animations for NetEase Cloud Music 2023 Annual Listening Report
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Jul 1, 2024 · Frontend Development

Performance Optimization and Engineering Practices for NetEase Cloud Music 2023 Annual Report Front‑End Development

The 2023 NetEase Cloud Music annual‑report front‑end case study details how sub‑second first‑screen loads, SPA routing with TypeScript, GPU‑accelerated animations, optimized media handling, multi‑layer quality monitoring, and a unified development platform together boost performance, reliability, and engineering efficiency, driving higher DAU and share‑rate.

PerformanceReActSPA
0 likes · 27 min read
Performance Optimization and Engineering Practices for NetEase Cloud Music 2023 Annual Report Front‑End Development
IT Services Circle
IT Services Circle
Jun 26, 2024 · Frontend Development

React 19’s Change to Suspense Parallel Rendering and Its Performance Impact

The article explains how React 19 silently altered Suspense behavior by disabling parallel rendering of sibling components, turning data fetching into a waterfall pattern, which caused significant performance regressions for many sites, sparked community backlash, and was eventually rolled back after extensive discussion.

DataFetchingPerformanceReAct
0 likes · 6 min read
React 19’s Change to Suspense Parallel Rendering and Its Performance Impact
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 26, 2024 · Frontend Development

Serializing Non‑Serializable Data in Server‑Side Rendering: Remix and Turbo‑Stream Approaches

This article examines how server‑side rendering can serialize normally non‑serializable data such as Promises, Dates, RegExp, and BigInt, comparing Remix’s defer‑based approach with Turbo‑Stream’s encode/decode method, and discusses their mechanisms, benefits, and challenges.

Data SerializationReActRemix
0 likes · 26 min read
Serializing Non‑Serializable Data in Server‑Side Rendering: Remix and Turbo‑Stream Approaches
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 24, 2024 · Frontend Development

Using click-to-react-component to Quickly Locate React Component Source Code

This article explains how to efficiently locate and edit React component source files in large projects by using the click-to-react-component tool, covering installation, demo setup, interaction shortcuts, and the underlying mechanism that maps DOM elements to source code via React fiber nodes and VSCode links.

BabelCode navigationReAct
0 likes · 9 min read
Using click-to-react-component to Quickly Locate React Component Source Code
21CTO
21CTO
Jun 23, 2024 · Frontend Development

Top 10 JavaScript Libraries to Master in 2024: A Developer’s Guide

This article reviews the ten most valuable JavaScript libraries for 2024—including React, Redux, D3.js, TensorFlow.js, Angular, Node.js, Vue, Svelte, Three.js, and Lodash—detailing their core features, performance benefits, typical use cases, and why they remain essential tools for modern frontend development.

JavaScriptNode.jsReAct
0 likes · 18 min read
Top 10 JavaScript Libraries to Master in 2024: A Developer’s Guide
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 18, 2024 · Frontend Development

React 19 New Features: use API, Preload API, Actions, Optimistic Updates, and React Compiler

This article introduces the new React 19 APIs—including the versatile use API for data fetching and conditional context, resource preloading helpers, enhanced Actions with useTransition, useActionState, useFormState, useOptimistic, as well as deprecations, improved hydrate error messages, and the experimental React Compiler—providing code examples and migration guidance.

ReActReact CompilerSuspense
0 likes · 17 min read
React 19 New Features: use API, Preload API, Actions, Optimistic Updates, and React Compiler
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Jun 10, 2024 · Frontend Development

Quickly Locate React Component Source Code with click-to-react-component

This article explains how to quickly locate and edit React component source code in large projects using the click-to-react-component tool, covering installation, usage, underlying mechanisms involving React fiber nodes, Babel source mapping, and VSCode integration, with practical code examples and UI details.

Component DebuggingReActVSCode integration
0 likes · 9 min read
Quickly Locate React Component Source Code with click-to-react-component
Sohu Tech Products
Sohu Tech Products
Jun 5, 2024 · Frontend Development

Recent Trends and Updates in the JavaScript Framework Ecosystem

The JavaScript framework ecosystem has surged forward with React adding Server Components, a Compiler and Server Actions; Vue 3.4 delivering faster reactivity and a Vapor mode; Angular introducing Signals and partial hydration; Next.js unveiling an App Router and Turbopack; Nuxt, Svelte, Remix and Astro each releasing performance‑focused features, underscoring a rapidly evolving landscape for modern web development.

AngularFrameworksJavaScript
0 likes · 14 min read
Recent Trends and Updates in the JavaScript Framework Ecosystem
JD Cloud Developers
JD Cloud Developers
May 29, 2024 · Artificial Intelligence

How Multi‑Agent AI Is Revolutionizing E‑Commerce Decision Making

This article explores JD Retail's AI‑driven multi‑agent system that mimics real‑world merchant decision processes, detailing the ReAct paradigm, agent roles, workflow, training methods, monitoring, and future directions for building intelligent e‑commerce assistants.

AIAgent ArchitectureE‑commerce
0 likes · 21 min read
How Multi‑Agent AI Is Revolutionizing E‑Commerce Decision Making
DeWu Technology
DeWu Technology
May 27, 2024 · Frontend Development

Technical Architecture and Design of a Landing Page Editor

The article details the technical architecture and design of the StarCreate landing‑page editor, describing its monorepo structure, low‑code JSON template, backend permission system, canvas implementation choices, Valtio state management, and the resulting operational benefits and future expansion plans.

Editor ArchitectureMonorepoNode.js
0 likes · 16 min read
Technical Architecture and Design of a Landing Page Editor
JD Retail Technology
JD Retail Technology
May 22, 2024 · Artificial Intelligence

AI Multi‑Agent System for E‑commerce: Design, Implementation, and Operational Insights

This article presents a comprehensive overview of JD Retail's AI‑driven multi‑agent architecture for e‑commerce assistance, detailing how real‑world merchant decision processes are modeled with ReAct‑based LLM agents, the hierarchical workflow, training pipelines, monitoring mechanisms, and future directions for scalable intelligent commerce support.

AIAgent ArchitectureKnowledge Retrieval
0 likes · 20 min read
AI Multi‑Agent System for E‑commerce: Design, Implementation, and Operational Insights
IT Services Circle
IT Services Circle
May 19, 2024 · Frontend Development

Highlights from React Conf 2024: React 19 New Features, React Compiler, and Remix Integration

React Conf 2024 showcased the upcoming React 19 beta with new Actions hooks, server components, ref-as-prop, metadata support, resource preloading, and the experimental React Compiler, while also announcing the merger of Remix into React Router v7, offering developers a comprehensive overview of the latest frontend innovations.

ReActReact 19React Compiler
0 likes · 8 min read
Highlights from React Conf 2024: React 19 New Features, React Compiler, and Remix Integration
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 14, 2024 · Frontend Development

Implementing Front‑End File Preview for Various Formats Using React

This article explains how to preview a wide range of file types—including images, audio, video, markdown, plain text, Office documents, PDFs and external websites—in a React front‑end by using native HTML tags, embed/iframe techniques, and libraries such as marked and highlight.js, while also supporting page or time positioning.

HTMLReActfile preview
0 likes · 14 min read
Implementing Front‑End File Preview for Various Formats Using React
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 13, 2024 · Frontend Development

React Rendering Performance Optimization: Case Study and Practical Techniques

This article explains common React performance‑optimization methods, walks through a real‑world form‑editor use case, details the profiling, diagnosis, and step‑by‑step improvements—including memoization, callback stabilization, diff filtering, and pure‑function components—that reduced render time from 195 ms to under 10 ms.

ReActState Managementmemo
0 likes · 20 min read
React Rendering Performance Optimization: Case Study and Practical Techniques
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.

CPUGPUHybrid App
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.

CodeSandboxReActSandbox
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.

AJAXComparisonHTML
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