BestHub
Sign in
Tagged articles

ReAct

1070 articles · Page 10 of 11
iQIYI Technical Product Team
iQIYI Technical Product Team
Sep 27, 2019 · Frontend Development

Understanding the React Node Desktop (RND) Architecture and React Fiber Implementation

The article explains how React Node Desktop (RND) combines React JS, Node.js, and a native UI engine to enable lightweight, cross‑platform desktop apps, then details React Fiber’s architecture—its tagging, workloop, update and commit phases—and describes RND’s JS‑native messaging, bundle splitting, animation support, and future relevance for JavaScript‑driven desktop UI.

Desktop DevelopmentJavaScriptRND
0 likes · 11 min read
Understanding the React Node Desktop (RND) Architecture and React Fiber Implementation
Architects Research Society
Architects Research Society
Sep 20, 2019 · Frontend Development

Angular vs React vs Vue: A Comparative Guide to Choosing the Right Front‑End Framework or Library

This article compares the three most popular front‑end technologies—Angular, React, and Vue—examining their nature as libraries or frameworks, lifecycle, community support, flexibility, performance, and ideal use cases to help developers decide which solution best fits their project requirements.

AngularReActVue
0 likes · 7 min read
Angular vs React vs Vue: A Comparative Guide to Choosing the Right Front‑End Framework or Library
21CTO
21CTO
Sep 15, 2019 · Frontend Development

Angular vs React vs Vue: Which Frontend Framework Fits Your Project in 2019?

This article compares Angular, React, and Vue, examining their core philosophies, required patterns, functional programming implications, and practical suitability for business applications, helping developers choose the most appropriate front‑end framework for their projects.

AngularComparisonReAct
0 likes · 7 min read
Angular vs React vs Vue: Which Frontend Framework Fits Your Project in 2019?
Qunar Tech Salon
Qunar Tech Salon
Sep 3, 2019 · Frontend Development

Nanachi Multi‑End Mini‑Program Translation Framework: Architecture, Advantages, and Technical Details

Nanachi is Qunar's multi‑end mini‑program translation framework that lets developers write React‑based code once and run it on various mini‑program platforms and H5, offering streamlined installation, unified APIs, component libraries, scoped styling, and comprehensive runtime and build‑time solutions to boost development efficiency.

FrontendH5Mini Program
0 likes · 8 min read
Nanachi Multi‑End Mini‑Program Translation Framework: Architecture, Advantages, and Technical Details
MaoDou Frontend Team
MaoDou Frontend Team
Aug 27, 2019 · Frontend Development

Why Choose Rollup? A Practical Guide to Bundling JavaScript Libraries

This article introduces Rollup as a modern JavaScript bundler, explains its advantages over CommonJS and Webpack, demonstrates quick-start commands for browsers, Node.js, and UMD formats, covers tree‑shaking with ES modules, and provides a complete TypeScript‑React library setup with configuration and publishing steps.

ES ModulesJavaScript bundlerReAct
0 likes · 11 min read
Why Choose Rollup? A Practical Guide to Bundling JavaScript Libraries
Java Captain
Java Captain
Aug 17, 2019 · Frontend Development

Designing Permission Control in a Front‑End/Back‑End Separated Architecture

This article explains how permission control is re‑thought for front‑end/back‑end separated systems, defining resources and permissions, outlining the distinct responsibilities of the front‑end and back‑end, and providing concrete implementation examples with component‑level checks and server‑side interceptors.

ComponentJavaPermission control
0 likes · 6 min read
Designing Permission Control in a Front‑End/Back‑End Separated Architecture
Beike Product & Technology
Beike Product & Technology
Jul 26, 2019 · Frontend Development

Building a CLI Scaffolding Tool for React and Vue Projects

This article walks through the design and implementation of a Node‑based command‑line tool that generates React or Vue project scaffolds, covering initialization, script development, template downloading, local testing, npm publishing, and usage instructions.

CLINode.jsReAct
0 likes · 10 min read
Building a CLI Scaffolding Tool for React and Vue Projects
Ctrip Technology
Ctrip Technology
Jul 18, 2019 · Frontend Development

React Hooks: From Mixins and HOCs to Custom Hook Implementations and Production Practices

This article explains the evolution of React component reuse—from legacy mixins and higher‑order components to modern React Hooks—provides step‑by‑step implementations of custom hooks such as useLogTime, useFetchHook, useInterval and useImgLazy, and demonstrates how to apply them in real‑world production code for better performance and maintainability.

CustomHookFrontendHOC
0 likes · 22 min read
React Hooks: From Mixins and HOCs to Custom Hook Implementations and Production Practices
GF Securities FinTech
GF Securities FinTech
May 28, 2019 · Frontend Development

Mastering Redux: Designing Scalable State Structures for React Apps

This article explains why Redux is useful for large React applications, categorizes typical state types, and presents practical patterns—including UI‑driven structures, direct API mapping, and normalized entities—along with code samples and loading‑state management techniques to build maintainable front‑end codebases.

