# ruanyf/react-demos

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/ruanyf-react-demos).**

16,471 stars · 6,260 forks · JavaScript

## Links

- GitHub: https://github.com/ruanyf/react-demos
- awesome-repositories: https://awesome-repositories.com/repository/ruanyf-react-demos.md

## Description

This project is a collection of practical code samples and demonstrations for building user interfaces with React. It serves as a set of examples illustrating common interface patterns, state management techniques, and the implementation of modular, reusable components.

The repository provides specific demonstrations for several core development areas. These include samples for retrieving and rendering asynchronous data from external APIs, managing component lifecycles during mounting and unmounting, and handling internal state to sync form inputs. It also includes guides for direct document node manipulation and focus control using references.

The examples cover a broad surface of frontend development, ranging from the creation of interactive elements like toggle buttons and fading text effects to the implementation of data collections and input validation.

## Tags

### User Interface & Experience

- [Component-Based UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/component-based-ui-frameworks.md) — Serves as a collection of practical implementations of the component-based UI architecture paradigm. ([source](https://github.com/ruanyf/react-demos/tree/master/demo01))
- [React Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components.md) — Provides a collection of modular, reusable interface elements and practical code samples for the React ecosystem.
- [Asynchronous Data Fetching](https://awesome-repositories.com/f/user-interface-experience/asynchronous-data-fetching.md) — Manages non-blocking API requests and triggers visual refreshes upon data arrival. ([source](https://github.com/ruanyf/react-demos#readme))
- [Asynchronous Data Rendering](https://awesome-repositories.com/f/user-interface-experience/asynchronous-data-fetching/asynchronous-data-rendering.md) — Renders remote data as lists while managing loading and error visual states. ([source](https://github.com/ruanyf/react-demos/blob/master/demo12/index.html))
- [Component Architectures](https://awesome-repositories.com/f/user-interface-experience/component-architectures.md) — Implements user interfaces using a modular, reusable building block architecture.
- [Declarative UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/rendering-models/declarative-frameworks/declarative-ui-frameworks.md) — Utilizes a declarative model to manage UI state and trigger automatic rendering updates.
- [Interactive UI Components](https://awesome-repositories.com/f/user-interface-experience/interactive-ui-components.md) — Shows how to construct interactive and modular frontend components. ([source](https://github.com/ruanyf/react-demos/tree/master/demo11))
- [Component Lifecycle Management](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/component-lifecycle-management.md) — Implements logic for managing component setup, updates, and cleanup throughout their lifecycle. ([source](https://github.com/ruanyf/react-demos#readme))
- [Reusable UI Components](https://awesome-repositories.com/f/user-interface-experience/reusable-ui-components.md) — Provides examples of modular interface elements designed for consistent reuse. ([source](https://github.com/ruanyf/react-demos/blob/master/demo06/index.html))
- [User Interface Components](https://awesome-repositories.com/f/user-interface-experience/user-interface-components.md) — Implements interactive application interfaces using declarative state management. ([source](https://github.com/ruanyf/react-demos/tree/master/demo04))
- [One-Way Data Bindings](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-apis/communication-data-flow/component-data-binding/one-way-data-bindings.md) — Implements unidirectional data flow by passing read-only properties from parents to children.
- [Dynamic UI Renderers](https://awesome-repositories.com/f/user-interface-experience/dynamic-ui-renderers.md) — Shows how to translate templates and structured data into interactive interface elements. ([source](https://github.com/ruanyf/react-demos#readme))
- [Form Input Handling](https://awesome-repositories.com/f/user-interface-experience/form-input-handling.md) — Implements controlled forms by synchronizing user input with application state. ([source](https://github.com/ruanyf/react-demos/blob/master/README.md))
- [Virtual DOM Reconciliation](https://awesome-repositories.com/f/user-interface-experience/virtual-dom-reconciliation.md) — Implements efficient UI updates by calculating minimal changes between state and view.

### Web Development

- [Component Libraries](https://awesome-repositories.com/f/web-development/component-libraries.md) — Provides a collection of reusable, modular UI building blocks and implementation patterns. ([source](https://github.com/ruanyf/react-demos/tree/master/demo06))
- [Component State Management](https://awesome-repositories.com/f/web-development/frontend-development-tools/state-data-management/component-lifecycle-utilities/component-state-management.md) — Maintains internal component-level data that updates in response to user interactions. ([source](https://github.com/ruanyf/react-demos/blob/master/README.md))
- [Remote Data Fetching](https://awesome-repositories.com/f/web-development/remote-data-fetching.md) — Retrieves data from remote HTTP resources to update the user interface. ([source](https://github.com/ruanyf/react-demos/blob/master/README.md))
- [React References](https://awesome-repositories.com/f/web-development/direct-dom-manipulation/react-references.md) — Provides demonstrations on using references for direct document node manipulation and focus control.
- [DOM Access References](https://awesome-repositories.com/f/web-development/dom-access-references.md) — Provides mechanisms for direct DOM node access for focus control and library integration.
- [DOM Node Reference Tracking](https://awesome-repositories.com/f/web-development/dom-node-reference-tracking.md) — Demonstrates how to maintain references to live DOM nodes for direct manipulation. ([source](https://github.com/ruanyf/react-demos#readme))
- [Dynamic List Rendering](https://awesome-repositories.com/f/web-development/dynamic-list-rendering.md) — Provides patterns for iterating over data collections and rendering them as visual lists. ([source](https://github.com/ruanyf/react-demos/blob/master/demo03/index.html))
- [Lifecycle Hooks](https://awesome-repositories.com/f/web-development/frontend-development-tools/frontend-frameworks/component-authoring/react-ecosystem/react-hooks/lifecycle-hooks.md) — Features implementation samples for managing component behavior across mounting and unmounting phases.
- [React State Primitives](https://awesome-repositories.com/f/web-development/react-state-primitives.md) — Demonstrates common state management patterns and internal data handling to create reactive user interfaces.
- [Input Synchronization](https://awesome-repositories.com/f/web-development/react-state-primitives/input-synchronization.md) — Provides interactive examples of syncing form inputs with internal state to trigger UI re-renders.
- [Controlled Input Synchronization](https://awesome-repositories.com/f/web-development/state-syncing-reactivity/set-state-syncing/reconciliation-state-syncs/controlled-input-synchronization.md) — Update internal state in real-time as a user types into a text field to keep the interface current. ([source](https://github.com/ruanyf/react-demos/blob/master/demo09/index.html))

### Part of an Awesome List

- [Component Examples](https://awesome-repositories.com/f/awesome-lists/devtools/component-examples.md) — Offers reference implementations and patterns for building custom UI elements. ([source](https://github.com/ruanyf/react-demos/tree/master/demo08))

### Programming Languages & Runtimes

- [UI Component Lifecycles](https://awesome-repositories.com/f/programming-languages-runtimes/runtime-execution-environments/runtime-environments/runtime-management-utilities/run-lifecycle-controls/lifecycle-hook-executions/ui-component-lifecycles.md) — Demonstrates how to manage external resources during component mounting and unmounting phases.

### Software Engineering & Architecture

- [Component Lifecycle Management](https://awesome-repositories.com/f/software-engineering-architecture/component-lifecycle-management.md) — Executes specific logic during the mounting and unmounting phases of a component's life. ([source](https://github.com/ruanyf/react-demos/blob/master/README.md))
- [Component Prop Validations](https://awesome-repositories.com/f/software-engineering-architecture/schema-metadata-utilities/metadata-validations/component-prop-validations.md) — Validates component attribute types at runtime to ensure interface consistency.

### Graphics & Multimedia

- [UI Component Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/systems/dom-web-rendering-strategies/ui-component-rendering.md) — Provides techniques for rendering interactive components using the browser DOM. ([source](https://github.com/ruanyf/react-demos/blob/master/README.md))

### Mobile Development

- [Web UI Pattern Implementations](https://awesome-repositories.com/f/mobile-development/cross-platform-frameworks/flutter/web-ui-pattern-implementations.md) — Provides practical examples of common interface elements and layouts.