# hiteshchoudhary/chai-aur-react

**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/hiteshchoudhary-chai-aur-react).**

12,808 stars · 1,609 forks · JavaScript

## Links

- GitHub: https://github.com/hiteshchoudhary/chai-aur-react
- awesome-repositories: https://awesome-repositories.com/repository/hiteshchoudhary-chai-aur-react.md

## Description

This project is an educational course and a collection of frontend projects designed to teach the core concepts and architecture of the React library. It serves as a practical guide for building modular user interfaces through a series of hands-on project builds.

The repository includes a technical implementation of a custom React renderer, demonstrating how to transform JSX elements into a document object model. It further provides examples of state management, specifically illustrating how to share global data across a component tree using the provider pattern to avoid property drilling.

The project covers a variety of functional applications, including a currency converter that integrates external exchange rate services and a task management interface for tracking collections of items. These examples demonstrate the use of component-based architecture, website layout composition, and asynchronous API integration.

## Tags

### Education & Learning Resources

- [Frontend Development Courses](https://awesome-repositories.com/f/education-learning-resources/frontend-development-courses.md) — Provides a series of practical lessons and hands-on projects to teach the core concepts and architecture of React.

### Web Development

- [React Application Development](https://awesome-repositories.com/f/web-development/react-application-development.md) — Provides a comprehensive guide and project collection for building functional web applications with React. ([source](https://github.com/hiteshchoudhary/chai-aur-react#readme))
- [Component-Based Architectures](https://awesome-repositories.com/f/web-development/component-based-architectures.md) — Teaches the construction of modular interfaces by composing independent, reusable UI components.
- [React Development](https://awesome-repositories.com/f/web-development/react-development.md) — Serves as a practical guide for building modular user interfaces using the React ecosystem.
- [Asynchronous API Clients](https://awesome-repositories.com/f/web-development/asynchronous-api-clients.md) — Provides examples of fetching real-time data from remote services to update application state.
- [External API Integrations](https://awesome-repositories.com/f/web-development/external-api-integrations.md) — Integrates external exchange rate services to fetch and display real-time financial data.
- [React Renderers](https://awesome-repositories.com/f/web-development/frontend-development-tools/frontend-frameworks/rendering-engines/react-renderers.md) — Includes a technical implementation of a custom renderer to transform JSX elements into a document object model.
- [JSX Transformers](https://awesome-repositories.com/f/web-development/jsx-transformers.md) — Demonstrates how to convert JSX markup into function calls that generate a virtual tree of objects.
- [React State Primitives](https://awesome-repositories.com/f/web-development/react-state-primitives.md) — Demonstrates the use of reusable state management patterns to distribute data across a component tree.
- [Virtual Tree Rendering Engines](https://awesome-repositories.com/f/web-development/server-side-rendering/custom-rendering-logic/virtual-tree-rendering-engines.md) — Implements a custom React renderer to show how element trees are processed and displayed. ([source](https://github.com/hiteshchoudhary/chai-aur-react/blob/main/readme.md))
- [Virtual DOM Reconciliation](https://awesome-repositories.com/f/web-development/virtual-dom-reconciliation.md) — Explains how to update the browser DOM efficiently by comparing different versions of the element tree.

### Software Engineering & Architecture

- [React State Distribution Patterns](https://awesome-repositories.com/f/software-engineering-architecture/react-state-distribution-patterns.md) — Teaches the use of the provider pattern to synchronize state across a component tree without property drilling.

### User Interface & Experience

- [Context Providers](https://awesome-repositories.com/f/user-interface-experience/component-architectures/component-communication-patterns/component-data-passing/context-providers.md) — Demonstrates how to share global data across a component tree using the provider pattern to avoid prop drilling.
- [Component-Based UI Frameworks](https://awesome-repositories.com/f/user-interface-experience/component-based-ui-frameworks.md) — Demonstrates the architectural paradigm of building modular user interfaces through reusable components.
- [Global State Managers](https://awesome-repositories.com/f/user-interface-experience/global-state-managers.md) — Implements global state distribution to synchronize data across the entire component hierarchy. ([source](https://github.com/hiteshchoudhary/chai-aur-react/blob/main/contextNotes.md))
- [State Management Patterns](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components/state-management-patterns.md) — Illustrates the provider pattern as an architectural approach for sharing global state and avoiding property drilling.
- [DOM Element Translation](https://awesome-repositories.com/f/user-interface-experience/custom-element-renderers/dom-element-translation.md) — Implements technical logic to transform JSX elements into a physical document object model.
- [JSX Rendering Engines](https://awesome-repositories.com/f/user-interface-experience/jsx-rendering-components/jsx-rendering-engines.md) — Develops the core logic for a custom rendering engine that transforms JSX into DOM elements.
- [Renderer Reconciler Abstractions](https://awesome-repositories.com/f/user-interface-experience/renderer-reconciler-abstractions.md) — Implements a custom renderer that separates the UI tree reconciliation from the actual DOM rendering process.
- [Website Layout Management](https://awesome-repositories.com/f/user-interface-experience/website-layout-management.md) — Demonstrates the composition of standard screen structures including headers, footers, and content sections. ([source](https://github.com/hiteshchoudhary/chai-aur-react/blob/main/reactRouterNotes.md))