BestHub
Sign in
Tagged articles

ReAct

1070 articles · Page 5 of 11
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 LibraryFrontendReAct
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.

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

FrontendReActTypeScript
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 SimulationMini Program
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-DropReActResize
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.

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

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

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

Code ReuseFrontendModule Federation
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.

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

FrontendProject StructureReAct
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.

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

Dynamic FormsForm ArchitectureReAct
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.

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

Clean ArchitectureDependency RuleDomain-Driven Design
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.

FrontendHistory APIReAct
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.

ReActReduxState Management
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
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.

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

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

FrontendJSON schemaOpen Source
0 likes · 5 min read
DripTable: An Open‑Source, High‑Performance Enterprise Table Solution for React
Bitu Technology
Bitu Technology
Jul 26, 2023 · Frontend Development

Migrating from Enzyme to React Testing Library: Strategy, Tools, and Lessons Learned at Tubi

This article details Tubi's comprehensive migration from Enzyme to React Testing Library, covering the motivations, testing philosophy shifts, custom codemods, lint enforcement, progress tracking scripts, implementation examples, and the overall cost, timeline, and lessons learned from converting over 440 test files and 100k lines of code.

CodemodsEnzymeMigration
0 likes · 17 min read
Migrating from Enzyme to React Testing Library: Strategy, Tools, and Lessons Learned at Tubi
KooFE Frontend Team
KooFE Frontend Team
Jul 20, 2023 · Frontend Development

How React 18’s Concurrent Features Supercharge App Performance

React 18 introduces concurrent rendering, transitions, Suspense, and Server Components, which together reduce long tasks, lower total blocking time, and improve user interaction by allowing non‑urgent updates to run in the background, ultimately delivering smoother, more responsive web applications.

Concurrent RenderingFrontendPerformance
0 likes · 20 min read
How React 18’s Concurrent Features Supercharge App Performance
Alibaba Cloud Big Data AI Platform
Alibaba Cloud Big Data AI Platform
Jul 20, 2023 · Artificial Intelligence

How AI Agents and Tools Transform Operations: A Hands‑On LangChain Guide

This article explores how large AI models can act as autonomous agents equipped with tools, demonstrates practical LangChain examples for remote server queries and RSS parsing, explains the ReAct reasoning‑acting loop, and shows how decorators and object‑oriented patterns enable seamless AI‑driven programming.

AIAgentsLangChain
0 likes · 32 min read
How AI Agents and Tools Transform Operations: A Hands‑On LangChain Guide
ByteFE
ByteFE
Jul 19, 2023 · Frontend Development

Optimizing Web Front‑End Performance with WebAssembly: Design and Implementation of ByteReact

This article explores how WebAssembly can break the speed limits of JavaScript by compiling both framework and business logic into WebAssembly, describes the design of the ByteReact front‑end framework, its custom Bytets compiler that turns TypeScript into WebAssembly, and presents performance measurements showing up to three‑fold speed gains for compute‑heavy UI tasks.

PerformanceReActTypeScript
0 likes · 20 min read
Optimizing Web Front‑End Performance with WebAssembly: Design and Implementation of ByteReact
IT Services Circle
IT Services Circle
Jul 19, 2023 · Frontend Development

10 Open-Source Front-End Low-Code Projects

This article introduces ten open-source front‑end low‑code platforms—including GoView, vlife, JeecgBoot, maku‑generator, MtBird, Luban H5, Seezoon Stack, Variant Form, ng‑form, and h5‑factory—detailing their main features, technology stacks, and where to obtain their source code.

ReActVuelow-code
0 likes · 7 min read
10 Open-Source Front-End Low-Code Projects
DaTaobao Tech
DaTaobao Tech
Jul 14, 2023 · Frontend Development

Gradient Iconfont Implementation with CSS and React

This article explains how to create gradient iconfonts by using CSS background‑clip:text (with transparent text) and optionally mix‑blend-mode:darken, demonstrates a reusable React component that applies gradient backgrounds via style props, and shows graceful degradation with @supports queries for browsers lacking background‑clip support.

Front-endReActcss
0 likes · 8 min read
Gradient Iconfont Implementation with CSS and React
21CTO
21CTO
Jul 13, 2023 · Frontend Development

