BestHub
Sign in
Tagged articles
1029 articles
Page 7 of 11
Ctrip Technology
Ctrip Technology
Feb 10, 2022 · Frontend Development

Web Performance Optimization Practices for Trip.com Flight Site

This article presents a comprehensive guide to improving web performance for Trip.com’s flight pages, covering user‑centric metrics, measurement methods, and practical optimization techniques such as package size reduction, resource hints, lazy loading, server‑side rendering, long‑task mitigation, and React‑specific improvements, ultimately raising the PageSpeed score from around 30 to over 80.

Frontend OptimizationLighthouseReAct
0 likes · 20 min read
Web Performance Optimization Practices for Trip.com Flight Site
Sohu Tech Products
Sohu Tech Products
Feb 9, 2022 · Frontend Development

Creating a Winter Olympics 3D Scene with Three.js and React

This article demonstrates how to build an interactive 3D Winter Olympics themed webpage using Three.js and React, covering resource import, scene setup, lighting, model loading, custom materials, particle effects, camera controls, and animation techniques.

3D graphicsFrontend DevelopmentReAct
0 likes · 18 min read
Creating a Winter Olympics 3D Scene with Three.js and React
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Feb 8, 2022 · Frontend Development

Design and Implementation of a Simple Canvas Layout Engine for Front-End Development

This article presents a lightweight, framework-agnostic canvas layout engine that parses CSS-like styles, performs document-flow layout, renders via a depth-first canvas draw, supports interactive events, works across web and mini-program environments, and demonstrates its API, debugging tools, performance results, and future extensions.

CanvasJavaScriptLayout Engine
0 likes · 25 min read
Design and Implementation of a Simple Canvas Layout Engine for Front-End Development
IT Services Circle
IT Services Circle
Feb 6, 2022 · Frontend Development

2021 JavaScript Ecosystem Highlights: Major Releases and Updates

The article reviews the most significant JavaScript ecosystem events of 2021, covering front‑end tools like Snowpack, Vite, React, Vue, back‑end updates such as Node.js 16 and npm 7, new language features, and notable deprecations, providing concise summaries and code examples.

JavaScriptNode.jsReAct
0 likes · 19 min read
2021 JavaScript Ecosystem Highlights: Major Releases and Updates
IT Services Circle
IT Services Circle
Feb 3, 2022 · Frontend Development

Best Practices for Conditional Rendering in React JSX

This article explains common pitfalls when using conditional expressions in React JSX—such as rendering zero, operator precedence, ternary nesting, and using JSX as a condition—and provides clear recommendations like explicit boolean checks, parentheses, key usage, and avoiding overly complex ternary operators.

Best PracticesConditional RenderingJSX
0 likes · 8 min read
Best Practices for Conditional Rendering in React JSX
Programmer DD
Programmer DD
Jan 25, 2022 · Frontend Development

Boost Your React Workflow with Mometa: A Low‑Code Visual Editor

Mometa, the top‑ranked GitHub trend this week, is a low‑code, meta‑programming tool that offers visual code editing, customizable material libraries, React support, and seamless integration with existing projects, enabling developers to quickly prototype, edit, and transition between visual and code modes.

FrontendLow‑codeReAct
0 likes · 6 min read
Boost Your React Workflow with Mometa: A Low‑Code Visual Editor
Java Backend Technology
Java Backend Technology
Jan 22, 2022 · Frontend Development

9 Stunning Open‑Source Admin Templates to Accelerate Your Backend UI Development

Discover nine high‑quality, open‑source admin dashboard templates—including vue‑element‑admin, D2Admin, Vue‑admin‑better, AdminLTE, Ant Design Pro, Tabler, ngx‑admin, Gentelella, and blur‑admin—each with brief descriptions, key features, and links to demos and repositories, helping developers quickly build attractive backend interfaces.

AngularOpen SourceReAct
0 likes · 5 min read
9 Stunning Open‑Source Admin Templates to Accelerate Your Backend UI Development
Tencent Cloud Developer
Tencent Cloud Developer
Jan 18, 2022 · Frontend Development

Writing Reusable Code: Principles and Practices for Front-End Development

Writing reusable front‑end code means identifying and extracting repeatable UI components, centralized API request/response handling, common business‑flow logic, shared state management, and utility functions into separate, modular files or libraries, which reduces duplication, eases maintenance, and improves scalability across similar scenarios.

FrontendHooksReAct
0 likes · 7 min read
Writing Reusable Code: Principles and Practices for Front-End Development
DeWu Technology
DeWu Technology
Jan 17, 2022 · Frontend Development

Figma + GitLab CI: A Modern Icon Delivery Workflow

