A simplified clone of React’s core features built from scratch — includes support for JSX-like elements, fiber tree, reconciliation, commit phase, and hooks like useState and useEffect.
Each file has its own in-depth documentation with examples, logic breakdowns, and diagrams:
| 📦 Module | 📄 Docs Link |
|---|---|
🧩 createElement.js | createElement.md |
🔁 render.js | render.md |
⚙️ performUnitOfWork.js | performUnitOfWork.md |
⚖️ reconcile.js | reconcile.md |
✅ commit.js | commit.md |
🏗 dom.js | dom.md |
- ✅ JSX-like syntax with fiber structure
- 🔁 Work loop via
requestIdleCallback - ⚡ Reconciliation with
UPDATE,PLACEMENT,DELETION - 🔧 Real DOM updates via diffing
- 🪝 Support for
useStateanduseEffect - 🧩 Fragment (
<></>) support - 🧠 Built-in hook cleanup handling
git clone https://github.com/abhaysachan01/HelloReact.git cd HelloReact function Counter() { const [count, setCount] = useState(0); useEffect(() => { console.log("Effect triggered"); return () => console.log("Cleanup"); }, [count]); return ( <div> <h1>{count}</h1> <button onClick={() => setCount(c => c + 1)}>➕</button> </div> ); } Understand how React works under the hood
Practice fiber tree traversal, DOM diffing, and state updates
Build a modular, minimal framework with real-world learning value
Inspired by Rodrigo Pombo’s build-your-own-react
Extended with modular architecture, hooks, effect scheduling, and full doc coverage.