ReActReduxState Management
0 likes · 13 min read
Mastering Redux: Designing Scalable State Structures for React Apps
MaoDou Frontend Team
MaoDou Frontend Team
May 20, 2019 · Frontend Development

Mastering React Hooks: Practical Guide, Patterns, and Performance Tips

This article explains React Hooks introduced in version 16.8, their backward‑compatible design, how they replace class components, and provides detailed guidance on using useState, useEffect, custom hooks, useReducer, useRef, useMemo, useCallback, and related linting rules with performance‑focused examples.

HooksJavaScriptReAct
0 likes · 16 min read
Mastering React Hooks: Practical Guide, Patterns, and Performance Tips
Tencent Cloud Developer
Tencent Cloud Developer
Mar 26, 2019 · Mobile Development

Building a WeChat Mini Program with Taro and Cloud Development: A Japanese Sentence Helper Case Study

The article explains how to create a WeChat Mini Program backend with Tencent Cloud development, use the React‑based Taro framework to build a Japanese sentence helper, consolidate multiple cloud functions via tcb-router, and scrape example sentences with superagent and cheerio, highlighting setup tips and known limitations.

ReActSuperagentTaRO
0 likes · 7 min read
Building a WeChat Mini Program with Taro and Cloud Development: A Japanese Sentence Helper Case Study
Xianyu Technology
Xianyu Technology
Mar 20, 2019 · Frontend Development

Vue to React Component Conversion Using Babel AST

The article describes a pipeline that converts a Vue component into a React component by parsing the template, script and style with vue‑template‑compiler and Babel, traversing the AST to map Vue data, props, computed, methods and lifecycle hooks to React state, defaultProps and lifecycle methods, and generating JSX from directives such as v‑if, v‑for and event bindings, thereby reducing rewrite effort and supporting targets.

ASTBabelComponent Conversion
0 likes · 12 min read
Vue to React Component Conversion Using Babel AST
Alibaba Cloud Developer
Alibaba Cloud Developer
Mar 13, 2019 · Frontend Development

How Serverless Could Revolutionize Front‑End Development

This article reviews the evolution of front‑end technologies—from Ajax and Node.js to React—explains the serverless concept, and argues that serverless will trigger the next major shift in front‑end engineering by reshaping deployment, scaling, and the role of web developers.

Cloud ComputingFrontendReAct
0 likes · 15 min read
How Serverless Could Revolutionize Front‑End Development
Youzan Coder
Youzan Coder
Feb 27, 2019 · Frontend Development

How to Build a Cross‑Platform Shop Builder with React, Vue, and Iframe Communication

This article presents a technical design for a multi‑platform shop‑decoration system that shares data via React context, reuses Vue‑based preview components through an iframe, synchronizes updates with a postMessage wrapper, and implements drag‑and‑drop using vuedraggable, providing a scalable solution for PC, H5, and mini‑programs.

Drag-and-DropPostMessageReAct
0 likes · 12 min read
How to Build a Cross‑Platform Shop Builder with React, Vue, and Iframe Communication
UC Tech Team
UC Tech Team
Feb 18, 2019 · Frontend Development

React Hooks – Introduction, Usage, Tooling, and Changelog

This article introduces React Hooks, explains how they enable state and other React features without classes, provides official resources, outlines migration advice, details supported packages, tooling integrations, testing APIs, installation methods, and summarizes the changelog and post‑alpha updates for the stable 16.8 release.

ESLintFrontendHooks
0 likes · 12 min read
React Hooks – Introduction, Usage, Tooling, and Changelog
JD Tech
JD Tech
Jan 18, 2019 · Big Data

Technical Overview of JD's New Business Intelligence Platform: Offline OLAP, Real‑time Data, and Visualization Solutions

The article details JD's 2018 upgrade of its Business Intelligence platform, describing how unified offline OLAP with ClickHouse, Spark, and Scala, timeliness optimizations, and a React‑based visualization component library together improve data consistency, performance, and user experience for merchants.

ClickHouseData VisualizationOLAP
0 likes · 7 min read
Technical Overview of JD's New Business Intelligence Platform: Offline OLAP, Real‑time Data, and Visualization Solutions
Sohu Tech Products
Sohu Tech Products
Jan 16, 2019 · Frontend Development

Analysis of React, Angular, and Vue Trends in 2018: Search Popularity, Package Downloads, and Job Market

This article analyzes the 2018 trends of the three dominant frontend frameworks—React, Angular, and Vue—by examining Google search popularity, package download statistics, and job market data, while also discussing related technologies and broader tech movements such as AI, AR/VR, quantum computing, and blockchain.

AngularJob marketPackage Downloads
0 likes · 9 min read
Analysis of React, Angular, and Vue Trends in 2018: Search Popularity, Package Downloads, and Job Market
Yuewen Frontend Team
Yuewen Frontend Team
Dec 27, 2018 · Frontend Development

Web Internationalization: Practical i18n Solutions for Modern Frontends

Webnovel’s overseas project recently added Indonesian, Malay, and Filipino support, prompting a deep dive into internationalization challenges such as pluralization, rich‑text handling, date and currency formatting, and translation workflows, and the article details practical solutions using ICU MessageFormat, ECMAScript Intl APIs, and custom React libraries.

