BestHub
Sign in
Tagged articles

ReAct

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

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

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

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

FrontendHooksReAct
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 RecaptchaInternationalizationMaterial-UI
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 handlingFrontendReAct
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.

OptimizationReActmodule-splitting
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.

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

BabelMulti‑Platform DevelopmentReAct
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.

Frontend TrendsReActServerless
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.

FrontendReActRendering
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 RendererFront-endReAct
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.

PerformanceReActScheduler
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 APIReActRouting
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 ComponentHooks
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.

AngularFrontendLearning Curve
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 APIFrontendHooks
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.

FrontendJavaScriptReAct
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 TechReActScaffolding
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.

OptimizationPerformanceReAct
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 QueueComponentFrontend
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 DesignDVAFrontend
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.

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

ReActVuedesign
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
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Aug 20, 2020 · Frontend Development

JSON-Based Form Solution for Complex B-end Scenarios in NetEase Cloud Music

NetEase Cloud Music’s frontend team created a JSON‑based form framework that extends Ant Design, offering async validation with error and warning states, reverse‑listener field linking, four exclusive form modes, flexible option loading, and performance‑optimized core‑render separation for complex B‑end applications.

Ant DesignB-end ApplicationForm Linkage
0 likes · 12 min read
JSON-Based Form Solution for Complex B-end Scenarios in NetEase Cloud Music
JD Tech Talk
JD Tech Talk
Aug 19, 2020 · Frontend Development

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

This article provides a comprehensive, hands‑on tutorial for quickly creating a React component library using create‑react‑app, configuring TypeScript, ESLint, node‑sass, docz documentation, npm publishing, tree‑shaking, on‑demand loading, and deploying the generated docs to Netlify.

Component LibraryDoczNetlify
0 likes · 20 min read
Step‑by‑Step Guide to Building and Publishing a React Component Library with Create‑React‑App, Docz, and Netlify
Aotu Lab
Aotu Lab
Aug 12, 2020 · Frontend Development

2020 Front‑End Innovations: Chrome DevTools, Event Loop, React Hooks, WebGL

This article surveys recent front‑end breakthroughs, covering Chrome DevTools 2020 updates, the browser event‑loop model, Node.js memory‑leak detection, a 90‑line implementation of a React useState Hook, OffscreenCanvas‑driven WebGL rendering, the PolyK polygon library, the Nerv React‑like framework, and using Hooks in mini‑programs.

ReActnodejs
0 likes · 7 min read
2020 Front‑End Innovations: Chrome DevTools, Event Loop, React Hooks, WebGL
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Aug 11, 2020 · Frontend Development

Understanding React Fiber Architecture: Reconciliation, Scheduling, and Commit Phases

React Fiber replaces the old Stack Reconciler with a linked‑list of Fiber nodes that enable incremental, pause‑and‑resume rendering, priority scheduling, and a three‑step commit phase, allowing smoother asynchronous updates, better performance, and the foundation for Concurrent Mode and Suspense.

Concurrent ModeHooksJavaScript
0 likes · 23 min read
Understanding React Fiber Architecture: Reconciliation, Scheduling, and Commit Phases
Fulu Network R&D Team
Fulu Network R&D Team
Aug 10, 2020 · Frontend Development

Understanding the Execution Timing of useEffect and useLayoutEffect in React

This article explains the differences in execution timing between React's useEffect and useLayoutEffect hooks, analyzes their underlying mechanisms, demonstrates practical demos with performance monitoring, and delves into React's rendering process, scheduler, and related browser rendering concepts.

ReActbrowser renderinguseEffect
0 likes · 12 min read
Understanding the Execution Timing of useEffect and useLayoutEffect in React
政采云技术
政采云技术
Aug 9, 2020 · Frontend Development

Optimizing Logical Conditions for High‑Quality Maintainable Front‑End Code

This article explains how to improve the readability, extensibility, and maintainability of front‑end JavaScript and React JSX code by reducing nested if‑else statements, using switch cases, leveraging object maps, array helpers, default parameters, destructuring, and the strategy pattern, while providing concrete code examples.

Conditional LogicReActcode optimization
0 likes · 14 min read
Optimizing Logical Conditions for High‑Quality Maintainable Front‑End Code
Ctrip Technology
Ctrip Technology
Aug 6, 2020 · Frontend Development

Building and Maintaining a Sustainable Frontend Component Library with React

