# reactjs/react-basic

**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/reactjs-react-basic).**

4,448 stars · 187 forks

## Links

- GitHub: https://github.com/reactjs/react-basic
- awesome-repositories: https://awesome-repositories.com/repository/reactjs-react-basic.md

## Description

react-basic provides a conceptual implementation of the React model, focusing on a component-based UI architecture. It employs pure functions to transform raw data into structural interface representations and uses a declarative system for managing UI state and hierarchical data distribution.

The project distinguishes itself through specialized caching strategies, including tree-based result caching that stores values based on the structural position of elements. It also features a mechanism for deferred function execution to remove boilerplate from business paths and supports the isolation of state projections, such as scroll positions and input focus, from core business logic.

The library covers broader capabilities in modular interface composition, allowing for the creation of reusable component abstractions. It includes tools for deep data transfer across nested layers and state management specifically tailored for associating unique values with individual list items.

## Tags

### User Interface & Experience

- [Modular UI Components](https://awesome-repositories.com/f/user-interface-experience/modular-ui-components.md) — Provides a modular architecture for building complex interfaces from independent, logic-encapsulating components.
- [Context-Based Data Propagation](https://awesome-repositories.com/f/user-interface-experience/component-architectures/component-communication-patterns/component-data-passing/context-based-data-propagation.md) — Moves data between distant interface components without manual passing through every intermediate layer. ([source](https://github.com/reactjs/react-basic#readme))
- [Contextual Data Propagation](https://awesome-repositories.com/f/user-interface-experience/component-architectures/component-communication-patterns/component-data-passing/contextual-data-propagation.md) — Provides a context provider mechanism to share data across deeply nested component layers without prop-drilling.
- [Component-Based UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/component-based-ui-frameworks.md) — Implements a modular architectural paradigm based on reusable components that encapsulate internal logic.
- [Component Communication Patterns](https://awesome-repositories.com/f/user-interface-experience/component-communication-patterns.md) — Implements architectural patterns for routing data and context between distant layers of the component tree.
- [Component Tree Data Distribution](https://awesome-repositories.com/f/user-interface-experience/component-tree-data-distribution.md) — Implements a pattern for sharing data between deeply nested interface layers without manual prop drilling.
- [Data-to-UI Mappings](https://awesome-repositories.com/f/user-interface-experience/data-to-ui-mappings.md) — Uses pure functions to map raw data objects into predictable visual interface representations.
- [Reusable UI Components](https://awesome-repositories.com/f/user-interface-experience/reusable-ui-components.md) — Organizes complex interfaces into independent pieces that encapsulate internal logic and implementation details. ([source](https://github.com/reactjs/react-basic#readme))
- [UI State Management](https://awesome-repositories.com/f/user-interface-experience/ui-state-management.md) — Stores data for specific interface projections, such as input fields, independently from global business logic. ([source](https://github.com/reactjs/react-basic/blob/master/README.md))
- [UI Projection State Isolation](https://awesome-repositories.com/f/user-interface-experience/ui-projection-state-isolation.md) — Tracks interface-specific data like scroll positions and input focus separately from core business logic.
- [UI Rendering Optimizations](https://awesome-repositories.com/f/user-interface-experience/ui-rendering-optimizations.md) — Improves application speed by caching function results and component outputs to eliminate redundant rendering.

### Software Engineering & Architecture

- [Conceptual Model Implementations](https://awesome-repositories.com/f/software-engineering-architecture/conceptual-model-implementations.md) — Demonstrates the core architectural principles of the React model through a simplified conceptual implementation.
- [Function Result Memoization](https://awesome-repositories.com/f/software-engineering-architecture/function-result-memoization.md) — Caches the output of pure components and functions based on their inputs to prevent redundant rendering.
- [Pure Functional Cores](https://awesome-repositories.com/f/software-engineering-architecture/functional-ui-architectures/pure-functional-cores.md) — Uses pure functions as a core to transform raw input data into consistent structural interface representations.
- [Interface Composition](https://awesome-repositories.com/f/software-engineering-architecture/interface-composition.md) — Composes small, independent functional pieces into complex interfaces while keeping internal logic encapsulated. ([source](https://github.com/reactjs/react-basic/blob/master/README.md))
- [Component-Based Encapsulations](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/application-layer-architectures/state-management-architectures/scope-and-hierarchy-management/closure-based-state-encapsulations/component-based-encapsulations.md) — Implements a modular architecture that isolates state and logic within reusable component units.
- [Declarative State Managers](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/layering-presentation/state-management-patterns/declarative-state-managers.md) — Employs a declarative system to manage interface-specific data and projection states independently from business logic.

### Web Development

- [React State Management](https://awesome-repositories.com/f/web-development/react-state-management.md) — Handles data flow and synchronization across the component tree using a conceptual React-like state model.
- [Interface Projection States](https://awesome-repositories.com/f/web-development/state-management-libraries/interface-projection-states.md) — Isolates interface-specific projection data, such as scroll positions and input focus, from core business logic. ([source](https://github.com/reactjs/react-basic#readme))
- [Element Tree Caching](https://awesome-repositories.com/f/web-development/content-caching-accelerators/object-caches/element-tree-caching.md) — Implements a caching strategy that stores results based on an element's structural position within the UI tree. ([source](https://github.com/reactjs/react-basic#readme))
- [Structural Position Caching](https://awesome-repositories.com/f/web-development/content-caching-accelerators/object-caches/element-tree-caching/structural-position-caching.md) — Implements tree-based result caching that stores values according to the structural position of elements.

### Data & Databases

- [List State Hooks](https://awesome-repositories.com/f/data-databases/state-management-stores/list-state-hooks.md) — Associates unique state objects with individual list items to maintain a consistent data hierarchy. ([source](https://github.com/reactjs/react-basic#readme))
- [Item-Specific State Tracking](https://awesome-repositories.com/f/data-databases/state-management-stores/list-state-hooks/item-specific-state-tracking.md) — Provides a mechanism to assign and track unique state values for individual items within a list. ([source](https://github.com/reactjs/react-basic/blob/master/README.md))

### Programming Languages & Runtimes

- [Boilerplate-Reducing Execution Wrappers](https://awesome-repositories.com/f/programming-languages-runtimes/deferred-execution/boilerplate-reducing-execution-wrappers.md) — Provides a mechanism for delaying logic execution by wrapping function calls to remove business path boilerplate. ([source](https://github.com/reactjs/react-basic#readme))
- [Logic Execution Wrappers](https://awesome-repositories.com/f/programming-languages-runtimes/deferred-execution/logic-execution-wrappers.md) — Ships a mechanism for wrapping function calls to defer logic execution and remove boilerplate from business paths.

### Part of an Awesome List

- [GUI Frameworks](https://awesome-repositories.com/f/awesome-lists/devtools/gui-frameworks.md) — Core concepts and fundamentals of React.