AngularFrontendICU MessageFormat
0 likes · 14 min read
Web Internationalization: Practical i18n Solutions for Modern Frontends
UC Tech Team
UC Tech Team
Dec 26, 2018 · Frontend Development

Reflections on the Design, Implementation, and Future of React Hooks

The article provides a comprehensive analysis of React Hooks, covering their injection model, persistent call ordering, debugging and testing strategies, API design considerations such as useReducer, Context Provider, useEffect, missing APIs, type handling, compilation optimizations, safety concerns, and the overall motivation behind moving from class components to hooks.

API designFrontendHooks
0 likes · 21 min read
Reflections on the Design, Implementation, and Future of React Hooks
Qunar Tech Salon
Qunar Tech Salon
Dec 26, 2018 · Frontend Development

Using React.lazy and Suspense for Code Splitting and Lazy Loading

This article explains how React 16.6 introduced React.lazy and Suspense to simplify component code splitting and lazy loading, discusses why code splitting is needed, demonstrates dynamic import() usage, compares React-loadable with the built‑in APIs, and shows advanced patterns such as nested Suspense boundaries.

Code SplittingReActReact.lazy
0 likes · 9 min read
Using React.lazy and Suspense for Code Splitting and Lazy Loading
21CTO
21CTO
Dec 18, 2018 · Frontend Development

Is React Truly Superior to Vue? Insights from Vue’s Creator

Vue’s creator reflects on the React vs Vue debate, explaining each framework’s origins, design philosophies, performance nuances, community adoption, and why developers should focus on personal growth rather than proclaiming one technology superior.

ComparisonReActVue
0 likes · 8 min read
Is React Truly Superior to Vue? Insights from Vue’s Creator
Ctrip Technology
Ctrip Technology
Dec 6, 2018 · Frontend Development

Implementing Lazy Loading in React: Techniques, Components, and Higher‑Order Functions

This article explains why lazy loading is needed for React front‑end projects, demonstrates several code‑first implementations—including a custom LazyComponent, prop‑forwarding tricks, and a higher‑order lazy() function—showing how to improve first‑screen rendering while handling state updates correctly.

Code SplittingComponentFrontend
0 likes · 7 min read
Implementing Lazy Loading in React: Techniques, Components, and Higher‑Order Functions
HomeTech
HomeTech
Nov 29, 2018 · Frontend Development

Using TypeScript with React: Types, Generics, and Best Practices

This article explains how to integrate TypeScript with React, covering type definitions, generic components, event handling, utility types, and best practices such as using declaration files, avoiding any, and leveraging TypeScript’s advanced type utilities to improve code safety and developer productivity.

ReActTypeScriptUtility Types
0 likes · 17 min read
Using TypeScript with React: Types, Generics, and Best Practices
UC Tech Team
UC Tech Team
Nov 28, 2018 · Frontend Development

React 16 Roadmap: Upcoming Features and Release Timeline

This article outlines the React 16 roadmap, detailing the planned release schedule for Suspense code‑splitting, Hooks, Concurrent Mode, data‑fetching Suspense, and related experimental projects, while explaining their current status across React DOM, server rendering, and React Native.

Concurrent ModeFrontendHooks
0 likes · 13 min read
React 16 Roadmap: Upcoming Features and Release Timeline
UC Tech Team
UC Tech Team
Nov 23, 2018 · Frontend Development

Analysis of the State of JavaScript 2018 Survey Results

The 2018 State of JavaScript survey, answered by over 20,000 developers worldwide, reveals current preferences in languages, frameworks, tools, testing libraries, and emerging trends such as GraphQL and React Hooks, offering valuable insights for front‑end engineers.

FrontendJavaScriptReAct
0 likes · 7 min read
Analysis of the State of JavaScript 2018 Survey Results
UC Tech Team
UC Tech Team
Nov 20, 2018 · Frontend Development

State of JavaScript 2018: Trends in Frontend Frameworks, Flavors, and the JavaScript Ecosystem

The 2018 State of JavaScript report, based on responses from over 20,000 developers worldwide, reveals the most popular JavaScript flavors, front‑end frameworks, data‑layer tools, backend frameworks, testing libraries, and mobile/desktop runtimes, highlighting shifting preferences, satisfaction levels, and emerging technologies in the ecosystem.

JavaScriptReActframeworks
0 likes · 8 min read
State of JavaScript 2018: Trends in Frontend Frameworks, Flavors, and the JavaScript Ecosystem
UC Tech Team
UC Tech Team
Nov 15, 2018 · Frontend Development

How Netflix Cut JavaScript and Used Prefetch to Reduce Interaction Time

Netflix improved the registration experience on its desktop site by replacing most React code with native JavaScript, reducing bundle size by over 200 KB and cutting interaction time by more than 50 %, while prefetching resources to further shrink time‑to‑interactive by 30 %.

JavaScript optimizationNetflixReAct
0 likes · 11 min read
How Netflix Cut JavaScript and Used Prefetch to Reduce Interaction Time
Qunar Tech Salon
Qunar Tech Salon
Nov 13, 2018 · Frontend Development