Mastering Chakra UI: Build Accessible, Responsive React Interfaces Fast

This article introduces Chakra UI, explains its core features, advantages, installation steps, and key components—including layout, media, navigation, and form elements—while also covering its drawbacks and providing practical React code examples for developers seeking a fast, accessible UI solution.

ReActUI Componentsaccessibility
0 likes · 11 min read
Mastering Chakra UI: Build Accessible, Responsive React Interfaces Fast
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Jul 13, 2023 · Game Development

Building an H5 Platformer Game with Alice.js and React

This tutorial shows how to build a simple 2D platformer using the Alice.js H5 engine combined with React, covering scene construction with JSX components, camera scrolling, UI layering, PixiJS element types, animation formats, flex layout, keyframe hooks, event scripting, and debugging tools.

Alice.jsAnimationGame Development
0 likes · 22 min read
Building an H5 Platformer Game with Alice.js and React
FunTester
FunTester
Jun 15, 2023 · Frontend Development

How to Write Reusable Code in Frontend Development

This article explains how to write reusable frontend code by identifying and separating reusable parts such as UI components, API calls, business workflows, shared data, and utility functions, illustrating each with React and Vue examples, code snippets, and best‑practice recommendations.

APIHooksReAct
0 likes · 7 min read
How to Write Reusable Code in Frontend Development
KooFE Frontend Team
KooFE Frontend Team
Jun 1, 2023 · Frontend Development

How React’s API Evolution Shapes Modern UI Development

This article explores the evolution of React’s APIs—from early mixins to higher‑order components, render props, and Hooks—examining the mental models, trade‑offs, and best practices that guide developers in building maintainable, performant front‑end applications.

API EvolutionHigher-Order ComponentsHooks
0 likes · 20 min read
How React’s API Evolution Shapes Modern UI Development
Ctrip Technology
Ctrip Technology
Jun 1, 2023 · Frontend Development

Cross‑Platform Shared Web Components: Architecture, Implementation, and Host Integration

This article describes a cross‑platform solution that enables a single set of Web component code to be shared across Native, React Native, and mini‑program environments by leveraging Web Components, environment‑aware builds, and bridge communication, thereby reducing development effort and accelerating release cycles.

Mini ProgramNativeReAct
0 likes · 14 min read
Cross‑Platform Shared Web Components: Architecture, Implementation, and Host Integration
Programmer DD
Programmer DD
May 30, 2023 · Frontend Development

Why Umi Is the Enterprise‑Grade Frontend Framework Powering 10,000+ Apps

Umi, an extensible enterprise‑grade frontend framework from Ant Group, offers out‑of‑the‑box routing, plugin lifecycle, dual build engines, and best‑practice integrations, with detailed quick‑start instructions and a chart example that demonstrate its capability to serve thousands of diverse applications.

EnterprisePlugin systemReAct
0 likes · 8 min read
Why Umi Is the Enterprise‑Grade Frontend Framework Powering 10,000+ Apps
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
May 29, 2023 · Game Development

Preface: Cloud Music Social Live Game Scenario Solution Sharing

The article presents a cloud‑music social live‑streaming game solution that selects PixiJS over DOM for superior performance, identifies inefficiencies in React‑DOM coupling, and introduces the custom Alice.js framework—bridging React DSL with PixiJS, extending game components, and managing resources—to streamline front‑end game scene development.

Alice.jsGame DevelopmentPixiJS
0 likes · 18 min read
Preface: Cloud Music Social Live Game Scenario Solution Sharing
ByteFE
ByteFE
May 24, 2023 · Frontend Development

Design, Implementation, and Performance Benefits of a New React Hook for Controlling Flow

This article analyses the conceptual design, possible implementation, and performance advantages of a new React Hook that can be called inside control flow, discusses its future extensions such as usePromise, lazy subscription, and integration with concurrent mode, and provides practical code examples.

Concurrent ModeFrontendHook
0 likes · 13 min read
Design, Implementation, and Performance Benefits of a New React Hook for Controlling Flow
政采云技术
政采云技术
May 24, 2023 · Frontend Development

LocatorJS Source Code Analysis: Architecture, Chrome Extension Integration, and Runtime Mechanics

