BestHub
Sign in
Tagged articles
1022 articles
Page 6 of 11
DaTaobao Tech
DaTaobao Tech
Sep 29, 2022 · Frontend Development

Understanding the Implementation of CSS-in-JS with Styled-Components

The article explains CSS‑in‑JS fundamentals, examines styled‑components’ source code—including its styled function, createStyledComponent factory, and runtime style injection—compares it with emotion, demonstrates a simple SolidJS MVP implementation, and discusses the technique’s rise, limitations, and possible compile‑time or atomic‑CSS future.

CSS-in-JSReactSolidJS
0 likes · 11 min read
Understanding the Implementation of CSS-in-JS with Styled-Components
Sohu Tech Products
Sohu Tech Products
Sep 21, 2022 · Frontend Development

The New Wave of React State Management

This article examines the core challenges that global state‑management libraries must address in modern React applications, reviews the evolution from early solutions like Redux to newer atom‑based and remote‑state tools, and offers guidance on selecting the most suitable library for a given project.

JotaiReactRecoil
0 likes · 17 min read
The New Wave of React State Management
KooFE Frontend Team
KooFE Frontend Team
Sep 18, 2022 · Frontend Development

PureComponent vs Hooks: Mastering React Re‑renders and Performance

This article explores how PureComponent and shouldComponentUpdate address unnecessary re‑renders in class components, compares them with functional components and hooks, and provides practical techniques—including React.memo, useCallback, setState updater functions, and refs—to optimize rendering performance in modern React applications.

PureComponentReacthooks
0 likes · 20 min read
PureComponent vs Hooks: Mastering React Re‑renders and Performance
Bilibili Tech
Bilibili Tech
Sep 16, 2022 · Frontend Development

Understanding contenteditable and Modern Rich Text Editors with Slate.js

The article explains how the HTML contenteditable attribute enables in‑place editing, why legacy execCommand‑based editors are inconsistent, and how modern frameworks such as Slate.js—built on React and Immutable.js—provide a structured, location‑based data model with Transform and Node APIs for reliable, portable rich‑text editing.

JavaScriptReactSlate.js
0 likes · 12 min read
Understanding contenteditable and Modern Rich Text Editors with Slate.js
ELab Team
ELab Team
Sep 14, 2022 · Frontend Development

Master Browser Extension Development with Plasmo: From Basics to Advanced Practices

This comprehensive guide explores the fundamentals and advanced techniques of building Chrome extensions using the Plasmo framework, covering plugin concepts, traditional and modern development workflows, code examples, dynamic UI injection, resource handling, and best practices for efficient, scalable extension engineering.

Chrome APIPlasmoReact
0 likes · 39 min read
Master Browser Extension Development with Plasmo: From Basics to Advanced Practices
Yunxuetang Frontend Team
Yunxuetang Frontend Team
Sep 9, 2022 · Frontend Development

Uncover 6 Weird React Behaviors and Fresh Frontend Trends

This curated overview highlights six puzzling React phenomena, introduces CSS Grid basics, examines AI‑generated art controversies, discusses COEP’s security benefits, reviews the new Fresh full‑stack framework, and explores how to measure user experience with data‑driven metrics.

AI artCSS GridReact
0 likes · 4 min read
Uncover 6 Weird React Behaviors and Fresh Frontend Trends
IT Services Circle
IT Services Circle
Sep 6, 2022 · Frontend Development

Understanding Low‑Code: Tools vs. Platforms and Their Impact on Development

The article examines the recurring hype around low‑code, contrasting the programmer’s view of it as a DSL like JSX that abstracts DOM manipulation with the capital‑driven notion of a platform that replaces developers, and discusses the practical challenges of customization, collaboration, testing, and the future of low‑code tools.

DevelopmentReactlow-code
0 likes · 7 min read
Understanding Low‑Code: Tools vs. Platforms and Their Impact on Development
Alibaba Cloud Developer
Alibaba Cloud Developer
Sep 2, 2022 · Frontend Development

How to Build a Standardized Webpack + React + TypeScript Front‑End from Scratch

This tutorial walks you through creating a production‑ready front‑end project from an empty directory using Webpack 5, React 18 and TypeScript, covering project structure, dependencies, Babel and TypeScript setup, resource handling, development environment, performance optimizations, and full configuration files.

ConfigurationESLintReact
0 likes · 26 min read
How to Build a Standardized Webpack + React + TypeScript Front‑End from Scratch
KooFE Frontend Team
KooFE Frontend Team
Aug 30, 2022 · Frontend Development

Mastering Composable React Components: Build a Reusable Tabs UI

This article explains core principles for designing composable React APIs, demonstrates how to decompose UI into stable, reusable parts, and walks through a complete implementation of a flexible Tabs component with context, render‑props, and testing strategies.

