IIRF Online > Development > Web Development > React JS > The Ultimate React Course 2024: React, Next.js, Redux & More
The Ultimate React Course 2024: React, Next.js, Redux & More by Udemy
Master modern React from beginner to advanced! Next.js, Context API, React Query, Redux, Tailwind, advanced patterns
Course Highlights
- Become an advanced, confident, and modern React developer from scratch
- Build 10+ beautiful projects, including two HUGE professional real-world apps
- Become job-ready by working with libraries and tools used in professional projects
- Join my other 1,900,000+ happy students on this journey
- Think like a senior React engineer with advanced design patterns
- Next..js "App" router with cutting-edge React Server Components + Server Actions
- State management: thinking about state, where to place, local vs. global, UI vs. remote
- Build reusable, composable, and versatile components
- Master the confusing but important useEffect hook once and for all
- Build many custom hooks, reusable in your future projects
- Build single-page applications with React Router (including v6.4+ with data loading)
- Performance optimization with memo, useMemo, useCallback, and code splitting
- Advanced React features: useReducer, Context API, cloneElement, portals, etc.
- Advanced state management with Redux, Redux Toolkit, Thunks, React Query
- Build real-world app features: authentication, data sorting, filtering and pagination, dark mode, charts, etc.
- Understand how React actually works behind the scenes: virtual DOM, reconciliation, fiber tree, key prop, etc.
- Style your apps with Tailwind CSS, CSS Modules, Styled Components (CSS-in-JS)
- Practice your skills with many challenges, exercises, and practice projects
Skills you will learn!
Curriculum
5 Topics
Course Roadmap and Projects
Building Our First React App!
Watch Before You Start!
Read Before You Start!
Downloading Course Material
2 Topics
Introduction to Part 1
Useful Resources for Part 1
9 Topics
Section Overview
Why Do Front-End Frameworks Exist?
React vs. Vanilla JavaScript
What is React?
Setting Up Our Development Environment
Pure React
A Quick Look at React's Official Documentation
Setting Up a New React Project: The Options
Setting Up a Project With Create-React-App
15 Topics
Section Overview
Destructuring Objects and Arrays
Rest/Spread Operator
Template Literals
Ternaries Instead of if/else Statements
Arrow Functions
Short-Circuiting And Logical Operators: && || ??
Optional Chaining
The Array map Method
The Array filter Method
The Array reduce Method
The Array sort Method
Working With Immutable Arrays
Asynchronous JavaScript: Promises
Asynchronous JavaScript: Async/Await
24 Topics
Section Overview
Rendering the Root Component and Strict Mode
Before We Start Coding: Debugging
Components as Building Blocks
Creating And Reusing a Component
What is JSX?
Creating More Components
JavaScript Logic in Components
Separation of Concerns
Styling React Applications
Passing and Receiving Props
Props Immutability and One-Way Data Flow
CHALLENGE #1: Profile Card (v1)
The Rules of JSX
Rendering Lists
Conditional Rendering With &&
Conditional Rendering With Ternaries
Conditional Rendering With Multiple Returns
Extracting JSX Into a New Component
Destructuring Props
React Fragments
Setting Classes and Text Conditionally
Section Summary
CHALLENGE #2: Profile Card (v2)
21 Topics
Section Overview
Let's Build a Steps Component
Handling Events the React Way
What is State in React?
Creating a State Variable With useState
Don't Set State Manually!
The Mechanics of State
Adding Another Piece of State
React Developer Tools
Updating State Based on Current State
More Thoughts About State + State Guidelines
A Vanilla JavaScript Implementation
CHALLENGE #1: Date Counter (v1)
Starting a New Project: The "Far Away" Travel List
Building the Layout
Rendering the Items List
Building a Form and Handling Submissions
Controlled Elements
State vs. Props
EXERCISE #1: Flashcards
CHALLENGE #2: Date Counter (v2)
17 Topics
Section Overview
What is "Thinking in React"?
Fundamentals of State Management
Thinking About State and Lifting State Up
Reviewing "Lifting Up State"
Deleting an Item: More Child-to-Parent Communication!
Updating an Item: Complex Immutable Data Operation
Derived State
Calculating Statistics as Derived State
Sorting Items
Clearing the List
Moving Components Into Separate Files
EXERCISE #1: Accordion Component (v1)
The "children" Prop: Making a Reusable Button
More Reusability With the "children" Prop
EXERCISE #2: Accordion Component (v2)
CHALLENGE #1: Tip Calculator
9 Topics
Section Overview
Project Setup
Building the Static App: List of Friends
Building the Static App: Forms
Displaying the New Friend Form
Adding a New Friend
Selecting a Friend
Creating Controlled Elements
Splitting a Bill
2 Topics
Introduction to Part 2
Useful Resources for Part 2
17 Topics
Section Overview
Setting Up the "usePopcorn" Project
How to Split a UI Into Components
Splitting Components in Practice
Component Categories
Prop Drilling
Component Composition
Fixing Prop Drilling With Composition (And Building a Layout)
Using Composition to Make a Reusable Box
Passing Elements as Props (Alternative to children)
Building a Reusable Star Rating Component
Creating the Stars
Handling Hover Events
Props as a Component API
Improving Reusability With Props
PropTypes
CHALLENGE #1: Text Expander Component
18 Topics
Section Overview
Project Setup and Walkthrough
Components Instances and Elements
Instances and Elements in Practice
How Rendering Works: Overview
How Rendering Works: The Render Phase
How Rendering Works: The Commit Phase
How Diffing Works
Diffing Rules in Practice
The Key Prop
Resetting State With the Key Prop
Using the Key Prop to Fix Our Eat-'N-Split App
Rules for Render Logic: Pure Components
State Update Batching
State Update Batching in Practice
How Events Work in React
Libraries vs. Frameworks & The React Ecosystem
Section Summary: Practical Takeaways
19 Topics
Section Overview
The Component Lifecycle
How NOT to Fetch Data in React
useEffect to the Rescue
A First Look at Effects
Using an async Function
Adding a Loading State
Handling Errors
The useEffect Dependency Array
Synchronizing Queries With Movie Data
Selecting a Movie
Loading Movie Details
Adding a Watched Movie
Adding a New Effect: Changing Page Title
The useEffect Cleanup Function
Cleaning Up the Title
Cleaning Up Data Fetching
One More Effect: Listening to a Keypress
CHALLENGE #1: Currency Converter
15 Topics
Section Overview
React Hooks and Their Rules
The Rules of Hooks in Practice
More Details of useState
Initializing State With a Callback (Lazy Initial State)
useState Summary
How NOT to Select DOM Elements in React
Introducing Another Hook: useRef
Refs to Select DOM Elements
Refs to Persist Data Between Renders
What are Custom Hooks? When to Create One?
Creating our First Custom Hook: useMovies
Creating useLocalStorageState
Creating useKey
CHALLENGE #1: useGeolocate
10 Topics
Section Overview
Our First Class Component
Working With Event Handlers
Class Components vs. Function Components
Starting the "Classy Weather" App
Fetching Weather Data
Displaying the Weather
Removing Boilerplate Code With Class Fields
Child to Parent Communication
Lifecycle Methods
2 Topics
Introduction to Part 3
Useful Resources for Part 3
17 Topics
Section Overview
Yet Another Hook: useReducer
Managing Related Pieces of State
Managing State With useReducer
The "React Quiz" App
Loading Questions from a Fake API
Handling Loading Error and Ready Status
Starting a New Quiz
Displaying Questions
Handling New Answers
Moving to the Next Question
Displaying Progress
Finishing a Quiz
Restarting a Quiz
Setting Up a Timer With useEffect
Section Summary: useState vs. useReducer
CHALLENGE #1: Creating a Bank Account With useReducer
17 Topics
Section Overview
Creating Our First App With Vite: "WorldWise"
Routing and Single-Page Applications (SPAs)
Implementing Main Pages and Routes
Linking Between Routes With <Link /> and <NavLink />
Styling Options For React Applications
Using CSS Modules
Building the Pages
Building the App Layout
Nested Routes and Index Route
Implementing the Cities List
Implementing the Countries List
Storing State in the URL
Dynamic Routes With URL Parameters
Reading and Setting a Query String
Programmatic Navigation with useNavigate
Programmatic Navigation with <Navigate />
22 Topics
Section Overview
CHALLENGE #1: Understand "The Atomic Blog" App
What is the Context API?
Creating and Providing a Context
Consuming the Context
Advanced Pattern: A Custom Provider and Hook
Thinking In React: Advanced State Management
Back to "WorldWise": Creating a CitiesContext
Consuming the CitiesContext
Finishing the City View
Including a Map With the Leaflet Library
Displaying City Markers on Map
Interacting With the Map
Setting Map Position With Geolocation
Fetching City Data in the Form
Creating a New City
Deleting a City
Advanced State Management System: Context + useReducer
Adding Fake Authentication: Setting Up Context
Adding Fake Authentication: Implementing "Login"
Adding Fake Authentication: Protecting a Route
CHALLENGE #2: Refactoring "React Quiz" to Context API
18 Topics
Section Overview
Performance Optimization and Wasted Renders
The Profiler Developer Tool
A Surprising Optimization Trick With children
Understanding memo
memo in Practice
Understanding useMemo and useCallback
useMemo in Practice
useCallback in Practice
Optimizing Context Re-Renders
Back to The "WorldWise" App
Optimizing Bundle Size With Code Splitting
Don't Optimize Prematurely!
useEffect Rules and Best Practices
CHALLENGE #1: Fix Performance Issues in "Workout Timer"
Setting State Based on Other State Updates
Using Helper Functions In Effects
Closures in Effects
19 Topics
Section Overview
Introduction to Redux
Creating a Reducer: Bank Account
Creating a Redux Store
Working With Action Creators
Adding More State: Customer
Professional Redux File Structure: State Slices
Back to React! Connecting our Redux App With React
Dispatching Actions from Our React App
The Legacy Way of Connecting Components to Redux
Redux Middleware and Thunks
Making an API Call With Redux Thunks
The Redux DevTools
What is Redux Toolkit (RTK)?
Creating the Store With RTK
Creating the Account Slice
Back to Thunks
Creating the Customer Slice
Redux vs. Context API
2 Topics
Introduction to Part 4
Useful Resources for Part 4
12 Topics
Section Overview
Setting Up a New Project: "Fast React Pizza Co."
Application Planning
Setting Up a Professional File Structure
A New Way Of Implementing Routes
Building the App Layout
Fetching Data With React Router "Loaders": Pizza Menu
Displaying a Loading Indicator
Handling Errors With Error Elements
Fetching Orders
Writing Data With React Router "Actions"
Error Handling in Form Actions
19 Topics
Section Overview
What is Tailwind CSS?
Setting Up Tailwind CSS
Working With Color
Styling Text
The Box Model: Spacing Borders and Display
Responsive Design
Using Flexbox
Using CSS Grid
Styling Buttons: Element States and Transitions
Styling Form Elements
Reusing Styles With @apply
Reusing Styles With React Components
Absolute Positioning z-index and More
Configuring Tailwind: Custom Font Family
Styling the Menu
Styling the Cart
Styling the Order Form
Styling the Order Overview
14 Topics
Section Overview
Modeling the "User" State With Redux Toolkit
Reading and Updating the User State
Modeling the "Cart" State
Adding Menu Items to the Cart
Building the Cart Overview With Redux Selectors
Building the Cart Page
Deleting Cart Items
Updating Cart Quantities
Using the Cart for New Orders
Redux Thunks With createAsyncThunk
Integrating Geolocation
Fetching Data Without Navigation: useFetcher
Updating Data Without Navigation
10 Topics
Section Overview
Application Planning
Setting Up the Project: "The Wild Oasis"
Introduction to Styled Components
Global Styles With Styled Components
Styled Component Props and the "css" Function
Building More Reusable Styled Components
Setting Up Pages and Routes
Building the App Layout
Building the Sidebar and Main Navigation
9 Topics
Section Overview
What is Supabase?
Creating a New Database
Modeling Application State
Creating Tables
Relationships Between Tables
Adding Security Policies (RLS)
Connecting Supabase With Our React App
Setting Up Storage Buckets
16 Topics
Section Overview
What is React Query?
Setting Up React Query
Make Sure to Use React Query v4!
Fetching Cabin Data
Mutations: Deleting a Cabin
Displaying Toasts (Notifications)
Introducing Another Library: React Hook Form
Creating a New Cabin
Handling Form Errors
Uploading Images to Supabase
Editing a Cabin
Abstracting React Query Into Custom Hooks
Duplicating Cabins
Fetching Applications Settings
Updating Application Settings
13 Topics
Section Overview
An Overview of Reusability in React
Setting Up an Example
The Render Props Pattern
A Look at Higher-Order Components (HOC)
The Compound Component Pattern
Building a Modal Window Using a React Portal
Converting the Modal to a Compound Component
Detecting a Click Outside the Modal
Confirming Cabin Deletions
Building a Reusable Table
Applying the Render Props Pattern
Building a Reusable Context Menu
33 Topics
Section Overview
Client-Side Filtering: Filtering Cabins
Client-Side Sorting: Sorting Cabins
Building the Bookings Table
Uploading Sample Data
API-Side Filtering: Filtering Bookings
API-Side Sorting: Sorting Bookings
Building a Reusable Pagination Component
API-Side Pagination: Paginating Bookings
Prefetching With React Query
Building the Single Booking Page
Checking In a Booking
Adding Optional Breakfast
Checking Out a Booking (+ Fixing a Small Bug)
Deleting a Booking
Authentication: User Login With Supabase
Authorization: Protecting Routes
User Logout
Fixing an Important Bug
Building the Sign Up Form
User Sign Up
Authorization on Supabase: Protecting Database (RLS)
Building The App Header
Updating User Data and Password
Implementing Dark Mode With CSS Variables
Building the Dashboard Layout
Computing Recent Bookings and Stays
Displaying Statistics
Displaying a Line Chart With the Recharts Library
Displaying a Pie Chart
Displaying Stays for Current Day
Error Boundaries
Final Touches + Fixing Bugs
4 Topics
Section Overview
Deploying to Netlify
Setting Up a Git and GitHub Repository
Deploying to Vercel
2 Topics
Introduction to Part 5
Useful Resources for Part 5
18 Topics
Section Overview
Download Fresh Starter Files + Slides!
An Overview of Server-Side Rendering (SSR)
Experiment: Manual SSR With React DOM + Node.js
The Missing Piece: Hydration
Implementing Hydration
What is Next.js?
Setting Up a Next.js Project
Frequent Next.js Updates + Documentation
Defining Routes and Pages
Navigating Between Pages
Creating a Layout
What are React Server Components? (RSC – Part 1)
Fetching Data in a Page
Adding Interactivity With Client Components
Displaying a Loading Indicator
How RSC Works Behind the Scenes (RSC – Part 2)
RSC vs. SSR: How are They Related? (RSC – Part 3)
12 Topics
Section Overview
Project Planning: "The Wild Oasis" Customer Website
Project Organization
Styling With Tailwind CSS
Adding Page Metadata and Favicon
Loading and Optimizing Fonts
Improving the Navigation and Root Layout
Optimizing Images With Next.js <Image /> Component
Building the Home Page
Building the About Page With Responsive Images
Adding Nested Routes and Pages
Adding a Nested Layout
18 Topics
Section Overview
Setting Up Supabase
Fetching and Displaying Cabin List
Streaming Route Segments With loading.js File
What is React Suspense?
Streaming UI With Suspense: Cabin List
Dynamic Route Segments: Building the Cabin Page
Generating Dynamic Metadata
Error Handling: Setting Up Error Boundaries
Error Handling: "Not Found" Errors
Different Types of SSR: Static vs. Dynamic Rendering
Analyzing Rendering in Our App
Making Dynamic Pages Static With generateStaticParams
Static Site Generation (SSG)
Partial Pre-Rendering
How Next.js Caches Data
Experimenting With Caching and ISR
CHALLENGE #1: Fetching the Number of Cabins
9 Topics
Section Overview
Blurring the Boundary Between Server and Client (RSC – Part 4)
Client Components in Server Components
Highlighting Current Side Navigation Link
Sharing State Between Client and Server: The URL
Advanced: Server Components in Client Components
Data Fetching Strategies for the Reservation Section
Using the Context API for State Management
Creating an API Endpoint With Route Handlers
8 Topics
Section Overview
Setting Up NextAuth
Getting the User Session
What is Middleware in Next.js?
Protecting Routes With NextAuth Middleware
Building a Custom Sign In Page
Building a Custom Sign Out Button
Creating a New Guest on First Sign In
12 Topics
Section Overview
What are Server Actions?
Updating the Profile Using a Server Action
Manual Cache Revalidation
Displaying a Loading Indicator: The useFormStatus Hook
Building the Guest's Reservations Page
Deleting a Reservation
Another Loading Indicator: The useTransition Hook
CHALLENGE #1: Updating a Reservation
Removing Reservations Immediately: The useOptimistic Hook
Back to the Cabin Page: Finishing the Date Selector
Creating a New Reservation
4 Topics
Section Overview
Setting Up the GitHub Repository
Deploying to Vercel
Updating Environment Variables and OAuth Credentials
11 Topics
Section Overview
Setting Up Another Project
Routes Pages and Navigation
Dynamic Routes
Creating a Layout With a Custom _App
Creating Pages
Defining Page Title and Favicon
Fetching Data With getStaticProps (SSG)
Fetching Data With getServerSideProps (SSR)
API Routes
Handling Form Submissions
1 Topic
Where to Go from Here
The Ultimate React Course 2024: React, Next.js, Redux & More
Related React JS Courses
Thank You!
Your review has been submitted successfully.