explaingit

kay-is/react-from-zero

4,594HTMLAudience · developerComplexity · 1/5Setup · easy

TLDR

An 18-lesson React tutorial where every lesson is a single HTML file that runs in a browser with no build tools or command-line setup required, open the file and learn React from the ground up.

Mindmap

mindmap
  root((React From Zero))
    What it does
      React tutorial
      18 lessons
      No build tools
    Concepts covered
      React elements
      Components
      JSX
      Lifecycle methods
    Use cases
      Self-paced learning
      Teaching React
      Beginner reference
    Audience
      Beginners
      New React learners
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Learn the fundamentals of React from scratch with runnable examples that need no setup beyond opening a file in a browser.

USE CASE 2

Teach a beginner what React elements and components actually are before introducing JSX or any build tooling.

USE CASE 3

Use the standalone HTML lessons as a reference when explaining React concepts during pair programming or code reviews.

Tech stack

JavaScriptReactHTML

Getting it running

Difficulty · easy Time to first run · 5min

No installation needed, each lesson is a standalone HTML file that loads React from a CDN, just open it in any browser.

In plain English

React From Zero is a beginner tutorial series for learning React, the JavaScript library used to build user interfaces. The distinguishing feature is that each lesson is a single HTML file that runs directly in a web browser, with no build tools, no command-line setup, and no pre-compilation step required. You just open the file and it works. The README describes it as "99% ES2015 less," meaning the examples avoid most modern JavaScript syntax that typically requires extra tooling to understand or run. The tutorial has 18 lessons, each building on the previous one. It starts at the most basic level, showing what a React element actually is as a plain JavaScript object, then walks through how to create elements with code, introduces JSX (the HTML-like syntax React developers commonly use), and progressively covers components, passing data between components, nested structures, and component classes. Later lessons cover lifecycle methods (code that runs at specific moments in a component's life, like when it first appears on screen), how to connect React to other JavaScript libraries, and how to write unit tests. Because each lesson is a standalone HTML file, you can preview any of them directly in a browser from the GitHub Pages links listed in the README. No cloning the repository is required to follow along. If you want to move the examples into a standard React project created with the official tooling, the README explains how to copy the relevant script sections into the appropriate file. Translations of the tutorial exist in Chinese, Brazilian Portuguese, Russian, Spanish, and Korean, each maintained as a separate repository. The project is linked to a book, "Fullstack React," though the tutorial itself is free and self-contained.

Copy-paste prompts

Prompt 1
I'm on lesson 4 of react-from-zero which introduces JSX. Explain what JSX compiles to under the hood and show me both the JSX version and the equivalent React.createElement call for a simple button component.
Prompt 2
Using the react-from-zero style, no build tools, script tags only, write a counter component that increments on button click using a React class component with state.
Prompt 3
I want to move a react-from-zero lesson into a Create React App project. Which parts of the HTML file do I copy into index.js and what do I change?
Prompt 4
Explain React component lifecycle methods, componentDidMount, componentDidUpdate, componentWillUnmount, as covered in the react-from-zero lessons, with a practical example for each.
Open on GitHub → Explain another repo

← kay-is on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.