Learn React from the ground up, covering JSX, components, hooks, routing, and React 19 updates, through hands-on projects, quizzes, and challenges to build real-world applications.

Become a MERN Stack Developer

This module guides learners through a complete React journey, starting with a refresher on modern JavaScript concepts like ES6+, async programming, and DOM essentials. It then introduces React’s core ideas, JSX, the virtual DOM, and rendering dynamic UI, before moving into reusable components with props, styling, and event handling. Learners explore React Hooks such as useState, useEffect, useContext, and useMemo for managing state, side effects, and performance. The module also covers React Router for seamless single-page apps with navigation, dynamic routing, nested routes, and error handling. To stay current, it introduces new features in React 19, including updates to refs, context, metadata, and async scripts. With quizzes, challenges, and hands-on projects like a to-do app, product listing, and inventory system, learners gain both confidence and practical skills to build real-world React applications.

Learn React

Test your ability to use JSX, to create and render a dynamic user profile page.

اختبر قدرتك على استخدام JSX لإنشاء وعرض صفحة ملف تعريف مستخدم ديناميكية.

JavaScript for React—A Quick Refresher

Introduction to React

React Components

Hooks: Managing States and Effects in React Components

React Router and Navigations

New Improvements in React 19

Conclusion

Challenge: Displaying a Dynamic Profile Page

Problem statement