BestHub
Sign in
Tagged articles
1022 articles
Page 8 of 11
Ctrip Technology
Ctrip Technology
Jul 15, 2021 · Frontend Development

Optimizing List Rendering Performance in Taro3 Using a Custom Virtual List

This article examines the performance bottlenecks of a Taro3 mini‑program list page after migrating from Taro1, analyzes causes such as excessive node rendering and large setState payloads, evaluates backend pagination and the built‑in virtual list, and presents a custom virtual‑list implementation that reduces rendered nodes, uses screen‑height placeholders, and achieves roughly 45% faster rendering and 50% quicker interaction response.

IntersectionObserverReactTaro
0 likes · 12 min read
Optimizing List Rendering Performance in Taro3 Using a Custom Virtual List
政采云技术
政采云技术
Jul 13, 2021 · Frontend Development

Understanding rc-form: Internals, APIs, and Usage in React Forms

This article provides a comprehensive overview of rc-form, a React library used by Ant Design to manage form state, validation, and data collection, explaining why it is needed, its core APIs, practical usage examples, and a deep dive into its internal implementation.

Ant DesignFormReact
0 likes · 19 min read
Understanding rc-form: Internals, APIs, and Usage in React Forms
ByteDance Web Infra
ByteDance Web Infra
Jul 12, 2021 · Frontend Development

Dan’s Live Interview on React Core: State Management, Hooks, Concurrent Mode, and Future Directions

In this extensive live interview, React core maintainer Dan discusses his programming origins, the philosophy behind React state management and Hooks, practical advice for newcomers, the challenges of Concurrent Mode and Server Components, and his vision for React’s evolution and competitiveness.

Concurrent ModeReactServer Components
0 likes · 44 min read
Dan’s Live Interview on React Core: State Management, Hooks, Concurrent Mode, and Future Directions
KooFE Frontend Team
KooFE Frontend Team
Jul 7, 2021 · Frontend Development

How React 18’s Automatic Batching Reduces Renders and Boosts Performance

React 18 introduces automatic batching that merges multiple state updates into a single render across all contexts—including promises, timeouts, and native events—improving performance while offering opt‑out mechanisms like flushSync for rare cases where immediate DOM updates are required.

Automatic BatchingReactReact 18
0 likes · 13 min read
How React 18’s Automatic Batching Reduces Renders and Boosts Performance
Taobao Frontend Technology
Taobao Frontend Technology
Jul 6, 2021 · Frontend Development

What’s New in React 18? A Deep Dive into Concurrent Rendering and Suspense

React 18 introduces a progressive upgrade path with concurrent rendering, automatic batching, a new Root API, startTransition, and an improved Suspense SSR architecture, allowing developers to adopt new features with minimal code changes while enhancing performance and enabling selective hydration and streaming HTML.

Automatic BatchingReactReact 18
0 likes · 12 min read
What’s New in React 18? A Deep Dive into Concurrent Rendering and Suspense
Alibaba Terminal Technology
Alibaba Terminal Technology
Jun 30, 2021 · Frontend Development

What’s New in React 18? A Deep Dive into Concurrent Rendering and Suspense

This article explains how React 18 introduces progressive upgrades, a new Root API, automatic batching, the flushSync utility, an enhanced Suspense SSR architecture, and the startTransition API, providing code examples and practical guidance for developers transitioning from earlier React versions.

Automatic BatchingConcurrent RenderingReact
0 likes · 13 min read
What’s New in React 18? A Deep Dive into Concurrent Rendering and Suspense
58 Tech
58 Tech
Jun 28, 2021 · Frontend Development

Umajs-react-ssr: An Isomorphic Server‑Side Rendering Solution for React on the Umajs Node Framework

Umajs-react-ssr is a lightweight isomorphic SSR solution built on the Umajs Node.js framework that enables React page components to be rendered on both server and client, offering flexible routing, server‑side data fetching, custom HTML templates, CSS‑module support, and easy configuration for improved performance and developer experience.

IsomorphicNode.jsReact
0 likes · 25 min read
Umajs-react-ssr: An Isomorphic Server‑Side Rendering Solution for React on the Umajs Node Framework
Baidu Geek Talk
Baidu Geek Talk
Jun 28, 2021 · Frontend Development

How EMP Simplifies Micro‑Frontend Architecture for Large Web Projects

This article introduces EMP, a micro‑frontend solution that helps developers build production‑ready micro‑frontend architectures more easily and efficiently by addressing large bundle sizes, team collaboration, and module sharing, and provides detailed usage scenarios, ecosystem support, configuration examples, upgrade guides, and performance comparisons.

EMPFrontend ArchitectureModule Federation
0 likes · 9 min read
How EMP Simplifies Micro‑Frontend Architecture for Large Web Projects
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Jun 24, 2021 · Frontend Development

Mastering React Hooks: From Basics to Advanced Patterns

This article explains why React Hooks were introduced, walks through the fundamentals of useState and useEffect with clear code examples, and demonstrates how Hooks simplify state management, side‑effects, and component logic compared to traditional class components, enabling more maintainable frontend development.

JavaScriptReactuseEffect
0 likes · 19 min read
Mastering React Hooks: From Basics to Advanced Patterns
Aotu Lab
Aotu Lab
Jun 24, 2021 · Frontend Development

