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.
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.
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.
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.
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.
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.
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.
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.
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.
This tutorial explains how to use Next.js to create server‑rendered React applications that improve SEO and reduce initial load time, covering environment setup, page‑based routing, dynamic routes with Express, data fetching, prefetching, and hydration techniques.
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.
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.
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.
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.
This article introduces the ANU mini‑program framework, explains why WeChat mini‑programs need transpilation tools, compares existing solutions, details ANU's features and limitations, and provides step‑by‑step instructions with code examples for building and running a React‑like mini‑program project.
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.
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.
This article explains how the render props pattern solves the flexibility and prop‑passing limitations of earlier React design approaches, illustrating the concept with JSX examples, Babel compilation details, and comparisons to props.children for creating highly reusable and readable 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.
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.
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.
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.
Learn how to configure VSCode user snippets for React, reducing repetitive import statements and boilerplate by defining reusable code templates, with clear step‑by‑step instructions and practical tips for faster component creation.
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.
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.
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.
The article explains how to render custom components in WeChat mini‑programs by compiling React render methods into template classes, using dynamic templates, wx:for directives, and helper functions like miniCreateClass to bridge the gap between React and the mini‑program environment.
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.
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.
This article examines the evolution of WeChat Mini Programs, the challenges they pose for front‑end developers, and how the Taro framework leverages JSX compilation, Babel‑based AST transformations, and cross‑platform component standards to enable React‑style development across multiple platforms.
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.
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.
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.
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.
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.
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.
This article explains how React 16 rewrote its server‑side rendering layer to support four rendering modes—including string and streaming approaches—by introducing the ReactPartialRenderer and ReactMarkupReadableStream classes, and details the process of converting virtual DOM trees into HTML strings.
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.
This guide walks through creating a React app with create‑react‑app, adding TypeScript, customizing the build via eject, forked scripts, or react‑app‑rewired, configuring environment files, setting up proxy and host settings, and handling CDN and port requirements for production deployments.
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.
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.
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.
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.
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.
This article explains how React decides when to re‑render components, why default behavior can be costly, and how developers can use state changes and the shouldComponentUpdate method to control rendering and improve performance.
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.
The 2017 JavaScript State of the Nation survey of 23,000 developers uncovers the rise of React, shifting roles of Angular and Vue, salary‑driven technology choices, the surge of GraphQL and TypeScript, and how JavaScript is expanding far beyond the browser into back‑end and IoT.
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.
Explore the 2018 JavaScript landscape, from Vue’s rising popularity and React’s Next.js ecosystem to emerging tools like GraphQL, Storybook, and WebAssembly, while uncovering essential learning resources and why developers should adopt these trends to stay competitive.
This article presents a detailed case study of Hootsuite's serverless backend built on AWS Lambda, covering the motivation, design, AWS services used, constraints, authentication, full architecture, frontend integration, development workflow, advantages, and future plans.
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.
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.
This article shares practical strategies for designing, dividing, and managing React components in a large‑scale CRM system, covering component hierarchy, state and props handling, data communication, common pitfalls, and best practices to improve maintainability and performance.
At the end of 2017, this guide examines the strengths, weaknesses, and future prospects of major front‑end frameworks—including Angular 2+, React + Redux, Vue.js, Dojo 2, Ember.js, and Aurelia—offering practical advice on when to adopt each based on team size, project needs, and ecosystem support.
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.
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.
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.
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.
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.
This article walks through the three phases of the React component lifecycle—initialization, running, and destruction—detailing each hook function, their purposes, and performance tips, and provides a complete code example to illustrate their usage.
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.
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.
This article explains how JavaScript arrow functions can make code more concise and simplify handling of the this keyword, covering syntax differences, implicit returns, logging, object returns, practical examples with map, promises, and refactoring techniques for modern web development.
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.
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.
This article details the architecture and platformization of JD's Tongtian Tower system, describing its content and rendering management platforms, the integration of JDReact for full-page and floor-level customization, the build and deployment workflow, and future technical directions for front‑end developers.
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.
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.
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.
This article explains the shallow comparison used by React's PureComponent, details the implementation of shallowEqual and Object.is, and shows why such a shallow check cannot correctly compare nested objects, providing code examples and clear explanations.
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.
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.
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.
This article provides a detailed walkthrough of building controlled form components in React.js, covering text, number, checkbox, radio, textarea, and select inputs, along with state management, form submission, clearing, validation, and full source code examples.
The article examines why the author favors React for server‑side rendering despite the rise of lightweight libraries like Preact and Inferno, discussing checksum handling, compatibility, maintainability, future roadmap, and presenting benchmark data that shows React@16’s performance gains.
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.
Over the past two weeks I built a small backend management system using React, React‑Router, MobX, Webpack, Axios, ECharts and Ant Design, and share practical insights on component loading, routing upgrades, state management choices, bundling pitfalls, and UI library usage.
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.
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.
This article explains React's lifecycle phases, various ways components can communicate—including parent‑child calls and Flux‑based pub/sub—and demonstrates practical implementations such as infinite scrolling and comment updates, helping developers build robust front‑end applications.
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.
This article explains what higher-order components are, how they relate to higher-order functions, and provides a step‑by‑step guide with code examples to extract shared state and lifecycle logic in React components.
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.
This guide walks beginners through installing Node, npm, a suitable terminal, and create‑react‑app, then demonstrates creating a project, exploring its structure, and using ES6 module syntax (import, export) to build and run a simple React‑ready environment.
This article explains how React renders views, introduces Flux as a unified state‑management architecture, and compares Redux's single‑store, reducer‑based approach, highlighting their core components, data flow, and practical differences for modern frontend development.
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.
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.
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.
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.
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.
This article details the motivation, core requirements, competitor analysis, design choices, and performance optimizations behind Qreact—a lightweight, drop‑in replacement for React aimed at reducing bundle size and improving runtime efficiency for mobile web applications.
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.
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.
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.
In a playful interview, React explains its origins at Facebook, the virtual DOM mechanism, component design principles, performance optimizations, and real‑world usage, while code examples illustrate how the library simplifies UI development for modern web applications.
This article details the transformation of the HULK private‑cloud platform's front‑end from a PHP‑based MVC system to a modern React SPA using webpack, Redux, SASS and code‑splitting, highlighting the motivations, architectural decisions, and performance benefits of the 3.0 overhaul.
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.
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.
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.
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.