This article details the end‑to‑end process of designing, publishing, packaging, optimizing, and continuously delivering a reusable React component library at Ctrip, covering npm workflow, build tooling choices, CSS extraction, on‑demand loading, package splitting, collaborative documentation, CI/CD, and automated testing.

CI/CDComponent LibraryReAct
0 likes · 14 min read
Building and Maintaining a Sustainable Frontend Component Library with React
360 Tech Engineering
360 Tech Engineering
Aug 3, 2020 · Frontend Development

Implementing React useState Hook from Scratch: Detailed Explanation and Code

This article explains how to recreate the React useState hook by following the React source execution flow, describing the update mechanism, circular linked‑list queue, fiber storage, scheduling simulation, and differences from the official implementation, all illustrated with complete JavaScript code examples.

HooksReActState Management
0 likes · 10 min read
Implementing React useState Hook from Scratch: Detailed Explanation and Code
Taobao Frontend Technology
Taobao Frontend Technology
Jul 15, 2020 · Frontend Development

How to Build a Fully Customizable IDE Layout System with React Components

This article explains how KAITIAN redesigns its IDE layout system using React, introducing a three‑layer abstraction of LayoutComponent, LayoutConfig, and SlotRenderer, and details core components such as BoxPanel, SplitPanel, Accordion, TabBar, and TabPanel that enable fully customizable and extensible IDE interfaces.

Frontend ArchitectureIDE layoutReAct
0 likes · 14 min read
How to Build a Fully Customizable IDE Layout System with React Components
58 Tech
58 Tech
Jul 6, 2020 · Frontend Development

Design and Implementation of Front‑End Error Monitoring for a Real‑Estate Web Platform

This article presents a practical case study of front‑end error monitoring for a real‑estate broker web site, detailing the background problem, pain points, analysis, design adjustments, code implementations, data collection, reporting strategies, and the resulting improvements in issue‑resolution efficiency.

FrontendJavaScriptLogging
0 likes · 18 min read
Design and Implementation of Front‑End Error Monitoring for a Real‑Estate Web Platform
JD Retail Technology
JD Retail Technology
Jun 3, 2020 · Frontend Development

Design and Implementation of a Frontend Configuration Engine for Component‑Based Page Development

This article explains how a frontend configuration engine can be designed to boost page development efficiency by using component‑based architecture, detailing attribute definitions, data requests, hierarchical relationships, and cross‑component interactions, and illustrates the approach with JSON schemas and React code examples.

Component ArchitectureFrontendJSON schema
0 likes · 16 min read
Design and Implementation of a Frontend Configuration Engine for Component‑Based Page Development
Huawei Cloud Developer Alliance
Huawei Cloud Developer Alliance
May 28, 2020 · Frontend Development

Unlocking the Secrets of Top Front‑End Frameworks: React, Angular, and Vue Explained

This article provides a comprehensive overview of the three leading front‑end technologies—React, Angular, and Vue—detailing their core concepts, component models, rendering mechanisms, key features, and typical command‑line workflows to help developers choose the most suitable framework for their projects.

AngularFrontendJavaScript
0 likes · 21 min read
Unlocking the Secrets of Top Front‑End Frameworks: React, Angular, and Vue Explained
Node Underground
Node Underground
May 20, 2020 · Frontend Development

Build a Serverless React App with Midway FaaS: Step‑by‑Step Guide

This tutorial walks you through creating a React front‑end integrated with Midway FaaS, covering installation, project scaffolding, local development, and cloud deployment, while highlighting the benefits of a unified front‑end and serverless architecture.

Midway FaaSReActServerless
0 likes · 6 min read
Build a Serverless React App with Midway FaaS: Step‑by‑Step Guide
Qborfy AI
Qborfy AI
May 12, 2020 · Frontend Development

Demystifying JavaScript Continuations and the Latest Front‑End Trends

This weekly tech roundup explains the continuation concept in JavaScript, shows how CallCC underpins React hooks, highlights 2020 front‑end trends like low‑code, serverless and AI‑driven UI generation, and reports on recent Flutter web developments and a controversial COVID‑related news story.

ContinuationFlutterFrontend
0 likes · 6 min read
Demystifying JavaScript Continuations and the Latest Front‑End Trends
Ctrip Technology
Ctrip Technology
Apr 30, 2020 · Frontend Development

Multi-Platform Frontend Architecture and Code Reuse Practices at Ctrip Play Team