Unlock React 18’s Power: Batching, Suspense SSR, startTransition & More

This article reviews Google’s CSS fundamentals course, dives into React 18’s automatic batching, the new Suspense SSR architecture, the startTransition API, suggests a lightweight VS Code API client, and explains the basics of building user profiles for recommendation systems.

CSSJavaScriptReact
0 likes · 7 min read
Unlock React 18’s Power: Batching, Suspense SSR, startTransition & More
Ctrip Technology
Ctrip Technology
Jun 24, 2021 · Frontend Development

Choosing Nanachi for React to Mini‑Program Conversion: Comparison, Challenges, and Implementation

The article analyzes the background of mini‑program development, compares cross‑platform conversion frameworks, explains why Nanachi was selected for its small package size and native‑project mixing support, details its architecture, outlines conversion issues and solutions, and presents the overall static translation workflow and results.

Mini ProgramNanachiReact
0 likes · 12 min read
Choosing Nanachi for React to Mini‑Program Conversion: Comparison, Challenges, and Implementation
Taobao Frontend Technology
Taobao Frontend Technology
Jun 24, 2021 · Frontend Development

Rethinking React Hooks: Functional Programming, TypeScript, and Cross‑Framework Insights

This article explores why React moved from class components to the Hooks API, explains its functional‑programming roots, compares Hooks with Redux, Mixins, HOCs, Vue's Composition API, and demonstrates how TypeScript type inference and codata concepts can deepen understanding while providing practical code examples.

Composition APIReactVue
0 likes · 21 min read
Rethinking React Hooks: Functional Programming, TypeScript, and Cross‑Framework Insights
php Courses
php Courses
Jun 24, 2021 · Frontend Development

Top 5 Frontend JavaScript Frameworks in 2021

This article reviews the 2021 top five frontend JavaScript frameworks—React, Vue, Angular, Ember, and Preact—based on Stack Overflow surveys, State of JS, and NPM trends, explaining their origins, features, and adoption by major companies.

AngularEmberJavaScript
0 likes · 9 min read
Top 5 Frontend JavaScript Frameworks in 2021
政采云技术
政采云技术
Jun 22, 2021 · Frontend Development

Understanding Immutable Data Structures and Their Use in React and Redux

This article explains what immutable data structures are, outlines their advantages such as reduced complexity, memory savings, easy state rollback, and functional programming benefits, and demonstrates practical usage of Immutable.js in React components and Redux integration with code examples and best‑practice tips.

Data StructuresImmutableReact
0 likes · 14 min read
Understanding Immutable Data Structures and Their Use in React and Redux
Didi Tech
Didi Tech
Jun 22, 2021 · Frontend Development

How Tenon Extends Hummer to Bridge Vue/React with Native: A Deep Dive

Tenon is a lightweight MVVM framework built on Didi's Hummer runtime that bridges the Web ecosystem (Vue 3 and React) with native Android and iOS, offering multi‑framework support, easy adoption, extensible plugins, high availability, and a three‑layer architecture illustrated by real‑world Didi case studies.

HummerMVVMReact
0 likes · 8 min read
How Tenon Extends Hummer to Bridge Vue/React with Native: A Deep Dive
ELab Team
ELab Team
Jun 20, 2021 · Frontend Development

Understanding React Synthetic Events: Architecture, Code, and Common Pitfalls

This article explains how React synthetic events emulate native DOM events, details the event system architecture, provides core registration and execution code, demonstrates mixing with native events, and discusses the benefits and known issues of the synthetic event model.

Event SystemJavaScriptReact
0 likes · 7 min read
Understanding React Synthetic Events: Architecture, Code, and Common Pitfalls
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
May 31, 2021 · Frontend Development

How NetEase’s Color Test H5 Was Built: SPA Architecture, Animations, and Result Logic

This article details the technical implementation of NetEase Cloud Music’s color‑test H5, covering its single‑page React architecture, preloading optimizations, canvas and WebGL animation techniques, and the deterministic front‑end algorithm that calculates single‑ or dual‑color results from user choices.

CanvasMatter.jsReact
0 likes · 10 min read
How NetEase’s Color Test H5 Was Built: SPA Architecture, Animations, and Result Logic
Huolala Tech
Huolala Tech
May 28, 2021 · Frontend Development

Master Web Animations for Mobile: Tools, Tips, and Code Examples

This article reviews common web animation techniques for mobile projects—including GIF/APNG, CSS3, JavaScript, Lottie, SVG, and Canvas—offering practical tips, performance considerations, Vue and React implementations, and reusable code patterns to help developers confidently meet designers' animation requirements.

JavaScriptLottieReact
0 likes · 13 min read
Master Web Animations for Mobile: Tools, Tips, and Code Examples
ByteDance Web Infra
ByteDance Web Infra
May 27, 2021 · Fundamentals

Understanding Build Systems à la Carte: Theory, Incremental Computation, and Front‑End Applications

This article reviews the paper “Build Systems à la Carte”, explains its abstract build‑system model, shows how incremental computation concepts apply to tools such as Excel, React, Recoil, module loaders and dependency injection, and demonstrates a TypeScript translation of the core ideas for front‑end developers.

Incremental ComputationReactRecoil
0 likes · 37 min read
Understanding Build Systems à la Carte: Theory, Incremental Computation, and Front‑End Applications
ByteFE
ByteFE
May 23, 2021 · Frontend Development