This article outlines a modern icon delivery workflow that moves from static image resources to a Figma‑driven process, using a custom Figma plugin and GitLab CI to fetch, optimize with SVGO, and automatically generate React/Vue SVG component libraries, publish npm packages, and deploy documentation.

Component LibraryFigmaGitLab CI
0 likes · 9 min read
Figma + GitLab CI: A Modern Icon Delivery Workflow
Taobao Frontend Technology
Taobao Frontend Technology
Jan 17, 2022 · Frontend Development

How to Slash IDE Lag: Proven React Performance Hacks for OpenSumi

This article explores practical performance optimization techniques for the OpenSumi IDE, covering React re‑render reduction, component memoization, menu caching, TreeView prop pruning, icon handling, and panel resize event management, demonstrating how targeted code changes can dramatically improve UI responsiveness.

FrontendIDEOpenSumi
0 likes · 14 min read
How to Slash IDE Lag: Proven React Performance Hacks for OpenSumi
21CTO
21CTO
Jan 16, 2022 · Frontend Development

Top Front-End Development Trends to Watch in 2022

This article explores the most popular front‑end development trends for 2022, covering JAMstack, progressive web apps, JavaScript dominance, single‑page sites, AI chatbots, Gatsby, and React, while explaining why these technologies are reshaping web user experiences.

2022 trendsGatsbyJamstack
0 likes · 7 min read
Top Front-End Development Trends to Watch in 2022
ELab Team
ELab Team
Jan 14, 2022 · Frontend Development

Mastering HTML5 Drag-and-Drop: Native Implementation, Events, and React Alternatives

This article explains how to implement native HTML5 drag‑and‑drop, details the required draggable attribute, describes all related events, shows a simple JavaScript demo, discusses common pitfalls such as repeated ondragover and ghosting, and compares popular React libraries for drag‑and‑drop.

Drag-and-DropHTML5JavaScript
0 likes · 12 min read
Mastering HTML5 Drag-and-Drop: Native Implementation, Events, and React Alternatives
ByteDance ADFE Team
ByteDance ADFE Team
Jan 12, 2022 · Frontend Development

Designing and Publishing Module Packages in a Monorepo: Best Practices for Shared Config, UI Libraries, and Native Modules

This article explains how to design, build, and publish reusable module packages—including shared configuration libraries, UI component libraries, and native language modules—within a monorepo, covering package.json configuration, multiple entry formats (ESM, CJS, UMD), tooling choices, and publishing workflows for both frontend and Node.js projects.

Node.jsReActRollup
0 likes · 19 min read
Designing and Publishing Module Packages in a Monorepo: Best Practices for Shared Config, UI Libraries, and Native Modules
Beike Product & Technology
Beike Product & Technology
Jan 7, 2022 · Frontend Development

Understanding React Hooks: Principles, Implementation, and Usage

This article explains why React introduced Hooks, how they solve state‑reuse and component‑complexity problems, details the internal fiber architecture behind useState, useReducer, useEffect, useLayoutEffect, useCallback and useMemo, and provides practical code examples for each.

HooksJavaScriptReAct
0 likes · 18 min read
Understanding React Hooks: Principles, Implementation, and Usage
ByteDance ADFE Team
ByteDance ADFE Team
Dec 30, 2021 · Frontend Development

Understanding Immer.js: Immutable Data Handling in JavaScript and React

Immer.js, created by the author of MobX, provides a lightweight immutable data library for JavaScript using ES6 proxies, offering simple APIs and seamless integration with React’s state management, while comparing its concepts, implementation details, and trade‑offs against Immutable.js and manual cloning techniques.

Immer.jsImmutable DataJavaScript
0 likes · 18 min read
Understanding Immer.js: Immutable Data Handling in JavaScript and React
Beike Product & Technology
Beike Product & Technology
Dec 23, 2021 · Frontend Development

How React Fiber’s Time‑Slicing Makes UI Updates Seamlessly Smooth

An in‑depth walkthrough of React’s Fiber architecture reveals how time‑slicing and a linked‑list Fiber tree replace the stack‑based reconciler of React 15, delivering smoother UI updates, priority‑based task scheduling, and interruptible rendering, complete with code examples, performance comparisons, and the underlying event‑loop mechanics.

FiberFrontendPerformance
0 likes · 12 min read
How React Fiber’s Time‑Slicing Makes UI Updates Seamlessly Smooth
JD Retail Technology
JD Retail Technology
Dec 21, 2021 · Frontend Development

Introducing DripForm: An Open‑Source React Dynamic Form Solution

DripForm is an open‑source React form component from JD Retail iPaaS that offers configurable rendering, validation, and visual editing, enabling developers to efficiently build complex, dynamic forms with unified front‑end/back‑end validation, extensibility, and low‑code visual generation.

