BestHub
Sign in
Tagged articles

ReAct

1070 articles · Page 8 of 11
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 26, 2021 · Frontend Development

Understanding Update Granularity in Major Frontend Frameworks: Svelte, React, and Vue

This article explains the component‑based architecture of modern frontend frameworks, compares their three update granularities—node‑level, component‑level, and application‑level—and illustrates the differences with Svelte, React, and Vue, while also including a brief job‑seeking note from the author.

ComponentizationFrontendReAct
0 likes · 9 min read
Understanding Update Granularity in Major Frontend Frameworks: Svelte, React, and Vue
DeWu Technology
DeWu Technology
Sep 24, 2021 · Frontend Development

Canceling Duplicate HTTP Requests in Front-End Development

The article explains how front‑end developers can prevent duplicate or stale HTTP calls by identifying identical requests with a unique key, then canceling them using Axios’s CancelToken or Fetch’s AbortController—integrated via React hooks, Axios interceptors, and route‑change cleanup.

HTTPJavaScriptReAct
0 likes · 10 min read
Canceling Duplicate HTTP Requests in Front-End Development
ByteFE
ByteFE
Sep 22, 2021 · Frontend Development

How React’s Runtime Optimizations Evolved from 15 to 18 – A Deep Technical Dive

This article walks through the evolution of React’s runtime architecture from version 15 to 18, explaining key concepts such as Fiber, Scheduler, priority lanes, concurrent mode, and new APIs like startTransition and useDeferredValue, while providing concrete code examples and visual diagrams.

Concurrent ModeReActReact 18
0 likes · 36 min read
How React’s Runtime Optimizations Evolved from 15 to 18 – A Deep Technical Dive
政采云技术
政采云技术
Sep 15, 2021 · Frontend Development

Using React Profiler for Performance Analysis and Optimization

This article explains how to install and use the React Profiler tool to identify performance bottlenecks in React applications, demonstrates analysis of render phases with example code, and discusses optimization techniques such as React.memo, PureComponent, shouldComponentUpdate, and hooks to reduce unnecessary re‑renders.

HooksPerformanceReAct
0 likes · 12 min read
Using React Profiler for Performance Analysis and Optimization
ByteFE
ByteFE
Sep 15, 2021 · Frontend Development

Why DDD Is Needed and How to Apply Domain-Driven Design in Front‑End Projects

The article explains the need for Domain‑Driven Design (DDD) to manage growing complexity caused by frequent requirement changes, describes DDD fundamentals such as bounded contexts and event storming, and shows how to structure React front‑end code, actions, reducers, and routing by organizing features to reduce coupling and improve maintainability.

DDDDomain-Driven DesignEvent Storming
0 likes · 11 min read
Why DDD Is Needed and How to Apply Domain-Driven Design in Front‑End Projects
ELab Team
ELab Team
Sep 10, 2021 · Frontend Development

How Browser Rendering and React Fiber Work Together to Prevent Frame Drops

This article explains the fundamentals of browser rendering, frame lifecycle, and dropped‑frame issues, then demonstrates how React Fiber and the requestIdleCallback API can be used to split heavy tasks, improve concurrency, and keep UI interactions smooth.

ConcurrencyPerformanceReAct
0 likes · 22 min read
How Browser Rendering and React Fiber Work Together to Prevent Frame Drops
ByteFE
ByteFE
Sep 9, 2021 · Frontend Development

How to Build a Canvas‑Based Image Cropping Hook in React

This article explains how to create a reusable React hook that uses two canvas layers to let users select a region on an image, shows a gray‑out overlay with a border during selection, and returns the cropped area as a base64 PNG, including full implementation details and future enhancements.

CanvasFrontendHook
0 likes · 12 min read
How to Build a Canvas‑Based Image Cropping Hook in React
JD Retail Technology
JD Retail Technology
Sep 6, 2021 · Frontend Development

Flexible Template Solution for Tongtian Tower: Architecture and Implementation across CMS, H5, and Native Clients