This article describes how Ctrip's Play team tackled fragmented front‑end stacks, unified product requirements across PC, H5, Hybrid and React Native, and implemented a component‑driven, multi‑repo architecture that enables single‑source code to be built, tested, and released for multiple platforms simultaneously.

Code ReuseComponent ArchitectureFrontend
0 likes · 11 min read
Multi-Platform Frontend Architecture and Code Reuse Practices at Ctrip Play Team
Alibaba Terminal Technology
Alibaba Terminal Technology
Apr 24, 2020 · Frontend Development

How icestark Solves Large‑Scale Frontend Challenges with a Micro‑Frontend Architecture

This article explains how the ICE team created the AppLoader solution for Alibaba's Creator Platform, evolved it into the open‑source icestark framework, and details its architecture, loading strategies, sandbox isolation, and real‑world business value for large, multi‑team front‑end systems.

Frontend ArchitectureReActSandbox
0 likes · 15 min read
How icestark Solves Large‑Scale Frontend Challenges with a Micro‑Frontend Architecture
360 Tech Engineering
360 Tech Engineering
Apr 20, 2020 · Frontend Development

A 33‑Line JavaScript Implementation of a Minimal React‑like Library

London Python engineer Oliver Russell created a 33‑line JavaScript library that mimics React by generating a virtual DOM, diffing it against the previous version, and efficiently updating the real DOM, with examples including a ToDo app, tic‑tac‑toe, calendar picker and snake game.

MithrilReActVirtual DOM
0 likes · 6 min read
A 33‑Line JavaScript Implementation of a Minimal React‑like Library
DevOps Coach
DevOps Coach
Apr 11, 2020 · Backend Development

How to Quickly Set Up Elastic App Search with Vagrant and Deploy a Custom Search UI

Learn step‑by‑step how to provision an Elasticsearch server with Vagrant, install Elastic App Search, configure credentials, index a large video‑games dataset via API, customize schema, create synonyms and boosts, and deploy a React‑based search UI to Nginx, all with detailed commands and code snippets.

App SearchElasticsearchReAct
0 likes · 12 min read
How to Quickly Set Up Elastic App Search with Vagrant and Deploy a Custom Search UI
Youzan Coder
Youzan Coder
Apr 10, 2020 · Frontend Development

How to Build Complex Dynamic Forms with Zan-Form’s Configurable Approach

This article explains how zan-form, a configuration‑based plugin for the zent UI library, simplifies creating and maintaining complex dynamic forms in React by using JSON definitions, conditional visibility, remote data fetching, custom components, slots, and formatting hooks.

FormFrontendReAct
0 likes · 10 min read
How to Build Complex Dynamic Forms with Zan-Form’s Configurable Approach
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Mar 29, 2020 · Frontend Development

How to Master Custom Charts with Recharts: Tips, Tricks, and Pitfalls

This tutorial walks through using Recharts in a React project to build highly customizable pie and bar charts, covering background requirements, library selection criteria, core Recharts features, step‑by‑step implementations of ring‑shaped pies with hover effects, gradient bars with rounded tops, SVG path tricks, and final reflections on abstraction and component choices.

CustomChartsDataVisualizationReAct
0 likes · 18 min read
How to Master Custom Charts with Recharts: Tips, Tricks, and Pitfalls
Architecture Digest
Architecture Digest
Mar 19, 2020 · Frontend Development

Design and Implementation of Permission Control in Frontend‑Backend Separation Architecture

This article explains how permission control is re‑designed for front‑end/back‑end separated applications, defining resources and permissions, outlining the distinct responsibilities of front‑end routing and component rendering versus back‑end API validation, and providing practical implementation examples in React and Java.

Access ControlBackend DevelopmentJava
0 likes · 7 min read
Design and Implementation of Permission Control in Frontend‑Backend Separation Architecture
AntTech
AntTech
Mar 11, 2020 · Frontend Development

Ant Design 4.0 Release: Major Updates, Ecosystem Overview, Technical Challenges, and Community Contributions

The interview with Ant Design core author Jiang Jilin details the major 4.0 updates such as dark theme, borderless components, RTL support, performance‑focused component rewrites, the expanding ecosystem, design‑development workflow, TypeScript integration, community contributions, and future roadmap for the popular React UI library.

Ant DesignReActTypeScript
0 likes · 10 min read
Ant Design 4.0 Release: Major Updates, Ecosystem Overview, Technical Challenges, and Community Contributions
Alibaba Terminal Technology
Alibaba Terminal Technology
Mar 5, 2020 · Frontend Development