Component CompositionReactfrontend
0 likes · 22 min read
Mastering Composable React Components: Build a Reusable Tabs UI
Huolala Tech
Huolala Tech
Aug 30, 2022 · Frontend Development

How React DevTools Peeks Inside Components and Extends useDebugValue

This article explains the inner workings of React DevTools, how it hooks into ReactDOM to access FiberNode structures and component data, and demonstrates a custom useDebugValueAnywhere implementation that bypasses the original hook's limitations for advanced debugging.

DevToolsFiberReact
0 likes · 8 min read
How React DevTools Peeks Inside Components and Extends useDebugValue
MaGe Linux Operations
MaGe Linux Operations
Aug 29, 2022 · Operations

One-Command Docker Compose: Deploy Full-Stack Projects Instantly

This guide walks through using Docker Compose to package and launch a complete full‑stack application—including a React front‑end, an Express back‑end, and a MariaDB database—with a single command, covering prerequisites, Dockerfiles, Nginx configuration, and runtime management.

DockerDocker ComposeExpress
0 likes · 7 min read
One-Command Docker Compose: Deploy Full-Stack Projects Instantly
360 Smart Cloud
360 Smart Cloud
Aug 24, 2022 · Frontend Development

Common Big Data Scenarios and Front-End Techniques for Rendering Large Data Sets

This article explores typical big-data use cases such as real-time bullet comments and massive server-side data lists, analyzes why rendering thousands of DOM elements can cause page lag, and presents front-end solutions—including dynamic element creation, document fragments, and virtual scrolling libraries—to improve performance.

DOM optimizationReactVue
0 likes · 9 min read
Common Big Data Scenarios and Front-End Techniques for Rendering Large Data Sets
DaTaobao Tech
DaTaobao Tech
Aug 17, 2022 · Frontend Development

Understanding and Using the useReducer Hook in React

React’s useReducer hook, introduced in version 16.8, lets a component manage complex state by supplying a reducer function and an initial value, returning [state, dispatch] where dispatch triggers actions; it supports lazy initialization, centralizes updates, works with useContext for shared state, and is preferable to useState for non‑trivial logic but less suited than full Redux for large‑scale state needs.

JavaScriptReactState Management
0 likes · 19 min read
Understanding and Using the useReducer Hook in React
KooFE Frontend Team
KooFE Frontend Team
Aug 14, 2022 · Frontend Development

Mastering React Re-renders: When, Why, and How to Optimize Performance

This comprehensive guide explains what React re‑renders are, distinguishes necessary from unnecessary re‑renders, outlines the four triggers—state, parent re‑render, context, and hooks—and provides practical patterns and anti‑patterns, including memoization, useMemo/useCallback, and key management, to improve component performance.

KEYReactcontext
0 likes · 15 min read
Mastering React Re-renders: When, Why, and How to Optimize Performance
Sohu Tech Products
Sohu Tech Products
Aug 10, 2022 · Frontend Development

React Security Best Practices: Preventing XSS and Safe Rendering

This article explains how to secure React applications by avoiding dangerous HTML injection methods, using proper sanitization, handling server‑side rendering safely, preventing JSON and URL injection, keeping dependencies up‑to‑date, and applying ESLint security rules.

ReactWeb DevelopmentXSS
0 likes · 6 min read
React Security Best Practices: Preventing XSS and Safe Rendering
政采云技术
政采云技术
Jul 12, 2022 · Frontend Development

Configurable Form Data Design for React/Ant Design Projects

This article introduces a lightweight, configuration‑driven approach to building form fields in React using Ant Design, showing how to replace repetitive FormItem code with a declarative schema, handle edit/detail modes, render different component types, and apply common validation rules.

Ant DesignForm ConfigurationReact
0 likes · 12 min read
Configurable Form Data Design for React/Ant Design Projects
IT Services Circle
IT Services Circle
Jul 10, 2022 · Frontend Development

Plasmo Framework Guide: Building Chrome Extensions with React and TypeScript

This article introduces Plasmo, a Next.js‑like framework for creating browser extensions using React and TypeScript, covering its key features, system requirements, project scaffolding, development workflow, content‑script integration, environment variables, internationalization, remote code handling, and publishing automation.

ChromeDevelopmentPlasmo
0 likes · 17 min read
Plasmo Framework Guide: Building Chrome Extensions with React and TypeScript
Alibaba Terminal Technology
Alibaba Terminal Technology
Jul 6, 2022 · Frontend Development

Inside React Labs’ June 2022 Updates: Server Components, Offscreen, and New Docs

The June 2022 React Labs post reveals ongoing experiments such as Server Components, asset loading deduplication, static server‑rendering optimizations, a new optimizing compiler with a Playground, the Offscreen API, transition tracing tools, and a revamped documentation site focused on hooks and performance.