How to Create a Rotating 3D Coin Animation with CSS3, LESS and React

This article explains how to build a rotating 3D coin effect for a web page using CSS3 animations, @keyframes, LESS variables and loops, and a React component that generates the coin's faces and edges, providing a visual cue to attract users to an activity.

3DReactcoin
0 likes · 10 min read
How to Create a Rotating 3D Coin Animation with CSS3, LESS and React
ByteDance ADFE Team
ByteDance ADFE Team
May 12, 2021 · Frontend Development

Understanding Recoil: Solving State Management Challenges in React

This article explains the origins of Recoil, why existing tools like Redux, React's built‑in state, and Context fall short for complex shared and derived state scenarios, and how Recoil's atom‑selector architecture, including async selectors and application‑level state observation, addresses flexibility, performance, and robustness in modern React applications.

AtomReactRecoil
0 likes · 8 min read
Understanding Recoil: Solving State Management Challenges in React
Youzan Coder
Youzan Coder
May 12, 2021 · Frontend Development

Understanding React Fiber Architecture, Work Units, and Scheduling

React Fiber rewrites React’s core algorithm by breaking the diff phase into small, interruptible fiber units, scheduling them during browser idle time with requestIdleCallback, using double‑buffered trees and effect lists to pause, resume, and efficiently commit DOM updates, thereby improving UI responsiveness in large applications.

FiberFront-endJavaScript
0 likes · 28 min read
Understanding React Fiber Architecture, Work Units, and Scheduling
ByteFE
ByteFE
May 12, 2021 · Frontend Development

Using @vue/reactivity in React: Custom Hooks and HOC for Reactive State

This article demonstrates how to leverage the @vue/reactivity package inside React by creating a custom useReactive hook for function components and a reactiveHoc higher‑order component for class components, explaining the underlying concepts, implementation steps, and practical usage with full code examples.

Custom HooksHigher-Order ComponentReact
0 likes · 7 min read
Using @vue/reactivity in React: Custom Hooks and HOC for Reactive State
Alibaba Terminal Technology
Alibaba Terminal Technology
May 11, 2021 · Frontend Development

How Hook-Based Request Libraries Simplify Data Fetching in Modern Frontend Apps

This article examines the evolution of frontend request libraries—from jQuery Ajax to modern hook-based solutions like useRequest, SWR, and react-query—highlighting their simplified loading state handling, cache mechanisms, refetching, and mutate features, and comparing their design differences with class components.

Data FetchingReactSWR
0 likes · 10 min read
How Hook-Based Request Libraries Simplify Data Fetching in Modern Frontend Apps
iQIYI Technical Product Team
iQIYI Technical Product Team
Apr 30, 2021 · Frontend Development

Low-Code Development: Market Trends and iQIYI Activity Platform Practice

China’s low‑code market, valued at CNY 1.9 billion in 2020 and projected to hit a hundred‑billion by 2024, is booming as enterprises like iQIYI adopt visual development platforms that abstract reusable components, accelerate activity page creation, and address integration, modularity, and business‑driven platform design challenges.

Reactactivity platformcomponent reuse
0 likes · 10 min read
Low-Code Development: Market Trends and iQIYI Activity Platform Practice
ByteFE
ByteFE
Apr 28, 2021 · Frontend Development

Building a Markdown Editor with ByteMD

This tutorial demonstrates how to build a Markdown editor using ByteMD, including setting up plugins for enhanced functionality and customization.

ByteMDCode HighlightingPlugins
0 likes · 10 min read
Building a Markdown Editor with ByteMD
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Apr 27, 2021 · Frontend Development

Mastering React Error Boundaries: Build a Flexible Error‑Handling Wheel

This tutorial walks through why catching front‑end component errors is essential, demonstrates how to implement a custom React ErrorBoundary with flexible fallback options, reset logic, higher‑order component wrappers, and hooks, and provides complete TypeScript examples and best‑practice summaries.

Error HandlingErrorBoundaryHigher-Order Component
0 likes · 19 min read
Mastering React Error Boundaries: Build a Flexible Error‑Handling Wheel
58 Tech
58 Tech
Apr 26, 2021 · Frontend Development

CarNext: A Customized Server‑Side Rendering Framework Based on Next.js for 58.com Automotive Business

This article explores the evolution of front‑end performance optimization, compares SPA and SSR architectures, introduces a Node‑based middle‑layer design, and details the CarNext framework built on Next.js that improves rendering speed, SEO friendliness, and development efficiency for 58.com’s automotive services.

Frontend ArchitectureNext.jsNode.js
0 likes · 13 min read
CarNext: A Customized Server‑Side Rendering Framework Based on Next.js for 58.com Automotive Business
Liulishuo Tech Team
Liulishuo Tech Team
Apr 22, 2021 · Frontend Development

Building a Cross‑Platform English Quiz Mini‑Game with React & Pixi.js

This article details how to create a cross‑platform English‑learning quiz PK mini‑game for both a main app (H5) and WeChat mini‑games, covering technology selection, project structure, webpack configuration, virtual routing, component development with react‑pixi‑fiber, animation techniques, platform adapters, and performance optimizations.