The article introduces the flexible template solution for the Tongtian Tower marketing system, detailing its background, design principles, CMS architecture, flexible canvas implementation, H5 rendering strategy, native client SDK, technical choices, and the achieved efficiency gains across multiple business scenarios.

CMSFrontend ArchitectureH5
0 likes · 13 min read
Flexible Template Solution for Tongtian Tower: Architecture and Implementation across CMS, H5, and Native Clients
ByteDance Web Infra
ByteDance Web Infra
Sep 3, 2021 · Frontend Development

Understanding XState Finite State Machines and Statecharts for Frontend Development

This article explains the challenges of managing UI state in modern web applications, demonstrates how incremental code examples lead to complex and coupled logic, and introduces XState finite state machines and statecharts as a structured solution with practical JavaScript examples and ecosystem overview.

Finite State MachineFrontendJavaScript
0 likes · 9 min read
Understanding XState Finite State Machines and Statecharts for Frontend Development
Taobao Frontend Technology
Taobao Frontend Technology
Sep 2, 2021 · Frontend Development

Why Front-End Developers Must Master Functional Programming and React Hooks

This article explores the history and principles of functional programming, explains why it has become essential for front‑end developers, demonstrates how React class components can be replaced by functional components using hooks, and provides practical examples of pure functions, functors, monads, memoization, and related design patterns in JavaScript.

Functional ProgrammingJavaScriptReAct
0 likes · 21 min read
Why Front-End Developers Must Master Functional Programming and React Hooks
Alibaba Terminal Technology
Alibaba Terminal Technology
Sep 1, 2021 · Frontend Development

Why Front‑End Developers Must Master Functional Programming and React Hooks

This article explores the history and resurgence of functional programming, explains why it is essential for modern front‑end development, demonstrates class and function components in React, introduces hooks, functors, monads, partial application, memoization, and provides practical code examples for building robust, side‑effect‑free UI logic.

Functional ProgrammingJavaScriptMonad
0 likes · 19 min read
Why Front‑End Developers Must Master Functional Programming and React Hooks
ByteDance Terminal Technology
ByteDance Terminal Technology
Aug 31, 2021 · Frontend Development

ByteDance Modern Web Development Survey Report (2021)

The 2021 ByteDance Modern Web Development survey of 612 developers reveals dominant use of ES6+, TypeScript, Vue and React, widespread adoption of CSS preprocessors, varied backend preferences, and preferred tooling such as Webpack, VSCode, and Prettier, highlighting current trends and gaps in the Chinese front‑end ecosystem.

FrontendJavaScriptReAct
0 likes · 10 min read
ByteDance Modern Web Development Survey Report (2021)
21CTO
21CTO
Aug 28, 2021 · Frontend Development

Explore a Browser‑Based Windows 10 Clone Built with React – Features & Setup

This article introduces a React‑powered project that recreates a simplified Windows 10 desktop experience in the browser, detailing its multi‑user support, persistent file system using LocalStorage and IndexedDB, core features, missing components, setup instructions, and the open‑source libraries it relies on.

IndexedDBReActbrowser OS
0 likes · 5 min read
Explore a Browser‑Based Windows 10 Clone Built with React – Features & Setup
JD Tech
JD Tech
Aug 27, 2021 · Frontend Development

Practical Guide to Using Taro for Multi‑Platform Mini‑Program Development

This article introduces the Taro framework, explains why it simplifies multi‑platform mini‑program development, compares it with alternatives, details its design and compilation principles, provides code examples and project setup steps, and shares best practices for platform‑specific adaptations.

Code CompilationMulti‑Platform DevelopmentReAct
0 likes · 17 min read
Practical Guide to Using Taro for Multi‑Platform Mini‑Program Development
ByteFE
ByteFE
Aug 26, 2021 · Frontend Development

Why React Keys Matter: The Hidden Bug in Dynamic Forms

This article explains why React keys are crucial when rendering lists, demonstrating through a dynamic form example how using array indices as keys can cause bugs when items are added or deleted.

Dynamic FormsKEYSReAct
0 likes · 6 min read
Why React Keys Matter: The Hidden Bug in Dynamic Forms
php Courses
php Courses
Aug 26, 2021 · Frontend Development

