Building UIs with JSX: Writing Markup in React

React 19 Mastery - From Zero to Pro

Introduction & JSX

How to Setup React 19 with Vite (5:59)
Your first react component (8:13)
Exporting React Components (2:22)
Building UIs with JSX: Writing Markup in React (8:35)
Integrating JavaScript in JSX with Curly Braces (4:41)
Styling React Components (14:55)
Working with Props in React Components (8:38)
Conditional Rendering 1 (5:01)
Conditional Rendering 2 (5:17)
Rendering Lists (5:59)
Keeping Components Pure (3:59)
Purity props example (4:53)

Professional Project: Cambridge Rentals - Conditional rendering, React styling, React props

Introduction (1:23)
Component Tree (3:30)
Building the File Structure (6:47)
Build the Header (8:07)
Build the Title (3:52)
Build the Footer (10:14)
Build the list of Properties (14:14)
Build the PropertyTypeLabel Component (3:31)
Build the PropertyBanner Component (3:20)
Build the IconWithText Component (6:11)
Build the PropertyAttribute Component (6:54)
Project source code

Adding Interactivity

Responding to Events (3:46)
Passing Event Handlers from a Parent to a Child (4:44)
Understanding Event Propagation (4:30)
Preventing Default Behaviour (4:22)
React State (11:03)
State batching + Updating state using a value vs function (5:02)
Updating Objects in State (5:50)
Updating Arrays in State (10:33)
Create a Shopping Cart (15:17)
Trigger=>render=>VirtualDOM=>Commit (14:06)

Professional Project: To do list App - useState, Responding to events

Introduction (1:29)
Component Tree (2:14)
Building the File Structure (5:53)
Rendering tasks. (6:48)
Building the TaskControls Component (6:45)
Building the TaskControls Component (7:41)
Toggle task completion (3:35)
Toggle task completion (3:05)
Edit Tasks (12:16)
Make changes persistent using localStorage (4:34)
Project source code

React Reducer

Professional Project: UK driving test - React reducer

Introduction (4:15)
Component Tree (3:47)
Building the File Structure (5:51)
Managing Quiz State with useReducer (9:58)
QuestionView: QuestionHeader (10:15)
QuestionView: QuestionText (5:20)
QuestionView: AnswerOptions (6:45)
QuestionView: MediaDisplay (5:37)
QuestionView: NavigationControls (10:01)
ProgressBar (5:17)
AppBanner (4:26)
ResultView (13:51)
Project source code

React Context

Professional Project: Portfolio Website - Dark / Light Mode, React context

Introduction (4:05)
Component Tree (3:50)
Building the file structure (11:13)
Setting Up the Navbar Layout (6:12)
Desktop Navigation Links (5:51)
Adding Light/Dark Mode Toggle (4:10)
Mobile Menu with Hamburger Icon (5:51)
Building ScrollDots for Navigation (4:35)
Building the Hero Section (9:10)
Projects Section Layout (5:35)
Create the ProjectCard component (6:33)
Filtering Projects by Type (4:18)
Building the Skills & Experience Section Layout (4:27)
Skills Grid (4:48)
Experience Timeline (6:21)
Building the Layout of RecommendationsSection (2:54)
TestimonialCard (6:17)
ArrowNavigation (4:36)
Company Logos Row with CompanyLogo Component (4:46)
Building the Contact Section (8:00)
Building the Footer (6:16)
Dark/Light mode persisting (2:41)
Project source code

Reference values with Refs

Introduction (4:25)
Creating a timer using Ref (8:16)
Accessing a DOM Node with Ref (3:03)
Accessing Another Component's DOM Nodes (5:40)
Best practices for DOM manipulation with refs (5:16)

Professional Project: Card Flip Game - useRef

Introduction - User Walkthrough (3:15)
Component Tree (2:44)
Building the File Structure (4:01)
Set Up the Game State in App - Generate and Shuffle icons using the Fisher-Yates algorithm (12:37)
Build the Settings Component and define reInitialiseGame in the Process (4:23)
Reset Button (4:05)
ScoreBoard (2:57)
Conditionally Show Graffiti When Game Is Won (3:43)
Building the GameBoard Component (12:15)
Add flipping logic to the Card component (4:50)
Move flipping logic to GameBoard using Refs (7:44)
Play a victory sound when the player matches all card pairs. (2:42)
Play Flipping Sound on Card Flip 🔄🔊 (4:26)
Reset the GameBoard (3:32)
Project source code

React Effects

Introduction to useEffect (11:12)
useEffect dependencies (5:19)
useEffect cleanup functions (5:27)
Listening for a Keyboard Key (4:49)
Google maps resizing (7:44)

Professional Project: Weather App - useEffect

Introduction - User Walkthrough (2:21)
Component tree (3:29)
Project Structure – Creating Files and Folders (8:38)
Header (2:04)
Build SearchBar and retrieve real cities from the Open-Meteo geocoding API (13:23)
Build a useEffect to Fetch Weather Data when a city is selected (5:02)
Build a useEffect that Transforms the API data when data changes (8:52)
Build the CurrentWeather Component (8:25)
Build the HumidityCard Component (3:00)
Build the WindSpeedCard Component (1:57)
Build the HourlyForecast component (7:30)
Build the Forecast Component (7:02)
Project source code

Professional Project: Story Collection - Multi-language UI, React Context, React Router, Supabase

Introduction - User Walkthrough (1:53)
Component Tree (2:19)
Project Structure – Creating Files and Folders (4:23)
Building the Language Context and wrapping App in the Provider (6:33)
Routing & Layout with App.jsx (4:32)
Building the Header (6:09)
Building the LanguageToggle Component (5:40)
Building the Footer Component (4:43)
Supabase Configuration & Environment Setup (9:56)
StoryList Page – Fetching & Displaying Data (11:44)
StoryCard Component (10:49)
StoryDetail Page (14:10)
StoryDetail Page: Building the Story Content Section (8:26)
Building the NotFound Page (4:23)
Build a Beautiful Custom Scrollbar (2:42)
Project source code

Professional Project: Kanban Board with Drag & Drop like Trello - useEffect, React refs

Introduction - User Walkthrough (2:14)
Component Tree (4:06)
Project Structure – Creating Files and Folders (5:34)
Adding Dark Mode with Theme Toggle and useEffect (7:32)
Building the Kanban Board: Managing Column State and rendering Tasks. (12:04)
Adding & Deleting Columns (7:55)
Adding Tasks (6:19)
Editing Column Titles (6:35)
✏️ Editing Tasks Inline (9:03)
Use useRef to Focus and scroll to the end of the textarea when editing starts (4:17)
Implementing Task Deletion in the Kanban Board (8:39)
Implementing Drag and Drop for Tasks (9:13)
Handling Task Movement on Drag End (7:17)
Apply custom scrollbar styles using a utility class (4:40)
Persisting Kanban State to localStorage (4:41)
Project source code

Custom Hooks

Download