Using the DACE Framework for Hotel Front‑End Development: Architecture, SSR, and Practical Lessons

This article details a front‑end engineer's experience building a hotel mini‑program with the DACE framework—covering its React‑based SSR architecture, module organization, data fetching strategies, custom components, webpack code‑splitting, and the challenges and insights gained during development, integration, and deployment.

DACEReActRedux
0 likes · 10 min read
Using the DACE Framework for Hotel Front‑End Development: Architecture, SSR, and Practical Lessons
21CTO
21CTO
Nov 12, 2018 · Frontend Development

How Netflix Cut Page Load Time by 50% with JS Reduction & Prefetching

This case study explains how Netflix optimized its logout and registration pages by removing unnecessary React and third‑party JavaScript, employing prefetching techniques, and reducing bundle size, resulting in up to a 50% faster time‑to‑interactive and smoother user experience.

FrontendJavaScript optimizationReAct
0 likes · 12 min read
How Netflix Cut Page Load Time by 50% with JS Reduction & Prefetching
UC Tech Team
UC Tech Team
Nov 8, 2018 · Frontend Development

React vs Vue: Building the Same ToDo App – Key Differences Explained

This article walks through building an identical ToDo application with React and Vue, comparing their project structures, data mutation mechanisms, component communication, event handling, and code examples, helping developers understand the practical differences between the two popular frontend frameworks.

FrontendReActState Management
0 likes · 12 min read
React vs Vue: Building the Same ToDo App – Key Differences Explained
UC Tech Team
UC Tech Team
Nov 6, 2018 · Frontend Development

Understanding React: Core Concepts, State Management, and Reactive UI Building

This article explains React as a JavaScript library for building user interfaces, covering its component model, state‑driven rendering, DOM diffing, pure functions, the importance of treating it as a library rather than a framework, and practical state management with MobX.

FrontendReActReactive Programming
0 likes · 7 min read
Understanding React: Core Concepts, State Management, and Reactive UI Building
UC Tech Team
UC Tech Team
Oct 24, 2018 · Frontend Development

React v16.6.0 Release: New Features such as React.memo, React.lazy, Context API Enhancements, Error Boundaries, and StrictMode Updates

On October 23, React 16.6.0 was released, introducing React.memo for function components, React.lazy with Suspense for code‑splitting, a simpler static contextType API, new error‑boundary methods, and deprecations in StrictMode, along with installation instructions and a detailed changelog.

Error handlingFrontendJavaScript
0 likes · 7 min read
React v16.6.0 Release: New Features such as React.memo, React.lazy, Context API Enhancements, Error Boundaries, and StrictMode Updates
HomeTech
HomeTech
Oct 23, 2018 · Frontend Development

Migrating a React + Ant Design + MobX Project from JavaScript to TypeScript

This article explains a step‑by‑step method for converting a React project that uses Ant Design and MobX from plain JavaScript to a fully typed TypeScript codebase, covering project scaffolding, file migration, configuration adjustments, global variable handling, API typing, store integration, and Sass updates.

Ant DesignMobXReAct
0 likes · 11 min read
Migrating a React + Ant Design + MobX Project from JavaScript to TypeScript
21CTO
21CTO
Oct 22, 2018 · Frontend Development

Stop Unnecessary React Re‑renders: Cache Event Handlers and Master Reference Equality

This article explains how JavaScript reference equality for objects and functions affects React's shallow prop and state comparison, shows common pitfalls that cause needless re‑renders, and provides practical techniques—such as defining functions outside components and caching event listeners—to dramatically improve rendering performance.

FrontendJavaScriptPerformance
0 likes · 9 min read
Stop Unnecessary React Re‑renders: Cache Event Handlers and Master Reference Equality
Qunar Tech Salon
Qunar Tech Salon
Oct 16, 2018 · Frontend Development

In‑Depth Source Code Analysis of React‑Router (v4/v5) and Its Core Components

This article provides a comprehensive walkthrough of React‑Router's internal architecture, detailing the implementation of key components such as Router, Route, Switch, Redirect, Prompt, Link, and withRouter, while explaining how history, matchPath, and path‑to‑regexp work together to enable client‑side routing in modern React applications.

JavaScriptReActReact Router
0 likes · 19 min read
In‑Depth Source Code Analysis of React‑Router (v4/v5) and Its Core Components
UC Tech Team
UC Tech Team
Oct 5, 2018 · Frontend Development

Why Create React App Should Not Compile Non‑Standard Syntax in node_modules

The article explains that compiling experimental JavaScript features like JSX or class properties inside node_modules tightly couples libraries to build tools, leading to breaking changes, coordination overhead, and prolonged upgrade pain, which is why Create React App avoids such compilation.

BabelJavaScriptReAct
0 likes · 4 min read
Why Create React App Should Not Compile Non‑Standard Syntax in node_modules
UC Tech Team
UC Tech Team
Oct 3, 2018 · Frontend Development

Create React App 2.0 Released: New Features and Upgrade Guide

