Tagged articles
1022 articles
Page 10 of 11
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.

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

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

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

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

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

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

JD.comReactVisual Editor
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.

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

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

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

Node.jsReactcreate-react-app
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.

FiberReactReconciliation
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 visualizationReactWebAssembly
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 integrationH5 conversion
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.

H5 conversionMobile WebReact
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 APIJavaScriptReact
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 LibraryReactUI design
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.

Hot LoaderJavaScriptReact
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.

CohesionComponent DesignCoupling
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.

Frontend ArchitectureReactServer-side Rendering
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.

MobileReactUI 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
21CTO
21CTO
Dec 7, 2017 · Frontend Development

Build a Simple Blog with React, Next.js, and Cosmic.js GraphQL

This tutorial walks through creating a lightweight blog using React, Next.js, and Cosmic.js GraphQL, covering environment setup, dependency installation, package configuration, core component implementation, and sample GraphQL queries to fetch and display posts.

BlogCosmic.jsGraphQL
0 likes · 7 min read
Build a Simple Blog with React, Next.js, and Cosmic.js GraphQL
Qunar Tech Salon
Qunar Tech Salon
Dec 6, 2017 · Frontend Development

Using Draft.js for Custom Rich Text Editing in React

This article explains how Draft.js, a React‑based rich‑text editor framework, can be applied to build a customizable editor with support for structured content, immutable state management, custom block rendering, data conversion, and hook handling, providing code examples throughout.

Draft.jsJavaScriptReact
0 likes · 9 min read
Using Draft.js for Custom Rich Text Editing in React
21CTO
21CTO
Nov 6, 2017 · Frontend Development

Master React Router v4: A Complete Guide to Building Dynamic and Protected Routes

This tutorial walks you through installing React Router v4, creating basic, nested, and dynamic routes, handling URL parameters, and implementing protected routes with authentication, providing comprehensive code examples and best practices for building robust client‑side navigation in modern React applications.

JavaScriptProtected RoutesReact
0 likes · 18 min read
Master React Router v4: A Complete Guide to Building Dynamic and Protected Routes
21CTO
21CTO
Oct 22, 2017 · Frontend Development

Mastering React: From Transformation to Algebraic Effects

This article walks front‑end developers through the author's deductive model of React, covering transformation, abstraction, composition, state handling, memoization, list management, continuations, state maps, and algebraic effects with clear code examples.

Component ArchitectureJavaScriptReact
0 likes · 9 min read
Mastering React: From Transformation to Algebraic Effects
Meituan Technology Team
Meituan Technology Team
Oct 12, 2017 · Frontend Development

Managing Software Complexity with Abstraction, Composition, and Functional Programming in Redux/React

By using abstraction to model common concepts and composition to build complex behavior from simple, pure‑function building blocks like map, filter, and reduce, the article shows how functional programming techniques underpin Redux and React, providing a systematic way to tame front‑end software complexity.

Higher-Order FunctionsReactRedux
0 likes · 22 min read
Managing Software Complexity with Abstraction, Composition, and Functional Programming in Redux/React
21CTO
21CTO
Sep 23, 2017 · Frontend Development

Why Facebook Switched React’s License to MIT – What It Means for Developers

Facebook announced it will relicense React, Jest, Flow, and Immutable.js to MIT, sparking backlash from the developer community and prompting companies like Apache, WordPress, and Baidu to reconsider their use of React, while the company explains its reasoning and future plans.

FacebookLicenseMIT
0 likes · 6 min read
Why Facebook Switched React’s License to MIT – What It Means for Developers
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Aug 27, 2017 · Frontend Development

Top Front-End & Tech News This Week: React License, Bootstrap 4, Node.js 8.4, Android Oreo

This weekly roundup delivers the latest front‑end and tech updates, covering Ma Huateng's digital manufacturing insights, React's license controversy, Bootstrap 4 Beta, Node.js 8.4, ESLint 4.5, .NET Core 2, Android Oreo, Puppeteer, the Agile Beach conference, and a new Google Play Store feature.

BootstrapReactWeb Development
0 likes · 6 min read
Top Front-End & Tech News This Week: React License, Bootstrap 4, Node.js 8.4, Android Oreo
Architecture Digest
Architecture Digest
Aug 14, 2017 · Frontend Development

An Overview of Modern Front-End Development Workflow and Tools

This article provides a comprehensive overview of the front‑end development workflow, explaining core concepts like HTML, CSS, JavaScript, and detailing essential tools such as npm, Babel, Gulp, Webpack, and popular frameworks like React and Vue, while addressing their roles and interactions.