DocumentationOffscreenReact
0 likes · 14 min read
Inside React Labs’ June 2022 Updates: Server Components, Offscreen, and New Docs
ByteFE
ByteFE
Jul 1, 2022 · Industry Insights

What’s New in Frontend, Cloud, and AI? Key Highlights from Vue, React, WebAssembly and More

This roundup covers the Vue 2.7 beta release, speculative futures for a Chromium‑only web, the architecture of a front‑end monitoring SDK, low‑code rendering standards, JavaScript sandbox evolution, GitHub Copilot’s general availability, WebAssembly trends, functional programming basics, Vue’s double‑ended diff algorithm, JSON.stringify pitfalls, and the latest focus areas of the React team.

ReactVueWeb Development
0 likes · 7 min read
What’s New in Frontend, Cloud, and AI? Key Highlights from Vue, React, WebAssembly and More
DaTaobao Tech
DaTaobao Tech
Jun 30, 2022 · Frontend Development

VideoX: A Multi‑Platform Front‑End Video Player for Large‑Scale E‑Commerce

VideoX is a versatile front‑end video player built for Taobao’s massive e‑commerce platform, offering multi‑terminal playback, customizable controls, and analytics through a layered architecture that separates core decoding, framework integration, and experience assurance, while supporting modern web technologies and native fallbacks across diverse business scenarios.

RaxReactarchitecture
0 likes · 29 min read
VideoX: A Multi‑Platform Front‑End Video Player for Large‑Scale E‑Commerce
ByteDance Web Infra
ByteDance Web Infra
Jun 29, 2022 · Frontend Development

Starry Platform: Code‑In & Code‑Out Low‑Code Solution for Frontend Development and Micro‑Frontend Integration

The article explains how ByteDance’s Starry low‑code platform uses a Code‑In/Code‑Out model to enable flexible component development, break R&D bottlenecks, generate full React projects, and integrate with micro‑frontend architectures like Garfish to support SSR for large‑scale web applications.

DSLReactfrontend
0 likes · 14 min read
Starry Platform: Code‑In & Code‑Out Low‑Code Solution for Frontend Development and Micro‑Frontend Integration
Programmer DD
Programmer DD
Jun 29, 2022 · Frontend Development

Why OpenSumi Is the Next‑Generation IDE Framework for Web and Electron Developers

OpenSumi, the first domestically developed high‑performance, highly customizable IDE framework compatible with VS Code plugins, enables developers to quickly build web or Electron‑based IDEs with extensive view customization, cloud integration, pure‑frontend deployment, and full VS Code plugin support, addressing common limitations of existing open‑source solutions.

ElectronIDE frameworkOpenSumi
0 likes · 12 min read
Why OpenSumi Is the Next‑Generation IDE Framework for Web and Electron Developers
Sensors Frontend
Sensors Frontend
Jun 28, 2022 · Frontend Development

Top 11 Must-Read Frontend Development Articles: Debugging, Testing, React, and More

This curated list presents eleven essential frontend development articles covering VS Code debugging, React component library maintenance, web application evolution, monorepo task orchestration, Ant Design table export, testing strategies, low‑code rendering, browser observers, React Server Components, modern ES features, and effective test planning.

JavaScriptReactdebugging
0 likes · 6 min read
Top 11 Must-Read Frontend Development Articles: Debugging, Testing, React, and More
Aotu Lab
Aotu Lab
Jun 23, 2022 · Frontend Development

How We Built a 3D Immersive Food Marketplace with Babylon and React

This article details the end‑to‑end design and implementation of a 3D immersive food‑shopping experience, covering project goals, architecture split between Babylon 3D rendering and DOM rendering, resource management, camera collision handling, map integration, performance optimizations, and lessons learned.

3D renderingBabylon.jsReact
0 likes · 20 min read
How We Built a 3D Immersive Food Marketplace with Babylon and React
Sohu Tech Products
Sohu Tech Products
Jun 22, 2022 · Frontend Development

Comprehensive Guide to React Server-Side Rendering (SSR) with Code Examples

This article provides an in‑depth tutorial on implementing server‑side rendering (SSR) for React applications, covering basic concepts, Koa server setup, ReactDOMServer APIs, routing with react‑router, Redux state hydration, CSS handling, performance optimizations, and modern SSR frameworks such as Next.js and Umi.

Node.jsReactRedux
0 likes · 30 min read
Comprehensive Guide to React Server-Side Rendering (SSR) with Code Examples
KooFE Frontend Team
KooFE Frontend Team
Jun 18, 2022 · Frontend Development

Build a Simple Redux from Scratch and Integrate It with React