Dynamic FormsFrontendOpen Source
0 likes · 11 min read
Introducing DripForm: An Open‑Source React Dynamic Form Solution
Taobao Frontend Technology
Taobao Frontend Technology
Dec 13, 2021 · Frontend Development

What’s New in 2024? Explore ahooks 3.0, Tailwind CSS 3.0, Fiber, Happy DOM & More

This roundup introduces the latest releases of several open‑source projects—including ahooks 3.0 with full SSR support, Tailwind CSS v3.0’s new runtime engine, the Go‑based Fiber web framework, Happy DOM’s performance benchmarks, the low‑code front‑end framework amis, and the multi‑framework compiler Mitosis—providing concise overviews and key features for each.

FiberGoHappy DOM
0 likes · 9 min read
What’s New in 2024? Explore ahooks 3.0, Tailwind CSS 3.0, Fiber, Happy DOM & More
Ctrip Technology
Ctrip Technology
Dec 9, 2021 · Frontend Development

Canvas Animation in React: Principles, Implementation, and Performance Optimization

This article explains the fundamentals of web animation, compares animation techniques such as CSS, SVG, and Canvas, demonstrates how to create frame‑based Canvas animations with JavaScript and Konva, shows how to integrate them into React (including react‑konva), and provides performance‑optimisation strategies for smoother rendering.

AnimationCanvasKonva
0 likes · 19 min read
Canvas Animation in React: Principles, Implementation, and Performance Optimization
Sohu Tech Products
Sohu Tech Products
Dec 8, 2021 · Frontend Development

Integrating Rust WebAssembly into a React Application: A Step‑by‑Step Demo

This tutorial walks through building a simple React project, setting up Rust with Cargo and rustup, compiling Rust to WebAssembly using wasm‑bindgen and wasm‑pack, and finally importing the generated Wasm module into React components to demonstrate seamless Rust‑powered frontend functionality.

Frontend DevelopmentReActRust
0 likes · 13 min read
Integrating Rust WebAssembly into a React Application: A Step‑by‑Step Demo
Java Interview Crash Guide
Java Interview Crash Guide
Dec 6, 2021 · Frontend Development

How I Modernized a Legacy Delphi Warehouse System with React and .NET Core

This article recounts the complete redesign of a 2500‑person factory's Delphi‑based supply‑chain system, detailing the shift to a front‑end/back‑end separated architecture using React, Ant Design, and .NET Core 3.1, while addressing data consistency, rounding issues, UI habits, printing, and deployment challenges.

.NET CoreFrontend DevelopmentReAct
0 likes · 11 min read
How I Modernized a Legacy Delphi Warehouse System with React and .NET Core
Programmer DD
Programmer DD
Dec 4, 2021 · Frontend Development

Boost Your UI with use-gesture: Simple React & Vanilla JS Gestures

This article introduces the use-gesture library, a lightweight React and vanilla JavaScript tool for enriching mouse and touch interactions, explains installation via Yarn or npm, demonstrates various gesture hooks with code examples, and showcases visual effects through animated demos.

Frontend DevelopmentJavaScriptReAct
0 likes · 4 min read
Boost Your UI with use-gesture: Simple React & Vanilla JS Gestures
macrozheng
macrozheng
Nov 19, 2021 · Databases

Discover chiner: A Modern Open‑Source Database Design Tool

This article introduces chiner, an open‑source, cross‑platform database design tool built with React, Electron, and Java, compares it with PowerDesigner, walks through installation, core concepts, table and relationship management, and shows import/export capabilities for efficient schema development.

ElectronReActsql
0 likes · 8 min read
Discover chiner: A Modern Open‑Source Database Design Tool
Architecture Digest
Architecture Digest
Nov 16, 2021 · Frontend Development

Deploying a React Frontend to a Private Server Using Git Hooks and Nginx

This guide explains how to efficiently deploy a React project to a private server by describing two CI/CD approaches—deploying compiled files or the source code—setting up a bare Git repository with a post‑receive hook, configuring Nginx for static serving, and pushing code from the client to trigger automatic build and deployment.

ReActci/cddeployment
0 likes · 8 min read
Deploying a React Frontend to a Private Server Using Git Hooks and Nginx
MaGe Linux Operations
MaGe Linux Operations
Nov 15, 2021 · Backend Development

Building a Django WebShell with WebSockets, ASGI, and Paramiko

This guide walks through creating a WebShell that lets a React front‑end control a remote virtual machine via Django‑based WebSocket services, covering ASGI setup, custom WebSocket handling, integration with Paramiko for SSH, and a lightweight xterm.js terminal client.

ASGIDjangoParamiko
0 likes · 11 min read
Building a Django WebShell with WebSockets, ASGI, and Paramiko
ByteFE
ByteFE
Nov 12, 2021 · Fundamentals

