Introducing React Dojo - Learn React by Actually Practicing It

If you've tried to learn React before, you've probably gone through the usual path: read the docs, watch a tutorial, maybe build a todo app. But when it comes to using hooks like useCallback, useDeferredValue, or useTransition in a real project, things start to feel unclear. That's exactly why I built React Dojo.

What is React Dojo?
React Dojo is a free, open-source learning platform built on one principle:

React is learned by practicing, not by reading.

Every concept on the platform comes with three things:

A clear, concise explanation
An interactive playground where you can run and modify code
Real coding exercises to test your understanding

No hand-holding. No shortcuts. Just you and the code.
→ react-dojo.vercel.app

What's covered?
React Dojo currently includes 27 concepts, 15 exercises, and 10 quizzes, organized into 6 categories:

🧠 State & Memory
useState · useReducer · useRef · useOptimistic · useActionState

🔄 Synchronization
useEffect · useLayoutEffect · useEffectEvent

⚡ Performance
useMemo · useCallback · memo

🌀 Concurrency
useTransition · useDeferredValue · Suspense · use

🧩 Composition
useContext · createPortal · lazy · useId · useFormStatus

🎯 Interviews
Classic React interview topics: Virtual DOM, HOC, Prop Drilling, Controlled vs Uncontrolled components, and more.

Exercises

Exercises range from basic to advanced:
Basic: Counter, Toggle, Color Picker, Stopwatch
Intermediate: Theme Switcher, Form Validation, Infinite Scroll
Advanced: Debounced Search, Drag & Drop, Lazy Modal
Each exercise is designed to push you to apply what you've learned — not just copy and paste.

Quizzes

Quizzes are organized by difficulty (Basic, Intermediate, Advanced) and cover topics like:

• React Hooks
• Performance Patterns
• Context API
• Component Lifecycle

Custom Hooks [Beta]

One of the most valuable sections is the Custom Hooks library — 15 community-contributed, reusable hooks organized by category. Each one includes a description, code, and an interactive playground.

State: useLocalStorage · usePrevious · useToggle · useCounter
DOM: useMediaQuery · useClickOutside · useWindowSize · useHover · useEventListener · useIntersectionObserver · useOnlineStatus
Async: useFetch
Utility: useDebounce · useClipboard · useInterval

You can copy the code directly, try it in the playground, and use it in your own projects. It's also open to contributions if you've built a useful hook, you can add it to the library.

Developer Directory [Beta]

One of the latest features is the Developer Directory — sign in with GitHub and join a community of React learners. You can:

• Track your learning progress
• Compare with other developers
• Earn KYU ranks as you advance

Platform Features

⌨️ Keyboard shortcuts for fast navigation
🌐 Bilingual — available in English and Spanish
📱 Mobile-friendly — 42% of our users access from mobile
🔍 Global search across all concepts and exercises
🌙 Dark mode by default

Built with

The platform is built with Next.js, TypeScript, Drizzle ORM, Neon (PostgreSQL), and Shadcn UI.

Open Source & Community

React Dojo is fully open source. The community is active and growing, with contributors from Uruguay 🇺🇾, Argentina 🇦🇷, the US 🇺🇸, Colombia 🇨🇴, and Spain 🇪🇸. If you want to contribute whether it's a new concept, an exercise, a quiz, a bug fix, or a translation — you're more than welcome.

🐙 GitHub
💬 Discord
💛 Support on Open Collective