Create React App 2.0, launched on October 1, updates core tools like Babel, Webpack, and Jest, adds Sass, CSS Modules, SVG components, optional Service Workers, and provides a clear migration path for both new and existing projects, while supporting modern browsers and optional polyfills.

BabelFrontendJest
0 likes · 6 min read
Create React App 2.0 Released: New Features and Upgrade Guide
Ctrip Technology
Ctrip Technology
Sep 19, 2018 · Frontend Development

Understanding the Big Front‑End: Definition, Benefits, and Implementation Strategies

The article explains the concept of the big front‑end, distinguishes its horizontal UI and vertical server dimensions, outlines why it reduces communication and development costs, and details practical technology selection, architecture design, and the measurable benefits of shared components and server‑side rendering.

Big Front-EndNode.jsReAct
0 likes · 8 min read
Understanding the Big Front‑End: Definition, Benefits, and Implementation Strategies
UC Tech Team
UC Tech Team
Sep 19, 2018 · Frontend Development

Using the React Profiler Plugin in React DevTools

This article explains how to enable and use the React Profiler plugin in React DevTools to record, visualize, and analyze component rendering performance through commits, flamegraphs, sorting charts, component charts, and interactions, and provides troubleshooting tips for common issues.

DevToolsFrontendPerformance
0 likes · 8 min read
Using the React Profiler Plugin in React DevTools
JD Tech
JD Tech
Sep 18, 2018 · Frontend Development

Taro 1.0.0 Release: New Features, Multi‑Platform Enhancements, and Future Roadmap

The article announces the official 1.0.0 release of the Taro multi‑terminal development framework, detailing its evolution from early versions, new component architecture, extensive mini‑program ecosystem support, performance optimizations, richer JSX and TypeScript capabilities, React Native conversion, UI library improvements, and a comprehensive roadmap for future features.

Mini‑programMulti‑platformReAct
0 likes · 14 min read
Taro 1.0.0 Release: New Features, Multi‑Platform Enhancements, and Future Roadmap
JD Tech
JD Tech
Sep 13, 2018 · Frontend Development

Refactoring JD Shopping Mini‑Program Category Page with Taro: Mixed Development Mode and Performance Gains

This article details how JD's shopping mini‑program category page was incrementally refactored using the Taro multi‑platform framework, describing the mixed native/Taro development approach, project initialization, configuration tweaks, page implementation differences, performance improvements, and the broader benefits of adopting Taro for cross‑platform development.

Mini ProgramReActTaRO
0 likes · 8 min read
Refactoring JD Shopping Mini‑Program Category Page with Taro: Mixed Development Mode and Performance Gains
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Sep 7, 2018 · Frontend Development

Unveiling React’s setState: How It Works Internally and Common Pitfalls

This article explains the fundamentals and deep internals of React’s setState method, covering basic usage, asynchronous behavior, state‑update pitfalls, functional updates, and the underlying mechanisms such as enqueueSetState, enqueueUpdate, batchingStrategy, and transaction processing, illustrated with code snippets and diagrams.

BatchingFrontendReAct
0 likes · 7 min read
Unveiling React’s setState: How It Works Internally and Common Pitfalls
Meituan Technology Team
Meituan Technology Team
Sep 6, 2018 · Frontend Development

Micro‑Frontend Architecture for Meituan HR System

Meituan’s HR platform adopts a micro‑frontend architecture where a central Portal container registers isolated sub‑projects via a global route array, namespaces CSS, unifies shared libraries through a custom require system, and deploys static assets with PM2, delivering a single‑page experience, independent releases, and minimal bundle overhead.

DeploymentFrontend ArchitectureHR system
0 likes · 15 min read
Micro‑Frontend Architecture for Meituan HR System
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Aug 29, 2018 · Frontend Development

How to Use React Context API to Build Flexible, Reusable Components

This tutorial demonstrates how to replace fragile prop‑drilling in a multi‑step React component by leveraging the React Context API, showing step‑by‑step creation of a context, provider, and consumer, refactoring the Stepper component for greater flexibility and reusability across the UI.

Component ReusabilityContext APIDesign Patterns
0 likes · 9 min read
How to Use React Context API to Build Flexible, Reusable Components
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Aug 28, 2018 · Frontend Development

Master Flexible React Components with Compound Component Patterns

This article demonstrates how to transform a basic Stepper component into a highly reusable and configurable React component using the compound component pattern, static properties, and React's Children utilities, while addressing common customization challenges and preparing for context API integration.

Compound ComponentsContext APIDesign Patterns
0 likes · 11 min read
Master Flexible React Components with Compound Component Patterns
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Aug 11, 2018 · Frontend Development

Boost React App Load Speed with Webpack 4: Proven Optimization Techniques

This article walks through practical strategies for accelerating React application loading by optimizing first‑screen size, leveraging HTML placeholders, caching frameworks, dynamic polyfills, SplitChunksPlugin, proper Tree Shaking, code‑splitting, ES2015+ compilation, and lazy‑loading techniques, all illustrated with real‑world Webpack 4 configurations.