This article explains Redux’s core concepts, demonstrates how to implement a basic createStore function in JavaScript, and shows how to integrate it with React using a custom Provider and connect higher‑order component for state sharing across components.

JavaScriptReactRedux
0 likes · 5 min read
Build a Simple Redux from Scratch and Integrate It with React
Zhuanzhuan Tech
Zhuanzhuan Tech
Jun 16, 2022 · Frontend Development

Frontend SDK Design and Integration for a Unified Permission System

This article explains how to design a unified permission system's frontend SDK, detailing its core APIs, integration methods for standard React and Umi projects, dynamic route generation, and menu/button level permission controls, accompanied by practical code examples.

ReactSDKUmi
0 likes · 9 min read
Frontend SDK Design and Integration for a Unified Permission System
IT Services Circle
IT Services Circle
Jun 14, 2022 · Frontend Development

Getting Started with Plasmo: A Modern Framework for Building Browser Extensions

This article introduces Plasmo, a modern framework for building browser extensions using familiar web technologies like React, TypeScript, and Webpack, explains how to initialize a project, configure assets, debug with Chrome, and publish across Chrome, Firefox, and Edge stores, streamlining development and deployment.

PlasmoReactTypeScript
0 likes · 6 min read
Getting Started with Plasmo: A Modern Framework for Building Browser Extensions
360 Tech Engineering
360 Tech Engineering
May 31, 2022 · Frontend Development

React Router DOM v6: Installation, Simple, Nested, Index, and Parameterized Routing with Full Code Examples

This tutorial explains how to install react-router-dom, create basic and nested routes, handle unmatched and index routes, pass parameters, use search parameters, customize link behavior, and navigate programmatically in a React application, providing complete code snippets for each concept.

JavaScriptReactReact Router
0 likes · 10 min read
React Router DOM v6: Installation, Simple, Nested, Index, and Parameterized Routing with Full Code Examples
21CTO
21CTO
May 28, 2022 · Frontend Development

2022 Tech Learning Roadmap: Rust, WASM, Vite SSR, Vue/React, Kubernetes, GraphQL

In this personal learning plan for 2022, the author outlines a deep dive into Rust and WebAssembly, explores Vite with server‑side rendering, experiments with Vue, React and Next.js, investigates Kubernetes for container orchestration, and examines GraphQL as a modern API alternative.

GraphQLReactRust
0 likes · 5 min read
2022 Tech Learning Roadmap: Rust, WASM, Vite SSR, Vue/React, Kubernetes, GraphQL
转转QA
转转QA
May 26, 2022 · Frontend Development

Frontend Refactoring of a Metrics System: Reducing Development Cost with Unified Chart and Table Components

This article describes how a metrics dashboard was refactored by standardizing chart and table data formats, leveraging Ant Design Charts, and building reusable React components such as ChartCardList and RankTable, thereby minimizing front‑end development effort and enabling rapid addition of new visualizations.

Code OptimizationData visualizationReact
0 likes · 7 min read
Frontend Refactoring of a Metrics System: Reducing Development Cost with Unified Chart and Table Components
Sohu Tech Products
Sohu Tech Products
May 25, 2022 · Frontend Development

Comprehensive Guide to the React Ecosystem: Tools, Libraries, and Best Practices

This article provides an extensive overview of the modern React ecosystem, covering project setup options, state management, routing, styling, component libraries, animation, data fetching, testing, type checking, internationalization, and many other tools and best‑practice recommendations for frontend developers.

ReactState ManagementStyling
0 likes · 20 min read
Comprehensive Guide to the React Ecosystem: Tools, Libraries, and Best Practices
Tencent IMWeb Frontend Team
Tencent IMWeb Frontend Team
May 16, 2022 · Frontend Development

How to Prevent Race Conditions in React Data Fetching

This article explains what race conditions are in front‑end web development, demonstrates the issue with a React demo fetching articles, and walks through step‑by‑step solutions using custom hooks, useEffect cleanup, and AbortController to safely cancel outdated requests and avoid stale data rendering.

AbortControllerCustom HookData Fetching
0 likes · 10 min read
How to Prevent Race Conditions in React Data Fetching
KooFE Frontend Team
KooFE Frontend Team
May 14, 2022 · Frontend Development

Mastering Global State in React: useReducer + Context Explained

This article explains how useReducer can replace useState for complex state logic, introduces Context for sharing data across components, demonstrates their combined usage with code examples, and compares this approach to React‑Redux, highlighting differences in data flow, rendering behavior, and suitable scenarios.

ReactcontextuseReducer
0 likes · 5 min read
Mastering Global State in React: useReducer + Context Explained
ByteFE
ByteFE
May 13, 2022 · Frontend Development