Hot Topics and Fundamentals in Web Development: Chrome Recorder, Webpack SplitChunks, React Fiber, Node.js, and More

This article highlights recent web development tools and concepts—including Chrome's Recorder panel, Webpack's SplitChunksPlugin, detailed analyses of React Fiber and startTransition, Node.js architecture and multi‑process techniques, as well as source‑code explorations of Fabric.js, Vue2 utilities, and Svelte implementation—providing practical insights for both frontend and backend engineers.

Backend DevelopmentFrontend DevelopmentNode.js
0 likes · 4 min read
Hot Topics and Fundamentals in Web Development: Chrome Recorder, Webpack SplitChunks, React Fiber, Node.js, and More
Beike Product & Technology
Beike Product & Technology
Nov 5, 2021 · Frontend Development

Understanding React Fiber Architecture and Diff Algorithm in React 16

This article explains the React Fiber architecture introduced in React 16, compares it with React 15, details how Fiber nodes form a tree, and walks through the source-level implementation of the Diff algorithm, including single-node and multi-node updates, with code examples and diagrams.

Diff AlgorithmFiberFrontend Development
0 likes · 17 min read
Understanding React Fiber Architecture and Diff Algorithm in React 16
Ctrip Technology
Ctrip Technology
Nov 5, 2021 · Frontend Development

Cross‑Platform Mini‑Program Development with Remax: Background, Usage, and Engineering Practices

This article examines the need for cross‑platform mini‑program frameworks, compares compile‑time and runtime solutions such as Kbone, Taro, Nanachi, Rax and Remax, demonstrates Remax installation and basic usage, and shares engineering strategies for integrating native mini‑program code and managing multi‑team projects.

ReActRemax
0 likes · 21 min read
Cross‑Platform Mini‑Program Development with Remax: Background, Usage, and Engineering Practices
Programmer DD
Programmer DD
Oct 29, 2021 · Frontend Development

Why Semi Design Copied Ant Design and How It Responded

The article explains how Douyin's Semi Design, an open‑source React UI design system, was found to contain undocumented Ant Design text, details the team's public apology, the architectural differences, license updates, and the specific components that were referenced.

Design SystemOpen SourceReAct
0 likes · 4 min read
Why Semi Design Copied Ant Design and How It Responded
21CTO
21CTO
Oct 28, 2021 · Frontend Development

What’s Behind Semi Design’s Open‑Source Release and Its Ant Design Controversy?

Semi Design, ByteDance’s modern React UI library, was open‑sourced under MIT, later faced criticism for copying Ant Design documentation, prompting an apology and subsequent license updates that added proper attributions for referenced code and design inspirations, highlighting its distinct architecture and extensive component suite.

Design SystemFrontendReAct
0 likes · 4 min read
What’s Behind Semi Design’s Open‑Source Release and Its Ant Design Controversy?
Aotu Lab
Aotu Lab
Oct 28, 2021 · Fundamentals

Exploring HarmonyOS ACE UI, React useEffect Pitfalls, Three.js 3D, and AI Basics

This issue presents deep dives into HarmonyOS ACE UI architecture, common infinite-loop pitfalls of React’s useEffect hook, a Three.js tutorial for building a 3D room, an introductory guide to graph neural networks, and a fundamentals‑focused machine‑learning primer, offering practical insights across front‑end, graphics, and AI domains.

AIHarmonyOSReAct
0 likes · 6 min read
Exploring HarmonyOS ACE UI, React useEffect Pitfalls, Three.js 3D, and AI Basics
Taobao Frontend Technology
Taobao Frontend Technology
Oct 25, 2021 · Frontend Development

What’s New in Node.js, VS Code, React, and Emerging Open‑Source Tools?

This roundup highlights the latest Node.js v17 release with OpenSSL 3.0 support, the launch of VS Code’s browser version, a revamped React documentation site, and several noteworthy open‑source projects such as ts‑morpher, @swc/jest, and use‑context‑selector, plus an in‑depth look at Naive UI’s development process.

Frontend DevelopmentNode.jsOpen Source
0 likes · 9 min read
What’s New in Node.js, VS Code, React, and Emerging Open‑Source Tools?
政采云技术
政采云技术
Oct 19, 2021 · Frontend Development

Building a Chrome Extension for Quick Account Switching and Management

This article explains how to design and implement a Chrome extension using React, Webpack, and JavaScript to store multiple login accounts, tag them, isolate environments, and provide one‑click login directly from the browser and VS Code, improving efficiency for testers, developers, and product teams.

Account ManagementChrome ExtensionReAct
0 likes · 13 min read
Building a Chrome Extension for Quick Account Switching and Management
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Oct 19, 2021 · Frontend Development