OptimizationReAct
0 likes · 24 min read
Boost React App Load Speed with Webpack 4: Proven Optimization Techniques
MaoDou Frontend Team
MaoDou Frontend Team
Aug 9, 2018 · Frontend Development

Unlock React Power: Master Higher‑Order Components and Their Two Core Patterns

This article explains React higher‑order components, defining the pattern, distinguishing between props‑proxy and reverse‑inheritance implementations, and illustrating each with practical examples such as Ant Design’s Form.create and a loading wrapper, while discussing lifecycle handling and the advantages of reverse inheritance.

Higher-Order ComponentJavaScriptProps Proxy
0 likes · 3 min read
Unlock React Power: Master Higher‑Order Components and Their Two Core Patterns
MaoDou Frontend Team
MaoDou Frontend Team
Jul 31, 2018 · Frontend Development

Is React setState Synchronous or Asynchronous? A Practical Guide

This article explains when React's setState behaves synchronously or asynchronously, how batch updates are merged into a single render, and the proper way to retrieve the updated state using the callback parameter, illustrated with clear diagrams and code examples.

FrontendJavaScriptReAct
0 likes · 3 min read
Is React setState Synchronous or Asynchronous? A Practical Guide
JD Retail Technology
JD Retail Technology
Jul 25, 2018 · Frontend Development

Design and Architecture of JD.com’s Tongtian Tower Visual Activity Page Builder

The article explains how JD.com’s Tongtian Tower platform enables non‑technical operators to create activity pages through a React‑based visual editor, detailing its background, design goals, component architecture, template definition, data handling, quality assurance measures, and future development directions.

FrontendJD.comPlatform design
0 likes · 9 min read
Design and Architecture of JD.com’s Tongtian Tower Visual Activity Page Builder
JD Tech
JD Tech
Jul 23, 2018 · Frontend Development

Design and Architecture of JD's "Tongtian Tower" Visual Activity Page Builder Platform

This article explains the background, requirements, architectural design, technology selection, component structure, template definition, data handling, quality assurance measures, and future roadmap of JD's internal visual activity page builder platform, Tongtian Tower, highlighting its React‑based frontend implementation and open‑extension strategy.

FrontendJDReAct
0 likes · 9 min read
Design and Architecture of JD's "Tongtian Tower" Visual Activity Page Builder Platform
Qunar Tech Salon
Qunar Tech Salon
Jul 18, 2018 · Frontend Development

Converting React Class Components to Miniapp Component Calls Using Babel Plugins

This article explains how to transform React class components into WeChat Mini‑Program Component({}) calls by building a custom Babel plugin that extracts class inheritance, methods, state handling, and replaces import/export statements, while also mapping React lifecycle patterns to Mini‑App equivalents.

BabelJavaScriptMiniapp
0 likes · 9 min read
Converting React Class Components to Miniapp Component Calls Using Babel Plugins
Qunar Tech Salon
Qunar Tech Salon
Jul 17, 2018 · Frontend Development

Adapting WeChat Mini Program Component Model to the React Paradigm

This article examines the challenges of using WeChat Mini Programs, proposes a React‑style component architecture by mapping Mini Program concepts such as Component, Page, and App to React's state, lifecycle, and JSX, and provides concrete code examples for definition, lifecycle handling, styling, templating, and configuration.

ComponentFrontendJavaScript
0 likes · 6 min read
Adapting WeChat Mini Program Component Model to the React Paradigm
Java Architect Essentials
Java Architect Essentials
Jun 21, 2018 · Frontend Development

Setting Up a React Development Environment on macOS

This guide walks through installing Node.js, configuring npm with a Chinese mirror, and using create‑react‑app to quickly create and run a React project on macOS, including all necessary command‑line steps and code snippets.

FrontendNode.jsReAct
0 likes · 6 min read
Setting Up a React Development Environment on macOS
Ctrip Technology
Ctrip Technology
Jun 19, 2018 · Frontend Development

Understanding React Fiber: Architecture, Scheduling, and Reconciliation

This article explains why React Fiber was introduced, describes its core concepts such as the fiber tree, work‑in‑progress tree, double buffering, priority scheduling, and lifecycle changes, and summarizes the new capabilities it brings to improve UI performance and responsiveness.

FrontendPerformanceReAct
0 likes · 10 min read
Understanding React Fiber: Architecture, Scheduling, and Reconciliation
Hulu Beijing
Hulu Beijing
Jun 14, 2018 · Frontend Development

What Hulu Learned from Evolving Their React Framework: Insights and Pitfalls

In this interview, Hulu senior engineer Cheng Mo shares how the company transitioned from jQuery and Backbone to React, discusses the challenges of server‑side rendering, offers practical advice on framework selection, learning curves, React's future, and tips for front‑end developers preparing for interviews.

Developer AdviceFramework MigrationReAct
0 likes · 7 min read
What Hulu Learned from Evolving Their React Framework: Insights and Pitfalls
Tencent Cloud Developer
Tencent Cloud Developer
Jun 6, 2018 · Frontend Development

React Introduction: Core Concepts, Component Architecture, and JSX Fundamentals

