React From Zero: A Browser-Only Tutorial That Skips the Build Step

What This Tutorial Actually Solves

React From Zero addresses a specific pain: the barrier to entry for React. Official docs and most tutorials assume you have Node.js, a package manager, and a build pipeline. This project removes all of that. The README states it is a 'simple (99% ES2015 less) tutorial for React' where 'everything runs in the browser without a manual pre-compilation.' That means you open an HTML file, and React works. The target audience is someone who has never written React and might not even have a development environment set up. It is not a production framework or a library; it is a sequence of 18 lessons, each a standalone HTML file. The value is in lowering the first step: you can learn what React elements and components are without first learning Webpack or Babel configuration.

The Mechanism: Inline Babel and Render Targets

Each lesson is a single HTML file that loads React and Babel from a CDN. The README mentions 'text/babel' script parts, which is the key mechanism. In a browser, a script tag with type="text/babel" tells Babel to transpile JSX and ES2015 code on the fly. React then renders into a DOM element with a specific ID. Lesson 0 starts with 'Object Elements,' and later lessons cover 'Element Factory,' 'JSX,' 'Nested Elements,' 'Components,' 'Properties,' and so on. The data flow is straightforward: you write JSX inside the script tag, Babel converts it to JavaScript, and ReactDOM renders it into the target. The render target ID is 'app' in the examples. This is a clever way to demo React without a server, but it has a cost: every page load runs Babel in the browser, which is slower than precompiled code. The tutorial does not address performance, because it is not meant for production.

Getting It Running: No Install, Just Open a File

The simplest way to run the examples is to clone the repository and open any lesson file in a web browser. For example, you can download the file 02-jsx.html and double-click it. The README also gives a path for create-react-app users: you copy the text/babel script parts from an example into the src/index.js file of a create-react-app project, and you change the render target's ID from 'app' to 'root.' That is the only configuration step mentioned. There is no package.json, no node_modules, no command line. The repository is primary language HTML, which confirms the file-based approach. If you want to use the live previews, the README links to GitHub Pages for each lesson, so you can run them without even downloading. This is as close to zero friction as a React tutorial can get.

The 99% ES2015-Less Constraint and Its Trade-Offs

The tutorial's core promise is that it avoids ES2015 syntax almost entirely. That means no arrow functions, no const or let, no destructuring, and no classes in the modern sense. Lesson 9 covers 'Component Classes,' but these are React.createClass, not ES6 classes. This is a deliberate choice to reduce cognitive load for beginners. The trade-off is that you are learning an older style of React. Modern React, as of 2025, uses function components and hooks, and ES2015 is the baseline for virtually all React code. The README does not mention hooks at all, which is expected given the project's age. If you learn from this tutorial, you will need to unlearn some patterns. For example, property types are covered in Lesson 6, but the modern PropTypes package is separate. The tutorial's approach is fine for grasping concepts, but it is not a reflection of how React is written today.

A Real Limitation: No Build Step Means No Real Project Skills

The biggest flaw is that the tutorial teaches React in isolation from the ecosystem. You never create a component in a separate file, you never import or export, and you never see a module bundler. In a real React project, you will use JSX with a build tool like Vite or Next.js, and you will manage dependencies. This tutorial skips all of that, which is fine for a first taste, but it leaves you unprepared for actual development. Another limitation is that the lessons use a global render target ID of 'app.' In a create-react-app project, the root is 'root,' so you must change that, as the README notes. If you forget, your component will not render. The tutorial does not explain why the ID matters, only that you need to change it. That is a gap in understanding. Also, the browser-based Babel approach can fail in restricted environments or with CSP (Content Security Policy) that blocks inline scripts. The README does not mention this, but it is a real-world constraint.

Alternatives: The Official Tutorial and Modern Boilerplates

The most direct alternative is the official React tutorial on react.dev, which now uses function components and hooks from the start. It also runs in the browser with an in-browser editor, so it solves the same problem of no build step, but with current syntax. Another alternative is a scaffolded project like create-react-app or Vite. With Vite, you run npm create vite@latest and select React, and you get a project with ES2015, a dev server, and hot reloading. The difference in approach is fundamental: React From Zero avoids the build step to simplify learning, while Vite embraces it and teaches you the real workflow. The official tutorial also includes interactive examples and a built-in editor, which React From Zero lacks because it is static HTML files. If you want to learn modern React, the official tutorial or a Vite setup is a better path. React From Zero is best for a quick, offline read-through of concepts before you commit to tooling.

Maintenance, License, and Upgrade Cost

The repository is not archived, but no recent releases were retrieved, and the last push date is unknown. The README links to translations in Chinese, Portuguese, Russian, Spanish, and Korean, which suggests some community activity, but the core content has not visibly changed. The license is GPL-2.0, which is a strong copyleft license. If you copy any of the example code into a project, that project may need to be GPL-compliant. That is a real consideration for engineers who want to reuse the lesson snippets in a commercial product. The README does not discuss licensing, so you must check it yourself. The upgrade cost is low because there is nothing to upgrade; the tutorial is static. However, the cost of learning outdated patterns is high if you later need to work on codebases using hooks. You will have to relearn component creation and state management. The tutorial is a time capsule, not a living document.

Editorial conclusion

Adopt React From Zero if you are a complete beginner who wants to see React concepts like JSX, components, and lifecycle methods working in a single HTML file, with no npm install or build step. Skip it if you need to learn modern React with hooks, a real project structure, or TypeScript, because this tutorial predates those and uses class components and inline scripts. Before using it, verify that the browser-based Babel approach still works with your current browser, and check the GPL-2.0 license if you plan to reuse any of the example code. The material is static and unmaintained, so treat it as a historical primer, not a current reference.

Frequently asked questions

Official sources

1. Official documentation
2. Official README
3. Project repository