# kay-is/react-from-zero **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/kay-is-react-from-zero).** 4,594 stars · 401 forks · HTML · GPL-2.0 ## Links - GitHub: https://github.com/kay-is/react-from-zero - Homepage: https://www.fullstackreact.com/react-from-zero/ - awesome-repositories: https://awesome-repositories.com/repository/kay-is-react-from-zero.md ## Topics `example` `learning` `lesson` `react` `tutorial` ## Description react-from-zero is an interactive React course and learning tutorial designed to teach the core concepts and inner workings of React. It functions as a web-based sandbox and guide, providing structured lessons on building user interfaces and managing the React element lifecycle. The project provides a browser-based code execution environment, allowing users to run code samples and execute examples online without a local development setup. It includes a technical walkthrough for organizing visual logic into reusable components and a system for running unit tests to verify component behavior. The curriculum covers React fundamentals, component development, and the process of verifying that components render correctly and trigger expected callbacks. ## Tags ### Education & Learning Resources - [React Learning Resources](https://awesome-repositories.com/f/education-learning-resources/react-learning-resources.md) — Provides comprehensive educational materials and guides focused on React development concepts and patterns. - [In-Browser Code Execution](https://awesome-repositories.com/f/education-learning-resources/code-example-tutorials/in-browser-code-execution.md) — Provides an environment to run code samples directly in the browser without a local setup. ([source](https://cdn.jsdelivr.net/gh/kay-is/react-from-zero@master/README.md)) - [React Tutorials](https://awesome-repositories.com/f/education-learning-resources/educational-resources/reference-and-media/tutorials-media-curated-lists/technical-tutorials/application-development/web-development-tutorials/react-tutorials.md) — Offers educational resources for building modular user interfaces using declarative component models. - [Interactive Coding Courses](https://awesome-repositories.com/f/education-learning-resources/interactive-coding-courses.md) — Ships a curriculum that uses code-based lessons and automated feedback to guide learners. - [Runtime Fundamentals](https://awesome-repositories.com/f/education-learning-resources/runtime-fundamentals.md) — Offers educational content focusing on the core architectural building blocks of the React runtime. ([source](https://cdn.jsdelivr.net/gh/kay-is/react-from-zero@master/README.md)) ### Development Tools & Productivity - [Browser-Based Execution Environments](https://awesome-repositories.com/f/development-tools-productivity/browser-based-execution-environments.md) — Provides tools that enable code execution directly within the web browser for immediate feedback. ### Software Engineering & Architecture - [UI Component Development](https://awesome-repositories.com/f/software-engineering-architecture/component-based-development/ui-component-development.md) — Teaches the practice of building web interfaces using discrete, state-managing UI components. ([source](http://kay-is.github.io/react-from-zero/12-component-refactor.html)) - [Fiber Architectures](https://awesome-repositories.com/f/software-engineering-architecture/fiber-architectures.md) — Covers architectural patterns that represent units of work as discrete objects for interruptible rendering. ### User Interface & Experience - [React Component Sandboxes](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-component-sandboxes.md) — Provides an isolated development environment specifically for prototyping and testing React-based UI components. - [React Components](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components.md) — Focuses on creating reusable interface elements specifically designed for integration within the React ecosystem. - [Development Guides](https://awesome-repositories.com/f/user-interface-experience/component-utilities/ui-frameworks/component-libraries/react-components/development-guides.md) — Provides a technical walkthrough on organizing visual logic into reusable components. - [Component Lifecycle Hooks](https://awesome-repositories.com/f/user-interface-experience/presentation-frameworks/lifecycle-state-management/component-lifecycle-management/component-lifecycle-hooks.md) — Teaches how to use methods executed at specific stages of a component's lifecycle. - [Update Schedulers](https://awesome-repositories.com/f/user-interface-experience/main-thread-dispatchers/update-schedulers.md) — Explains mechanisms for prioritizing urgent interactions by deferring non-critical UI updates. ### Web Development - [Virtual DOM Reconciliation](https://awesome-repositories.com/f/web-development/virtual-dom-reconciliation.md) — Provides strategies for efficiently updating the browser DOM by minimizing direct manipulation operations. - [Synthetic Event Systems](https://awesome-repositories.com/f/web-development/browser-integration-utilities/dom-event-handling/synthetic-event-systems.md) — Implements wrappers that normalize cross-browser event behavior into a consistent interface. ### Scientific & Mathematical Computing - [DOM Tree Traversers](https://awesome-repositories.com/f/scientific-mathematical-computing/recursive-tree-traversal-algorithms/dom-tree-traversers.md) — Demonstrates algorithms for recursively walking through HTML document object model hierarchies. ### Testing & Quality Assurance - [React Component Testing](https://awesome-repositories.com/f/testing-quality-assurance/react-component-testing.md) — Provides utilities for verifying the rendering and behavior of React-based user interface components. - [Unit Testing](https://awesome-repositories.com/f/testing-quality-assurance/software-testing/testing-frameworks/unit/unit-testing.md) — Implements testing practices to verify the smallest testable parts of components in isolation. ([source](http://kay-is.github.io/react-from-zero/17-unit-testing.html))