React, an open‑source UI library created by Facebook, uses a virtual DOM and component‑based architecture—both class‑based and functional—to build modular, reusable interfaces, while JSX provides an XML‑like syntax that compiles to JavaScript, enhancing development efficiency and maintainability.

Component-Based ArchitectureES6 Class ComponentFunctional Component
0 likes · 9 min read
React Introduction: Core Concepts, Component Architecture, and JSX Fundamentals
转转QA
转转QA
May 29, 2018 · Frontend Development

Performance Analysis and Component Splitting Strategies in React (DVA + Ant Design)

This article examines React rendering performance, explains why excessive re‑renders hurt efficiency, and proposes component‑splitting principles—using PureComponent and ImmutableJS—to achieve high cohesion, low coupling, and optimal update rendering in a DVA‑based frontend project.

Component SplittingDVAImmutableJS
0 likes · 5 min read
Performance Analysis and Component Splitting Strategies in React (DVA + Ant Design)
Tencent Music Tech Team
Tencent Music Tech Team
May 25, 2018 · Frontend Development

Key New Features of React 16.x: Render Optimization, Error Boundaries, Portals, Context API, and Ref API

React 16 introduced major enhancements—including array returns and Fragment syntax for cleaner rendering, error‑boundary components to catch UI crashes, portals for rendering outside the DOM hierarchy, a stable Context API for global data, and new Ref utilities like createRef and forwardRef—greatly improving ergonomics, performance, and encouraging upgrades from older versions.

ContextAPIErrorBoundaryPortal
0 likes · 11 min read
Key New Features of React 16.x: Render Optimization, Error Boundaries, Portals, Context API, and Ref API
Suning Technology
Suning Technology
May 14, 2018 · Frontend Development

Highlights from Suning’s 2018 Front‑End Tech Forum: Node.js, React, WebRTC & Data Viz

The Suning Front‑End Technology Forum in May 2018 gathered over 500 engineers to share insights on Node.js performance tuning, React 16's new features, WebRTC for online education, WebAssembly‑based optimization, and dashboard data‑visualization techniques, offering a comprehensive snapshot of modern front‑end advancements.

Data VisualizationFrontendReAct
0 likes · 6 min read
Highlights from Suning’s 2018 Front‑End Tech Forum: Node.js, React, WebRTC & Data Viz
JD Retail Technology
JD Retail Technology
Apr 11, 2018 · Frontend Development

Converting JDreact Projects to H5: Configuration, API Integration, CSS Import, Compatibility Fixes, and State Management

This guide explains step‑by‑step how to transform a JDreact mobile project into a web‑compatible H5 application by adjusting config.js, switching to JSONP API calls, importing external CSS, handling require lifting, fixing ref and input focus issues, managing borders, passing data between pages, and using AsyncStorage for state persistence.

AsyncStorageCSS integrationFrontend
0 likes · 16 min read
Converting JDreact Projects to H5: Configuration, API Integration, CSS Import, Compatibility Fixes, and State Management
JD Tech
JD Tech
Apr 11, 2018 · Frontend Development

Step‑by‑Step Guide to Converting JDreact Projects to H5 and Solving Common Compatibility Issues

This article explains how to transform JDreact mobile code into standard H5 pages, covering configuration changes, backend API adaptation, external CSS integration, platform‑specific ref handling, input focus problems, number‑field behavior, radio‑group styling, data passing techniques, AsyncStorage usage, and boolean value conversion.

FrontendH5 conversionMobile Web
0 likes · 16 min read
Step‑by‑Step Guide to Converting JDreact Projects to H5 and Solving Common Compatibility Issues
Qunar Tech Salon
Qunar Tech Salon
Mar 28, 2018 · Frontend Development

Key New Features and Architectural Changes in React 16

This article reviews the major additions and deprecations introduced in React 16, including component array returns, portals, error boundaries, fragments, strict mode, the new context API, createRef/forwardRef, fiber architecture, and async rendering utilities, illustrated with code examples.

Context APIFrontendHooks
0 likes · 9 min read
Key New Features and Architectural Changes in React 16
Youzan Coder
Youzan Coder
Mar 23, 2018 · Frontend Development

Building an Excellent React Component Library: Design, Development, Testing, and Maintenance (Zent Case Study)

The article details how Youzan’s frontend team created the Zent React component library—defining a unified design philosophy, strict code standards, a CLI‑driven workflow, Jest/Enzyme testing, and disciplined maintenance practices—to replace duplicated code, support diverse business needs, and foster open‑source collaboration.

Component LibraryReActTesting
0 likes · 10 min read
Building an Excellent React Component Library: Design, Development, Testing, and Maintenance (Zent Case Study)
Hujiang Technology
Hujiang Technology
Mar 6, 2018 · Frontend Development

The Evolution and Implementation of React Hot Loader

An in‑depth exploration of React Hot Loader’s origins, underlying HMR principles, challenges with state and DOM preservation, the development of proxy‑based solutions, React Transform, and the progression to newer versions, providing practical code examples and insights for frontend developers.

BabelHot LoaderJavaScript
0 likes · 21 min read
The Evolution and Implementation of React Hot Loader
JD.com Experience Design Center
JD.com Experience Design Center
Jan 22, 2018 · Frontend Development