This article provides a detailed walkthrough of LocatorJS, covering how to clone the repository, set up the development environment, explore the Chrome extension code, and dissect the runtime implementation that leverages React fiber, SolidJS components, and Babel plugins to enable precise code‑to‑UI mapping.

Babel PluginChrome ExtensionLocatorJS
0 likes · 11 min read
LocatorJS Source Code Analysis: Architecture, Chrome Extension Integration, and Runtime Mechanics
Alibaba Cloud Developer
Alibaba Cloud Developer
May 23, 2023 · Frontend Development

How to Refactor Complex React Pages with Component‑Based Design

This article explains how to tackle hard‑to‑maintain React pages by applying design patterns, splitting horizontal business logic into basic and block components, and using component composition to dramatically reduce code size while improving readability and maintainability.

Component RefactoringDesign PatternsFrontend Architecture
0 likes · 10 min read
How to Refactor Complex React Pages with Component‑Based Design
Full-Stack Trendsetter
Full-Stack Trendsetter
May 12, 2023 · Frontend Development

ChatGPT Compares React, Vue, and Angular: Pros, Cons, and Choosing the Right Framework

This article presents ChatGPT’s side‑by‑side analysis of React, Vue, and Angular, detailing each framework’s strengths—such as React’s component model, Vue’s low learning curve, and Angular’s full‑stack features—and weaknesses, then advises choosing based on project scale, complexity, and developer experience.

AngularFront-end frameworksJavaScript
0 likes · 4 min read
ChatGPT Compares React, Vue, and Angular: Pros, Cons, and Choosing the Right Framework
360 Tech Engineering
360 Tech Engineering
May 9, 2023 · Frontend Development

Why Use AI to Write Unit Tests for React Hooks

This article explains the motivation for writing unit tests for shared React hook modules, demonstrates how an AI assistant in the Cursor IDE can generate Jest test cases from a repository, and details the step‑by‑step process of configuring the environment, fixing failing tests, and reflecting on AI's current limitations.

AIFrontendHooks
0 likes · 10 min read
Why Use AI to Write Unit Tests for React Hooks
Alipay Experience Technology
Alipay Experience Technology
Apr 25, 2023 · Frontend Development

How a 100‑Line React Chart Library Sparked a Decade of Open‑Source Leadership

This interview chronicles Wang Zhiwei’s journey from a university student experimenting with GitHub to the CTO of AntV, highlighting how his 100‑line Echarts‑for‑React component launched a thriving open‑source career, shaped Ant Group’s culture, and offers practical advice for developers eager to contribute to open source.

AntVData VisualizationDeveloper Experience
0 likes · 10 min read
How a 100‑Line React Chart Library Sparked a Decade of Open‑Source Leadership
Huolala Tech
Huolala Tech
Apr 25, 2023 · Frontend Development

How to Solve Async Race Conditions and Caching in React with Custom Hooks

This article explains why React's synchronous component model struggles with async data fetching, demonstrates how to cancel stale requests, introduces a refetch‑only hook, and shows how to implement caching and deduplication to make queries pure functions, while recommending React Query and SWR for production use.

CachingCustom HookDeduplication
0 likes · 9 min read
How to Solve Async Race Conditions and Caching in React with Custom Hooks
Sohu Tech Products
Sohu Tech Products
Apr 12, 2023 · Frontend Development

Vue vs React: Programming Styles, View Syntax, Components, Routing, State Management, Reactivity and Lifecycle Comparison

This article provides a comprehensive technical comparison between Vue and React, covering their programming and view styles, component models, routing solutions, state‑management libraries, basic feature differences, reactivity mechanisms, lifecycle hooks and side‑effect handling, with illustrative code examples.

ComponentReActReactivity
0 likes · 15 min read
Vue vs React: Programming Styles, View Syntax, Components, Routing, State Management, Reactivity and Lifecycle Comparison
php Courses
php Courses
Apr 12, 2023 · Frontend Development

2023 Popular Front-End UI Frameworks: Overview and Comparison