JavaScriptReactVue
0 likes · 8 min read
An Overview of Modern Front-End Development Workflow and Tools
Beike Product & Technology
Beike Product & Technology
Aug 9, 2017 · Frontend Development

10 React Mini-Patterns

This article presents ten practical React mini‑patterns—including data flow, native input handling, unique ID generation, CSS control via props, component switching, autofocus, list rendering, number formatting, store usage, and import simplification—to help both newcomers and seasoned developers write cleaner, more maintainable front‑end code.

Component ArchitectureDesign PatternsReact
0 likes · 14 min read
10 React Mini-Patterns
Qunar Tech Salon
Qunar Tech Salon
Aug 4, 2017 · Frontend Development

Understanding and Implementing Higher-Order Components in React

This article explains the concept of higher‑order components (HOCs) in React, demonstrates basic and advanced implementations—including parameterized HOCs, display‑name handling, composition with compose, and practical examples such as loading and copy utilities—while comparing HOCs with parent components and recommending open‑source libraries.

DecoratorHigher-Order ComponentJavaScript
0 likes · 10 min read
Understanding and Implementing Higher-Order Components in React
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Jul 11, 2017 · Frontend Development

How React, Angular, and Vue Detect Changes and Perform Batch Updates

This article examines how modern frontend frameworks—React, Angular 1, Angular 2, and Vue—detect data changes and implement batch updates, comparing their virtual DOM diffing, dirty checking, zone.js, and asynchronous queues to reveal each library’s underlying change‑detection strategy.

AngularBatch UpdateChange Detection
0 likes · 14 min read
How React, Angular, and Vue Detect Changes and Perform Batch Updates
Hujiang Technology
Hujiang Technology
Jul 5, 2017 · Frontend Development

Getting Started with TypeScript and React

This tutorial walks through setting up a TypeScript project with React, covering installation, tsconfig configuration, Webpack and Babel integration, creating a simple component, adding type declarations for third‑party modules, testing with Jest and ts‑jest, and enforcing code style with TSLint.

JestReactTSLint
0 likes · 16 min read
Getting Started with TypeScript and React
Hujiang Technology
Hujiang Technology
Jun 27, 2017 · Frontend Development

React Forms: Using Refs (Translation)

This article translates Loren Stewart’s guide on using React refs for form handling, explaining both controlled components and ref‑based approaches, and provides detailed code examples for text, number, select, radio, and checkbox inputs, including techniques for parent‑child communication and value extraction.

Controlled ComponentsFormsJavaScript
0 likes · 15 min read
React Forms: Using Refs (Translation)
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Jun 25, 2017 · Frontend Development

What’s New This Week in Front‑End Tech? AI Cloud, React 15.6, Angular 4.2, and More

This week’s front‑end roundup covers Tencent’s new “Intelligent Cloud” AI‑as‑a‑Service platform, Walmart’s ban on AWS, releases of React 15.6.0, Angular 4.2, ESLint 4.0.0, Firefox 54 and Chrome 60 Beta, plus updates on Apple Music licensing, Visual Studio 2017 preview and Owl Labs’ robotic conference camera.

AngularCloud AIReact
0 likes · 6 min read
What’s New This Week in Front‑End Tech? AI Cloud, React 15.6, Angular 4.2, and More
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Jun 15, 2017 · Frontend Development

Quickly Add Jest Snapshot Tests to Your React Project

This article explains why web releases often miss thorough testing, introduces Jest and its React support, and provides a step‑by‑step guide to implementing snapshot testing and improving unit‑test coverage in modern React applications.

JestReactsnapshot testing
0 likes · 5 min read
Quickly Add Jest Snapshot Tests to Your React Project
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Jun 1, 2017 · Frontend Development

Unveiling React’s Diff Algorithm: From O(n³) to O(n) Performance

This article delves into React’s diff mechanism, explaining how the framework transforms the naïve O(n³) tree‑edit distance into an O(n) solution through layered tree diff, component diff, and element diff strategies, and offers practical insights on key usage and performance pitfalls.

Diff AlgorithmReactfrontend performance
0 likes · 14 min read
Unveiling React’s Diff Algorithm: From O(n³) to O(n) Performance
Hujiang Technology
Hujiang Technology
May 31, 2017 · Frontend Development

Exploring React's Virtual DOM: Source Code Analysis

This article examines React's Virtual DOM by dissecting the React source code, explaining the structure of the React object, ReactElement factory, the createElement implementation, and how these pieces combine to build a virtual DOM tree for rendering components.