Weekly Tech Digest: Flutter 3.0, JavaScript Framework Eras, React Concurrent Rendering, WebComponents, Build Tools Comparison, Rust Intro, Vite Core Principles

This digest covers Flutter 3.0 release, the evolution of JavaScript frameworks, React concurrent rendering, WebComponents UI library insights, frontend build tool comparisons, Rust fundamentals, and Vite core principles, and includes external articles on GraphQL and software engineering best practices.

FlutterJavaScriptReact
0 likes · 5 min read
Weekly Tech Digest: Flutter 3.0, JavaScript Framework Eras, React Concurrent Rendering, WebComponents, Build Tools Comparison, Rust Intro, Vite Core Principles
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
May 13, 2022 · Frontend Development

How to Choose the Right CSS Strategy for a React Component Library

This article analyzes various CSS styling approaches for React component libraries, comparing CSS‑JS association methods and naming‑conflict solutions, and offers guidance on selecting the most suitable strategy based on development workflow, performance, SSR support, and maintainability.

CSSCSS-in-JSComponent Library
0 likes · 21 min read
How to Choose the Right CSS Strategy for a React Component Library
Alibaba Terminal Technology
Alibaba Terminal Technology
May 11, 2022 · Frontend Development

How React Server Components May Transform Frontend Development

This article examines the emerging React Server Components feature, explains the limitations of traditional API‑driven front‑end/back‑end separation, and outlines how server‑rendered components can reduce bundle size, eliminate request waterfalls, and lower collaboration costs for modern web applications.

APIReactServer Components
0 likes · 14 min read
How React Server Components May Transform Frontend Development
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
May 5, 2022 · Frontend Development

React 18 New Features, Upgrade Guide, and API Changes

This article provides a comprehensive overview of React 18, covering its release timeline, migration steps, new APIs such as the root API, useId, useSyncExternalStore and useInsertionEffect, automatic state batching, flushSync, updated Strict Mode and Suspense behavior, concurrent mode concepts, and practical code examples for developers upgrading from React 17.

Concurrent ModeReactReact 18
0 likes · 22 min read
React 18 New Features, Upgrade Guide, and API Changes
KooFE Frontend Team
KooFE Frontend Team
May 3, 2022 · Frontend Development

Build a Simple React Global State Manager Using ES6 Proxy

This article demonstrates how to leverage the ES6 Proxy object to create a lightweight global state management solution for React, walking through a counter example, custom hooks, listener tracking, and a reusable store creator for seamless component updates.

JavaScriptReactfrontend
0 likes · 7 min read
Build a Simple React Global State Manager Using ES6 Proxy
Yiche Technology
Yiche Technology
Apr 19, 2022 · Frontend Development

Vue vs React: Technical Comparison and Project Selection Guide

This article compares Vue and React by examining their template syntax, virtual DOM implementations, update strategies, data binding mechanisms, and performance characteristics, offering practical guidance on choosing the appropriate framework for projects of varying size and browser compatibility requirements.

ReactVirtual DOMVue
0 likes · 10 min read
Vue vs React: Technical Comparison and Project Selection Guide
KooFE Frontend Team
KooFE Frontend Team
Apr 17, 2022 · Frontend Development

Master Global State Management in React with Custom Hooks

Learn how to build a simple global state management solution in React using custom hooks, starting from a basic counter component, extending it with initialization props, synchronizing multiple counters, and finally creating a reusable createGlobalState utility for shared state across components.

Custom HookReactfrontend development
0 likes · 9 min read
Master Global State Management in React with Custom Hooks
IT Services Circle
IT Services Circle
Apr 17, 2022 · Frontend Development

A 40-line Diff Algorithm Implementation for React's Virtual DOM

This article explains the design and implementation of a minimal 40‑line Diff algorithm for React’s virtual DOM, covering node attribute changes, insertions, deletions, and moves, and provides a complete TypeScript demo that marks nodes with placement or deletion flags for efficient DOM updates.

Diff AlgorithmJavaScriptReact
0 likes · 10 min read
A 40-line Diff Algorithm Implementation for React's Virtual DOM
ByteFE
ByteFE
Apr 15, 2022 · Frontend Development

Curated Technical Reads: React Ecosystem, High‑Concurrency Coupon System, WebIDE, Front‑End Standards, and More

This curated collection highlights recent React ecosystem insights, a step‑by‑step guide to building a 100k QPS coupon system, techniques for creating a lightweight WebIDE, strategies for establishing front‑end standards, plus productivity habits, the Rust 2024 roadmap, React mind‑maps, open‑source programming books, and a new JavaScript sandbox using ShadowRealm.

ReactRust RoadmapWebIDE
0 likes · 4 min read
Curated Technical Reads: React Ecosystem, High‑Concurrency Coupon System, WebIDE, Front‑End Standards, and More
Laiye Technology Team
Laiye Technology Team
Apr 15, 2022 · Frontend Development