Popular Tools for Documenting and Sharing React Components

This article introduces several widely used frontend tools—including Bit, Storybook, Styleguidist, CodeSandbox, StackBlitz, Docz, MDX‑docs, and React Docgen—that help developers document, visualize, share, and collaborate on reusable React components efficiently.

BitComponent DocumentationReAct
0 likes · 7 min read
Popular Tools for Documenting and Sharing React Components
ELab Team
ELab Team
Aug 25, 2021 · Frontend Development

Master VS Code Extension Development: Electron Core & Webview Communication

This guide walks you through the fundamentals of VS Code extension development, covering Electron’s core technologies, the architecture of main and renderer processes, command registration, creating Webview panels with React and Webpack, and implementing robust two‑way communication between the Webview and the extension’s Node side.

Extension DevelopmentNode.jsReAct
0 likes · 14 min read
Master VS Code Extension Development: Electron Core & Webview Communication
GrowingIO Tech Team
GrowingIO Tech Team
Aug 19, 2021 · Frontend Development

Choosing the Right React Testing Tool: Jest vs Enzyme vs RTL

This article compares React component testing approaches, explains the difference between unit testing and end‑to‑end testing, evaluates popular tools such as Jest, Enzyme, and React Testing Library, and provides practical code examples, snapshot testing tips, and integration with Storybook.

EnzymeJestReAct
0 likes · 12 min read
Choosing the Right React Testing Tool: Jest vs Enzyme vs RTL
KooFE Frontend Team
KooFE Frontend Team
Aug 19, 2021 · Frontend Development

How React 18 Changes Suspense Behavior: What Developers Need to Know

This article explains the key differences between Legacy Suspense and Concurrent Suspense in React 18, covering how sibling components are handled, ref timing outside Suspense boundaries, and the impact on rendering and effects, helping developers adapt their code for the new model.

Concurrent ReactFrontendJavaScript
0 likes · 8 min read
How React 18 Changes Suspense Behavior: What Developers Need to Know
KooFE Frontend Team
KooFE Frontend Team
Aug 16, 2021 · Frontend Development

How React 18’s startTransition Improves UI Responsiveness

React 18 introduces the startTransition API, letting developers label non‑urgent updates as transitions so urgent interactions stay fast, outdated renders are discarded, and UI remains responsive even during heavy rendering or slow network operations.

Concurrent RenderingReActfrontend development
0 likes · 9 min read
How React 18’s startTransition Improves UI Responsiveness
ByteFE
ByteFE
Aug 14, 2021 · Frontend Development

Interview with Dan Abramov on React Server Components, Vue Comparison, and Frontend Architecture

In this extensive interview, Dan Abramov discusses the purpose and advantages of React Server Components, compares React with Vue, explains type‑checking choices, addresses emerging frameworks, rendering strategies, React's role as a library versus a system, and shares advice on learning, maintaining, and staying passionate about React development.

FrontendNext.jsReAct
0 likes · 29 min read
Interview with Dan Abramov on React Server Components, Vue Comparison, and Frontend Architecture
ByteFE
ByteFE
Aug 12, 2021 · Frontend Development

How JavaScript’s Single Thread Handles Async and What startTransition Changes

Although JavaScript runs on a single thread, it can handle asynchronous operations through mechanisms like setTimeout, and React 18’s startTransition lets developers separate urgent UI updates from deferred work, improving responsiveness by scheduling non‑urgent tasks after urgent ones complete.

FrontendJavaScriptReAct
0 likes · 6 min read
How JavaScript’s Single Thread Handles Async and What startTransition Changes
KooFE Frontend Team
KooFE Frontend Team
Aug 11, 2021 · Frontend Development

How to Make React Effects Work Correctly in Strict Mode

This article explains how React's Strict Effects mode double‑invokes effects and layout effects during mount and unmount, and provides practical patterns using refs, cleanup functions, and focus management to ensure components behave correctly when effects run multiple times.

FocusReActRef
0 likes · 10 min read
How to Make React Effects Work Correctly in Strict Mode
KooFE Frontend Team
KooFE Frontend Team
Aug 9, 2021 · Frontend Development