JavaScriptReactReactElement
0 likes · 11 min read
Exploring React's Virtual DOM: Source Code Analysis
Qunar Tech Salon
Qunar Tech Salon
Apr 23, 2017 · Frontend Development

Performance Optimizations in Twitter Lite: Code Splitting, Rendering, Images, Redux, and Service Workers

This article explains how Twitter Lite, one of the world’s largest React.js PWAs, eliminates a range of performance bottlenecks through route‑based code splitting, avoiding frame‑dropping functions, using smaller images, optimizing React lifecycle methods, improving Redux updates, and leveraging Service Workers for faster asset delivery.

Code SplittingPWAReact
0 likes · 19 min read
Performance Optimizations in Twitter Lite: Code Splitting, Rendering, Images, Redux, and Service Workers
Hulu Beijing
Hulu Beijing
Apr 11, 2017 · Frontend Development

Why Declarative Programming Makes React Development a Breeze

The article uses a company’s annual party procurement process to illustrate declarative versus imperative programming, showing how React’s declarative model lets developers specify desired UI outcomes while the framework handles rendering details, resulting in simpler code, reduced duplication, and better global coordination.

Programming ParadigmsReactSoftware Architecture
0 likes · 7 min read
Why Declarative Programming Makes React Development a Breeze
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
Apr 6, 2017 · Frontend Development

Mastering React Isomorphic SSR: Build a Perfect Server‑Side Rendering Boilerplate

This guide walks you through building a complete React isomorphic server‑side rendering environment—from understanding SSR benefits and core principles to configuring routing, state management, static asset handling, code splitting, optimization, and deployment—providing practical code snippets, diagrams, and best‑practice recommendations.

IsomorphicNode.jsReact
0 likes · 14 min read
Mastering React Isomorphic SSR: Build a Perfect Server‑Side Rendering Boilerplate
Qunar Tech Salon
Qunar Tech Salon
Mar 27, 2017 · Frontend Development

Isomorphic MVC (IMVC): A Unified Front‑End Architecture for Server‑Side and Client‑Side Rendering

The article introduces the concept of isomorphic JavaScript, explains its types and hierarchical levels, outlines its practical benefits such as SEO and faster first‑load experience, and details the IMVC framework and the create‑app library that enable seamless server‑client code sharing with a clear controller‑model‑view separation.

IsomorphicMVCNode.js
0 likes · 22 min read
Isomorphic MVC (IMVC): A Unified Front‑End Architecture for Server‑Side and Client‑Side Rendering
Ctrip Technology
Ctrip Technology
Mar 24, 2017 · Frontend Development

Isomorphic MVC (IMVC): Concepts, Architecture, and Implementation Strategies

This article introduces the concept of isomorphic JavaScript, distinguishes content‑ and form‑isomorphism, explains the layered spectrum of isomorphism, outlines its practical benefits for SEO, performance and maintainability, and details the IMVC framework design, controller pattern, simplified Redux (relite), and engineering tooling for modern front‑end development.

IsomorphicMVCNode.js
0 likes · 23 min read
Isomorphic MVC (IMVC): Concepts, Architecture, and Implementation Strategies
Ctrip Technology
Ctrip Technology
Mar 24, 2017 · Frontend Development

Qreact: A Mini React Framework for Mobile Front‑End Optimization

This article describes the development of Qreact, a lightweight React‑compatible framework created by Ctrip to dramatically reduce bundle size for mobile apps, covering its core requirements, competitor analysis, design choices, implementation details, performance optimizations, and final results.

Mini FrameworkMobile FrontendPreact
0 likes · 9 min read
Qreact: A Mini React Framework for Mobile Front‑End Optimization
Baidu Waimai Technology Team
Baidu Waimai Technology Team
Mar 16, 2017 · Frontend Development

Evolution of Componentization in the Operations Backend Platform: From FIS to React and the Third‑Generation Solution

This article outlines the rapid growth of Baidu Takeaway's operations backend, analyzes the limitations of the FIS‑based modular approach, describes the transition to React‑Redux componentization, and presents a third‑generation, model‑driven component sharing platform designed to reduce repetitive development and improve developer happiness.

ComponentizationReactUI
0 likes · 12 min read
Evolution of Componentization in the Operations Backend Platform: From FIS to React and the Third‑Generation Solution
Taobao Frontend Technology
Taobao Frontend Technology
Feb 13, 2017 · Frontend Development

How Rax Is Revolutionizing Multi‑Platform Frontend Development