Improving Maintainability of an Ant Design‑Based Component Library with HoC, Dumi, and Monorepo

This article describes how a company refactored its Ant Design‑based React component library by standardizing on higher‑order component wrappers, adopting the dumi documentation tool, and organizing the codebase with a Lerna‑Yarn monorepo, resulting in significantly improved maintainability and developer efficiency.

Ant DesignComponent LibraryHOC
0 likes · 9 min read
Improving Maintainability of an Ant Design‑Based Component Library with HoC, Dumi, and Monorepo
IT Services Circle
IT Services Circle
Apr 14, 2022 · Frontend Development

Getting Started with Alibaba's LowCodeEngine: A Low‑Code Platform for Building React Front‑End Applications

This article introduces Alibaba's open‑source LowCodeEngine, outlines its key features, and provides a step‑by‑step tutorial—including environment setup, dependency installation, project launch, component configuration, data source integration, preview, and code export—to help developers quickly build a low‑code front‑end platform using React.

LowCodeEngineNode.jsReact
0 likes · 6 min read
Getting Started with Alibaba's LowCodeEngine: A Low‑Code Platform for Building React Front‑End Applications
macrozheng
macrozheng
Apr 13, 2022 · Frontend Development

Create a Powerful Low‑Code Platform in 5 Minutes with Alibaba LowCodeEngine

This article introduces Alibaba's open‑source LowCodeEngine, outlines its key features, and provides a step‑by‑step tutorial for quickly building a low‑code development platform that generates React front‑end code, configures components, connects data sources, and exports the resulting code.

AlibabaLowCodeEngineReact
0 likes · 7 min read
Create a Powerful Low‑Code Platform in 5 Minutes with Alibaba LowCodeEngine
Alipay Experience Technology
Alipay Experience Technology
Apr 11, 2022 · Frontend Development

Boost React App Performance: 4 Proven Optimization Techniques

This article outlines four key React performance optimization strategies—reducing render frequency, trimming rendered nodes, minimizing computation, and designing components wisely—while providing practical code examples such as PureComponent, shouldComponentUpdate, React.memo, lazy loading, useMemo, and virtualized lists.

LazyLoadingReactVirtualList
0 likes · 12 min read
Boost React App Performance: 4 Proven Optimization Techniques
LOFTER Tech Team
LOFTER Tech Team
Apr 6, 2022 · Frontend Development

State Management in React: From Redux to Unstated‑Next, Constate, Zustand, Jotai and Valtio

This article reviews the evolution of React state‑management solutions, comparing classic Redux with modern Hook‑based libraries such as Unstated‑Next, Constate, Zustand, Jotai and Valtio, explains core concepts like algebraic effects, context duplication, and provides practical code examples and performance tips.

Context APIReactRedux
0 likes · 21 min read
State Management in React: From Redux to Unstated‑Next, Constate, Zustand, Jotai and Valtio
ByteFE
ByteFE
Apr 1, 2022 · Frontend Development

Curated Technical Reading List: Frontend Highlights, Web3 Insights, and Development Resources

This newsletter curates a selection of recent technical articles and resources, covering front‑end development breakthroughs like Vue component extraction, React 18 features, Babel compilation, as well as Web 3.0 perspectives, Node.js design principles, email HTML/CSS techniques, and a collection of efficiency‑boosting tools for developers.

Node.jsReactVue
0 likes · 5 min read
Curated Technical Reading List: Frontend Highlights, Web3 Insights, and Development Resources
Laravel Tech Community
Laravel Tech Community
Mar 31, 2022 · Frontend Development

React 18 Released: New Features Including Automatic Batching, Transitions, and Enhanced Suspense Support

React 18 has been officially released, introducing automatic batching, a new startTransition API, expanded Suspense capabilities, updated client‑server rendering APIs, and stricter mode behaviors, all built on a concurrent rendering engine that aims to change how developers build modern web applications.

Automatic BatchingReactReact18
0 likes · 5 min read
React 18 Released: New Features Including Automatic Batching, Transitions, and Enhanced Suspense Support
21CTO
21CTO
Mar 30, 2022 · Frontend Development

What’s New in GitLab 14.9, React 18, and a DIY GitHub Issue Printer?

The article covers DJI’s denial of aiding Russia, the latest features in GitLab 14.9, the official launch of React 18 with its new concurrent capabilities, and a developer’s creative project that prints GitHub issues using a Raspberry Pi‑connected receipt printer.

DJIGitHubGitLab
0 likes · 8 min read
What’s New in GitLab 14.9, React 18, and a DIY GitHub Issue Printer?
Alibaba Terminal Technology
Alibaba Terminal Technology
Mar 29, 2022 · Frontend Development