H5ReactWeChat Mini Game
0 likes · 22 min read
Building a Cross‑Platform English Quiz Mini‑Game with React & Pixi.js
ELab Team
ELab Team
Apr 21, 2021 · Frontend Development

Master JavaScript Scope, Context, and Closures: From Basics to React

This article explains JavaScript’s scope types, execution context, activation objects, and the lifecycle of functions, illustrating how closures retain memory, how garbage collection works, and provides practical solutions for common closure pitfalls in React functional components.

JavaScriptReactclosure
0 likes · 12 min read
Master JavaScript Scope, Context, and Closures: From Basics to React
JD Retail Technology
JD Retail Technology
Apr 21, 2021 · Frontend Development

Design and Architecture of the Dolphin System for JD International App

The Dolphin system introduces a native‑plus‑H5, component‑based architecture using React to meet JD International’s personalized channel requirements, improve performance, enable cross‑platform configuration, and provide a secure, real‑time, and isolated solution for dynamic page rendering.

ConfigurationJD InternationalReact
0 likes · 7 min read
Design and Architecture of the Dolphin System for JD International App
ByteFE
ByteFE
Apr 19, 2021 · Frontend Development

Advanced TypeScript and React Patterns: Importing React, Functional Components, Hooks, Props, and Types

This guide covers the essential TypeScript knowledge for React development, demonstrating how to import React, declare functional components with React.FC, use core hooks such as useState, useRef, useEffect, useMemo, create custom hooks, handle defaultProps, choose between type and interface, type props, manage forms and events, work with operators, and apply generic patterns for reusable components.

PropsReactTypeScript
0 likes · 23 min read
Advanced TypeScript and React Patterns: Importing React, Functional Components, Hooks, Props, and Types
ByteDance ADFE Team
ByteDance ADFE Team
Apr 19, 2021 · Frontend Development

Understanding React's Event System: Registration and Dispatch

This article explains how React registers event listeners on the root, extracts events from the fiber tree, synthesizes cross‑browser synthetic events, accumulates callbacks, and finally dispatches them, illustrating each step with code examples and diagrams.

Event SystemJavaScriptReact
0 likes · 9 min read
Understanding React's Event System: Registration and Dispatch
ELab Team
ELab Team
Apr 14, 2021 · Frontend Development

Recoil vs Redux & MobX: Modern React State Management Explained

Recoil, Facebook’s experimental state‑management library for React, offers a hook‑based, orthogonal approach that reduces overhead compared to Redux and MobX, supports both synchronous and asynchronous selectors, provides utilities like atomFamily and selectorFamily, and integrates seamlessly with React’s concurrent features, making it a promising frontend solution.

ReactState Managementfrontend
0 likes · 11 min read
Recoil vs Redux & MobX: Modern React State Management Explained
ByteFE
ByteFE
Apr 13, 2021 · Frontend Development

Streaming Server‑Side Rendering in React: Concepts, lazy, Suspense, and Implementation

This article explains the principles of streaming server‑side rendering (SSR) in React, compares it with traditional client‑side rendering, and demonstrates how lazy loading and Suspense can be used together with streaming SSR to parallelize data and JavaScript delivery for faster first‑paint and improved user experience.

@LazyReactSSR
0 likes · 10 min read
Streaming Server‑Side Rendering in React: Concepts, lazy, Suspense, and Implementation
Taobao Frontend Technology
Taobao Frontend Technology
Apr 13, 2021 · Frontend Development

Why React Hooks? Uncover Functional Patterns Beyond Class Components

This article explores the motivations behind React's Hooks API, contrasts it with the traditional Class API, delves into functional programming concepts, demonstrates practical implementations with Redux, Mixins, HOCs, custom Hooks, TypeScript type inference, codata theory, and compares React Hooks to Vue's Composition API, providing code examples and visual diagrams throughout.

Reactfrontendhooks
0 likes · 21 min read
Why React Hooks? Uncover Functional Patterns Beyond Class Components
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Apr 12, 2021 · Frontend Development

Demystifying React Router: From Native JS Routing to Source Code Deep Dive

This article walks through building a basic front‑end router with vanilla JavaScript, then dissects React Router’s source code—including BrowserRouter, HashRouter, Router, Route, and matchPath—explaining their implementations, the history library, and how they improve routing compared to native approaches.

Hash RoutingHistory APIJavaScript
0 likes · 27 min read
Demystifying React Router: From Native JS Routing to Source Code Deep Dive
Sohu Tech Products
Sohu Tech Products
Apr 7, 2021 · Frontend Development

Understanding Notion’s Block‑Based Editor Architecture and Operations

The article explains how Notion implements a block‑tree data model and a controlled contenteditable editor using React, detailing the data layer, operation (op) system, rendering components, selection handling, text styling, and copy‑paste mechanisms, all backed by transactional undo/redo logic.

Block ModelNotionReact
0 likes · 27 min read
Understanding Notion’s Block‑Based Editor Architecture and Operations
Alibaba Terminal Technology
Alibaba Terminal Technology
Apr 7, 2021 · Frontend Development

Why Hooks? Uncovering the Functional Foundations of React and Beyond

This article explores the motivations behind React's Hooks API, contrasts it with the Class API, delves into functional programming concepts, demonstrates implementations via Mixins, HOCs, and custom hooks, and compares React Hooks to Vue's Composition API, offering deep insights for front‑end developers.