Why React 18’s Strict Effects Matter and How to Use Them

React 18 extends StrictMode with Strict Effects, causing newly mounted components to run their effects twice in development to surface hidden bugs, while offering guidance on when to enable or disable this behavior for reliable UI state management.

FrontendReActReact 18
0 likes · 6 min read
Why React 18’s Strict Effects Matter and How to Use Them
Ctrip Technology
Ctrip Technology
Aug 5, 2021 · Frontend Development

Understanding React Server Components: Concepts, Usage, and Implementation

This article explains the motivation, component types, naming conventions, runtime mechanism, streaming protocol, design goals, and practical considerations of React Server Components, illustrating how they reduce client bundle size and enable progressive server‑side rendering with code examples.

Code SplittingPerformanceReAct
0 likes · 15 min read
Understanding React Server Components: Concepts, Usage, and Implementation
Taobao Frontend Technology
Taobao Frontend Technology
Aug 4, 2021 · Frontend Development

Mastering Next.js Rendering: SSR, SSG, ISR and Hybrid Strategies

This article explains Next.js’s three pre‑rendering modes—SSR, SSG, and ISR—detailing their advantages, limitations, and how they can be combined in hybrid rendering strategies, with practical code examples and deployment considerations for modern frontend development.

Hybrid RenderingISRNext.js
0 likes · 12 min read
Mastering Next.js Rendering: SSR, SSG, ISR and Hybrid Strategies
Taobao Frontend Technology
Taobao Frontend Technology
Aug 2, 2021 · Frontend Development

Latest JavaScript Ecosystem Updates: Yarn 3.0, VS Code Debugging, and New Open‑Source Tools

This roundup covers Yarn 3.0’s breaking changes and new features, VS Code’s built‑in DevTools debugging, a React recreation of Windows 11, a type‑safe Clipanion CLI library, a Node.js CLI best‑practice guide, Sandpack, Infima, Benny benchmark tool, plus articles on Next.js pre‑rendering, micro‑frontend routing hijack, and React Native’s architecture upgrade.

CLIFrontendNode.js
0 likes · 8 min read
Latest JavaScript Ecosystem Updates: Yarn 3.0, VS Code Debugging, and New Open‑Source Tools
ByteDance ADFE Team
ByteDance ADFE Team
Jul 30, 2021 · Backend Development

Building a Large File Chunked Upload Library in TypeScript (easy-file-uploader)

This article explains the technical details of large file chunked uploading, walks through designing a custom TypeScript library for both server and client sides, provides step‑by‑step implementation code, and demonstrates a complete Koa‑React demo, offering developers a ready‑to‑use solution for efficient large file transfers.

Chunked UploadKoaLarge File Upload
0 likes · 26 min read
Building a Large File Chunked Upload Library in TypeScript (easy-file-uploader)
21CTO
21CTO
Jul 29, 2021 · Frontend Development

Try Windows 11 in Your Browser: A Full‑Featured React Clone

This article introduces a React‑based recreation of Windows 11’s user interface, detailing its features, technology stack, and how developers can experience the new OS look without reinstalling, along with links to the source code and live demo.

FrontendReActUI clone
0 likes · 3 min read
Try Windows 11 in Your Browser: A Full‑Featured React Clone
ByteFE
ByteFE
Jul 29, 2021 · Frontend Development

Implementing a Large File Chunked Upload Library: A Full-Stack TypeScript Guide

This article provides a comprehensive guide to building a large file chunked upload library from scratch using TypeScript, detailing both server-side stream processing for memory efficiency and client-side MD5 calculation with retry mechanisms to ensure reliable and performant file transfers.

Chunked UploadMD5 verificationNode.js
0 likes · 22 min read
Implementing a Large File Chunked Upload Library: A Full-Stack TypeScript Guide
ELab Team
ELab Team
Jul 28, 2021 · Frontend Development

How Taro 3 Redefined Cross‑Platform Frontend Architecture

