React & Modern Frontend
Checking access...
React is the most popular frontend library for building modern web applications. This module teaches React from scratch — component architecture, state management, hooks, routing, and real-world patterns.
Module Pages
| Page | What You’ll Learn |
|---|---|
| React Fundamentals & JSX | What is React, setting up with Vite, JSX syntax, rendering elements, React DevTools |
| Components & Props | Function components, props, default props, children, component composition |
| State with useState | useState hook, state updates, immutability, array/object state, lifting state up |
| Effects & Side Effects | useEffect hook, dependency arrays, cleanup functions, data fetching patterns, race conditions |
| Conditional Rendering & Lists | Ternary rendering, logical &&, list rendering with keys, filtering and sorting lists |
| Forms & Controlled Inputs | Controlled vs uncontrolled inputs, form validation, custom hooks for forms, Form libraries |
| React Router | Client-side routing, Route/Link/Navigate, nested routes, URL params, protected routes |
| Context & Global State | useContext, useReducer, Context + Reducer pattern, avoiding prop drilling |
| Custom Hooks | Building reusable hooks (useFetch, useLocalStorage, useForm, useDebounce) |
| Performance & Best Practices | useMemo, useCallback, React.memo, code splitting, lazy loading, bundle analysis |
| Project: GitHub Profile Viewer | Build a complete React app that searches GitHub users and displays profiles |
Key Takeaways
By the end of this module, you’ll be able to build complete React applications with component architecture, manage state effectively with hooks, handle routing and forms, and follow production best practices for performance and code organisation.