This article explains the fundamentals of Jamstack and server‑side rendering (SSR), compares their roles in modern web development, and examines emerging trends such as React Server Components, WebAssembly integration, serverless architectures, and hybrid rendering, outlining how these innovations shape the future of SSR.
This article explores Umi's useModel lightweight state management solution, covering basic usage, performance optimizations with selectors, custom hooks, Babel plugin automation, and an in‑depth source code analysis, while also discussing its drawbacks and practical considerations for frontend projects.
React‑scan is a lightweight library that automatically monitors and visualizes component render activity in real‑time, requiring minimal setup, to help developers quickly identify and eliminate unnecessary re‑renders in complex React applications, improving performance without altering existing code.
This article explains the purpose of React's useEffect hook, details how dependency arrays control its execution timing, demonstrates cleanup functions, and provides practical code examples for handling side effects such as data fetching, timers, and event listeners.
This article explains the concepts, rendering strategies, and bundling processes of React Server Components and Server Actions, detailing how Webpack and Turbopack handle module boundaries, code splitting, CSS, SSR, HMR, and how a single compilation can produce both server and client bundles efficiently.
The article explains the difference between controlled and uncontrolled React components, introduces the usePropsValue custom hook to unify their handling, provides implementation details with code examples, and discusses optimization techniques to reduce unnecessary re-renders.
During development of a micro‑frontend project using wujie, the child app required port 5173 for communication, but newly created Vite React‑TS projects failed to auto‑increment the port, revealing that Vite’s port‑detection logic also depends on the host setting, not just the port number.
This article presents a comprehensive overview of the author's current technology stack, covering frontend frameworks like React and Next.js, mobile development with React Native, TypeScript usage, backend tools such as NestJS, Prisma with MySQL, Redis caching, and frontend engineering practices.
This article introduces a free, low‑code web tool that lets backend developers instantly generate a functional admin‑type frontend UI from database schemas or Java/SQL description files, requiring only minimal configuration and no front‑end coding skills.
This article introduces React 19’s new use hook that reduces reliance on useEffect, explains how to work with resolved promises, demonstrates conditional usage and integration with Suspense through detailed code examples, and discusses practical considerations when using the hook in modern frontend projects.
This article explains how to leverage the JavaScript CustomEvent API to create and dispatch custom events for efficient, decoupled communication between components in complex React and Vue applications, providing syntax details, practical code examples, and guidance on appropriate usage scenarios.
This article introduces the Nuqs library for React, explaining how it synchronizes application state with the browser URL, outlines its key features, provides step‑by‑step installation and usage examples—including query hooks, type‑safe parsers, transition handling, multiple query states, and server‑side parsing—enabling developers to build more intuitive front‑end applications.
OpenSumi is a dual‑target (Web and Electron) IDE framework from Alibaba that offers high performance, deep view‑customization, vertical‑domain experience, pure front‑end deployment, and full VS Code plugin compatibility, positioning it as a strong alternative to Theia and other open‑source IDE solutions.
This article explains React's rendering pipeline—including initial and update renders—identifies the factors that cause component re‑rendering, and demonstrates how to use React.memo, useMemo, and useCallback to eliminate unnecessary renders and improve performance.
This edition of the ZhuanZhuan Frontend Weekly presents a curated selection of recent technical articles covering React 19 release, HarmonyOS adaptation in a travel app, the Vision animation platform at Kuaishou, migration from Electron to Tauri, and WebAssembly‑enhanced WebCodecs for high‑performance video frame extraction.
React 19 introduces a suite of new features including Actions with useActionState, optimistic UI with useOptimistic, the use hook for resource reading, enhanced form handling via useFormStatus, server components, static rendering APIs, improved hydration, ref-as-prop, metadata handling, stylesheet and async script support, and advanced resource preloading.
This guide walks you through installing the SuperAdminx admin platform, covering backend setup with Webman and ThinkORM, frontend preparation using React and Ant Design, database configuration, and accessing the running application with example commands and screenshots.
This tutorial demonstrates how to reduce Docker image size for a ReactJS project by switching to Alpine‑based Node images, applying multi‑stage builds, and finally serving the static build with Nginx, shrinking the image from over 1.4 GB to just 22 MB while preserving functionality.
This article explains how to improve React conditional rendering readability by adopting Solid.js's Show component pattern, implementing a reusable Show component in React, and extending it to support asynchronous data loading, ultimately making JSX templates clearer and more maintainable.
By using code splitting and dynamic imports, React developers can break large bundles into on‑demand chunks—loading only needed libraries, components, or routes after user actions—thereby shrinking initial download size, speeding up first render, and delivering a more responsive, scalable application.
The design outlines reusable Taobao Playground capabilities—event messaging via mx, unified popup/announcement delivery, subscription management, a modular task system, and reusable animation components—enabling rapid development of short‑term new‑user activities while maintaining a scalable, maintainable codebase.
This article explains how the Taro framework bridges React and HarmonyOS ArkUI by describing Taro's runtime architecture, the custom renderer implementation, and the step‑by‑step conversion of React components into ArkUI nodes, including code examples and key technical challenges.
This article explains the five SOLID design principles, shows how they are often violated in React and Angular code, and provides concrete refactorings—including custom hooks, separate services, validator classes, and interface segregation—to make frontend applications more maintainable, testable, and extensible.
This article explains how Zustand creates stores using the create function, details the TypeScript types such as StateCreator, SetStateInternal, Get and Mutate, demonstrates middleware implementation, clarifies the role of createImpl and useStore, and answers common memory‑leak concerns for React developers.
This article reviews the recent deprecation of react‑beautiful‑dnd and presents several modern front‑end drag‑and‑drop alternatives—including Pragmatic Drag and Drop, VueDraggablePlus, dnd‑kit, react‑dnd, and Swapy—while offering migration strategies, usage examples, and GitHub resources for each library.
Shadcn UI, a React‑based component collection launched in early 2023, reached 73 K GitHub stars within two years by offering a highly customizable, copy‑and‑paste workflow, leveraging Tailwind CSS, Radix UI, TypeScript, and a simple CLI that together reshape the frontend component ecosystem.
This article explores seven essential React concepts—including component lifecycle, advanced Hooks, virtual DOM, state management with Context and Redux, Refs, prop‑drilling solutions, and the new Suspense and Concurrent Mode—to help developers boost performance, scalability, and expertise.
This article examines how the Taro framework adapts React code to run on Huawei's HarmonyOS by implementing a custom renderer that converts React components into Taro virtual nodes, then maps them to ArkUI structures through a three‑step process involving Taro Elements, RenderNodes, and native ArkUI nodes.
This article explains the architecture and key features of ZhiZhu's customer service workbench, covering the overall system, the iframe‑based IM communication, multi‑tab third‑screen design, conversation caching with LRU, and full‑event tracking implementation using React, Umi and Ant Design.
This article explains why the native storage event only works across different tabs, evaluates traditional polling and proxy approaches, and presents four efficient solutions—including custom StorageEvent, CustomEvent, MessageChannel, and BroadcastChannel—along with practical React and Vue examples for real‑time localStorage monitoring.
This article walks through the theory behind ReAct agents and demonstrates how to design, implement, and test a ReAct‑style AI agent using LlamaIndex Workflows, complete with Python code, custom events, tool integration, and a full reasoning‑action‑observation loop.
Learn how the Interface Segregation Principle (ISP) of SOLID design encourages splitting large interfaces into focused, minimal ones, reducing unnecessary method implementations, improving maintainability, and enhancing modularity across backend Java code, frontend React components, and state‑management modules, while also noting its trade‑offs.
This guide explains how React Error Boundaries work, shows step‑by‑step implementations for Next.js, and demonstrates handling synchronous, asynchronous, and server‑side errors to keep applications stable and provide a better user experience.
This article describes how a team built a custom automated testing platform for React Native mobile apps using Airtest and Poco, covering tool selection, script examples, platform architecture with React frontend and Python backend, and solutions for parallel execution and mock services.
This article introduces the drag-kit library, explains why it is a good choice for high‑performance, cross‑iframe, responsive drag‑and‑drop interactions, provides quick‑start code examples, details its core features and advanced options, and shows how to integrate it with Vue, React and vanilla JavaScript.
This article presents a comprehensive solution for integrating ECharts into Vue and React projects, addressing bundle size, API complexity, and lack of CSS‑variable support by introducing custom imports, a draw helper, MutationObserver‑based resizing, theme‑aware color replacement, lazy loading, and usage examples for both frameworks.
The article explains how treating UI as composable components, avoiding tangled conditional rendering, and using early returns can reduce cognitive load, improve type inference, and make React code easier to extend and maintain.
This article compares three popular React form libraries—Formik, Final‑Form, and React‑Hook‑Form—examining their popularity, bundle size, usage patterns, advantages, and drawbacks to help developers choose the most suitable solution for their projects.
After initially adopting Tailwind CSS for rapid UI development in a React real‑time chat app, our team reverted to SASS combined with CSS Modules because the growing utility‑class markup hurt readability, increased build times, and bloated the CSS bundle, ultimately delivering a more maintainable codebase and noticeably better performance.
This article explains how to create a Git‑style code comparison view using jsDiff and diff2html, demonstrates a functional HTML/JS MVP, and shows how to integrate the solution into a React component with proper dependencies and styling.
This article explains why monitoring route changes in React single‑page applications is crucial, compares three primary techniques—useLocation, useNavigate, and withRouter—provides practical code examples, evaluates their pros and cons, and offers performance‑optimisation tips for reliable routing handling.
This article explains how PHP can be integrated with front‑end technologies such as server‑side rendering, client‑side rendering, AJAX, and APIs, outlines key concepts and tools, and provides a step‑by‑step tutorial for building a simple blog application using PHP and React.
The article introduces AIGCDesign, a cross‑platform frontend component library that leverages AI generation capabilities, explains its motivation, research of existing solutions, architectural layers, lifecycle hooks, configuration examples, multi‑framework support, business integration cases, and future stream‑processing enhancements.
This article walks through the iterative design of an Ant Design form component, starting with a simple name field, then adding a randomly generated code field, making it editable, and finally implementing a copyable code input with reusable prefix‑text and suffix‑icon components, while comparing implementation approaches.
This article explains the AI Agent concept, introduces the AI Gateway plugin architecture, walks through zero‑code deployment of an AI Agent using Higress with AMap and Seniverse services, and details the ReAct‑based reasoning and tool‑calling implementation with code examples and workflow diagrams.
This article explores how React is evolving into a full‑stack framework by adding server components, server actions, and leveraging TypeScript and tRPC, while reflecting on the shift from client‑side rendering to a unified front‑end/back‑end development model.
The article outlines React component design best practices by distinguishing generic UI components from business‑specific ones, separating UI and domain state, extracting reusable base components, applying patterns such as state lifting, context, memoization, and type‑safe props, and providing a checklist for clean encapsulation.
The ZhuanZhuan Frontend Weekly curates five recent technical articles—including a Rust‑based JavaScript bundler, Airbnb’s seamless React upgrade, HarmonyOS ArkUI framework, a JavaScript Super Mario game, and the Interface Segregation Principle in React—providing concise English summaries and links for developers.
This article provides a comprehensive technical walkthrough of building an advanced draggable floating‑ball UI component in React, covering drag handling with react‑draggable, boundary calculations, edge‑snapping, circular menu creation via CSS transforms, right‑click context menus, and app‑switching logic, all illustrated with code snippets and visual examples.
This article explains the Interface Segregation Principle, illustrates its original intent with simple code examples, and demonstrates how applying ISP in React—by narrowing component props, avoiding prop drilling, and using context or composition—leads to cleaner, more maintainable front‑end code.
This article describes how to create a feature‑rich, extensible React admin panel by implementing a convention‑based routing system, unified navigation with menu and draggable tabs, a Redux‑centric state management strategy, and a modular plugin architecture, while also integrating MUI, Next.js, and AI‑assisted code generation.
The article explores how React has evolved with server components, server actions, and TypeScript to bridge front‑end and back‑end development, discusses the shift from CSR to SSR, and examines the impact of tRPC and generated type interfaces on modern web engineering.
This article introduces V0, an AI‑driven tool from Vercel that transforms natural‑language prompts or design screenshots into ready‑to‑use React, HTML, and Tailwind CSS code, compares it with other front‑end solutions, and provides step‑by‑step guidance on creating, editing, and exporting components.
This article explains how to use React's Context API to implement elegant multi‑theme switching, avoid props drilling, manage multiple contexts, and apply memoization techniques to prevent unnecessary re‑renders, improving performance and maintainability.
Google’s Angular lead explains how Angular and React share core reactive principles, use similar change‑detection algorithms, and are converging around the Signals primitive, highlighting the implications for developers, performance, and future framework integration.
This article explains how to correctly use React's useRef hook with TypeScript across several real‑world scenarios, compares different initialization patterns, highlights typical mistakes with useLayoutEffect, and provides best‑practice solutions for forwarding refs, merging refs, and exposing imperative handles.
This article showcases a React‑based Windows 11 clone web app, detailing its interactive desktop, start menu, taskbar, draggable windows, responsive design, and the modern tech stack used to recreate core OS features for educational purposes.
This article explains how to fetch an HTML string from an API and display it either via an iframe or by rendering the HTML directly in React or Vue, and provides multiple download options—including saving the raw HTML, capturing an image with html2canvas, and generating a PDF using jsPDF.
This article introduces the Varlet icon builder toolchain, which enables rapid creation of enterprise or open‑source icon libraries, supporting SVG to Vue 3, React, ESM/CJS modules, web fonts, automatic component import, Figma integration, and provides CLI commands for development, building, and publishing.
This article walks through the author’s experience creating a custom AI agent using LangChain and OpenAI APIs, explains the concepts of AI agents and the ReAct reasoning framework, provides step‑by‑step code, discusses required libraries and APIs, and shares practical tips and challenges encountered.
This article dissects the lightweight Zustand state‑management library for React, covering its project layout, core store implementation, the createStore API, the useStore hook, middleware integration, and data‑flow mechanics that enable high‑performance, flexible state handling.
This guide introduces Zustand, a minimalist React state management library, covering its core concepts, advantages, installation, API usage, best practices, middleware options, TypeScript integration, performance optimizations, and how to integrate it with Next.js for both client‑side and server‑side rendering.
This article explains how parent and child components interact in React, why certain child components re‑render on state changes, and how techniques like React.memo, useCallback, and useMemo can be used to control rendering performance.
Explore seven core methods for React component communication—including Props, State Lifting, Context, Refs, Hooks, Event Emitters, and Redux—detailing practical code examples, key considerations, and best practices to help developers choose the optimal approach for various application scenarios.
This article explores React 19's new React Compiler, explains how it automatically memoizes components to cut redundant renders, and walks through three practical examples that compare its behavior with traditional React.memo, useMemo, and useCallback techniques.
This comprehensive guide walks you through initializing a TypeScript project, explains core and advanced type features, shows how to integrate third‑party libraries, and provides real‑world examples for React and Node.js, while offering best‑practice tips to boost code quality and performance.
This article explains how to set up Tailwind CSS in a Next.js project, addresses dynamic class name problems, class‑priority conflicts, and provides solutions using tailwind‑merge, clsx, and class‑variance‑authority, along with useful tools and VSCode extensions for smoother development.
The author recounts their recent journey into React, covering required fundamentals, challenges with TypeScript and input handling bugs, and how expert guidance clarified React's data‑driven design, ultimately improving their understanding and development approach.
This article explains the new React 19 useActionState hook, how it replaces useFormState/useFormStatus, and demonstrates its integration with Next.js Server Actions through four progressive examples, covering traditional implementations, the deprecated hooks, the new hook usage in forms and non‑form components, and best‑practice patterns.
This article explains how React refs work with native elements, class components, and function components, demonstrates using useRef, forwardRef, and useImperativeHandle, and discusses the benefits, drawbacks, and alternative patterns for exposing component instances and DOM nodes.
This article explains how to build a custom React @mention input component that highlights mentioned users, treats the whole @username as a single deletable unit, tracks cursor position for a floating selector, and returns both the plain text and the list of mentioned users to the parent component.
The 2023 NetEase Cloud Music Annual Listening Report showcases a front‑end animation pipeline where the motion designer codes directly in React, using CSSTransition for page fades, CSS keyframes for text and particle effects, SVG masks for data visualisation, 3D perspective tricks, and extensive device testing to balance visual richness with performance.
The 2023 NetEase Cloud Music annual‑report front‑end case study details how sub‑second first‑screen loads, SPA routing with TypeScript, GPU‑accelerated animations, optimized media handling, multi‑layer quality monitoring, and a unified development platform together boost performance, reliability, and engineering efficiency, driving higher DAU and share‑rate.
The article explains how React 19 silently altered Suspense behavior by disabling parallel rendering of sibling components, turning data fetching into a waterfall pattern, which caused significant performance regressions for many sites, sparked community backlash, and was eventually rolled back after extensive discussion.
This article examines how server‑side rendering can serialize normally non‑serializable data such as Promises, Dates, RegExp, and BigInt, comparing Remix’s defer‑based approach with Turbo‑Stream’s encode/decode method, and discusses their mechanisms, benefits, and challenges.
This article explains how to efficiently locate and edit React component source files in large projects by using the click-to-react-component tool, covering installation, demo setup, interaction shortcuts, and the underlying mechanism that maps DOM elements to source code via React fiber nodes and VSCode links.
This article reviews the ten most valuable JavaScript libraries for 2024—including React, Redux, D3.js, TensorFlow.js, Angular, Node.js, Vue, Svelte, Three.js, and Lodash—detailing their core features, performance benefits, typical use cases, and why they remain essential tools for modern frontend development.
React 19 RC introduces exciting new features, a revamped JSX transform, and several breaking changes, and this guide walks you through installing the RC, updating TypeScript definitions, using codemods, handling deprecated APIs, and adapting to strict mode and UMD build removals.
This article introduces the new React 19 APIs—including the versatile use API for data fetching and conditional context, resource preloading helpers, enhanced Actions with useTransition, useActionState, useFormState, useOptimistic, as well as deprecations, improved hydrate error messages, and the experimental React Compiler—providing code examples and migration guidance.
This article analyzes the performance bottlenecks of an H5 map built with the AMap JS‑SDK, explains the causes of frame drops on low‑end devices, and presents a step‑by‑step refactor using data‑fetching tweaks, DistrictCluster aggregation, and conditional rendering to achieve smoother interactions.
This article explains how to quickly locate and edit React component source code in large projects using the click-to-react-component tool, covering installation, usage, underlying mechanisms involving React fiber nodes, Babel source mapping, and VSCode integration, with practical code examples and UI details.
The JavaScript framework ecosystem has surged forward with React adding Server Components, a Compiler and Server Actions; Vue 3.4 delivering faster reactivity and a Vapor mode; Angular introducing Signals and partial hydration; Next.js unveiling an App Router and Turbopack; Nuxt, Svelte, Remix and Astro each releasing performance‑focused features, underscoring a rapidly evolving landscape for modern web development.
This article explains how to design, develop, preview, debug, and publish NPM component extension packages for the Baidu AI‑Speed platform, covering supported tech stacks, extension mechanisms, core modules, development tools, code conversion examples, and common deployment questions.
This article explains how to reproduce a website's fragmented shard animation by inspecting the original page, extracting clip‑path polygons with JavaScript, and building a reusable React component using Tailwind CSS transitions and delays, plus a custom drawing board for creating new shapes.
The article introduces the newly open‑sourced React Compiler, explains its underlying concepts and automatic memo optimization, provides step‑by‑step usage instructions with health‑check, ESLint and Babel plugins, and shares performance results from Meta’s production apps.
This article explores JD Retail's AI‑driven multi‑agent system that mimics real‑world merchant decision processes, detailing the ReAct paradigm, agent roles, workflow, training methods, monitoring, and future directions for building intelligent e‑commerce assistants.
The article details the technical architecture and design of the StarCreate landing‑page editor, describing its monorepo structure, low‑code JSON template, backend permission system, canvas implementation choices, Valtio state management, and the resulting operational benefits and future expansion plans.
This article explains when React's useEffect callbacks run—whether synchronously before rendering or asynchronously after rendering—by analyzing four demos, discussing the impact of event types, rendering workload, and React's internal scheduling rules.
This article presents a comprehensive overview of JD Retail's AI‑driven multi‑agent architecture for e‑commerce assistance, detailing how real‑world merchant decision processes are modeled with ReAct‑based LLM agents, the hierarchical workflow, training pipelines, monitoring mechanisms, and future directions for scalable intelligent commerce support.
React Conf 2024 showcased the upcoming React 19 beta with new Actions hooks, server components, ref-as-prop, metadata support, resource preloading, and the experimental React Compiler, while also announcing the merger of Remix into React Router v7, offering developers a comprehensive overview of the latest frontend innovations.
This article explains how to preview a wide range of file types—including images, audio, video, markdown, plain text, Office documents, PDFs and external websites—in a React front‑end by using native HTML tags, embed/iframe techniques, and libraries such as marked and highlight.js, while also supporting page or time positioning.
This article explains common React performance‑optimization methods, walks through a real‑world form‑editor use case, details the profiling, diagnosis, and step‑by‑step improvements—including memoization, callback stabilization, diff filtering, and pure‑function components—that reduced render time from 195 ms to under 10 ms.
This article details the migration of the Cloud Music desktop client from a legacy NEJ‑CEF hybrid to a React‑based architecture, outlines four major performance challenges, and explains the step‑by‑step optimizations—including API preloading, render memoization, virtual‑list replacement, and resource‑usage reductions—that cut startup latency by 48%, eliminated interaction stutter, and dramatically lowered CPU, GPU, and memory consumption.
This article examines the common React modal communication problem, compares the conventional controlled‑component callback approach with the useImperativeHandle solution, and introduces a novel pair of hooks (useShareState and useShareValue) that enable seamless state sharing between parent and child components.
This article explains the difference between controlled and uncontrolled components in React, illustrating when to use each approach, how defaultValue and value work, and provides practical code examples and a custom hook to support both modes in component development.
This article explores browser drag‑and‑drop capabilities, compares native HTML5 DnD, mouse/touch events, and Canvas approaches, reviews popular libraries such as React DnD, Moveable and Interact.js, and provides a step‑by‑step guide to extending Moveable with custom ables for intelligent placement.
This article explains how to obtain and calculate various distance and size properties in the browser—such as pageY, clientY, offsetY, scrollY, getBoundingClientRect, scrollTop, offsetTop, clientTop, and height metrics—using React event handlers and plain JavaScript, with practical code examples.
React 16 feels smoother than React 15 because its new Fiber architecture breaks state updates into small, priority‑aware units that the Scheduler runs asynchronously, allowing high‑priority user input to render first while lower‑priority work is paused and resumed, eliminating the lag seen in full‑tree re‑renders of React 15.
PlayEdu is a comprehensive open‑source training system built with Spring Boot, MySQL, Redis, MinIO on the backend and React, Redux, Ant Design on the frontend, offering detailed deployment guides, feature overviews, and screenshots for both admin and student portals.
This guide walks through selecting a suitable visualization library for DingTalk mini‑programs, explains why AntV F2 is optimal, and provides step‑by‑step instructions for integrating F2 4.x into a Taro + React project, covering canvas context handling, pixel‑ratio scaling, custom tooltips, and common pitfalls.