Implementing the Fancy-Components Wave Filter Web Component Across Frontend Frameworks

This article explains how to replace a heavy 78 KB GIF loading animation with the lightweight Fancy-Components wave‑filter web component, covering its installation, configuration, and usage in plain HTML, React, Vue 2, Vue 3, Vue‑CLI, Vite, and custom attribute options such as color, duration, amplitude, delay, mode, and interval.

FrontendJavaScriptReAct
0 likes · 27 min read
Implementing the Fancy-Components Wave Filter Web Component Across Frontend Frameworks
Fulu Network R&D Team
Fulu Network R&D Team
Oct 18, 2021 · Frontend Development

Implementing mini-async-dva: Adding async/await Support to DVA

This article examines the limitations of the original DVA framework, proposes a mini‑async‑dva fork that adds async/await support to model effects, and details its implementation—including store management, dynamic model registration, and asynchronous component loading—while providing full code comparisons.

DVAJavaScriptReAct
0 likes · 8 min read
Implementing mini-async-dva: Adding async/await Support to DVA
KooFE Frontend Team
KooFE Frontend Team
Oct 17, 2021 · Frontend Development

Why React Hooks Were Created and How to Choose Between ahooks and react-use

This article explains why React introduced Hooks, compares the official Hooks with popular third‑party libraries ahooks and react‑use, lists their most useful Hooks, shows how to install them, and provides a custom Hook example for displaying error modals, helping developers write cleaner, more reusable functional components.

FrontendHooksJavaScript
0 likes · 16 min read
Why React Hooks Were Created and How to Choose Between ahooks and react-use
ELab Team
ELab Team
Oct 15, 2021 · Frontend Development

Mastering Redux: Core Principles, Architecture, and Real-World Implementation

This article provides a comprehensive overview of Redux, covering its design philosophy, core components, API implementation, React bindings, and practical code examples to help developers understand and apply state management effectively in modern front‑end applications.

FrontendJavaScriptReAct
0 likes · 18 min read
Mastering Redux: Core Principles, Architecture, and Real-World Implementation
TikTok Frontend Technology Team
TikTok Frontend Technology Team
Oct 15, 2021 · Frontend Development

React Runtime Optimization: From React 15 to 18 – Architecture, Scheduling, and New Features

This article provides a comprehensive overview of React's runtime optimization strategies across versions 15 to 18, explaining the evolution of its architecture, the introduction of Fiber, concurrent rendering, scheduling, priority lanes, and new APIs such as Suspense, startTransition, and useDeferredValue, while including detailed code excerpts and practical insights for developers.

Concurrent ModeFiberHooks
0 likes · 35 min read
React Runtime Optimization: From React 15 to 18 – Architecture, Scheduling, and New Features
Taobao Frontend Technology
Taobao Frontend Technology
Oct 11, 2021 · Frontend Development

Top Frontend Updates: ESLint 8 Release, New React Tooling Team, Build Tools & Dark Mode Guide

This roundup covers ESLint 8’s full ES2022 support, React’s new Developer Tooling team, several open‑source build tools such as unbuild, tsup, refine and VS Code’s Webview UI Toolkit, plus featured articles on a TypeScript‑based autonomous parking algorithm and a comprehensive guide to implementing Dark Mode on the web.

Dark ModeReActbuild tools
0 likes · 5 min read
Top Frontend Updates: ESLint 8 Release, New React Tooling Team, Build Tools & Dark Mode Guide
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Sep 26, 2021 · Frontend Development

Understanding Update Granularity in Major Frontend Frameworks: Svelte, React, and Vue

This article explains the component‑based architecture of modern frontend frameworks, compares their three update granularities—node‑level, component‑level, and application‑level—and illustrates the differences with Svelte, React, and Vue, while also including a brief job‑seeking note from the author.

ComponentizationFrontendReAct
0 likes · 9 min read
Understanding Update Granularity in Major Frontend Frameworks: Svelte, React, and Vue
DeWu Technology
DeWu Technology
Sep 24, 2021 · Frontend Development

Canceling Duplicate HTTP Requests in Front-End Development

The article explains how front‑end developers can prevent duplicate or stale HTTP calls by identifying identical requests with a unique key, then canceling them using Axios’s CancelToken or Fetch’s AbortController—integrated via React hooks, Axios interceptors, and route‑change cleanup.

HTTPJavaScriptReAct
0 likes · 10 min read
Canceling Duplicate HTTP Requests in Front-End Development
ByteFE
ByteFE
Sep 22, 2021 · Frontend Development

How React’s Runtime Optimizations Evolved from 15 to 18 – A Deep Technical Dive

