BestHub
Sign in
Tagged articles
1022 articles
Page 9 of 11
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Aug 20, 2020 · Frontend Development

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

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

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

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

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

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

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

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

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

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

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

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

Understanding the Execution Timing of useEffect and useLayoutEffect in React

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

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

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

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

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

Building and Maintaining a Sustainable Frontend Component Library with React

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

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

Implementing React useState Hook from Scratch: Detailed Explanation and Code

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

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

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

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

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

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

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

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

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

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

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

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

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

AngularJavaScriptReact
0 likes · 21 min read
Unlocking the Secrets of Top Front‑End Frameworks: React, Angular, and Vue Explained
Youzan Coder
Youzan Coder
May 22, 2020 · Frontend Development

Why Does React Hooks Show Stale State? Unraveling Closures and Dependency Arrays

This article explores why React Hooks can display stale state values, comparing functional and class components, explaining closure behavior, dependency‑array mechanics, proper data‑fetching patterns, and when to replace useState with useReducer to avoid common pitfalls.

ReactState Managementfunctional components
0 likes · 13 min read
Why Does React Hooks Show Stale State? Unraveling Closures and Dependency Arrays
Node Underground
Node Underground
May 20, 2020 · Frontend Development

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

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

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

Demystifying JavaScript Continuations and the Latest Front‑End Trends

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Micro‑Frontend Implementation in Meituan Waimai Advertising Platform

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

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

Analysis of Antd Form Implementation Mechanism

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

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

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

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

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

Comprehensive Guide to Unit Testing in React and React Native Projects

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

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

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

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

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

Designing Reusable React Components for Content Lists with Integrated Advertisements

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

Ad IntegrationComponent DesignReact
0 likes · 15 min read
Designing Reusable React Components for Content Lists with Integrated Advertisements
360 Tech Engineering
360 Tech Engineering
Dec 26, 2019 · Frontend Development

Developing Chimee Video Player Plugins with React: A Practical Guide

This article explains how to develop extensible Chimee H5 video player plugins using React, covering plugin specifications, code examples, integration of React components via Context, event handling, and strategies for managing asynchronous behavior and plugin ordering.

Context APIPlugin DevelopmentReact
0 likes · 9 min read
Developing Chimee Video Player Plugins with React: A Practical Guide
Python Programming Learning Circle
Python Programming Learning Circle
Dec 24, 2019 · Frontend Development

What Shaped Frontend Development in 2019? A Comprehensive Recap

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

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

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

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

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

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

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

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

How to Write CSS Elegantly in React

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

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

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

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

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

Improving React Performance: Reducing Unnecessary Renders

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

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

5 Ways to Reuse and Extend React Component State Logic

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

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

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

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

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

Breaking the Framework Paradigm Debate

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

ImmutableMutableReact
0 likes · 9 min read
Breaking the Framework Paradigm Debate
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 DevelopmentFiberFramework
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.

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

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

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

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

ASTComponent ConversionReact
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.

ReactServerlessWeb Development
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-DropReactVue
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.

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

Data visualizationOLAPReact
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.

AngularPackage DownloadsReact
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.

AngularICU MessageFormatReact
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.

Reactapi-designdebugging
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 SplittingComponentReact
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.

GenericsReactTypeScript
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 ModeJavaScriptReact
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.

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

JavaScript optimizationReactWeb Performance
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.

ReactState ManagementTodo App
0 likes · 12 min read
React vs Vue: Building the Same ToDo App – Key Differences Explained
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 HandlingJavaScriptReact
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.

JavaScriptReactReference Equality
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