From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications
Join today to access over 25,200 courses taught by industry experts.
Building the layout of recommendations section
From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications
Building the layout of recommendations section
“
you you you you you you
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Download the exercise files for this course.
Get started with a free trial today.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.
Watch this course anytime, anywhere.
Get started with a free trial today.
Contents
-
-
Course introduction5m 56s
-
(Locked)
How to setup React 19 with Vite5m 59s
-
(Locked)
Your first React component8m 13s
-
(Locked)
Exporting React components2m 22s
-
(Locked)
Building UIs with JSX: Writing markup in React8m 34s
-
(Locked)
Integrating JavaScript in JSX with curly braces4m 41s
-
(Locked)
Styling React components14m 55s
-
(Locked)
Working with props in React components8m 38s
-
(Locked)
Conditional rendering 15m 1s
-
(Locked)
Conditional rendering 25m 17s
-
(Locked)
Rendering lists5m 59s
-
(Locked)
Keeping components pure3m 59s
-
(Locked)
Purity props example4m 53s
-
-
-
(Locked)
Introduction1m 23s
-
(Locked)
Component tree3m 30s
-
(Locked)
Building the file structure6m 47s
-
(Locked)
Build the header8m 7s
-
(Locked)
Build the title3m 52s
-
(Locked)
Build the footer10m 14s
-
(Locked)
Build the list of properties14m 14s
-
(Locked)
Build the PropertyTypeLabel component3m 31s
-
(Locked)
Build the PropertyBanner component3m 20s
-
(Locked)
Build the IconWithText component6m 11s
-
(Locked)
Build the PropertyAttribute component6m 54s
-
(Locked)
-
-
(Locked)
Responding to events3m 46s
-
(Locked)
Passing event handlers from a parent to a child4m 44s
-
(Locked)
Understanding event propagation4m 30s
-
(Locked)
Preventing default behaviour4m 22s
-
(Locked)
React state11m 3s
-
(Locked)
State batching + updating state using a value vs function5m 2s
-
(Locked)
Updating objects in state5m 50s
-
(Locked)
Updating arrays in state10m 33s
-
(Locked)
Create a shopping cart15m 17s
-
(Locked)
Trigger, render, VirtualDOM, commit14m 5s
-
(Locked)
-
-
(Locked)
Introduction1m 29s
-
(Locked)
Component tree2m 14s
-
(Locked)
Building the file structure5m 53s
-
(Locked)
Rendering tasks6m 48s
-
(Locked)
Building the TaskControls component6m 45s
-
(Locked)
Building the TaskForm component7m 41s
-
(Locked)
Toggle task completion3m 35s
-
(Locked)
Delete tasks3m 5s
-
(Locked)
Edit tasks12m 16s
-
(Locked)
Make changes persistent using localStorage4m 34s
-
(Locked)
-
-
(Locked)
Introduction4m 15s
-
(Locked)
Component tree3m 46s
-
(Locked)
Building the file structure5m 51s
-
(Locked)
Managing quiz state with useReducer9m 58s
-
(Locked)
QuestionView: QuestionHeader10m 15s
-
(Locked)
QuestionView: QuestionText5m 20s
-
(Locked)
QuestionView: AnswerOptions6m 45s
-
(Locked)
QuestionView: MediaDisplay5m 37s
-
(Locked)
QuestionView: NavigationControls10m 1s
-
(Locked)
ProgressBar5m 17s
-
(Locked)
AppBanner4m 26s
-
(Locked)
ResultView13m 51s
-
(Locked)
-
-
(Locked)
Introduction4m 5s
-
(Locked)
Component tree3m 50s
-
(Locked)
Building the file structure11m 13s
-
(Locked)
Setting up the navbar layout6m 12s
-
(Locked)
Desktop navigation links5m 51s
-
(Locked)
Adding light/dark mode toggle4m 10s
-
(Locked)
Mobile menu with hamburger icon5m 51s
-
(Locked)
Building ScrollDots for navigation4m 35s
-
(Locked)
Building the hero section9m 10s
-
(Locked)
Projects section layout5m 35s
-
(Locked)
Create the ProjectCard component6m 33s
-
(Locked)
Filtering projects by type4m 18s
-
(Locked)
Building the skills and experience section layout4m 27s
-
(Locked)
Skills grid4m 48s
-
(Locked)
Experience timeline6m 21s
-
(Locked)
Building the layout of recommendations section2m 52s
-
(Locked)
TestimonialCard6m 17s
-
(Locked)
ArrowNavigation4m 36s
-
(Locked)
Company logos row with CompanyLogo component4m 46s
-
(Locked)
Building the contact section7m 59s
-
(Locked)
Building the footer6m 16s
-
(Locked)
Dark/light mode persisting2m 41s
-
(Locked)
-
-
(Locked)
Introduction: User walkthrough3m 15s
-
(Locked)
Component tree2m 44s
-
(Locked)
Building the file structure4m 1s
-
(Locked)
Set up the game state in app: Generate and shuffle icons using the Fisher-Yates algorithm12m 37s
-
(Locked)
Build the settings component and define reInitialiseGame in the process4m 22s
-
(Locked)
Reset button4m 5s
-
(Locked)
ScoreBoard2m 57s
-
(Locked)
Conditionally show graffiti when the game is won3m 43s
-
(Locked)
Building the GameBoard component12m 15s
-
(Locked)
Add flipping logic to the Card component4m 50s
-
(Locked)
Move flipping logic to GameBoard using refs7m 44s
-
(Locked)
Play a victory sound when the player matches all card pairs2m 42s
-
(Locked)
Play flipping sound on card flip4m 26s
-
(Locked)
Reset the GameBoard3m 32s
-
(Locked)
-
-
(Locked)
Introduction: User walkthrough2m 21s
-
(Locked)
Component tree3m 28s
-
(Locked)
Project structure: Creating files and folders8m 38s
-
(Locked)
Header2m 4s
-
(Locked)
Build SearchBar and retrieve real cities from the Open-Meteo Geocoding API13m 23s
-
(Locked)
Build a useEffect to fetch weather data when a city is selected5m 2s
-
(Locked)
Build a useEffect that transforms the API data when data changes8m 52s
-
(Locked)
Build the CurrentWeather component8m 25s
-
(Locked)
Build the HumidityCard component3m
-
(Locked)
Build the WindSpeedCard component1m 57s
-
(Locked)
Build the HourlyForecast component7m 29s
-
(Locked)
Build the Forecast component7m 2s
-
(Locked)
-
-
(Locked)
Introduction: User walkthrough1m 53s
-
(Locked)
Component tree2m 19s
-
(Locked)
Project structure: Creating files and folders4m 23s
-
(Locked)
Building the language context and wrapping app in the provider6m 33s
-
(Locked)
Routing and layout with App.jsx4m 32s
-
(Locked)
Building the header6m 9s
-
(Locked)
Building the LanguageToggle component5m 40s
-
(Locked)
Building the footer component4m 43s
-
(Locked)
Supabase configuration and environment setup9m 56s
-
(Locked)
StoryList page: Fetching and displaying data11m 44s
-
(Locked)
StoryCard component10m 49s
-
(Locked)
StoryDetail page14m 10s
-
(Locked)
StoryDetail page: Building the story content section8m 26s
-
(Locked)
Building the NotFound page4m 23s
-
(Locked)
Build a beautiful custom scrollbar2m 42s
-
(Locked)
-
-
(Locked)
Introduction: User walkthrough2m 14s
-
(Locked)
Component tree4m 6s
-
(Locked)
Project structure: Creating files and folders5m 34s
-
(Locked)
Adding dark mode with theme toggle and useEffect7m 32s
-
(Locked)
Building the Kanban board: Managing column state and rendering tasks12m 4s
-
(Locked)
Adding and deleting columns7m 55s
-
(Locked)
Adding tasks6m 19s
-
(Locked)
Editing column titles6m 34s
-
(Locked)
Editing tasks inline9m 3s
-
(Locked)
Use useRef to focus and scroll to the end of the textarea when editing starts4m 17s
-
(Locked)
Implementing task deletion in the Kanban board8m 39s
-
(Locked)
Implementing drag and drop for tasks9m 13s
-
(Locked)
Handling task movement on drag end7m 17s
-
(Locked)
Apply custom scrollbar styles using a utility class4m 40s
-
(Locked)
Persisting Kanban state to localStorage4m 41s
-
(Locked)
-
-
(Locked)
Render props pattern5m 31s
-
(Locked)
Controlled vs uncontrolled components6m 49s
-
(Locked)
Compound components pattern10m 4s
-
(Locked)
Higher order components (HOCs)5m 27s
-
(Locked)
Function as children pattern10m 2s
-
(Locked)
Prop getters & prop collections13m 33s
-
(Locked)
State reducer pattern9m 40s
-
(Locked)
Controlled props pattern7m 10s
-
(Locked)
-
-
(Locked)
Introduction to performance in React4m 48s
-
(Locked)
React.memo — memoizing components5m 43s
-
(Locked)
Another example using React.memo4m 14s
-
(Locked)
useCallback — memoizing functions6m 41s
-
(Locked)
useMemo — memoizing expensive calculations5m 32s
-
(Locked)
React virtualization6m 1s
-
(Locked)
Lazy loading components (React.lazy + Suspense)7m 21s
-
(Locked)
Profiling React apps with React DevTools Profiler7m 48s
-
(Locked)
-
-
(Locked)
Introduction to routing in React8m 10s
-
(Locked)
Nested routes & layouts (using )7m 17s
-
(Locked)
URL parameters & useParams15m 20s
-
(Locked)
Search params & query strings9m 15s
-
(Locked)
Programmatic navigation with useNavigate7m 31s
-
(Locked)
Protected routes (auth example)10m
-
(Locked)
Code splitting & lazy loading routes4m 15s
-
(Locked)
-
-
(Locked)
Review of data fetching basics (fetch + useEffect)11m 21s
-
(Locked)
React Query (TanStack Query): Using useQuery for API calls12m
-
(Locked)
Query caching & refetching15m 32s
-
(Locked)
Global state with Zustand12m 36s
-
(Locked)
Redux Toolkit17m 12s
-
(Locked)
Error boundary (synchronous error handling)11m 15s
-
(Locked)
Error boundary + Suspense (asynchronous error handling)9m 31s
-
(Locked)
Modern error handling with react-error-boundary10m 31s
-
(Locked)
-
-
(Locked)
Introduction to React testing: Basic rendering15m 6s
-
(Locked)
Querying elements7m 58s
-
(Locked)
Prop-based behaviour5m 58s
-
(Locked)
Testing conditional rendering5m 57s
-
(Locked)
Testing form field initial values4m 43s
-
(Locked)
Snapshot testing12m 20s
-
(Locked)
User events: Testing input typing with userEvent.type5m 1s
-
(Locked)
User events: Testing button clicks with userEvent.click5m 49s
-
(Locked)
User events: Tonditional rendering with userEvent4m 53s
-
(Locked)
Using fireEvent5m 3s
-
(Locked)
Testing toggle interactions (expand/collapse)8m 40s
-
(Locked)
Testing asynchronous data fetching11m 20s
-
(Locked)
Testing error states in asynchronous React components7m 17s
-
(Locked)
-
-
(Locked)
Introduction to Next.js and project setup15m 30s
-
(Locked)
File-based routing and navigation5m 57s
-
(Locked)
Layouts vs. old custom app component9m 9s
-
(Locked)
Nested layout3m 59s
-
(Locked)
Next.js 16: SSR / ISR / SSG16m 41s
-
(Locked)
Client components and server components9m 54s
-
(Locked)
Passing data from server to client components6m 37s
-
(Locked)
Interleaving server and client components11m 40s
-
(Locked)
Context providers19m 22s
-
(Locked)
Third-party components16m 7s
-
(Locked)
Next.js 16 API routes and fullstack features30m 28s
-
(Locked)
Using a database in Next.js (fullstack data persistence)11m 40s
-
(Locked)
Server-sent events in Next.js (SSE)20m 59s
-
(Locked)
Database relationships (users + messages)17m 42s
-
(Locked)
Building a functional contact form31m 13s
-
(Locked)
Server actions, a powerful Next.js feature11m 27s
-
(Locked)
Add metadata to client and server components9m 24s
-
(Locked)
Build a database viewer19m 30s
-
(Locked)
Build a courses table and seed it with courses data8m 43s
-
(Locked)
Switching from API to database data + image optimization17m 34s
-
(Locked)
Next.js params15m 40s
-
(Locked)
Authentication: Users table creation and seeding15m 47s
-
(Locked)
Authentication: Configuration with JWT26m 35s
-
(Locked)
Authentication: Building an auth-aware navigation bar20m 6s
-
(Locked)
Authentication: Login27m 13s
-
(Locked)
Authentication: Signup28m 9s
-
(Locked)
Authentication: Email verification11m 54s
-
(Locked)
Authentication: Restrict pages6m 51s
-
(Locked)
Authentication: Password reset37m 43s
-
(Locked)
Authentication: Google login16m 52s
-
(Locked)
Authentication: GitHub login5m 54s
-
(Locked)
Adding foreign keys for course in messages9m 34s
-
(Locked)
Add Zod validation to message form9m 4s
-
(Locked)
Restrict chat rooms to a single course13m 46s
-
(Locked)
Using ErrorBoundary and Suspense for safe component rendering10m 28s
-
(Locked)
Pull messages using a server action10m 21s
-
(Locked)
Implementing pagination for message history15m 35s
-
(Locked)
Include user and course when posting a message14m 36s
-
(Locked)
Broadcast new message to connected users12m 17s
-
(Locked)
Optimistically delete a message and notify all users in real time19m 29s
-
(Locked)
Optimistically edit a message and notify all users in real time21m 19s
-
(Locked)
Next.js 16 middleware: Restrict protected route13m 22s
-
(Locked)
Next.js 16 middleware: Restrict admin page7m 33s
-
(Locked)