This article walks through the evolution of React’s runtime architecture from version 15 to 18, explaining key concepts such as Fiber, Scheduler, priority lanes, concurrent mode, and new APIs like startTransition and useDeferredValue, while providing concrete code examples and visual diagrams.

Concurrent ModeFiberReAct
0 likes · 36 min read
How React’s Runtime Optimizations Evolved from 15 to 18 – A Deep Technical Dive
政采云技术
政采云技术
Sep 15, 2021 · Frontend Development

Using React Profiler for Performance Analysis and Optimization

This article explains how to install and use the React Profiler tool to identify performance bottlenecks in React applications, demonstrates analysis of render phases with example code, and discusses optimization techniques such as React.memo, PureComponent, shouldComponentUpdate, and hooks to reduce unnecessary re‑renders.

HooksPerformanceReAct
0 likes · 12 min read
Using React Profiler for Performance Analysis and Optimization
ByteFE
ByteFE
Sep 15, 2021 · Frontend Development

Why DDD Is Needed and How to Apply Domain-Driven Design in Front‑End Projects

The article explains the need for Domain‑Driven Design (DDD) to manage growing complexity caused by frequent requirement changes, describes DDD fundamentals such as bounded contexts and event storming, and shows how to structure React front‑end code, actions, reducers, and routing by organizing features to reduce coupling and improve maintainability.

DDDDomain‑Driven DesignEvent Storming
0 likes · 11 min read
Why DDD Is Needed and How to Apply Domain-Driven Design in Front‑End Projects
ELab Team
ELab Team
Sep 10, 2021 · Frontend Development

How Browser Rendering and React Fiber Work Together to Prevent Frame Drops

This article explains the fundamentals of browser rendering, frame lifecycle, and dropped‑frame issues, then demonstrates how React Fiber and the requestIdleCallback API can be used to split heavy tasks, improve concurrency, and keep UI interactions smooth.

Browser RenderingConcurrencyFiber
0 likes · 22 min read
How Browser Rendering and React Fiber Work Together to Prevent Frame Drops
ByteFE
ByteFE
Sep 9, 2021 · Frontend Development

How to Build a Canvas‑Based Image Cropping Hook in React

This article explains how to create a reusable React hook that uses two canvas layers to let users select a region on an image, shows a gray‑out overlay with a border during selection, and returns the cropped area as a base64 PNG, including full implementation details and future enhancements.

CanvasFrontendHook
0 likes · 12 min read
How to Build a Canvas‑Based Image Cropping Hook in React
JD Retail Technology
JD Retail Technology
Sep 6, 2021 · Frontend Development

Flexible Template Solution for Tongtian Tower: Architecture and Implementation across CMS, H5, and Native Clients

The article introduces the flexible template solution for the Tongtian Tower marketing system, detailing its background, design principles, CMS architecture, flexible canvas implementation, H5 rendering strategy, native client SDK, technical choices, and the achieved efficiency gains across multiple business scenarios.

CMSFrontend ArchitectureH5
0 likes · 13 min read
Flexible Template Solution for Tongtian Tower: Architecture and Implementation across CMS, H5, and Native Clients
ByteDance Web Infra
ByteDance Web Infra
Sep 3, 2021 · Frontend Development

Understanding XState Finite State Machines and Statecharts for Frontend Development

This article explains the challenges of managing UI state in modern web applications, demonstrates how incremental code examples lead to complex and coupled logic, and introduces XState finite state machines and statecharts as a structured solution with practical JavaScript examples and ecosystem overview.

Finite State MachineFrontendJavaScript
0 likes · 9 min read
Understanding XState Finite State Machines and Statecharts for Frontend Development
Taobao Frontend Technology
Taobao Frontend Technology
Sep 2, 2021 · Frontend Development

Why Front-End Developers Must Master Functional Programming and React Hooks

This article explores the history and principles of functional programming, explains why it has become essential for front‑end developers, demonstrates how React class components can be replaced by functional components using hooks, and provides practical examples of pure functions, functors, monads, memoization, and related design patterns in JavaScript.

Functional ProgrammingJavaScriptReAct
0 likes · 21 min read
Why Front-End Developers Must Master Functional Programming and React Hooks
Alibaba Terminal Technology
Alibaba Terminal Technology
Sep 1, 2021 · Frontend Development

Why Front‑End Developers Must Master Functional Programming and React Hooks

This article explores the history and resurgence of functional programming, explains why it is essential for modern front‑end development, demonstrates class and function components in React, introduces hooks, functors, monads, partial application, memoization, and provides practical code examples for building robust, side‑effect‑free UI logic.

Functional ProgrammingJavaScriptMonad
0 likes · 19 min read
Why Front‑End Developers Must Master Functional Programming and React Hooks
ByteDance Terminal Technology
ByteDance Terminal Technology
Aug 31, 2021 · Frontend Development