How We Built a High‑Performance React Big Data Table with AntV S2

This article explains how the AntV S2 canvas‑based rendering engine was used to create a feature‑rich, high‑performance React data‑grid capable of handling tens of thousands of rows, covering cell editing, brush selection, virtual scrolling, frozen rows/columns, custom headers, filtering, sorting, searching, and copy‑to‑clipboard functionality.

AntV S2Data GridReact
0 likes · 28 min read
How We Built a High‑Performance React Big Data Table with AntV S2
ByteDance ADFE Team
ByteDance ADFE Team
Mar 24, 2022 · Frontend Development

Understanding SWR: Stale‑While‑Revalidate Data Fetching in React

This article explains the SWR library—a lightweight React hook that implements the stale‑while‑revalidate caching strategy—covering its core concepts, basic usage, advanced features like global configuration and middleware, and an overview of its internal implementation.

Data FetchingReactSWR
0 likes · 15 min read
Understanding SWR: Stale‑While‑Revalidate Data Fetching in React
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 23, 2022 · Frontend Development

Creating a Flaming Elden Ring Logo with React and Three.js

This tutorial demonstrates how to build a fire‑animated Elden Ring logo using React, Three.js, and the Fire.js extension, covering background setup, resource import, scene initialization, fire effect configuration, responsive scaling, camera animation, and rendering loop with complete code examples.

3DFire.jsReact
0 likes · 9 min read
Creating a Flaming Elden Ring Logo with React and Three.js
Sensors Frontend
Sensors Frontend
Mar 22, 2022 · Frontend Development

Essential Reads: Modern Frontend, Architecture, and Development Insights

This curated list highlights twelve insightful articles covering Formily's design, React Hooks quirks, ESModule production strategies, Observable-based anti‑corruption layers, REST API POST debates, TypeScript pitfalls, WebAssembly future, spline vs. Bézier curves, Cocos engine rendering, handling complexity with DDD, and React's automatic import changes.

Game DevelopmentReactTypeScript
0 likes · 5 min read
Essential Reads: Modern Frontend, Architecture, and Development Insights
ByteFE
ByteFE
Mar 18, 2022 · Frontend Development

Curated Technical Articles and Resources for Frontend Development

This collection highlights recent technical articles and resources covering Vue 3.0, ESLint fundamentals, defensive CSS techniques, low‑code system design, React project setup, Nest.js with TypeORM, and an introduction to the LRU caching algorithm, offering practical insights for frontend developers.

CSSESLintLRU
0 likes · 4 min read
Curated Technical Articles and Resources for Frontend Development
Rare Earth Juejin Tech Community
Rare Earth Juejin Tech Community
Mar 16, 2022 · Frontend Development

Implementing a 3D Floating Text Effect with React and Three.js

This article demonstrates how to recreate the Three.js Journey floating 3D text effect using a React and Three.js stack, covering resource imports, DOM structure, state management, CSS grid background, font loading, geometry creation, mouse interaction, fullscreen handling, post‑processing effects, and responsive scaling.

3DGraphicsPostProcessing
0 likes · 17 min read
Implementing a 3D Floating Text Effect with React and Three.js
Ctrip Technology
Ctrip Technology
Mar 10, 2022 · Frontend Development

DynamicForm: A React‑Based Visual Dynamic Form Builder for Ctrip’s Lego Platform

The article introduces DynamicForm, a React‑driven visual dynamic form configuration system designed to eliminate repetitive form coding, offering drag‑and‑drop layout, rich control types, validation, data binding, and a modular architecture that streamlines component property management on Ctrip’s Lego platform.

CtripDrag-and-DropDynamic Forms
0 likes · 7 min read
DynamicForm: A React‑Based Visual Dynamic Form Builder for Ctrip’s Lego Platform
Alipay Experience Technology
Alipay Experience Technology
Mar 10, 2022 · Frontend Development

How We Built a High‑Performance React Data Grid with AntV S2

This article details how Ant Financial’s front‑end team created a fast, extensible React big‑data table component using the open‑source AntV S2 Canvas library, covering performance‑driven technical choices, custom cell editing, virtual scrolling, freezing, filtering, sorting, and integration challenges that replaced costly commercial spreadsheet solutions.

AntV S2CanvasLarge Data
0 likes · 29 min read
How We Built a High‑Performance React Data Grid with AntV S2
Java High-Performance Architecture
Java High-Performance Architecture
Mar 10, 2022 · Frontend Development

Why OpenSumi Is the Next‑Gen Open‑Source IDE for Web and Electron

OpenSumi, the first domestically developed, highly customizable, high‑performance IDE framework compatible with VS Code extensions, enables developers to quickly build dual‑platform (Web and Electron) IDEs with modular architecture, independent processes, and extensive view customization, addressing the repetitive setup challenges faced by Alibaba and Ant Group teams.