Mastering React Component Structure: Coupling, Cohesion, and Prop Strategies

This article explores how coupling and cohesion influence React component design, compares several prop‑passing techniques—from static components to object, selective, map/array, and child‑object approaches—and offers guidance on selecting the most suitable pattern based on project context and maintainability.

CohesionCouplingProps
0 likes · 12 min read
Mastering React Component Structure: Coupling, Cohesion, and Prop Strategies
21CTO
21CTO
Jan 13, 2018 · Frontend Development

Which JavaScript Frameworks Ruled 2017? npm’s State‑of‑JS Report Revealed

The 2017 npm State of JavaScript report analyzes the popularity and growth of major front‑end frameworks—React, Preact, Angular, Ember, Vue, and Backbone—showing dramatic shifts, rapid adoption rates, and guidance for developers choosing the right tool for their projects.

JavaScriptReActVue
0 likes · 6 min read
Which JavaScript Frameworks Ruled 2017? npm’s State‑of‑JS Report Revealed
21CTO
21CTO
Jan 11, 2018 · Frontend Development

How to Build a React Project from Scratch: Architecture, Tools, and Best Practices

This article walks through creating a React application without scaffolding tools, detailing the project directory layout, chosen tech stack—including React, Redux, Immutable.js, redux‑saga, and axios—along with development utilities like redux‑devtools and Reactotron, component organization, routing strategies, state persistence, and asynchronous task management.

Debugging ToolsFrontend ArchitectureImmutable.js
0 likes · 33 min read
How to Build a React Project from Scratch: Architecture, Tools, and Best Practices
Architecture Digest
Architecture Digest
Jan 11, 2018 · Frontend Development

Building a React Project Structure from Scratch: A Comprehensive Guide

This article walks through creating a React application without scaffolding tools, detailing project directory layout, chosen technology stack—including React, Redux, Immutable.js, react-router, redux-saga, and related debugging and persistence utilities—while explaining component design, middleware, enhancers, routing, and asynchronous task management.

JavaScriptReActRedux
0 likes · 33 min read
Building a React Project Structure from Scratch: A Comprehensive Guide
21CTO
21CTO
Dec 25, 2017 · Frontend Development

What 23,000 Developers Reveal About JavaScript Trends, Frameworks, and Salaries

Based on responses from over 23,000 developers, this survey uncovers the latest JavaScript ecosystem trends—including the dominance of React, the evolving roles of Angular and Vue, rising interest in GraphQL, salary impacts of framework choices, and the expanding use of JavaScript beyond the browser.

AngularGraphQLJavaScript
0 likes · 9 min read
What 23,000 Developers Reveal About JavaScript Trends, Frameworks, and Salaries
21CTO
21CTO
Dec 22, 2017 · Frontend Development

Choosing the Right JavaScript Framework: Strengths, Weaknesses, and Future Outlook

This article reviews a series of JavaScript web‑framework comparisons, outlining why using a framework matters, summarizing the pros, cons, and future directions of Angular 2+, React + Redux, Vue.js, Dojo 2, Ember, and Aurelia to help developers and teams make informed choices.

AngularJavaScriptReAct
0 likes · 19 min read
Choosing the Right JavaScript Framework: Strengths, Weaknesses, and Future Outlook
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Dec 19, 2017 · Frontend Development

How Isomorphic Server‑Side Rendering Cut First‑Paint Time by 50% for Millions

An in‑depth case study of the Interest Tribe project reveals how adopting isomorphic server‑side rendering, combined with offline packages, VM sandboxing, and smart caching, dramatically reduced first‑paint latency on Android devices, cut slow‑user share, and improved stability and scalability for a billion‑scale web service.

CachingFrontend ArchitectureReAct
0 likes · 12 min read
How Isomorphic Server‑Side Rendering Cut First‑Paint Time by 50% for Millions
Architecture Digest
Architecture Digest
Dec 19, 2017 · Frontend Development

A Comprehensive Overview of Popular Front‑End UI Frameworks for Mobile, PC, and Hybrid App Development

This article compiles and compares a wide range of current front‑end UI frameworks—including mobile, PC, and hybrid solutions—by summarizing their core features, GitHub statistics, CDN import methods and providing brief personal insights to help developers select the most suitable library.

FrontendReActUI Frameworks
0 likes · 17 min read
A Comprehensive Overview of Popular Front‑End UI Frameworks for Mobile, PC, and Hybrid App Development
Ctrip Technology
Ctrip Technology
Dec 14, 2017 · Frontend Development

Design and Practice of a Front‑End Business Framework for Mobile Applications

This article presents a comprehensive case study of building a front‑end business framework for a mobile e‑commerce app, covering the initial design thinking, technical selection, architecture (infrastructure, router, MVC), componentization, hybrid performance optimizations, server‑side rendering, SPA‑React integration, Redux usage, and the engineering workflow including automation, testing, and continuous integration.

ReActReduxSPA
0 likes · 29 min read
Design and Practice of a Front‑End Business Framework for Mobile Applications