Composition APIReactTypeScript
0 likes · 22 min read
Why Hooks? Uncovering the Functional Foundations of React and Beyond
政采云技术
政采云技术
Apr 6, 2021 · Frontend Development

H5 List Page Caching Strategy and Implementation with CacheHoc

This article explains why list pages lose state in H5 applications, discusses the reasons behind it, compares Vue's keep-alive and React's lack of built‑in support, and presents a practical CacheHoc solution with code examples for storing list data and scroll positions using window storage.

CacheHocReactfrontend
0 likes · 15 min read
H5 List Page Caching Strategy and Implementation with CacheHoc
KooFE Frontend Team
KooFE Frontend Team
Apr 5, 2021 · Frontend Development

How to Write Clean, Maintainable React Components: Proven Tips

This article reviews practical techniques for writing cleaner React components, covering anti‑patterns like prop spreading, using object parameters, curried event handlers, preferring map over if/else, leveraging custom hooks, and splitting components with wrappers, separation of concerns, and dedicated files to improve readability and scalability.

Code CleanlinessComponent DesignReact
0 likes · 11 min read
How to Write Clean, Maintainable React Components: Proven Tips
Alibaba Terminal Technology
Alibaba Terminal Technology
Mar 25, 2021 · Frontend Development

Building an IDC Digital Twin with 3D Web Technology: A Front‑End Blueprint

This article details the technical design and implementation of an IDC digital‑twin platform, covering business requirements, a three‑dimensional interactive framework built on React and ThreeJS, component architecture, user interaction, visual rendering, performance optimizations, and future development plans.

3D webDigital TwinFrontend Architecture
0 likes · 9 min read
Building an IDC Digital Twin with 3D Web Technology: A Front‑End Blueprint
ByteFE
ByteFE
Mar 22, 2021 · Frontend Development

Table Virtualization Practices in React Ant Design: Approaches and Lessons

This article examines the challenges of virtualizing large Ant Design tables in a React+Umi stack, outlines three internal implementation strategies, discusses common pitfalls such as blank flicker and column fixing, and recommends open‑source alternatives for efficient table rendering.

Ant DesignReactTable Virtualization
0 likes · 13 min read
Table Virtualization Practices in React Ant Design: Approaches and Lessons
Alibaba Terminal Technology
Alibaba Terminal Technology
Mar 18, 2021 · Frontend Development

Understanding React Fiber: How It Boosts Rendering Performance

This article explains why React introduced the Fiber architecture, how it breaks rendering work into small interruptible units, the role of requestAnimationFrame and requestIdleCallback, the underlying linked‑list data structures, and provides code examples that illustrate the render and commit phases for smoother UI updates.

FiberJavaScriptReact
0 likes · 24 min read
Understanding React Fiber: How It Boosts Rendering Performance
21CTO
21CTO
Mar 12, 2021 · Frontend Development

70+ Open‑Source Clone Projects to Master Frontend Development

This article compiles a curated list of more than seventy open‑source clone projects—ranging from 2048 and Airbnb to Netflix and TikTok—providing live demos, source‑code links, and technology‑stack details to help developers learn modern frontend techniques.

Reactclonefrontend
0 likes · 10 min read
70+ Open‑Source Clone Projects to Master Frontend Development
QQ Music Frontend Team
QQ Music Frontend Team
Mar 5, 2021 · Frontend Development

Boost React Performance: Master React.memo, useCallback & useMemo

An in‑depth guide explains how React.memo, useCallback, and useMemo work together to prevent unnecessary re‑renders, includes practical code examples, memoization concepts, source‑code analysis, and best‑practice recommendations for optimizing front‑end performance in modern.

ReactReact.memouseCallback
0 likes · 15 min read
Boost React Performance: Master React.memo, useCallback & useMemo
Xianyu Technology
Xianyu Technology
Mar 4, 2021 · Frontend Development

Solving CORS Issues When Integrating React Frontend with Java Backend

Integrating a React front‑end with a Java back‑end required fixing HTTPS‑to‑HTTP CORS errors by serving the React index.html from the backend, switching @RestController to @Controller for sub‑path routing, adding Thymeleaf, using a Chrome redirect plugin and crossorigin tags, and disabling lazy‑loaded asset URLs during local development, highlighting that true front‑end/back‑end separation remains elusive.

BackendCORSReact
0 likes · 5 min read
Solving CORS Issues When Integrating React Frontend with Java Backend
ELab Team
ELab Team
Feb 26, 2021 · Frontend Development

Mastering React Hooks: Best Practices and Streamlined Patterns

This article reviews React Hooks, compares them with class components, demonstrates change‑driven coding with practical examples, introduces marble diagrams for visualizing state flows, and explores advanced patterns like custom hooks, immutable data handling, and global state management for more maintainable frontend development.

ReactState Managementfrontend
0 likes · 18 min read
Mastering React Hooks: Best Practices and Streamlined Patterns
HomeTech
HomeTech
Feb 24, 2021 · Frontend Development

Next.js SSR Implementation for International Projects: Technical Deep Dive

This article details the technical implementation of Next.js SSR for international projects, covering custom routing, data fetching, Material UI integration, SEO optimization, and special considerations for overseas markets including Google Recaptcha and internationalization.