ElectronIDEOpenSumi
0 likes · 6 min read
Why OpenSumi Is the Next‑Gen Open‑Source IDE for Web and Electron
AntTech
AntTech
Mar 3, 2022 · Frontend Development

OpenSumi: An Open‑Source, High‑Performance, Customizable IDE Framework for Web and Electron

OpenSumi is a TypeScript‑based, VS Code‑compatible IDE framework jointly developed by Ant Group and Alibaba that offers low‑threshold, high‑performance, and highly customizable web and Electron IDE solutions, supports full VS Code plugin ecosystems, and provides cloud‑native development workflows for vertical industry scenarios.

Cloud IDEIDEOpenSumi
0 likes · 11 min read
OpenSumi: An Open‑Source, High‑Performance, Customizable IDE Framework for Web and Electron
ByteDance ADFE Team
ByteDance ADFE Team
Feb 28, 2022 · Frontend Development

Understanding Recoil’s Asynchronous Data Flow and Loading Handling

This article explains how Recoil implements asynchronous data streams, detailing the underlying data‑flow architecture, the role of atoms and selectors, the lifecycle of async loading states, and two approaches for handling loading—manual useRecoilValueLoadable and automatic React.Suspense integration—accompanied by illustrative code examples.

AsyncReactRecoil
0 likes · 10 min read
Understanding Recoil’s Asynchronous Data Flow and Loading Handling
ByteDance ADFE Team
ByteDance ADFE Team
Feb 21, 2022 · Frontend Development

Event Collector: A Markup‑Based Web Event Tracking Solution

The article introduces Event Collector, a markup‑based web event tracking framework that replaces imperative tracking with data attributes or React components, explains its technical implementation, management tools, monorepo organization, release workflow, and React coding conventions to improve development efficiency and data analysis.

AnalyticsReactWeb Development
0 likes · 7 min read
Event Collector: A Markup‑Based Web Event Tracking Solution
NetEase Cloud Music Tech Team
NetEase Cloud Music Tech Team
Feb 18, 2022 · Frontend Development

Evolution of React State Management: From Local Hooks to Unstated‑Next, Hox, and Zustand

The article traces React’s state‑management evolution from basic useState hooks through unstated‑next and hox to the minimalist zustand library, showing how each step reduces boilerplate, eliminates prop‑drilling and deep providers, and enables precise, hook‑based updates for modern functional components.

HoxJavaScriptReact
0 likes · 13 min read
Evolution of React State Management: From Local Hooks to Unstated‑Next, Hox, and Zustand
Alipay Experience Technology
Alipay Experience Technology
Feb 14, 2022 · Frontend Development

Mastering the Ant Design Mobile Picker: API, Gestures, Performance & Accessibility

This article walks through the design and implementation of Ant Design Mobile's Picker component, covering its API, gesture handling, animation techniques, performance optimizations, and accessibility improvements for screen‑reader users, while sharing practical code examples and visual diagrams.

Ant Design MobilePicker ComponentReact
0 likes · 12 min read
Mastering the Ant Design Mobile Picker: API, Gestures, Performance & Accessibility
Sensors Frontend
Sensors Frontend
Feb 14, 2022 · Frontend Development

Essential 2022 Reads: Top Frontend Development Articles You Must Explore

Discover a curated collection of must‑read articles covering Esbuild tools, ES6 compatibility, Node.js require hooks, WebAssembly trends, React 18 batching, async error handling, Vite performance, Event Loop deep‑dive, micro‑frontends, V8 internals, and more for modern frontend engineers.

JavaScriptReactTypeScript
0 likes · 5 min read
Essential 2022 Reads: Top Frontend Development Articles You Must Explore
IT Xianyu
IT Xianyu
Feb 11, 2022 · Frontend Development

Building a Winter Olympics 3D Web Page with Three.js and React

This article demonstrates how to build an interactive Winter Olympics-themed 3D web page using Three.js and React, covering model loading, custom materials, lighting, particle effects, and camera controls, with detailed code snippets and explanations for each component.

3D graphicsReactThree.js
0 likes · 19 min read
Building a Winter Olympics 3D Web Page with Three.js and React
Ctrip Technology
Ctrip Technology
Feb 10, 2022 · Frontend Development

Web Performance Optimization Practices for Trip.com Flight Site

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

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

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

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

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

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

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

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

2021 JavaScript Ecosystem Highlights: Major Releases and Updates

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

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

Best Practices for Conditional Rendering in React JSX

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

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

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

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

ReactVisual Editorfrontend
0 likes · 6 min read
Boost Your React Workflow with Mometa: A Low‑Code Visual Editor