The article introduces Taro's open-source C-API version for HarmonyOS, detailing its architecture, rich component and CSS support, high-performance rendering, hybrid native integration, and step‑by‑step installation guide, positioning it as a leading frontend solution for cross‑platform development.
This article introduces Alibaba’s open‑source LowCodeEngine, outlines its browser compatibility, core features, protocol standards, provides installation and initialization code, explains CDN integration options, and showcases the editor’s UI panels and real‑world use cases.
The article introduces Taro on Harmony's C‑API version, detailing its evolution, open‑source release, three‑layer architecture, rich component and CSS support, high‑performance rendering, installation steps, and future roadmap, positioning it as a leading framework for developing native‑like HarmonyOS applications.
Learn why React components re‑render, distinguish parent and owner trees, and apply custom Context Provider patterns to limit updates only to components that consume the context, thereby improving performance without extra memoization.
This article examines five major LLM‑driven AI agent planning and execution patterns—ReAct, Plan‑and‑Execute, Static Workflow, Static Workflow with local intelligence, and modular hierarchical planning—detailing their mechanisms, code examples, strengths, weaknesses, suitable scenarios, and optimization techniques.
This article outlines ten concrete React optimization techniques—including lazy loading, image compression, memoization, code splitting, CDN usage, API throttling, server‑side rendering, WebSockets, minification, and load testing—demonstrating how each step dramatically improves performance and scalability for traffic spikes exceeding three million concurrent users.
This article explains the purpose and mechanics of the new React directives ‘use client’ and ‘use server’, showing how they let developers express client‑server boundaries directly in the module system, turn server functions into type‑safe RPC calls, and embed client components as scripts for seamless full‑stack integration.
This article explores three approaches to bring Vue‑like directives such as r‑if and r‑for into React, compares their pros and cons, and provides a complete Babel plugin implementation that transforms custom JSX attributes into standard React conditional and list rendering syntax.
This article details JD's Taro framework adaptation for HarmonyOS, tracing its evolution from ArkTS-based to C-API-driven single- and multi-threaded architectures, highlighting performance gains, feature support, and future enhancements for native-like HarmonyOS app development.
This article combines theoretical analysis and practical case studies to systematically explore the core components, design patterns, and future directions of AI agents, detailing the implementation of OpenManus, custom memory and planning modules, experimental evaluations, and insights for improving agent reliability and scalability.
To overcome the 2 MB main‑package limit of WeChat mini‑programs, this guide details a step‑by‑step solution that uses @galacean/effects for stunning homepage animations, applies page and module splitting, Babel and webpack plugins, and Taro configuration to move large code into asynchronous sub‑packages.
Next.js 15.3 introduces Turbopack, a Rust‑based bundler that dramatically speeds up builds, passes over 99 % of tests, and is recommended for development use while still in alpha, alongside new navigation hooks, monitoring hooks, and an improved TypeScript language server.
This article explains how to analyze Bilibili's homepage banner, extract its image layers and transformation data, and then implement the same effect using pure JavaScript as well as Angular, React, and Vue, providing complete source code and a step‑by‑step guide.
The article introduces the React Compound Components pattern, showing how a parent component with shared Context can expose reusable child parts—like Title, FormInputs, and SubmitButtons—so the same logic can be flexibly arranged in different layouts such as full‑page or modal, improving reuse, readability, and maintainability.
This article introduces the fundamental paradigms of large language models, explaining how simple prompts, messages, and tools like RAG and ReAct enable powerful applications, while providing practical code examples, translation strategies, and insights on prompt engineering, tool usage, and model fine‑tuning.
The article reviews 21st.dev, an open‑source React UI component marketplace inspired by shadcn/ui, highlighting its atomic "code‑out" installation, AI‑friendly prompts, MCP service, and step‑by‑step usage that enable zero‑code component generation in minutes, while comparing it with traditional npm workflows and discussing its strengths, limitations, and broader implications for private component libraries.
This article explores the challenges of using AI tools like Cursor for large‑scale code refactoring, analyzes why simple prompts fail in complex projects, and presents a systematic approach using the ReAct framework and carefully designed prompts to achieve more accurate, maintainable, and efficient refactoring outcomes.
DripTable, an open‑source React and JSON‑Schema based table framework from JD.com, lets developers quickly generate configurable, extensible enterprise‑grade list pages through low‑code setup, with clear installation steps, code examples, and visual configuration tools for both the generator and runtime sides.
This guide explains why data-testid is essential for reliable front‑end testing, outlines planning and QA involvement, shows how to add and use data-testid in React/Vue components, provides best‑practice guidelines, and demonstrates Playwright, Cypress, and Selenium scripts for robust automated tests.
This article breaks down the essential building blocks of LLM agents—including environment, sensors, effectors, short‑ and long‑term memory, tools, planning, and reasoning—while illustrating how Model Context Protocol (MCP), Toolformer, ReAct, Reflexion, and popular multi‑agent frameworks such as AutoGen, MetaGPT and CAMEL enable scalable, collaborative AI systems.
This comprehensive React‑TypeScript guide walks developers through type‑safe component declarations—including functional, class, and generic patterns—hooks usage, event handling, element typing, error boundaries, and both fetch and Axios asynchronous request wrappers, emphasizing best practices for readability, maintainability, and performance.
This tutorial explains how to set up and use the open‑source Figma MCP service with the Cursor AI IDE, covering API key creation, server configuration, command‑line startup, JSON setup, and a React ECharts example, plus troubleshooting tips for successful integration.
Understanding multi‑agent AI systems, this article explains how ReAct’s tightly coupled reasoning‑action loop, the Model Context Protocol, and the open‑source OpenManus implementation enable autonomous task planning, tool invocation, and memory management, contrasting traditional chatbots with delivery‑centered agents while highlighting current limitations and future optimization needs.
This article explains why overusing useState in complex React components can lead to tangled code and bugs, and demonstrates how switching to useReducer provides a single source of truth, clearer actions, and more maintainable state management.
This guide walks through building a multi‑user AI agent platform that runs code and browser tasks inside Docker containers, covering tool creation, prompt design, ReAct agent assembly, testing, and future improvements, with full Python examples and a public GitHub repository.
This guide walks through constructing a multi‑user, cloud‑hosted Agent‑as‑a‑Service platform using Docker containers for isolation, detailing the system architecture, required Docker image, container management API, tool implementations such as code execution and web browsing, and provides complete Python code examples for testing and deployment.
This article explains the technical principles behind Function Call and ReAct in large language models, provides code samples, compares their strengths and limitations, and illustrates each approach with practical scenarios such as smart customer service and financial analysis assistants.
This article explains how to build a high‑performance infinite‑scroll waterfall layout for e‑commerce using CSS Grid, IntersectionObserver, native lazy‑loading attributes, asynchronous decoding, React's useTransition, content‑visibility, and the AVIF image format to reduce load time and improve smoothness.
This issue of Zhuanzhuan Frontend Weekly curates five insightful technical articles covering React UI paradigm shifts, a Rust beginner’s journey to production, performance improvements in a mini‑program simulator, integration of the Qwen‑2.5‑VL model with Midscene.js, and Didi’s experience in managing technical debt for internationalization.
WeaveFox, Ant Group’s AI‑powered front‑end platform, claims to turn design drafts into fully functional React or Vue code—including precise pixel alignment and interactive effects—in seconds, while offering cross‑terminal support, automated refactoring, performance boosts, and a continuous learning loop, yet the author argues it won’t fully replace developers.
The article traces React’s evolution from early JSX‑based componentization to the Hooks‑driven functional component era, compares alternative approaches like Solid.js, Vue, and Svelte, and reflects on the underlying principles of separation of concerns and intimacy that drive UI paradigm shifts.
The article explains how repeated rendering slows large React applications, introduces the React Scan tool for automatically detecting unnecessary renders, details its installation via script tag or npm, describes its core APIs, and shows how to combine it with memoization, useCallback, useMemo, and other optimization techniques to improve performance.
This newsletter curates five must‑read frontend articles covering AI‑driven development trends, Kuaishou's Vision platform for motion asset quality, common misconceptions about Electron, the rapid rise of pure ESM modules, and React's first native animation support, offering concise insights and data for developers.
This article explains what Web Agents are, their ReAct‑style reasoning loop, key implementation technologies such as observation parsing, multimodal models, and browser control tools like Selenium and Playwright, and demonstrates building a DeepSeek‑powered Web Agent with the Browser‑use framework, including code samples and performance insights.
This comprehensive 2024 review examines the rapid rise of TypeScript, new features in ECMAScript, the evolution of major frameworks like React 19 and Vue 3.5, the Rust‑driven shift in build tools, emerging JavaScript runtimes, Chrome’s AI integrations, and the growing impact of AI, low‑code and WebAssembly on front‑end development.
The article provides a detailed, experience‑driven review of the newly released Windows version of Trae AI IDE, highlighting its built‑in Claude‑3.5‑Sonnet and GPT‑4o support, dual Chat and Builder modes, step‑by‑step project generation with TypeScript‑React, and practical observations on usability and limitations.
This article explains the evolution of multi‑agent systems for e‑commerce assistants, detailing the ReAct‑based planning framework, hierarchical master‑sub agent collaboration, evaluation methods, and sample‑generation techniques that together improve accuracy, efficiency, and scalability of AI‑driven merchant services.
This guide explains React state management fundamentals, covering local state with useState, useReducer, class components, and custom hooks; global solutions such as Context API, Zustand, Jotai, and Redux; and server‑side handling using React Query, SWR, plus navigation and form state best practices.
This article explains how to implement a large‑file upload system that splits files into chunks, computes MD5 hashes for instant‑upload detection, supports breakpoint resume, and merges the chunks on the server using React or Vue on the frontend and NestJS with TypeScript on the backend.
This article reviews the historical prominence of Element UI, outlines its limitations in modern projects, and explains why the team switched to Radix UI, highlighting Radix's customizability, broad framework support, web‑standard compatibility, and strong accessibility features.
This article explains how the Single Responsibility Principle applies to React components, shows a common anti‑pattern with a monolithic component, and demonstrates a cleaner architecture using custom hooks, presentation components, and container components for better maintainability.
The JD Merchant Intelligent Assistant employs a large‑language‑model‑driven multi‑agent architecture with dynamic ReAct planning, enabling merchants to query and execute store operations in under a second with over 90 % decision accuracy, while reducing inference cost, hallucinations, and engineering effort across diverse e‑commerce tasks.
This article compares React 18 and Vue 3 component communication techniques—including parent‑child, sibling, and cross‑level patterns—provides detailed code examples for props, emit, context, provide/inject, and summarizes their respective advantages and use cases in modern web development.
This article explains how the Open‑Closed Principle applies to React development, demonstrating anti‑patterns and refactoring techniques—including base components, composition, higher‑order components, and custom hooks—to create extensible, maintainable UI elements while keeping tests simple.
This article introduces TanStack Router for React, detailing its three routing modes—file‑based, virtual file, and code‑based—along with TypeScript support, preloading strategies, request waterfall optimization, and stale‑while‑revalidate caching, providing practical insights and links for further exploration.
This guide explains React’s various state types—local, class, global, navigation, form, and persistent—showing how to manage each with built‑in hooks, Context, libraries such as Zustand, Jotai, React Query, SWR, React Router, TanStack Router, React Hook Form, Formik, and persistence tools like localStorage and redux‑persist.
This article consolidates Google's Kaggle whitepaper on AI Agents, explaining their definition, key characteristics, core components—model, tools, and orchestration layer—along with architectural diagrams, learning techniques, and practical deployment steps on Vertex AI, offering a comprehensive guide for building generative AI agents.
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.
The article provides a detailed analysis of Google’s AI Agent whitepaper, explaining the agent architecture, core components such as models, tools, and orchestration layers, comparing extensions, functions, and data stores, and demonstrating practical implementations with LangChain and Vertex AI to illustrate how targeted learning can boost agent performance.
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.