ByteDance Modern Web Development Survey Report (2021)

The 2021 ByteDance Modern Web Development survey of 612 developers reveals dominant use of ES6+, TypeScript, Vue and React, widespread adoption of CSS preprocessors, varied backend preferences, and preferred tooling such as Webpack, VSCode, and Prettier, highlighting current trends and gaps in the Chinese front‑end ecosystem.

FrontendJavaScriptReAct
0 likes · 10 min read
ByteDance Modern Web Development Survey Report (2021)
21CTO
21CTO
Aug 28, 2021 · Frontend Development

Explore a Browser‑Based Windows 10 Clone Built with React – Features & Setup

This article introduces a React‑powered project that recreates a simplified Windows 10 desktop experience in the browser, detailing its multi‑user support, persistent file system using LocalStorage and IndexedDB, core features, missing components, setup instructions, and the open‑source libraries it relies on.

Frontend DevelopmentIndexedDBReAct
0 likes · 5 min read
Explore a Browser‑Based Windows 10 Clone Built with React – Features & Setup
JD Tech
JD Tech
Aug 27, 2021 · Frontend Development

Practical Guide to Using Taro for Multi‑Platform Mini‑Program Development

This article introduces the Taro framework, explains why it simplifies multi‑platform mini‑program development, compares it with alternatives, details its design and compilation principles, provides code examples and project setup steps, and shares best practices for platform‑specific adaptations.

Code CompilationMulti‑Platform DevelopmentReAct
0 likes · 17 min read
Practical Guide to Using Taro for Multi‑Platform Mini‑Program Development
ByteFE
ByteFE
Aug 26, 2021 · Frontend Development

Why React Keys Matter: The Hidden Bug in Dynamic Forms

This article explains why React keys are crucial when rendering lists, demonstrating through a dynamic form example how using array indices as keys can cause bugs when items are added or deleted.

Dynamic FormsKEYSReAct
0 likes · 6 min read
Why React Keys Matter: The Hidden Bug in Dynamic Forms
php Courses
php Courses
Aug 26, 2021 · Frontend Development

Popular Tools for Documenting and Sharing React Components

This article introduces several widely used frontend tools—including Bit, Storybook, Styleguidist, CodeSandbox, StackBlitz, Docz, MDX‑docs, and React Docgen—that help developers document, visualize, share, and collaborate on reusable React components efficiently.

BitComponent DocumentationReAct
0 likes · 7 min read
Popular Tools for Documenting and Sharing React Components
ELab Team
ELab Team
Aug 25, 2021 · Frontend Development

Master VS Code Extension Development: Electron Core & Webview Communication

This guide walks you through the fundamentals of VS Code extension development, covering Electron’s core technologies, the architecture of main and renderer processes, command registration, creating Webview panels with React and Webpack, and implementing robust two‑way communication between the Webview and the extension’s Node side.

Extension DevelopmentNode.jsReAct
0 likes · 14 min read
Master VS Code Extension Development: Electron Core & Webview Communication
GrowingIO Tech Team
GrowingIO Tech Team
Aug 19, 2021 · Frontend Development

Choosing the Right React Testing Tool: Jest vs Enzyme vs RTL

This article compares React component testing approaches, explains the difference between unit testing and end‑to‑end testing, evaluates popular tools such as Jest, Enzyme, and React Testing Library, and provides practical code examples, snapshot testing tips, and integration with Storybook.

EnzymeJestReAct
0 likes · 12 min read
Choosing the Right React Testing Tool: Jest vs Enzyme vs RTL
KooFE Frontend Team
KooFE Frontend Team
Aug 19, 2021 · Frontend Development

How React 18 Changes Suspense Behavior: What Developers Need to Know

This article explains the key differences between Legacy Suspense and Concurrent Suspense in React 18, covering how sibling components are handled, ref timing outside Suspense boundaries, and the impact on rendering and effects, helping developers adapt their code for the new model.

Concurrent ReactFrontendJavaScript
0 likes · 8 min read
How React 18 Changes Suspense Behavior: What Developers Need to Know
KooFE Frontend Team
KooFE Frontend Team
Aug 16, 2021 · Frontend Development

How React 18’s startTransition Improves UI Responsiveness

React 18 introduces the startTransition API, letting developers label non‑urgent updates as transitions so urgent interactions stay fast, outdated renders are discarded, and UI remains responsive even during heavy rendering or slow network operations.

Concurrent RenderingFrontend DevelopmentReAct
0 likes · 9 min read
How React 18’s startTransition Improves UI Responsiveness
ByteFE
ByteFE
Aug 14, 2021 · Frontend Development

Interview with Dan Abramov on React Server Components, Vue Comparison, and Frontend Architecture