Google RecaptchaMaterial-UINext.js
0 likes · 12 min read
Next.js SSR Implementation for International Projects: Technical Deep Dive
政采云技术
政采云技术
Feb 23, 2021 · Frontend Development

Capturing and Handling Frontend Exceptions

This article explains common frontend exceptions such as UI glitches, script errors, and network failures, classifies JavaScript error types, demonstrates handling techniques using try‑catch, finally, window.onerror, event listeners, Promise rejection handling, and framework‑specific solutions like React error boundaries, Vue errorHandler, and Axios interceptors.

Error HandlingReactaxios
0 likes · 18 min read
Capturing and Handling Frontend Exceptions
ByteFE
ByteFE
Feb 22, 2021 · Frontend Development

Mastering React Forms: From Official APIs to Advanced Community Solutions

This article provides a comprehensive analysis of form handling in React, covering the fundamentals of forms, the official controlled and uncontrolled approaches, and a detailed comparison of major community libraries such as rc-form, rc-field-form, Formik, React‑final‑form, react‑hook‑form, and Formily, including code examples, performance considerations, and practical usage tips.

Controlled ComponentsFormFormik
0 likes · 45 min read
Mastering React Forms: From Official APIs to Advanced Community Solutions
ByteFE
ByteFE
Feb 2, 2021 · Frontend Development

React Server Components: A Technical Analysis

React Server Components propose a solution to React's data-fetching performance issues by separating components into server-side and client-side types, but face challenges like increased server costs and developer complexity.

ReactServer ComponentsTechnical Analysis
0 likes · 7 min read
React Server Components: A Technical Analysis
Xianyu Technology
Xianyu Technology
Jan 28, 2021 · Frontend Development

Frontend Design and Performance Optimization of Xianyu Community Circle

The Xianyu Community Circle front‑end was modularized into independent Circle Info, Feed, and Overlay sections, using Rax’s useReducer + useContext for shared state, while minimizing non‑shared data, extracting providers, stabilizing props, caching pages, prefetching resources, and moving overlays out of global context to cut latency, reduce re‑renders, and boost performance on low‑end devices.

Reactmodule-splittingoptimization
0 likes · 10 min read
Frontend Design and Performance Optimization of Xianyu Community Circle
Tencent Cloud Developer
Tencent Cloud Developer
Jan 25, 2021 · Frontend Development

State Management in React: Redux, Mobx, and Clean-State

The article compares traditional React state‑management solutions—Redux’s single‑store with extra libraries and potential re‑renders, and MobX’s fine‑grained but class‑based approach—against the lightweight, hook‑driven Clean‑State library, which avoids providers, reduces bundle size, and offers precise module‑level updates for large and consumer applications.

Clean-StateMobXReact
0 likes · 10 min read
State Management in React: Redux, Mobx, and Clean-State
Beike Product & Technology
Beike Product & Technology
Jan 21, 2021 · Frontend Development

Building Interactive Documentation Sites with ljbisheng (keDoc)

This guide explains how to use the React‑based ljbisheng framework to create a markdown‑driven documentation site, covering installation, script configuration, bisheng.config.js settings, theme structure, plugin mechanisms, webpack integration, and the two‑step process of parsing markdown data and rendering React components.

Reactljbishengmarkdown
0 likes · 18 min read
Building Interactive Documentation Sites with ljbisheng (keDoc)
Aotu Lab
Aotu Lab
Jan 15, 2021 · Frontend Development

How Taro Unified Multi‑Platform Development with React, Vue, and Webpack

This article chronicles the evolution of the Taro framework from its inception as a React‑based mini‑program solution to a fully open, plugin‑driven multi‑platform architecture, highlighting technical challenges, Babel‑driven JSX compilation, component model redesign, and community‑driven growth.

Multi‑Platform DevelopmentReactTaro
0 likes · 19 min read
How Taro Unified Multi‑Platform Development with React, Vue, and Webpack
政采云技术
政采云技术
Jan 12, 2021 · Fundamentals

Understanding Priority Queues and Binary Heaps with React Source Code

This article explains the concept of priority queues, compares various implementations including binary heaps, demonstrates insertion and deletion operations with detailed code examples from React's SchedulerMinHeap, and discusses extensions to d‑ary heaps for performance‑critical scenarios.

Reactbinary heapd-ary heap
0 likes · 15 min read
Understanding Priority Queues and Binary Heaps with React Source Code
Tencent Cloud Developer
Tencent Cloud Developer
Dec 31, 2020 · Frontend Development

2020 Frontend Technology Trends: A Comprehensive Analysis from Tencent IMWeb Team

The Tencent IMWeb team’s 2020 analysis highlights seven key frontend trends—explosive TypeScript adoption, React’s dominance among major frameworks, the rise of WebAssembly, accelerating low‑code platforms, serverless full‑stack development, DevOps maturation, and booming WebRTC—while forecasting continued growth in these areas for 2021.

DevOpsFrontend TrendsReact
0 likes · 26 min read
2020 Frontend Technology Trends: A Comprehensive Analysis from Tencent IMWeb Team
政采云技术
政采云技术
Dec 29, 2020 · Frontend Development

How React Fiber Controls Updates: Inside the New Rendering Engine

This article explains how React 16's Fiber architecture replaces the recursive VDOM traversal with a cooperative, time‑sliced update model that splits work, uses linked‑list structures, assigns priorities, and allows tasks to be paused, resumed, or aborted for smoother rendering and better user experience.