How Formily Unifies Form Schemas, Rendering, and Components for High‑Performance Frontend Development

Formily offers a comprehensive, standards‑based solution that combines a JSON‑Schema protocol, visual tooling, a rendering engine, and a component layer to enable dynamic, high‑performance forms across Alibaba's front‑end ecosystem, while providing extensibility for custom UI and complex interactions.

Form SchemaFormilyReAct
0 likes · 15 min read
How Formily Unifies Form Schemas, Rendering, and Components for High‑Performance Frontend Development
Meituan Technology Team
Meituan Technology Team
Feb 27, 2020 · Frontend Development

Micro‑Frontend Implementation in Meituan Waimai Advertising Platform

Meituan Waimai’s advertising team tackled duplicated business logic and slow builds across PC, H5, and KA by merging code into a monorepo and adopting a React‑based central‑router micro‑frontend architecture, where a host app dynamically loads sub‑apps with independent routing, stores, CSS, and hot‑module replacement, achieving modularization, faster builds, and isolated deployment.

DeploymentFrontend ArchitectureReAct
0 likes · 24 min read
Micro‑Frontend Implementation in Meituan Waimai Advertising Platform
政采云技术
政采云技术
Jan 19, 2020 · Frontend Development

Analysis of Antd Form Implementation Mechanism

This article analyzes the Antd Form component's implementation, explaining how it collects, validates, and updates form data through rc-form's FieldsStore, and discusses advanced patterns like nested fields, custom component integration, and form linkage.

Data ManagementFormReAct
0 likes · 18 min read
Analysis of Antd Form Implementation Mechanism
WecTeam
WecTeam
Jan 17, 2020 · Frontend Development

Weekly Frontend Highlights: Visual Builder, Image Filters, Vue vs React, ES2020

This week’s Front‑End roundup covers a visual page‑builder design, Canvas‑based image filters, a Vue vs React comparison, a 2019 technology review, Airbnb’s large‑scale GraphQL migration, and the latest ES2020 JavaScript features, each with concise insights and illustrative images.

ES2020FrontendGraphQL
0 likes · 4 min read
Weekly Frontend Highlights: Visual Builder, Image Filters, Vue vs React, ES2020
Ctrip Technology
Ctrip Technology
Jan 16, 2020 · Frontend Development

Comprehensive Guide to Unit Testing in React and React Native Projects

This article presents a complete tutorial on setting up and using Jest, Enzyme, and react‑hooks‑testing‑library for unit testing React and React Native applications, covering environment configuration, simple function tests, lifecycle hooks, mocking, snapshot testing, asynchronous tests, Redux and Hook testing, as well as coverage reporting and CI integration.

EnzymeFrontendJest
0 likes · 13 min read
Comprehensive Guide to Unit Testing in React and React Native Projects
Tencent Cloud Developer
Tencent Cloud Developer
Jan 7, 2020 · Mobile Development

Hippy Cross-Platform Framework: Common Debugging Methods and Troubleshooting Cases

The article introduces Tencent’s open‑source Hippy cross‑platform framework, outlines its developer‑friendly features and W3C compliance, and details common debugging techniques—including Chrome DevTools‑based services, jsbundle debugging, and memory monitoring—while presenting practical troubleshooting cases for UI updates, scrolling, performance, and iOS‑specific issues.

AndroidCross‑PlatformHippy
0 likes · 12 min read
Hippy Cross-Platform Framework: Common Debugging Methods and Troubleshooting Cases
360 Tech Engineering
360 Tech Engineering
Dec 30, 2019 · Frontend Development

Designing Reusable React Components for Content Lists with Integrated Advertisements

This article explains how to abstract and reuse React component logic for inserting advertisements into content lists by comparing several design patterns—including composition, inheritance, container‑presentational, render props, and higher‑order components—and then demonstrates a modern solution using React Hooks to simplify data fetching and event tracking.

Ad IntegrationHooksReAct
0 likes · 15 min read
Designing Reusable React Components for Content Lists with Integrated Advertisements
Python Programming Learning Circle
Python Programming Learning Circle
Dec 24, 2019 · Frontend Development

What Shaped Frontend Development in 2019? A Comprehensive Recap

The 2019 frontend landscape saw React retain dominance, TypeScript surge, WebAssembly become a fourth web language, Vue prepare for version 3, Angular introduce Ivy, static sites and JAMstack rise, PWA adoption grow, and a wave of new tools, standards, and predictions for 2020, reflecting rapid evolution across frameworks, languages, and tooling.