This article explains Taro 3's shift from a compile‑time heavy architecture to an interpretive runtime, detailing its JSX compilation drawbacks, the new runtime design that supports multiple frameworks, the implementation of a custom React reconciler, Web Components via Stencil, and how these changes improve cross‑platform development performance and flexibility.

FrontendJavaScriptReAct
0 likes · 27 min read
How Taro 3 Redefined Cross‑Platform Frontend Architecture
ByteDance ADFE Team
ByteDance ADFE Team
Jul 28, 2021 · Frontend Development

Why Use TypeScript? Benefits, Setup, and Type Definitions for React Development

This article explains the drawbacks of weakly‑typed JavaScript, outlines the advantages of adopting TypeScript, and provides practical guidance on configuring ESLint, Prettier, tsconfig, and React component typings—including hooks, event handling, and generic utilities—to improve code quality and developer productivity.

ESLintHooksPrettier
0 likes · 14 min read
Why Use TypeScript? Benefits, Setup, and Type Definitions for React Development
ByteDance Dali Intelligent Technology Team
ByteDance Dali Intelligent Technology Team
Jul 28, 2021 · Frontend Development

Advanced Techniques and Best Practices for Using styled-components in React

This article shares practical tips, patterns, and mental models for mastering styled-components in React, covering CSS variables, context styling, component encapsulation, inheritance, margin handling, z-index management, the "as" prop, priority tricks, and related tooling to write cleaner, more maintainable UI code.

Component StylingPerformanceReAct
0 likes · 19 min read
Advanced Techniques and Best Practices for Using styled-components in React
政采云技术
政采云技术
Jul 27, 2021 · Frontend Development

Essential React Router Knowledge and Tips

This article explains the core concepts, basic usage, nested routing, parameter handling, Switch behavior, browser and hash modes, underlying path‑to‑regexp dependency, and integration with Dva, providing practical code examples and best‑practice recommendations for React Router in modern single‑page applications.

ReActReact RouterRouting
0 likes · 18 min read
Essential React Router Knowledge and Tips
Airbnb Technology Team
Airbnb Technology Team
Jul 16, 2021 · Frontend Development

How Airbnb’s visx Turns React into a Powerful Visualization Engine

The article explains how Airbnb’s visx library, built on React and D3 primitives, addresses the need for a lightweight, highly expressive, and performant front‑end visualization solution by offering modular packages, TypeScript safety, and seamless integration with existing React codebases.

Data VisualizationFrontendReAct
0 likes · 11 min read
How Airbnb’s visx Turns React into a Powerful Visualization Engine
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 ModeHooksPerformance
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 BatchingHooksReAct
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 BatchingFrontendReAct
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.

JavaScriptReActcss
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 APIFrontendHooks
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.

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

Cross‑PlatformHummerMVVM
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 SystemFrontendJavaScript
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.

AnimationCanvasMatter.js
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.

Front-endJavaScriptReAct
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 HooksFrontendHigher-Order Component
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 FetchingFrontendHooks
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.

ReActSoftware engineeringactivity platform
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 HighlightingReAct
0 likes · 10 min read
Building a Markdown Editor with ByteMD
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.

Cross‑PlatformH5Performance
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.

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

Cross‑PlatformJD 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.

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

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

@LazyFrontendReAct
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.

FrontendHooksReAct
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 ModelEditorNotion
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 APIFunctional ProgrammingHooks
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.

CacheHocFrontendReAct
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 CleanlinessHooksReAct
0 likes · 11 min read
How to Write Clean, Maintainable React Components: Proven Tips
Alibaba Terminal Technology
Alibaba Terminal Technology
Mar 30, 2021 · Frontend Development

How to Build a Unified Cross‑Platform Frontend with Adaptive UI Layers

This article explains a joint cross‑platform approach that lets developers share a single codebase across PC browsers, mobile web, and app WebViews by exposing adaptable UI and logic layers, using custom adapters and build tools to generate platform‑specific bundles while preserving existing tech stacks.

Build ToolsCross‑PlatformJavaScript
0 likes · 15 min read
How to Build a Unified Cross‑Platform Frontend with Adaptive UI Layers