finds.dev← search

// the find

ruanyf/react-demos

★ 16,471 · JavaScript · updated Oct 2024

a collection of simple demos of React.js

A set of 13 standalone HTML files that walk through React fundamentals — JSX, props, state, lifecycle, Ajax, and SSR — each runnable by opening the file in a browser. Written by Ruan Yifeng, who runs one of China's most-read tech blogs, which explains the star count. This is a learning resource, not a library.

Each demo is a single self-contained HTML file with no build step required, which makes the barrier to run any example effectively zero. The progression from JSX rendering to lifecycle methods to server-side rendering is logical and each step is narrow enough that you can isolate exactly what changed. The README doubles as a readable tutorial — the code samples and explanations are concise without being incomplete. The SSR demo (demo13) actually includes a working Node server rather than hand-waving the concept.

The material is frozen in class-component React circa 2018 — hooks don't exist here, which means anyone learning from this will immediately hit a mismatch with every modern codebase and tutorial they find elsewhere. Demo11 uses jQuery for Ajax, which is a strange dependency to introduce in a React tutorial. The in-browser Babel transform used across demos is a teaching convenience that the README acknowledges, but the 'Extras' section on precompiling is thin and doesn't connect to any of the actual demos. Last meaningful update appears to be 2024 but the content reads like it hasn't changed since React 16.

View on GitHub →

// want more like this?

We dig through GitHub every week and send a few repos picked for what you actually care about — each with an honest take like this one.

Get finds in your inbox → Search again →