This article explains what front‑end UI frameworks are, why they are useful, and presents a detailed list of the ten most popular domestic UI frameworks in 2023—including Element Plus, Ant Design, Naive UI, View UI Plus, Vant, LayUI, Bootstrap, and WeUI—while advising developers on how to choose the right one for their projects.

FrontendJavaScriptReAct
0 likes · 6 min read
2023 Popular Front-End UI Frameworks: Overview and Comparison
Sohu Tech Products
Sohu Tech Products
Apr 6, 2023 · Frontend Development

Migrating Sentry’s Front‑end Tests from Enzyme to React Testing Library

At Sentry, the team documented a year‑and‑four‑month effort to replace Enzyme with React Testing Library across thousands of tests, detailing the motivations, migration strategy, performance challenges, tooling changes, and the eventual benefits such as improved accessibility, reduced reliance on React internals, and a more maintainable test suite.

EnzymeMigrationReAct
0 likes · 14 min read
Migrating Sentry’s Front‑end Tests from Enzyme to React Testing Library
KooFE Frontend Team
KooFE Frontend Team
Mar 28, 2023 · Frontend Development

Master React Refs: From DOM Access to Imperative APIs

Learn how to use React refs—including useRef, forwardRef, and useImperativeHandle—to access DOM elements, create custom imperative APIs, and build interactive forms with focus and shake effects, while understanding best practices for when to employ refs versus state or props.

FrontendReActforwardRef
0 likes · 14 min read
Master React Refs: From DOM Access to Imperative APIs
Huolala Tech
Huolala Tech
Mar 28, 2023 · Frontend Development

How to Optimize React Context to Prevent Unnecessary Re‑renders

Learn how to effectively use React Context for state management, avoid props drilling, and eliminate redundant re‑renders by implementing a custom publish‑subscribe store, selector hooks, and performance optimizations similar to libraries like zustand.

ContextReActState Management
0 likes · 11 min read
How to Optimize React Context to Prevent Unnecessary Re‑renders
KooFE Frontend Team
KooFE Frontend Team
Mar 23, 2023 · Frontend Development

Why useSyncExternalStore Is Essential for Safe State Sync in React 18

This article explains the purpose, benefits, and implementation of React 18’s useSyncExternalStore hook, covering its role in synchronizing external state such as browser APIs, preventing UI tearing during concurrent rendering, and providing SSR support with practical code examples like useMediaQuery and useWindowSize.

ReActSSRuseSyncExternalStore
0 likes · 13 min read
Why useSyncExternalStore Is Essential for Safe State Sync in React 18
ByteFE
ByteFE
Mar 20, 2023 · Frontend Development

Understanding the Proposed React “use” Hook: Design, Usage, and Limitations

This article explains the new React "use" hook proposal, covering its background, how to integrate it with Suspense, minimal examples, promise caching, control‑flow usage, design motivations, implementation details, limitations, and the surrounding community debate.

FrontendHooksJavaScript
0 likes · 12 min read
Understanding the Proposed React “use” Hook: Design, Usage, and Limitations
HomeTech
HomeTech
Mar 1, 2023 · Backend Development

Overview of the Wenjie Low-Code Platform: Architecture, Technologies, and Use Cases

The article presents a comprehensive overview of the Wenjie low-code platform, detailing its motivation, front‑end React framework, back‑end Spring Cloud micro‑services architecture, PowerJob scheduler, custom ORM, various data‑modeling and data‑processing scenarios, dashboard visualizations, monitoring and alerting features, as well as future plans and a concluding summary.

Data IntegrationPlatformPowerJob
0 likes · 11 min read
Overview of the Wenjie Low-Code Platform: Architecture, Technologies, and Use Cases
21CTO
21CTO
Feb 21, 2023 · Frontend Development

Why JavaScript, AI, and Web3 Still Dominate 2023: Key Trends

The 2023 tech landscape shows JavaScript retaining its top spot, AI tools like Copilot and ChatGPT reshaping development productivity, and Web3 technologies maintaining strong growth, while frontend frameworks such as React, Vue, and Svelte compete for market demand and developer satisfaction.

AIJavaScriptReAct
0 likes · 10 min read
Why JavaScript, AI, and Web3 Still Dominate 2023: Key Trends
Goodme Frontend Team
Goodme Frontend Team
Feb 20, 2023 · Frontend Development

