This tutorial shows how to build a simple 2D platformer using the Alice.js H5 engine combined with React, covering scene construction with JSX components, camera scrolling, UI layering, PixiJS element types, animation formats, flex layout, keyframe hooks, event scripting, and debugging tools.
The article outlines common pain points of Ant Design—style resetting, difficult bug fixes, and heavy legacy constraints—and explains how headless UI libraries like radix‑ui and shadcn/ui provide a more flexible, lightweight, and customizable alternative for modern React front‑end development.
This article explains how to write reusable frontend code by identifying and separating reusable parts such as UI components, API calls, business workflows, shared data, and utility functions, illustrating each with React and Vue examples, code snippets, and best‑practice recommendations.
This article explains how React's useMemo hook caches expensive calculations, covers its default shallow reference comparison, and shows techniques such as JSON.stringify and lodash.isEqual for deep comparison to prevent unnecessary re‑renders.
This article explores the evolution of React’s APIs—from early mixins to higher‑order components, render props, and Hooks—examining the mental models, trade‑offs, and best practices that guide developers in building maintainable, performant front‑end applications.
This article describes a cross‑platform solution that enables a single set of Web component code to be shared across Native, React Native, and mini‑program environments by leveraging Web Components, environment‑aware builds, and bridge communication, thereby reducing development effort and accelerating release cycles.
The ECMAScript 2023 specification introduces four new non‑mutating Array methods—toSorted, toReversed, toSpliced, and with—that let developers work on copies of arrays, improving predictability, easing React state updates, and providing consistent behavior across browsers and runtimes.
Umi, an extensible enterprise‑grade frontend framework from Ant Group, offers out‑of‑the‑box routing, plugin lifecycle, dual build engines, and best‑practice integrations, with detailed quick‑start instructions and a chart example that demonstrate its capability to serve thousands of diverse applications.
The article presents a cloud‑music social live‑streaming game solution that selects PixiJS over DOM for superior performance, identifies inefficiencies in React‑DOM coupling, and introduces the custom Alice.js framework—bridging React DSL with PixiJS, extending game components, and managing resources—to streamline front‑end game scene development.
This article analyses the conceptual design, possible implementation, and performance advantages of a new React Hook that can be called inside control flow, discusses its future extensions such as usePromise, lazy subscription, and integration with concurrent mode, and provides practical code examples.
This article provides a detailed walkthrough of LocatorJS, covering how to clone the repository, set up the development environment, explore the Chrome extension code, and dissect the runtime implementation that leverages React fiber, SolidJS components, and Babel plugins to enable precise code‑to‑UI mapping.
This article explains how to tackle hard‑to‑maintain React pages by applying design patterns, splitting horizontal business logic into basic and block components, and using component composition to dramatically reduce code size while improving readability and maintainability.
The article explains the Resumable rendering concept introduced by Miško Hevery, contrasts it with traditional SSR hydration, details its implementation in the Qwik framework, compares it to React Server Components, and discusses why React has not adopted this approach despite its performance benefits.
This article presents ChatGPT’s side‑by‑side analysis of React, Vue, and Angular, detailing each framework’s strengths—such as React’s component model, Vue’s low learning curve, and Angular’s full‑stack features—and weaknesses, then advises choosing based on project scale, complexity, and developer experience.
This article explains the motivation for writing unit tests for shared React hook modules, demonstrates how an AI assistant in the Cursor IDE can generate Jest test cases from a repository, and details the step‑by‑step process of configuring the environment, fixing failing tests, and reflecting on AI's current limitations.
This interview chronicles Wang Zhiwei’s journey from a university student experimenting with GitHub to the CTO of AntV, highlighting how his 100‑line Echarts‑for‑React component launched a thriving open‑source career, shaped Ant Group’s culture, and offers practical advice for developers eager to contribute to open source.
This article explains why React's synchronous component model struggles with async data fetching, demonstrates how to cancel stale requests, introduces a refetch‑only hook, and shows how to implement caching and deduplication to make queries pure functions, while recommending React Query and SWR for production use.
This article provides a comprehensive technical comparison between Vue and React, covering their programming and view styles, component models, routing solutions, state‑management libraries, basic feature differences, reactivity mechanisms, lifecycle hooks and side‑effect handling, with illustrative code examples.
This article explains what front‑end UI frameworks are, why they are useful, and presents a detailed list of the ten most popular domestic UI frameworks in 2023—including Element Plus, Ant Design, Naive UI, View UI Plus, Vant, LayUI, Bootstrap, and WeUI—while advising developers on how to choose the right one for their projects.
At Sentry, the team documented a year‑and‑four‑month effort to replace Enzyme with React Testing Library across thousands of tests, detailing the motivations, migration strategy, performance challenges, tooling changes, and the eventual benefits such as improved accessibility, reduced reliance on React internals, and a more maintainable test suite.
This article analyzes the popularity, download trends, developer preferences, and strengths and weaknesses of Angular, React, and Vue using StackOverflow surveys, NPM download statistics, and State‑of‑JavaScript reports, concluding that React leads in 2021 with Vue and Angular following behind.
Learn how to use React refs—including useRef, forwardRef, and useImperativeHandle—to access DOM elements, create custom imperative APIs, and build interactive forms with focus and shake effects, while understanding best practices for when to employ refs versus state or props.
Learn how to effectively use React Context for state management, avoid props drilling, and eliminate redundant re‑renders by implementing a custom publish‑subscribe store, selector hooks, and performance optimizations similar to libraries like zustand.
This article explains the purpose, benefits, and implementation of React 18’s useSyncExternalStore hook, covering its role in synchronizing external state such as browser APIs, preventing UI tearing during concurrent rendering, and providing SSR support with practical code examples like useMediaQuery and useWindowSize.
This article details the user‑driven requirements, problem analysis, design choices, and technical implementation of a high‑performance, scalable data lineage visualization built with a React‑Canvas hybrid architecture to support tens of thousands of tables in a big‑data environment.
This article explains the new React "use" hook proposal, covering its background, how to integrate it with Suspense, minimal examples, promise caching, control‑flow usage, design motivations, implementation details, limitations, and the surrounding community debate.
This article explains how to avoid prop drilling in React by refactoring components to use composition and children props, providing a clear example with a navigation sidebar and discussing alternatives like Context and Redux.
This guide explains why error handling is crucial in React, compares try/catch and Error Boundary approaches, highlights their limitations, and presents Dan Abramov's clever technique for catching asynchronous errors, providing practical code examples and best‑practice recommendations.
This tutorial explains how React compound components work, showing how to share implicit state across parent and child components using Context and Hooks, with practical code examples like a Toggle component and a Reach UI Menu, to create more intuitive and elegant APIs.
The article presents a comprehensive overview of the Wenjie low-code platform, detailing its motivation, front‑end React framework, back‑end Spring Cloud micro‑services architecture, PowerJob scheduler, custom ORM, various data‑modeling and data‑processing scenarios, dashboard visualizations, monitoring and alerting features, as well as future plans and a concluding summary.
This article introduces Docker, explains its benefits, and walks through step‑by‑step optimizations—including using lightweight Alpine base images and multi‑stage builds—to reduce a React app’s Docker image size from over a gigabyte to just a few megabytes.
The 2023 tech landscape shows JavaScript retaining its top spot, AI tools like Copilot and ChatGPT reshaping development productivity, and Web3 technologies maintaining strong growth, while frontend frameworks such as React, Vue, and Svelte compete for market demand and developer satisfaction.
This weekly digest curates five essential reads—including Vue.js 2023 roadmap insights, a deep dive into React Hooks, standout ChatGPT open‑source projects, practical front‑end quality measures, and a critical look at React's evolution—offering developers fresh perspectives and actionable knowledge.
This article compares Vue’s single‑file components with React’s class and functional components, explains the shift from two‑way binding to one‑way data flow, introduces JSX and React Hooks, discusses state‑management patterns like Vuex and Redux, and provides a practical TodoList implementation.
This article walks through creating a JavaScript reactive system for front‑end development, covering the classic Object.defineProperty approach, dependency tracking, Proxy‑based deep reactivity, integration with React hooks, performance tweaks, and advanced considerations such as async queues and compile‑time helpers.
This article documents the complete process of researching, analyzing, and developing a custom React CLI scaffolding tool, including a detailed examination of Vue CLI's architecture, plugin mechanism, and codebase, as well as the implementation of interactive command‑line features, configuration options, and publishing steps.
This article explains what triggers a React component re‑render, distinguishes required from unnecessary renders, and presents practical techniques—such as narrowing render scope, using memo, useMemo, useCallback, and context selectors—to improve performance in complex applications.
FishUI is a cross‑platform React component library designed for Xianyu’s kun and web containers, offering unified APIs, automated environment detection, monorepo architecture with pnpm, lerna + nx versioning, custom build loaders, comprehensive testing, and documentation tooling to boost developer efficiency and maintainability.
Ant Design V5’s CSS‑in‑JS architecture enables powerful dynamic theming, allowing developers and designers to implement global theme algorithms, partial theme overrides, component‑level styling, and seamless multi‑theme compositions, illustrated with real‑world applications, code snippets, and visual comparisons across light and dark modes.
The project replaces costly Google Dynamic Maps with a hybrid solution that overlays a transparent WebView on a native map component, using a JSBridge to route H5 events and native map interactions, dynamically managing hot‑zone data, thereby cutting service fees, boosting performance, and preserving H5 development flexibility.
This article provides in‑depth guidance on using React hooks such as useState, useEffect, useContext, useReducer, and related utilities, covering lazy initialization, functional updates, performance‑optimising patterns, state sharing strategies, and advanced techniques like useImmer and react‑tracked to reduce mental overhead and avoid bugs.
This article explains why passing an object as a React Context Provider value can cause unnecessary re‑renders, introduces the community‑made use‑context‑selector library to mitigate the problem, analyzes its limitations, and presents a custom optimized implementation using useSyncExternalStore for precise component updates.
The article explains how Excalidraw’s new component API replaces render props with a child‑component approach, introduces customizable MainMenu, Footer, and WelcomeScreen components, provides code examples, and discusses the benefits and limitations of this redesign for developers building custom whiteboard applications.
This article explains how to build a lightweight React‑like library called Didact, covering its core concepts, step‑by‑step source‑code walkthrough, implementation of createElement, render, Fiber architecture, concurrent mode, and a useState hook for function components.
This article reviews essential React design patterns—including container/presentational components, higher‑order components, render props, compound components, and custom hooks—explaining the underlying SOLID principles, providing clear code examples, and offering guidance on when to apply each pattern.
This technical guide explores practical methods for measuring network performance in web applications, covering key metrics like ping, jitter, and throughput, while demonstrating how to implement real-time speed testing using browser APIs and JavaScript within a React environment.
By adopting the XState state‑machine library, the team transformed a complex, interactive page’s development from costly component‑wise coordination into a collaborative workflow where a small core group maintains a visual state graph while UI developers work on lightweight components, improving performance and reducing render overhead.
This article explains how ice.js 3 improves web performance by combining MPA and SPA loading strategies, parallelizing component and data fetching, leveraging SSG and SSR, and exploring cloud‑based prefetch and zero‑bundle concepts to deliver smoother user experiences.
This article details how the NutUI‑React component library was adapted to the Taro framework for WeChat mini‑programs, covering background, version upgrades, three development stages, key technical solutions, installation steps, and future community‑driven improvements.
Next.js 13.1 has been officially released, introducing improvements to the app directory, built‑in module transpilation, a stable Edge runtime, Turbopack enhancements, middleware capabilities, a new SWC transform called modularizeImports, and various memory and template optimizations.
This collection presents curated technical articles covering low‑code multi‑branch collaborative development, comprehensive front‑end state management, hands‑on browser cache exploration, intranet penetration principles, advanced CSS Houdini techniques, front‑end mock data strategies, React ref fundamentals, and performance‑focused foreign reads.
ice.js 3 merges MPA and SPA concepts to deliver per‑page HTML, parallelizes block and data loading, introduces SSG and out‑of‑the‑box SSR with streaming and Server Components, supports multi‑end development, and upgrades the runtime with swc and esbuild to dramatically improve web performance and developer experience.
Ice.js 3, Alibaba’s Taobao‑originated multi‑terminal framework, extends earlier versions to unify PC, web, and mini‑program development with a React 18‑based runtime, smaller bundles, built‑in plugins, SWC/esbuild toolchains, SSR/SSG data loading, Midway FaaS deployment, and a roadmap toward React Streaming and Server Components.
React 18 introduces Streaming SSR, allowing the server to send HTML in chunks and perform selective hydration, which improves performance by rendering ready sections early and handling asynchronous components via Suspense, with detailed examples of code implementation, error handling, and JS/CSS integration.
This article walks through using the Zustand state‑management library in a complex React component, covering store initialization, actions, selectors, modular file structure, handling controlled vs uncontrolled modes, performance optimizations, and devtools integration, while sharing practical tips and code examples for scalable frontend development.
This article explains frequent misuse patterns of React's useState hook—redundant, duplicate, contradictory, and over‑reliance on useEffect—showing why they hurt readability and maintenance, and provides concise refactor solutions using derived state, IDs, and useReducer.
This article examines the pitfalls of traditional React state management in complex applications, explains why Zustand offers superior state sharing, mutation, derivation, and performance optimization, and provides detailed code examples and best practices for integrating Zustand into large-scale frontend projects.
This article explains React's internal update loop, the render and commit phases, default bailout optimizations, and how developers can accelerate rendering using techniques such as state lifting, content lifting, React.memo, useMemo, and useCallback while avoiding over‑optimization.
This article analyzes the rapid growth of mobile mini‑programs, compares the cross‑platform frameworks uni‑app and taro based on core requirements, ecosystem, and performance, presents a concrete project structure and rendering details, and quantifies the efficiency gains achieved by adopting uni‑app for automotive quotation services.
This article explains the motivation, architecture, technology stack, adaptive layout techniques, component development workflow, drag‑and‑drop enhancements, and real‑time state management used to build a low‑code, front‑end‑focused big‑screen data visualization platform.
Drip Table 2.0 introduces a revamped generator UI, a lightweight React‑based core, editable cells, nested sub‑tables, row‑dragging, fixed rows/columns, a new card layout, and enhanced component support, all built on a performance‑focused architecture and documented with live demos and GitHub references.
React 18 introduces Streaming SSR and Selective Hydration, enabling faster initial page rendering and more efficient hydration by only rendering necessary components.
This tutorial demonstrates how to use a previously built Web Components dropdown inside a React app, covering the creation of an abstraction layer, proper prop handling, event registration, and a reusable custom Hook that formats data and manages listeners.
This curated collection presents technical insights on plugin-based frontend design, high‑concurrency architecture, modern 3D web development, Next.js innovations, React Three Fiber particle effects, functional programming perspectives, a face‑api.js virtual avatar demo, and Base64 encoding fundamentals.
This tutorial walks through creating a lightweight rich‑text editor using ProseMirror's core modules, enhancing it with plugins like history and input rules, and then simplifying development with the Remirror React library to support Markdown formatting and custom extensions.
This guide walks through creating a React app, downloading the React source, building it, linking the packages, configuring webpack aliases, fixing import paths, disabling ESLint, adjusting environment variables, and resolving internal React errors so you can edit and debug the original React source directly in the browser.
This article explains how to synchronize state across distant React components without relying on heavy libraries, using a custom hook and a publish‑subscribe model, and discusses optimizations such as avoiding redundant updates and incorporating a simple reducer for efficient change detection.
This article explains the concepts of binary trees, complete binary trees, and binary heaps, shows how React implements a min‑heap for its task scheduler, and provides detailed JavaScript code examples for push, pop, siftUp, siftDown, and peek operations.
This article introduces NutUI, JD's lightweight mobile component library now supporting JD mini-programs, compares H5 and mini-program development, and provides a step‑by‑step guide using Taro to quickly set up and run a NutUI‑based JD mini‑program project.
This article explains how React simulates requestIdleCallback by combining requestAnimationFrame, postMessage, and MessageChannel to execute work during browser idle periods, detailing the evolution from the early rAF‑postMessage approach in v16 to the message‑loop implementation in v18 and providing simplified source code examples.
This article explains why Ant Design 5 is preferred over MUI, then walks through configuring Vite and tsconfig, creating login and home pages, designing a recursive routing system, implementing lazy loading, menu generation, route listening hooks, tab management with KeepAlive, theme customization, and dynamic routing with React Router 6.4.3 for a full‑featured admin dashboard.
The article presents a comprehensive case study of Ctrip's 2022 PC homepage redesign, detailing the motivations, requirement analysis, island‑style architecture, cross‑team component development, server‑side rendering, public component challenges, and the dynamic data‑configuration platform that together enable fast, maintainable, and scalable web delivery.
This article explains the mechanics behind React re‑rendering, how state and props changes trigger renders, common pitfalls that cause multiple renders in class and function components, and practical strategies—including batching, state merging, useReducer, and refs—to minimize unnecessary updates.
The article shares a developer's practical experience of transitioning from backend to frontend by learning Vue and React, exploring component libraries, tackling layout and styling challenges, and integrating the frontend build into a backend Maven project for a complete gateway console.
This article explains the requestIdleCallback web API, its syntax, execution timing, task‑queue handling, performance characteristics, compatibility issues, and practical integration with React and requestAnimationFrame to off‑load low‑priority work without blocking UI rendering.
This article explains React17's event mechanism changes compared to React16, covering event propagation phases, binding methods like inline HTML, DOM0, and addEventListener, event delegation for efficient handling, and browser event differences.
This article explains the requestAnimationFrame API, demonstrates basic and cancelable animation examples, discusses its execution timing within the browser frame lifecycle, compares its performance to setTimeout, covers compatibility and polyfills, and shows how to wrap it in a React hook for practical use.
OpenSumi is a TypeScript‑based, React‑driven IDE development framework that offers high performance, extensive view customization, and full VS Code plugin compatibility for both web and Electron environments, enabling rapid creation of cloud or local IDE products.
This article explains why a data‑analysis platform needs a plugin architecture for custom charts, compares iframe‑based and Web Components approaches, shows how to implement a lightweight ECharts‑based chart plugin, and provides step‑by‑step code samples and technical selection criteria for frontend developers.
OpenSumi, an open‑source IDE framework from Alibaba, offers a highly customizable, high‑performance solution for building vertical‑domain IDEs on Web and Electron, with full VS Code plugin compatibility, extensive view‑customization, cloud‑native capabilities, and a rich set of real‑world use cases.
The article examines Turbopack's claimed performance advantages over Vite, critiques marketing-driven comparisons in open-source tools, and emphasizes the need for transparent, peer-reviewed evaluations in frontend development.
This comprehensive guide examines the key factors for selecting between React and Vue—including team suitability, compatibility, usage patterns, ecosystem, cross‑platform support, performance benchmarks, mental models, community size, and licensing—to help developers make an informed technology‑stack decision.
React’s newly proposed use hook lets developers consume promises directly in client components and conditionally in loops or blocks, while server components continue to use async/await, offering a unified yet flexible data‑fetching primitive that integrates seamlessly with the JavaScript ecosystem.
This article presents the overall design, technology selection, architecture, and core implementation details—including adaptive layout, component development workflow, drag‑and‑drop handling, and state push mechanisms—of a low‑code, reusable big‑screen data visualization platform built with React and modern front‑end visualization libraries.
This article explains how Baidu AI Cloud's low‑code platform AI‑SuDa builds a flexible component system, covering the transition from UI libraries to declarative low‑code components, detailed React examples, visual editor configuration, component registration, data binding, and event‑action mechanisms for efficient application development.
This article describes how a one‑code‑multi‑end interactive engine was built by selecting the Taro framework, adapting H5 design, creating a unified data‑management layer, defining a generic development model, handling UI adaptation, animation, and engineering concerns to improve development efficiency across web, mini‑program and app platforms.
This tutorial walks through the practical steps of extending a Slate.js rich‑text editor with toolbar actions, multi‑level list handling, and a robust image‑upload solution, providing code snippets, implementation details, and design considerations for each feature.
Learn how to optimize data fetching in React by understanding initial vs on‑demand requests, avoiding waterfall patterns, leveraging Promise.all, parallel promises, data providers, and browser limits, while applying best practices for useEffect, lifecycle handling, and performance‑focused component design.
The article outlines how an enterprise back‑office monolith can be progressively migrated to a Qiankun‑based micro‑frontend architecture—allowing independent Vue, React, Angular or legacy apps, shared SDKs, route isolation, keep‑alive state, and sandboxed styling—resulting in over 90 % legacy integration, a unified React stack for new features, and significantly improved development efficiency and ROI.
This article explains the issue where a Qiankun micro‑frontend main app changes its route but the child app's route does not update, analyzes the underlying cause related to hashchange events, and provides two practical solutions: manually dispatching a hashchange event or replacing Link tags with anchor tags.
The paper presents a low‑code, schema‑driven big‑screen visualization platform built with React, ECharts, D3 and related libraries, detailing its four‑module architecture, adaptive layout techniques, reusable component workflow, drag‑and‑drop enhancements, and WebSocket‑based state management, and outlines future extensions such as a component marketplace and 3D rendering.
The article explains why React is well‑suited for cross‑platform dynamic development, detailing its data‑driven model, JSX‑to‑virtual‑DOM workflow, fiber architecture, Taro reconciler adaptations, and independent event system, and shows how React can serve as both a DSL and a full runtime for mobile and web.
This article presents a comprehensive micro‑frontend solution for H5 e‑commerce sites, covering background analysis, problem identification, architectural design with BFF layer, code examples for registration, routing, and progressive migration, and concludes with the benefits of modular, SEO‑friendly front‑end development.
The article explains how React’s data‑driven model, JSX‑to‑virtual‑DOM workflow, fiber architecture, independent event system, and adaptations such as React Native and Taro enable efficient cross‑platform dynamic applications, and provides code examples and practical guidance for developers.
This article explains how NetEase Qiyu built a high‑cohesion multilingual component using React context and hooks, transformed tree‑structured language data for component libraries, and created a VSCode plugin to automate i18n key replacement, enabling efficient multi‑language support for their customer‑service console.
This article provides a comprehensive guide on unit testing custom React Hooks using Jest, renderHook, act, and the React Testing Library, covering examples such as useCounter, useEventListener, useHover, and useMouse with detailed code snippets and best‑practice recommendations.
The article explains how React’s data‑driven model, JSX‑to‑virtual‑DOM workflow, fiber architecture, independent event system, and adaptations in frameworks like React Native and Taro enable efficient cross‑platform dynamic applications, while comparing it with traditional template‑based approaches.
This article provides a comprehensive guide to Recoil, Facebook's React state‑management library, covering its graph‑based architecture, atoms and selectors, family APIs for bulk state, async data handling with Suspense and Loadable, snapshot usage for SSR and time‑travel, external synchronization, and practical tips for reducing mental load.
This article demonstrates how the CodeFun tool can automatically transform UI design drafts into functional front‑end code across multiple frameworks, streamlining repetitive marketing page development by eliminating manual slicing, styling, and basic logic implementation.
This tutorial explains how to create a desktop Markdown editor using Electron with a React UI, Typescript for development, Parcel for bundling, and includes setup of main and renderer processes, preload scripts, environment configuration, and unit testing.