Rax, an open‑source React‑compatible framework launched by Alibaba, unifies web, Weex, and Node.js rendering through a driver architecture, offering a tiny bundle size, multi‑node support, and standardized APIs to enable developers to write once and run everywhere across mobile, web, and emerging platforms.

RaxReactmulti-platform
0 likes · 11 min read
How Rax Is Revolutionizing Multi‑Platform Frontend Development
Tencent Cloud Developer
Tencent Cloud Developer
Jan 25, 2017 · Frontend Development

Understanding React: Component Architecture, Props, State, Lifecycle, Server‑Side Rendering, and React‑Native

Zuo Ming explains React’s component architecture—props, state, lifecycle methods, server‑side rendering, and React‑Native—using a bamboo water‑wheel analogy, demonstrating prop validation, state updates, lifecycle phases, SSR hydration, cross‑platform code reuse, and unit testing to give front‑end engineers a complete practical foundation.

PropsReactReact Native
0 likes · 12 min read
Understanding React: Component Architecture, Props, State, Lifecycle, Server‑Side Rendering, and React‑Native
Tencent Cloud Developer
Tencent Cloud Developer
Jan 24, 2017 · Frontend Development

React Fundamentals: Understanding Virtual DOM, JSX, and Component Architecture

This article introduces React, the Facebook‑originated JavaScript UI library, explaining its rise in popularity and core concepts—JSX syntax that compiles to React.createElement calls, the virtual DOM that efficiently batches updates, and a component architecture that separates props and state for reusable, maintainable code.

Component ArchitectureJSXReact
0 likes · 9 min read
React Fundamentals: Understanding Virtual DOM, JSX, and Component Architecture
Qunar Tech Salon
Qunar Tech Salon
Jan 18, 2017 · Frontend Development

React Performance Optimization for YIcon: Reducing Re‑renders and Boosting Speed

This article describes how the YIcon project tackled severe React performance bottlenecks—such as repeated renders, slow diffing, and inefficient key usage—by applying shouldComponentUpdate, component splitting, immutable data structures, stable keys, and production‑grade webpack optimizations, ultimately achieving an 80% speed gain.

ImmutableReactoptimization
0 likes · 9 min read
React Performance Optimization for YIcon: Reducing Re‑renders and Boosting Speed
Hujiang Technology
Hujiang Technology
Jan 10, 2017 · Frontend Development

Scaling React Applications: Containers vs Components, Feature‑Based Code Organization, CSS Modules, PostCSS Auto Reset, and Redux‑Saga

This article shares lessons learned from releasing React Boilerplate 3.0, covering the importance of front‑end scalability, the distinction between container and presentational components, feature‑based code organization, CSS Modules and PostCSS Auto Reset for style isolation, and using redux‑saga for readable, testable asynchronous flows.

CSS ModulesFrontend ArchitectureReact
0 likes · 9 min read
Scaling React Applications: Containers vs Components, Feature‑Based Code Organization, CSS Modules, PostCSS Auto Reset, and Redux‑Saga
Qunar Tech Salon
Qunar Tech Salon
Jan 5, 2017 · Mobile Development

Hy Hybrid Mobile Framework: Architecture, Philosophy, and Evolution at Qunar

The article introduces Qunar's Hy hybrid mobile framework, detailing its motivation, cross‑platform architecture, progressive component design, integration of Web and Native capabilities, evolution from Hy 1.0 to Hy 2.0 with React, and its relationship to React‑Native, highlighting how it enables fast, low‑cost mobile development.

FrameworkHybrid MobileMobile Development
0 likes · 10 min read
Hy Hybrid Mobile Framework: Architecture, Philosophy, and Evolution at Qunar
Hulu Beijing
Hulu Beijing
Dec 8, 2016 · Frontend Development

Why React & Redux Are Transforming Hulu’s Frontend Development

This article explains the fundamentals of React and Redux, compares them to traditional tools like jQuery, highlights their combined benefits for clean state management, and describes Hulu’s ongoing migration to this modern frontend stack.

ReactReduxState Management
0 likes · 5 min read
Why React & Redux Are Transforming Hulu’s Frontend Development
Hujiang Technology
Hujiang Technology
Dec 2, 2016 · Frontend Development

Best Practices for Using AJAX in React Applications

This article reviews four common approaches—Root Component, Container Component, Redux Async Actions, and Relay—for handling AJAX requests in React, explains when each method is appropriate, and warns against two anti‑patterns, helping developers choose the most suitable strategy for their project's size and architecture.

ReactReduxRelay
0 likes · 8 min read
Best Practices for Using AJAX in React Applications