Top 5 Must‑Read Frontend & AI Articles of the Week

This weekly digest curates five essential reads—including Vue.js 2023 roadmap insights, a deep dive into React Hooks, standout ChatGPT open‑source projects, practical front‑end quality measures, and a critical look at React's evolution—offering developers fresh perspectives and actionable knowledge.

AIOpen SourceReAct
0 likes · 3 min read
Top 5 Must‑Read Frontend & AI Articles of the Week
Goodme Frontend Team
Goodme Frontend Team
Feb 18, 2023 · Frontend Development

How to Build a Reactive System in JavaScript: From Object.defineProperty to Proxy

This article walks through creating a JavaScript reactive system for front‑end development, covering the classic Object.defineProperty approach, dependency tracking, Proxy‑based deep reactivity, integration with React hooks, performance tweaks, and advanced considerations such as async queues and compile‑time helpers.

Object.definePropertyReActproxy
0 likes · 17 min read
How to Build a Reactive System in JavaScript: From Object.defineProperty to Proxy
Sohu Tech Products
Sohu Tech Products
Feb 15, 2023 · Frontend Development

From Zero to One: Building a React CLI Scaffolding Tool Based on Vue CLI Insights

This article documents the complete process of researching, analyzing, and developing a custom React CLI scaffolding tool, including a detailed examination of Vue CLI's architecture, plugin mechanism, and codebase, as well as the implementation of interactive command‑line features, configuration options, and publishing steps.

CLINode.jsReAct
0 likes · 26 min read
From Zero to One: Building a React CLI Scaffolding Tool Based on Vue CLI Insights
Huolala Tech
Huolala Tech
Feb 14, 2023 · Frontend Development

When Does a React Component Re‑Render and How to Optimize It?

This article explains what triggers a React component re‑render, distinguishes required from unnecessary renders, and presents practical techniques—such as narrowing render scope, using memo, useMemo, useCallback, and context selectors—to improve performance in complex applications.

HooksOptimizationPerformance
0 likes · 11 min read
When Does a React Component Re‑Render and How to Optimize It?
Xianyu Technology
Xianyu Technology
Feb 14, 2023 · Frontend Development

How FishUI Achieves Seamless Cross‑Platform UI Development for Xianyu

FishUI is a cross‑platform React component library designed for Xianyu’s kun and web containers, offering unified APIs, automated environment detection, monorepo architecture with pnpm, lerna + nx versioning, custom build loaders, comprehensive testing, and documentation tooling to boost developer efficiency and maintainability.

Build OptimizationComponent LibraryCross‑Platform
0 likes · 15 min read
How FishUI Achieves Seamless Cross‑Platform UI Development for Xianyu
Alipay Experience Technology
Alipay Experience Technology
Feb 14, 2023 · Frontend Development

Mastering Dynamic Themes in Ant Design V5: From Global Algorithms to Local Customizations

Ant Design V5’s CSS‑in‑JS architecture enables powerful dynamic theming, allowing developers and designers to implement global theme algorithms, partial theme overrides, component‑level styling, and seamless multi‑theme compositions, illustrated with real‑world applications, code snippets, and visual comparisons across light and dark modes.

Ant DesignCSS-in-JSDynamic Theming
0 likes · 13 min read
Mastering Dynamic Themes in Ant Design V5: From Global Algorithms to Local Customizations
HelloTech
HelloTech
Feb 13, 2023 · Mobile Development

Hybrid Native Map and H5 Integration via WebView for Overseas Projects

The project replaces costly Google Dynamic Maps with a hybrid solution that overlays a transparent WebView on a native map component, using a JSBridge to route H5 events and native map interactions, dynamically managing hot‑zone data, thereby cutting service fees, boosting performance, and preserving H5 development flexibility.

HotzoneHybrid AppJSBridge
0 likes · 10 min read
Hybrid Native Map and H5 Integration via WebView for Overseas Projects
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Feb 13, 2023 · Frontend Development

Advanced Tips and Common Pitfalls for React Hooks (useState, useEffect, useContext, useReducer, etc.)