FiberReactRendering
0 likes · 18 min read
How React Fiber Controls Updates: Inside the New Rendering Engine
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Dec 23, 2020 · Frontend Development

Understanding React's Synthetic Event System and Event Handling Mechanism

React’s synthetic event system wraps native browser events into reusable SyntheticEvent objects, uses a delegated single listener per event type, maps event names through registration modules and plugins, pools event instances, and simulates capture and bubble phases across the fiber tree, with key changes in React 17.

Event SystemEvent TriggeringReact
0 likes · 15 min read
Understanding React's Synthetic Event System and Event Handling Mechanism
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Dec 16, 2020 · Frontend Development

Performance Optimization in React: Diff Computation, Fiber Architecture, and Custom Renderers

The article explains how React’s virtual‑DOM diff can become a performance bottleneck, reviews classic optimizations such as debouncing, PureComponent, and idle callbacks, then details how the Fiber architecture makes diffing interruptible and prioritized and how the same reconciler can be leveraged to build custom cross‑platform renderers.

Custom RendererFiberFront-end
0 likes · 13 min read
Performance Optimization in React: Diff Computation, Fiber Architecture, and Custom Renderers
WeDoctor Frontend Technology
WeDoctor Frontend Technology
Dec 8, 2020 · Frontend Development

How React’s Fiber Scheduler Breaks Down Tasks for Smooth Rendering

This article explains React 16’s new Fiber architecture and its cooperative scheduling algorithm, showing how large diff tasks are split into small asynchronous units using priority queues and min‑heap structures, with code examples, performance visuals, and insights into real‑time and delayed task handling.

FiberHeapReact
0 likes · 20 min read
How React’s Fiber Scheduler Breaks Down Tasks for Smooth Rendering
JD Retail Technology
JD Retail Technology
Dec 7, 2020 · Frontend Development

Frontend Routing: Core Principles, Implementation, and Source Code Analysis

This article provides a comprehensive overview of frontend routing in single-page applications, covering its historical evolution, core concepts of hash and history modes, implementation details in Vue and React, code examples, navigation guards, nested routes, and practical considerations for choosing routing strategies.

History APIReactSPA
0 likes · 24 min read
Frontend Routing: Core Principles, Implementation, and Source Code Analysis
政采云技术
政采云技术
Nov 24, 2020 · Frontend Development

Blending React Hooks with Class Components: Practical Patterns and Code

This article explains why mixing React Hooks with existing Class Components is often necessary, compares three integration techniques—Render Props, Higher‑Order Components, and Ref forwarding with useImperativeHandle—provides complete code examples for each, and discusses current Hook limitations and future support.

Class ComponentHigher-Order ComponentReact
0 likes · 11 min read
Blending React Hooks with Class Components: Practical Patterns and Code
Alibaba Terminal Technology
Alibaba Terminal Technology
Nov 23, 2020 · Frontend Development

Unlock Powerful Graph Editing with AntV X6: Features, APIs, and Demos

This article introduces AntV X6, a versatile JavaScript graph‑editing engine, covering its core capabilities such as node and edge creation, custom HTML/React nodes, rich connection styles, grid and background options, interactive tools like ports, grouping, selection, undo/redo, and provides links to tutorials, demos, and extensibility mechanisms.

AntV X6DAGER Diagram
0 likes · 11 min read
Unlock Powerful Graph Editing with AntV X6: Features, APIs, and Demos
Fulu Network R&D Team
Fulu Network R&D Team
Nov 9, 2020 · Backend Development

Unified Authentication and Authorization Service – Technical Overview and Quick‑Start Guide

This article introduces the background, technical stack, core features, step‑by‑step deployment instructions, and future plans of a .NET Core and React based unified authentication and authorization system designed to replace disparate login mechanisms across multiple company applications.

.NET CoreAuthorizationIdentityServer4
0 likes · 7 min read
Unified Authentication and Authorization Service – Technical Overview and Quick‑Start Guide
Architects Research Society
Architects Research Society
Nov 5, 2020 · Frontend Development

Comparative Analysis of React, Angular, and Vue Frameworks

This article provides a detailed comparison of the three major frontend frameworks—React, Angular, and Vue—covering their design principles, strengths, weaknesses, performance benchmarks, popularity, learning curves, and suitability for different project requirements.

AngularLearning CurveReact
0 likes · 18 min read
Comparative Analysis of React, Angular, and Vue Frameworks
Architects Research Society
Architects Research Society
Nov 4, 2020 · Frontend Development

React as a State Management Library: Best Practices and Patterns

This article explains how React can serve as a complete state‑management solution by using hooks, lifting state, component composition, the Context API, and optional libraries, while also covering performance tips, server‑cached versus UI state, and when to adopt external tools.

Context APIReactState Management
0 likes · 15 min read
React as a State Management Library: Best Practices and Patterns
Architects Research Society
Architects Research Society
Nov 2, 2020 · Frontend Development

React vs Vue: A CTO’s Guide to Choosing the Right JavaScript Framework

This article provides CTOs and project managers with a comprehensive comparison of React and Vue, covering factors such as code quality, type checking, modularity, learning curve, developer friendliness, testing, server‑side rendering, performance, scalability, application size, and practical use‑case recommendations.

