whatisgithub

What is react-from-zero?

kay-is/react-from-zero — explained in plain English

Analysis updated 2026-06-26

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

In one sentence

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

What do people build with it?

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.

What is it built with?

JavaScriptReactHTML

How does it compare?

kay-is/react-from-zeronisrulz/app-privacy-policy-generatorpuikinsh/adminator-admin-dashboard
Stars4,5944,5964,588
LanguageHTMLHTMLHTML
Setup difficultyeasyeasyeasy
Complexity1/51/52/5
Audiencedeveloperpm founderdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get 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.

So what is it?

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.

Frequently asked questions

What is react-from-zero?

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.

What language is react-from-zero written in?

Mainly HTML. The stack also includes JavaScript, React, HTML.

How hard is react-from-zero to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is react-from-zero for?

Mainly developer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.