This guide walks you through setting up a CI/CD environment on a CentOS server using Docker, Git, Java, and Jenkins, covering installation, configuration, plugin management, and practical examples such as building Docker images, deploying a React app with Nginx, and automating the entire pipeline.
This roundup introduces Create React App 5 with Webpack 5 and Tailwind support, demonstrates how to use the express‑validator middleware in Express, highlights Pinia as a type‑safe Vue state manager, and points to a practical Nginx location configuration guide.
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.
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.
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.
This article explains how to keep state as close as possible to where it is used, using props for simple sharing, React Context as a "wormhole" for widely needed state, and custom hooks to simplify the pattern, illustrated with a step‑by‑step click‑counter example and performance considerations.
This article explains React's event system, covering how onClick events are delegated to the document, processed through synthetic events, and handled via the fiber architecture, plugin registry, and priority-based dispatching in React 16.13.1.
This comprehensive tutorial walks you through creating a complete web‑based blog using Go and the Gin framework for the backend, React for the frontend, PostgreSQL for persistent storage, JWT for authentication, and Docker for containerized deployment, covering code, configuration, and testing.
This guide explains how to contribute to Sentry's frontend codebase, covering repository layout, file naming, index usage, React component patterns, PropTypes, event‑handler conventions, Emotion styling, lint rules, TypeScript defaultProps, state management, testing with React Testing Library, Storybook setup, and migration from grid‑emotion to modern Emotion APIs.
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.
This article demonstrates how to centralize route, menu, permission, and breadcrumb definitions in a React and Ant Design based admin application by using nested configuration objects, flattening utilities, and dynamic lookup functions to reduce duplication and simplify maintenance.
This article explains React 16's three‑layer architecture—Scheduler, Reconciler, and Renderer—introduces fiber nodes and trees, and details how the render and commit phases process updates using beginWork, completeWork, effect lists, and three‑step DOM mutation.
This article explains the three main reasons function components re‑render—useState/useReducer updates, parent updates, and context changes—and shows how to control unnecessary renders with techniques such as memoization, useCallback, useRef, and component extraction.
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.
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.
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.
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.
This roundup covers React 18's move to beta, the Electron 16.0.0 launch, TypeScript 4.5 new features with code examples, plus essential open‑source libraries like Zod, tsd, Vitedge, and deep dives into TypeScript functions, narrowing techniques, and Svelte's compilation model.
This week’s newsletter highlights four insightful front‑end articles covering modern web development inefficiencies, the new React 18 startTransition API, an in‑depth look at ByteDance’s Modern.js project, and essential CSS engineering techniques, each with recommendations and links.
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.
This guide explains how to efficiently deploy a React frontend to a private server by either uploading the compiled build folder or pushing source code to a bare Git repository, then using a post‑receive hook to automatically build, package, and serve the application with 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.
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.
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.
This article explains React 18’s new concurrent rendering features, focusing on the startTransition API, its problem‑solving benefits, practical demos comparing React 17 and 18, and a deep dive into the underlying source code and scheduling mechanisms that enable prioritized updates.
This article explains the fundamentals of state and strategy patterns, introduces XState as a true finite‑state‑machine library, compares it with Redux/Vuex, discusses its advantages and drawbacks, and provides practical code examples for plain JavaScript, React, Vue 3 and Promise integration.
Douyin’s Semi Design, an open‑source React UI design system for enterprise apps, faced criticism after undisclosed Ant Design text was found in its documentation, prompting a public apology, license updates, and detailed attribution of the borrowed components.
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.
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.
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.
This article explains Docker fundamentals and demonstrates step‑by‑step image optimizations—using Alpine base images, multi‑stage builds, and Nginx—to reduce a React app container from over a gigabyte down to just 22 MB while preserving functionality.
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.
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.
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.
This article explains the concept of requestIdleCallback, its limitations, and how React Fiber implements a custom idle‑time scheduler using requestAnimationFrame and MessageChannel, complete with code demos and analysis of the underlying React source.
This article explains how React's shift from the legacy stack reconciler to the Fiber architecture and the introduction of Concurrent Mode address UI jank by slicing work, prioritizing updates, and enabling interruptible rendering, ultimately improving performance and responsiveness.
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.
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.
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.
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.
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.
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.
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.
This article explains how to build a WebShell by creating a Django ASGI WebSocket service using gunicorn, uvicorn, and Paramiko, and integrates it with a React front‑end component that leverages xterm.js for terminal interaction, providing full code examples and implementation details.
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.
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.
The React team has open‑sourced the Scheduling Profiler, a new tool that extends the classic Profiler by visualizing component scheduling, priority handling, transitions, and Suspense behavior, helping developers diagnose rendering delays and optimize performance in React 18 applications.
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.
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.
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.
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.
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.
This article explains how functional components, React hooks, and memoization techniques such as React.memo, useCallback, and useMemo can be combined to reduce unnecessary re‑renders, simplify side‑effect management, and improve overall UI performance in modern React applications.
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.
This article compares the three most popular frontend technologies—Angular, React, and Vue—examining their nature as libraries or frameworks, lifecycle, core development, flexibility, performance, and provides guidance on choosing the right one for different project sizes and requirements.
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.
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.
Seven university interns spent a summer at Alibaba's Taobao Front‑End Interactive team, gaining hands‑on experience with Eva.js, WebGL, React, engineering processes, and team collaboration while reflecting on personal growth, technical challenges, and the supportive workplace culture.
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.
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.
This roundup covers the SWR 1.0 release with major size reductions and new features, a reported Microsoft Edge ad problem, several fresh open‑source projects such as play.js and eslint‑nibble, and deep‑dive articles on TypeScript’s infer keyword and the advanced pnpm package manager.
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.
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.
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.
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.
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.
The article introduces micro‑app, a lightweight micro‑frontend framework from JD iPaaS, explains the concept of micro‑frontends, compares iframe and framework approaches, details micro‑app’s advantages and features, and provides step‑by‑step usage examples with Vue and React integration.
This article explains the concept of UI tearing in React, how synchronous rendering avoids it, why concurrent rendering can introduce visual inconsistencies, and illustrates the phenomenon with diagrams and code examples for developers.
This guide explains how to migrate a React server‑side rendering setup to React 18 by installing the latest version, replacing renderToString with pipeToNodeWritable, and adopting the new API surface while handling Suspense and streaming nuances.
This article provides a comprehensive technical analysis of the diff algorithm and Virtual DOM, detailing their core principles, O(n) complexity optimizations, and practical implementations across Vue 2.x, Vue 3.x, React, and the Snabbdom library.
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.
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.
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.
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.
In this extensive interview, Dan Abramov explains the purpose and advantages of React Server Components, compares React with Vue, explores type systems, examines emerging frameworks, and shares insights on codebase maintenance, testing, learning strategies, and community engagement for modern frontend development.
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.
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.
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.
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.
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.
This article explains the differences between React 18’s legacy ReactDOM.render root API and the new ReactDOM.createRoot API, covering concepts of roots, hydration, rendering callbacks, and why both APIs are maintained, with code examples for each approach.
This article explains memoization, demonstrates why it matters in React, and provides side‑by‑side examples of React.memo and useMemo, showing how each technique can prevent unnecessary re‑renders and improve performance in functional components.
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.
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.
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.
This article provides a comprehensive guide to building a large file chunked upload library from scratch using TypeScript, detailing both server-side stream processing for memory efficiency and client-side MD5 calculation with retry mechanisms to ensure reliable and performant file transfers.
This article explains how Vite leverages native ESM, middleware, and a series of plugins to enable fast development and hot module replacement for React projects, covering setup, source code transformation, import analysis, and the @vitejs/plugin-react-refresh workflow.
This article explains Taro 3's shift from a compile‑time heavy architecture to an interpretive runtime, detailing its JSX compilation drawbacks, the new runtime design that supports multiple frameworks, the implementation of a custom React reconciler, Web Components via Stencil, and how these changes improve cross‑platform development performance and flexibility.
This article explains the drawbacks of weakly‑typed JavaScript, outlines the advantages of adopting TypeScript, and provides practical guidance on configuring ESLint, Prettier, tsconfig, and React component typings—including hooks, event handling, and generic utilities—to improve code quality and developer productivity.
This article shares practical tips, patterns, and mental models for mastering styled-components in React, covering CSS variables, context styling, component encapsulation, inheritance, margin handling, z-index management, the "as" prop, priority tricks, and related tooling to write cleaner, more maintainable UI code.
This article explains the core concepts, basic usage, nested routing, parameter handling, Switch behavior, browser and hash modes, underlying path‑to‑regexp dependency, and integration with Dva, providing practical code examples and best‑practice recommendations for React Router in modern single‑page applications.
The article explains how Airbnb’s visx library, built on React and D3 primitives, addresses the need for a lightweight, highly expressive, and performant front‑end visualization solution by offering modular packages, TypeScript safety, and seamless integration with existing React codebases.
This article examines the performance bottlenecks of a Taro3 mini‑program list page after migrating from Taro1, analyzes causes such as excessive node rendering and large setState payloads, evaluates backend pagination and the built‑in virtual list, and presents a custom virtual‑list implementation that reduces rendered nodes, uses screen‑height placeholders, and achieves roughly 45% faster rendering and 50% quicker interaction response.
This article explains what the Virtual DOM is, why it improves performance, how React implements it through ReactElements and Fiber, and details the diff algorithm and reconciliation process that enable efficient UI updates in modern frontend development.
This article provides a comprehensive overview of rc-form, a React library used by Ant Design to manage form state, validation, and data collection, explaining why it is needed, its core APIs, practical usage examples, and a deep dive into its internal implementation.
In this extensive live interview, React core maintainer Dan discusses his programming origins, the philosophy behind React state management and Hooks, practical advice for newcomers, the challenges of Concurrent Mode and Server Components, and his vision for React’s evolution and competitiveness.
This article examines a common React progress‑bar component, explains why the naïve timer‑based implementation causes heavy reflows and repaints, and presents a GPU‑accelerated CSS animation solution that dramatically improves frame rates and reduces layout work.
React 18 introduces automatic batching that merges multiple state updates into a single render across all contexts—including promises, timeouts, and native events—improving performance while offering opt‑out mechanisms like flushSync for rare cases where immediate DOM updates are required.
React 18 introduces a progressive upgrade path with concurrent rendering, automatic batching, a new Root API, startTransition, and an improved Suspense SSR architecture, allowing developers to adopt new features with minimal code changes while enhancing performance and enabling selective hydration and streaming HTML.
This article explains how React 18 introduces progressive upgrades, a new Root API, automatic batching, the flushSync utility, an enhanced Suspense SSR architecture, and the startTransition API, providing code examples and practical guidance for developers transitioning from earlier React versions.