JavaScriptReactVue
0 likes · 23 min read
React vs Vue: A CTO’s Guide to Choosing the Right JavaScript Framework
58 Tech
58 Tech
Nov 2, 2020 · Frontend Development

Design and Implementation of a React Scaffolding and Packaging Script for Financial Front‑End Projects

The article describes how a financial front‑end team identified manual project‑copying pain points, designed two automation tools—a project‑creation scaffolding and a generic packaging script—and details their architecture, implementation, and the resulting improvements in development efficiency and consistency across more than 260 projects.

Financial TechReactbuild-scripts
0 likes · 10 min read
Design and Implementation of a React Scaffolding and Packaging Script for Financial Front‑End Projects
Amap Tech
Amap Tech
Oct 30, 2020 · Frontend Development

Frontend Performance Optimization: Common Issues and Solutions for Large‑Scale Projects

Large‑scale front‑end projects suffer from oversized bundles, unnecessary listeners, deep cloning, and mutable state, causing latency and crashes; the article explains how to diagnose these problems with Chrome DevTools and Webpack tools and resolves them through bundle splitting, tree‑shaking, memoisation, immutable patterns, and caching.

ReactTree Shakingmutable-data
0 likes · 12 min read
Frontend Performance Optimization: Common Issues and Solutions for Large‑Scale Projects
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Oct 30, 2020 · Frontend Development

Building a Declarative, Component‑Based Tracking System with Buffer Queues in React

This article analyzes the challenges of front‑end event tracking, compares existing manual, visual, and full‑tracking solutions, and presents a declarative component architecture with a buffered queue that decouples tracking logic from business code while handling click and exposure events efficiently in React.

Buffer QueueComponentIntersectionObserver
0 likes · 12 min read
Building a Declarative, Component‑Based Tracking System with Buffer Queues in React
Fulu Network R&D Team
Fulu Network R&D Team
Oct 22, 2020 · Frontend Development

Frontend Technology Stack and Project Structure Guide for React‑Based Merchant Applications

This article introduces the essential frontend technology stack—including React, Webpack, Ant Design, DVA, ES6, and Axios—explains the typical project directory layout, walks through source code organization, and provides practical steps and tips for building merchant‑side applications with a React‑DVA architecture.

Ant DesignDVAReact
0 likes · 15 min read
Frontend Technology Stack and Project Structure Guide for React‑Based Merchant Applications
58 Tech
58 Tech
Sep 25, 2020 · Frontend Development

Micro‑Frontend Architecture and Implementation with Qiankun for the Huasheng Data Management Platform

This article presents a comprehensive micro‑frontend solution using Qiankun to migrate legacy jQuery/JSP modules, decouple a monolithic front‑end, enable independent development, deployment and scaling, and details the architecture, lifecycle, integration steps for React, UMI, Vue, Angular sub‑applications, as well as deployment, monitoring and permission strategies.

DeploymentFrontend ArchitectureReact
0 likes · 9 min read
Micro‑Frontend Architecture and Implementation with Qiankun for the Huasheng Data Management Platform
政采云技术
政采云技术
Sep 20, 2020 · Frontend Development

Understanding XSS Attacks in React

This article explains what XSS attacks are, categorizes their types, and demonstrates how React’s automatic escaping, JSX compilation, and internal element validation work together to mitigate XSS vulnerabilities while highlighting common unsafe patterns and server‑side defenses.

ReactXSSfrontend security
0 likes · 15 min read
Understanding XSS Attacks in React
Taobao Frontend Technology
Taobao Frontend Technology
Sep 15, 2020 · Frontend Development

Mastering H5 + Mini‑Program Development: Static Compile vs Dynamic Parse

This article explores the challenges of building H5 and mini‑program applications across multiple platforms, compares static compilation approaches like Chameleon, MPVue, Taro and Rax with dynamic parsing solutions such as Remax and Frad, and discusses performance trade‑offs, lifecycle integration, and future directions for view‑layer DSLs.

Reactcross‑platformdynamic parsing
0 likes · 15 min read
Mastering H5 + Mini‑Program Development: Static Compile vs Dynamic Parse
Aotu Lab
Aotu Lab
Sep 10, 2020 · Frontend Development

Beyond React vs Vue: Exploring Frontend Fundamentals, Security, and Design

This article offers a comprehensive look at modern frontend development, from unbiased React‑Vue comparisons and Lodash security insights to icon workflow evolution, smooth corner techniques in Figma, SOLID principles, code‑effort metrics, AI recommendation system reading, project management tips, and the role of design tokens.

DesignReactVue
0 likes · 7 min read
Beyond React vs Vue: Exploring Frontend Fundamentals, Security, and Design
JD Retail Technology
JD Retail Technology
Sep 3, 2020 · Frontend Development

Step‑by‑Step Guide to Building and Publishing a React Component Library with CRA, Docz, and Netlify

This article provides a comprehensive, step‑by‑step tutorial on creating, documenting, and publishing a React component library using create‑react‑app, TypeScript, docz, npm linking, and Netlify, covering configuration, build scripts, on‑demand loading, and deployment best practices.

Component LibraryDoczNetlify
0 likes · 21 min read
Step‑by‑Step Guide to Building and Publishing a React Component Library with CRA, Docz, and Netlify