This article provides in‑depth guidance on using React hooks such as useState, useEffect, useContext, useReducer, and related utilities, covering lazy initialization, functional updates, performance‑optimising patterns, state sharing strategies, and advanced techniques like useImmer and react‑tracked to reduce mental overhead and avoid bugs.

HooksPerformanceReAct
0 likes · 16 min read
Advanced Tips and Common Pitfalls for React Hooks (useState, useEffect, useContext, useReducer, etc.)
ByteFE
ByteFE
Feb 8, 2023 · Frontend Development

React Context Re‑render Issues and an Optimized use‑context‑selector Implementation

This article explains why passing an object as a React Context Provider value can cause unnecessary re‑renders, introduces the community‑made use‑context‑selector library to mitigate the problem, analyzes its limitations, and presents a custom optimized implementation using useSyncExternalStore for precise component updates.

ContextFrontendHooks
0 likes · 17 min read
React Context Re‑render Issues and an Optimized use‑context‑selector Implementation
KooFE Frontend Team
KooFE Frontend Team
Jan 28, 2023 · Frontend Development

Redesigning Excalidraw’s Component API: From Render Props to Child Components

The article explains how Excalidraw’s new component API replaces render props with a child‑component approach, introduces customizable MainMenu, Footer, and WelcomeScreen components, provides code examples, and discusses the benefits and limitations of this redesign for developers building custom whiteboard applications.

ReActUI customizationcomponent API
0 likes · 10 min read
Redesigning Excalidraw’s Component API: From Render Props to Child Components
Alibaba Cloud Developer
Alibaba Cloud Developer
Jan 9, 2023 · Frontend Development

Mastering React Design Patterns: From Containers to Custom Hooks

This article reviews essential React design patterns—including container/presentational components, higher‑order components, render props, compound components, and custom hooks—explaining the underlying SOLID principles, providing clear code examples, and offering guidance on when to apply each pattern.

Component ArchitectureDesign PatternsFrontend
0 likes · 10 min read
Mastering React Design Patterns: From Containers to Custom Hooks
Xianyu Technology
Xianyu Technology
Jan 3, 2023 · Frontend Development

Using XState for Collaborative Frontend Development and State Management

By adopting the XState state‑machine library, the team transformed a complex, interactive page’s development from costly component‑wise coordination into a collaborative workflow where a small core group maintains a visual state graph while UI developers work on lightweight components, improving performance and reducing render overhead.

CollaborationFrontendReAct
0 likes · 12 min read
Using XState for Collaborative Frontend Development and State Management
Laravel Tech Community
Laravel Tech Community
Dec 25, 2022 · Frontend Development

Next.js 13.1 Release Highlights and New Features

Next.js 13.1 has been officially released, introducing improvements to the app directory, built‑in module transpilation, a stable Edge runtime, Turbopack enhancements, middleware capabilities, a new SWC transform called modularizeImports, and various memory and template optimizations.

Edge RuntimeNext.jsReAct
0 likes · 2 min read
Next.js 13.1 Release Highlights and New Features
ByteFE
ByteFE
Dec 25, 2022 · Frontend Development

Curated Technical Articles on Frontend Development, Low‑Code Collaboration, Browser Caching, and More

This collection presents curated technical articles covering low‑code multi‑branch collaborative development, comprehensive front‑end state management, hands‑on browser cache exploration, intranet penetration principles, advanced CSS Houdini techniques, front‑end mock data strategies, React ref fundamentals, and performance‑focused foreign reads.

Browser CacheCSS HoudiniReAct
0 likes · 6 min read
Curated Technical Articles on Frontend Development, Low‑Code Collaboration, Browser Caching, and More
DaTaobao Tech
DaTaobao Tech
Dec 19, 2022 · Frontend Development

How ice.js 3 Redefines Frontend Performance with Parallel Loading and SSR Innovations

ice.js 3 merges MPA and SPA concepts to deliver per‑page HTML, parallelizes block and data loading, introduces SSG and out‑of‑the‑box SSR with streaming and Server Components, supports multi‑end development, and upgrades the runtime with swc and esbuild to dramatically improve web performance and developer experience.

ReActSSRfrontend performance
0 likes · 17 min read
How ice.js 3 Redefines Frontend Performance with Parallel Loading and SSR Innovations