In this extensive interview, Dan Abramov discusses the purpose and advantages of React Server Components, compares React with Vue, explains type‑checking choices, addresses emerging frameworks, rendering strategies, React's role as a library versus a system, and shares advice on learning, maintaining, and staying passionate about React development.

FrontendNext.jsReAct
0 likes · 29 min read
Interview with Dan Abramov on React Server Components, Vue Comparison, and Frontend Architecture
ByteFE
ByteFE
Aug 12, 2021 · Frontend Development

How JavaScript’s Single Thread Handles Async and What startTransition Changes

Although JavaScript runs on a single thread, it can handle asynchronous operations through mechanisms like setTimeout, and React 18’s startTransition lets developers separate urgent UI updates from deferred work, improving responsiveness by scheduling non‑urgent tasks after urgent ones complete.

AsyncFrontendJavaScript
0 likes · 6 min read
How JavaScript’s Single Thread Handles Async and What startTransition Changes
KooFE Frontend Team
KooFE Frontend Team
Aug 11, 2021 · Frontend Development

How to Make React Effects Work Correctly in Strict Mode

This article explains how React's Strict Effects mode double‑invokes effects and layout effects during mount and unmount, and provides practical patterns using refs, cleanup functions, and focus management to ensure components behave correctly when effects run multiple times.

FocusReActRef
0 likes · 10 min read
How to Make React Effects Work Correctly in Strict Mode
KooFE Frontend Team
KooFE Frontend Team
Aug 9, 2021 · Frontend Development

Why React 18’s Strict Effects Matter and How to Use Them

React 18 extends StrictMode with Strict Effects, causing newly mounted components to run their effects twice in development to surface hidden bugs, while offering guidance on when to enable or disable this behavior for reliable UI state management.

FrontendReActReact 18
0 likes · 6 min read
Why React 18’s Strict Effects Matter and How to Use Them
Ctrip Technology
Ctrip Technology
Aug 5, 2021 · Frontend Development

Understanding React Server Components: Concepts, Usage, and Implementation

This article explains the motivation, component types, naming conventions, runtime mechanism, streaming protocol, design goals, and practical considerations of React Server Components, illustrating how they reduce client bundle size and enable progressive server‑side rendering with code examples.

Code SplittingPerformanceReAct
0 likes · 15 min read
Understanding React Server Components: Concepts, Usage, and Implementation
Taobao Frontend Technology
Taobao Frontend Technology
Aug 4, 2021 · Frontend Development

Mastering Next.js Rendering: SSR, SSG, ISR and Hybrid Strategies

This article explains Next.js’s three pre‑rendering modes—SSR, SSG, and ISR—detailing their advantages, limitations, and how they can be combined in hybrid rendering strategies, with practical code examples and deployment considerations for modern frontend development.

Hybrid RenderingISRNext.js
0 likes · 12 min read
Mastering Next.js Rendering: SSR, SSG, ISR and Hybrid Strategies
Taobao Frontend Technology
Taobao Frontend Technology
Aug 2, 2021 · Frontend Development

Latest JavaScript Ecosystem Updates: Yarn 3.0, VS Code Debugging, and New Open‑Source Tools

This roundup covers Yarn 3.0’s breaking changes and new features, VS Code’s built‑in DevTools debugging, a React recreation of Windows 11, a type‑safe Clipanion CLI library, a Node.js CLI best‑practice guide, Sandpack, Infima, Benny benchmark tool, plus articles on Next.js pre‑rendering, micro‑frontend routing hijack, and React Native’s architecture upgrade.

CLIFrontendNode.js
0 likes · 8 min read
Latest JavaScript Ecosystem Updates: Yarn 3.0, VS Code Debugging, and New Open‑Source Tools
ByteDance ADFE Team
ByteDance ADFE Team
Jul 30, 2021 · Backend Development

Building a Large File Chunked Upload Library in TypeScript (easy-file-uploader)

This article explains the technical details of large file chunked uploading, walks through designing a custom TypeScript library for both server and client sides, provides step‑by‑step implementation code, and demonstrates a complete Koa‑React demo, offering developers a ready‑to‑use solution for efficient large file transfers.

KoaLarge File UploadNode.js
0 likes · 26 min read
Building a Large File Chunked Upload Library in TypeScript (easy-file-uploader)
21CTO
21CTO
Jul 29, 2021 · Frontend Development

Try Windows 11 in Your Browser: A Full‑Featured React Clone

This article introduces a React‑based recreation of Windows 11’s user interface, detailing its features, technology stack, and how developers can experience the new OS look without reinstalling, along with links to the source code and live demo.

FrontendReActUI clone
0 likes · 3 min read
Try Windows 11 in Your Browser: A Full‑Featured React Clone