AngularJavaScriptReAct
0 likes · 22 min read
What Shaped Frontend Development in 2019? A Comprehensive Recap
Tencent Cloud Developer
Tencent Cloud Developer
Dec 23, 2019 · Frontend Development

How Tencent’s Hippy Makes Cross‑Platform Front‑End Development Simpler

Tencent’s open‑source Hippy framework, now used by 18 internal services with over a hundred million daily page views, offers a front‑end‑friendly, W3C‑compliant cross‑platform solution that supports React and Vue, reduces learning barriers, and improves performance through a C++‑based engine‑direct architecture.

Cross‑PlatformFrontendHippy
0 likes · 5 min read
How Tencent’s Hippy Makes Cross‑Platform Front‑End Development Simpler
21CTO
21CTO
Dec 15, 2019 · Backend Development

How One Engineer Built a Full‑Featured Podcast Search Engine Solo

This article details how a single engineer created Listen Notes, a podcast search engine and API, by leveraging standard web technologies, AWS infrastructure, Django backend, React frontend, Ansible-driven DevOps, and a suite of monitoring and productivity tools, proving that a solo effort can launch a robust internet product.

AWSAnsibleDjango
0 likes · 13 min read
How One Engineer Built a Full‑Featured Podcast Search Engine Solo
政采云技术
政采云技术
Dec 15, 2019 · Frontend Development

How to Write CSS Elegantly in React

This article examines the problem of global CSS scope pollution in React components and presents three practical solutions—namespaces, CSS‑in‑JS, and CSS Modules—detailing their implementation, advantages, and trade‑offs, with code examples and guidance on when to use each approach.

CSS ModulesCSS-in-JSNamespaces
0 likes · 11 min read
How to Write CSS Elegantly in React
QQ Music Frontend Team
QQ Music Frontend Team
Dec 15, 2019 · Frontend Development

Inside React’s useEffect: A Deep Dive into the Fiber Source Code

This article dissects the inner workings of React's useEffect hook by tracing its implementation through the React Fiber architecture, from mountEffect and updateEffect functions to the commit phase, revealing how side‑effects are scheduled, created, and cleaned up in modern React applications.

JavaScriptReActfiber
0 likes · 18 min read
Inside React’s useEffect: A Deep Dive into the Fiber Source Code
政采云技术
政采云技术
Nov 27, 2019 · Frontend Development

Improving React Performance: Reducing Unnecessary Renders

This article explains how React's virtual DOM and diff algorithm work, identifies situations where renders become costly, and presents practical techniques such as shouldComponentUpdate, PureComponent, higher‑order components, React.memo, and component splitting to reduce unnecessary renders and improve front‑end performance.

PerformanceReActReact.memo
0 likes · 13 min read
Improving React Performance: Reducing Unnecessary Renders
QQ Music Frontend Team
QQ Music Frontend Team
Nov 9, 2019 · Frontend Development

5 Ways to Reuse and Extend React Component State Logic

This article explains five approaches—Mixins, Class Inheritance, Higher‑Order Components, Render Props, and Hooks—for reusing and extending state logic in React components, comparing their advantages, drawbacks, and providing code examples to illustrate each method.

Higher-Order ComponentHooksReAct
0 likes · 11 min read
5 Ways to Reuse and Extend React Component State Logic
QQ Music Frontend Team
QQ Music Frontend Team
Oct 20, 2019 · Frontend Development

When Should You Use Class, Functional, or Pure Components in React?

This article explains the differences between React class components, functional (stateless) components, and PureComponent, shows their source code, discusses shallow equality checks, introduces the memo higher‑order component, and provides practical guidelines for choosing the right component type to improve performance.

Class ComponentFunctional ComponentPureComponent
0 likes · 10 min read
When Should You Use Class, Functional, or Pure Components in React?
Qunar Tech Salon
Qunar Tech Salon
Oct 9, 2019 · Frontend Development

Breaking the Framework Paradigm Debate

At a GitHub China meetup, the author reflects on Rich Harris’s critique of React, compares mutable versus immutable reactivity in Vue and React, examines functional programming foundations, and proposes a unified approach integrating mutable, immutable, and reactive patterns to transcend framework paradigm disputes.

ImmutableMutableReAct
0 likes · 9 min read
Breaking the Framework Paradigm Debate