The Ultimate React Course 2023: React/ Redux & More

About Course

Learn React from scratch and become a confident, professional front-end developer. This comprehensive React course covers everything you need to know, from the fundamentals to advanced concepts like Redux, React Query, and building real-world applications. This course is completely free and hosted on Theetay. This course is from Udemy and other platforms like Udacity, Coursera, MasterClass, NearPeer, and more.

This is the most in-depth React course on Udemy, and it’s fundamentally different from all the other ones. It features the biggest and most professional project, super detailed explanations of all important concepts with carefully crafted and animated diagrams, a huge focus on how to think in React, and modern best practices. A long section that explores how React actually works behind the scenes will give you the confidence to use React effectively on your own. Advanced design patterns like compound components will make you think like a senior React engineer.

You will learn and master React Router, Redux, Redux Toolkit, React Query, React Hook Form, Styled Components, Tailwind CSS, and more. This course uses industry-standard tools such as Supabase, GitHub, Netlify, and Vercel.

This course is 100% project-based. You’ll start building your portfolio of 8+ beautiful and high-quality React apps, where each one will showcase a few of the new skills you will be learning. By the end of the course, you will have all the knowledge and confidence that you need to ace your job interviews and become the professional React developer that companies are looking for.

This course is taught by Jonas, an experienced web developer and designer, and one of Udemy’s top instructors. He’s been teaching web development courses since 2015 to over 1,500,000 developers.

Ready to become a confident and independent React developer, highly capable of building your own apps? Then don’t wait any longer, and start your React journey today!

Here’s what you’ll learn:

React fundamentals
How to think about state
How to think about components
Deep dive into effects and useEffect
Deep dive into hooks
Performance optimization
Advanced state management
Building Single-Page Applications (SPA)
Building real-world features found in many apps
Creating your own back-end with a DB and API using Supabase
How to style React apps
Advanced React patterns used by senior developers
How React works behind the scenes

By signing up today, you’ll also get:

Up-to-date HD-quality videos
Downloadable slides PDF
Professional English captions
Downloadable assets and starter and final code for each project
Free and fast support in the course Q&A
10+ challenges and exercises to practice your skills (solutions included)

Become an advanced, confident, and modern React developer from scratch
Build 8+ beautiful projects, including one HUGE professional real-world app
Become job-ready by working with libraries and tools used in professional projects
Join my other 1,500,000+ happy students on this journey
Think like a senior React engineer with advanced design patterns
React fundamentals: components, JSX, props, events, state, forms
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

Course Content

01 – Welcome, Welcome, Welcome!

A Message from the Professor
001 Course Roadmap and Projects.mp4

00:00
002 Building Our First React App!.mp4

00:00
003 Watch Before You Start!.mp4

00:00
004 Read Before You Start!.html

00:00
005 Downloading Course Material.mp4

00:00
theory-slides-v1.1.pdf

00:00
Section Quiz

02 – PART 1 REACT FUNDAMENTALS (4 PROJECTS)

03 – A First Look at React

001 Section Overview.mp4

00:00
002 Why Do Front-End Frameworks Exist.mp4

00:00
003 React vs. Vanilla JavaScript.mp4

00:00
004 What is React.mp4

00:00
005 Setting Up Our Development Environment.mp4

00:00
006 Pure React.mp4

00:00
007 A Quick Look at React’s Official Documentation.mp4

00:00
008 Setting Up a New React Project The Options.mp4

00:00
009 Setting Up a Project With Create-React-App.mp4

00:00
Section Quiz

04 – (Optional) Review of Essential JavaScript for React

001 Section Overview.mp4

00:00
002 Destructuring Objects and Arrays.mp4

00:00
003 RestSpread Operator.mp4

00:00
004 Template Literals.mp4

00:00
005 Ternaries Instead of ifelse Statements.mp4

00:00
006 Arrow Functions.mp4

00:00
007 Short-Circuiting And Logical Operators &&, ,.mp4

00:00
008 Optional Chaining.mp4

00:00
009 The Array map Method.mp4

00:00
010 The Array filter Method.mp4

00:00
011 The Array reduce Method.mp4

00:00
012 The Array sort Method.mp4

00:00
013 Working With Immutable Arrays.mp4

00:00
014 Asynchronous JavaScript Promises.mp4

00:00
015 Asynchronous JavaScript AsyncAwait.mp4

00:00
Section Quiz

05 – Working With Components, Props, and JSX

001 Section Overview.mp4

00:00
002 Rendering the Root Component and Strict Mode.mp4

00:00
003 Before We Start Coding Debugging.mp4

00:00
004 Components as Building Blocks.mp4

00:00
005 Creating And Reusing a Component.mp4

00:00
006 What is JSX.mp4

00:00
007 Creating More Components.mp4

00:00
008 JavaScript Logic in Components.mp4

00:00
009 Separation of Concerns.mp4

00:00
010 Styling React Applications.mp4

00:00
011 Passing and Receiving Props.mp4

00:00
012 Props, Immutability, and One-Way Data Flow.mp4

00:00
013 CHALLENGE #1 Profile Card (v1).mp4

00:00
014 The Rules of JSX.mp4

00:00
015 Rendering Lists.mp4

00:00
016 Conditional Rendering With &&.mp4

00:00
017 Conditional Rendering With Ternaries.mp4

00:00
018 Conditional Rendering With Multiple Returns.mp4

00:00
019 Extracting JSX Into a New Component.mp4

00:00
020 Destructuring Props.mp4

00:00
021 React Fragments.mp4

00:00
022 Setting Classes and Text Conditionally.mp4

00:00
023 Section Summary.mp4

00:00
024 CHALLENGE #2 Profile Card (v2).mp4

00:00

06 – State, Events, and Forms Interactive Components

001 Section Overview.mp4

00:00
002 Let’s Build a Steps Component.mp4

00:00
003 Handling Events the React Way.mp4

00:00
004 What is State in React.mp4

00:00
005 Creating a State Variable With useState.mp4

00:00
006 Don’t Set State Manually!.mp4

00:00
007 The Mechanics of State.mp4

00:00
008 Adding Another Piece of State.mp4

00:00
009 React Developer Tools.mp4

00:00
010 Updating State Based on Current State.mp4

00:00
011 More Thoughts About State + State Guidelines.mp4

00:00
012 A Vanilla JavaScript Implementation.mp4

00:00
013 CHALLENGE #1 Date Counter (v1).mp4

00:00
014 Starting a New Project The Far Away Travel List.mp4

00:00
015 Building the Layout.mp4

00:00
016 Rendering the Items List.mp4

00:00
017 Building a Form and Handling Submissions.mp4

00:00
018 Controlled Elements.mp4

00:00
019 State vs. Props.mp4

00:00
020 EXERCISE #1 Flashcards.mp4

00:00
021 CHALLENGE #2 Date Counter (v2).mp4

00:00
Section Quiz

07 – Thinking In React State Management

001 Section Overview.mp4

00:00
002 What is Thinking in React.mp4

00:00
003 Fundamentals of State Management.mp4

00:00
004 Thinking About State and Lifting State Up.mp4

00:00
005 Reviewing Lifting Up State.mp4

00:00
006 Deleting an Item More Child-to-Parent Communication!.mp4

00:00
007 Updating an Item Complex Immutable Data Operation.mp4

00:00
008 Derived State.mp4

00:00
009 Calculating Statistics as Derived State.mp4

00:00
010 Sorting Items.mp4

00:00
011 Clearing the List.mp4

00:00
012 Moving Components Into Separate Files.mp4

00:00
013 EXERCISE #1 Accordion Component (v1).mp4

00:00
014 The children Prop Making a Reusable Button.mp4

00:00
015 More Reusability With the children Prop.mp4

00:00
016 EXERCISE #2 Accordion Component (v2).mp4

00:00
017 CHALLENGE #1 Tip Calculator.mp4

00:00
Section Quiz

08 – (Optional) Practice Project Eat-‘N-Split

001 Section Overview.mp4

00:00
002 Project Setup.mp4

00:00
003 Building the Static App List of Friends.mp4

00:00
004 Building the Static App Forms.mp4

00:00
005 Displaying the New Friend Form.mp4

00:00
006 Adding a New Friend.mp4

00:00
007 Selecting a Friend.mp4

00:00
008 Creating Controlled Elements.mp4

00:00
009 Splitting a Bill.mp4

00:00
Section Quiz

09 – PART 2 INTERMEDIATE REACT (2 PROJECTS)

10 – Thinking in React Components, Composition, and Reusability

001 Section Overview.mp4

00:00
002 Setting Up the usePopcorn Project.mp4

00:00
003 How to Split a UI Into Components.mp4

00:00
004 Splitting Components in Practice.mp4

00:00
005 Component Categories.mp4

00:00
006 Prop Drilling.mp4

00:00
007 Component Composition.mp4

00:00
008 Fixing Prop Drilling With Composition (And Building a Layout).mp4

00:00
009 Using Composition to Make a Reusable Box.mp4

00:00
010 Passing Elements as Props (Alternative to children).mp4

00:00
011 Building a Reusable Star Rating Component.mp4

00:00
012 Creating the Stars.mp4

00:00
013 Handling Hover Events.mp4

00:00
014 Props as a Component API.mp4

00:00
015 Improving Reusability With Props.mp4

00:00
016 PropTypes.mp4

00:00
017 CHALLENGE #1 Text Expander Component.mp4

00:00
Section Quiz

11 – How React Works Behind the Scenes

001 Section Overview.mp4

00:00
002 Project Setup and Walkthrough.mp4

00:00
003 Components, Instances, and Elements.mp4

00:00
004 Instances and Elements in Practice.mp4

00:00
005 How Rendering Works Overview.mp4

00:00
006 How Rendering Works The Render Phase.mp4

00:00
007 How Rendering Works The Commit Phase.mp4

00:00
008 How Diffing Works.mp4

00:00
009 Diffing Rules in Practice.mp4

00:00
010 The Key Prop.mp4

00:00
011 Resetting State With the Key Prop.mp4

00:00
012 Using the Key Prop to Fix Our Eat-‘N-Split App.mp4

00:00
013 Rules for Render Logic Pure Components.mp4

00:00
014 State Update Batching.mp4

00:00
015 State Update Batching in Practice.mp4

00:00
016 How Events Work in React.mp4

00:00
017 Libraries vs. Frameworks & The React Ecosystem.mp4

00:00
018 Section Summary Practical Takeaways.mp4

00:00
Section Quiz

12 – Effects and Data Fetching

001 Section Overview.mp4

00:00
002 The Component Lifecycle.mp4

00:00
003 How NOT to Fetch Data in React.mp4

00:00
004 useEffect to the Rescue.mp4

00:00
005 A First Look at Effects.mp4

00:00
006 Using an async Function.mp4

00:00
007 Adding a Loading State.mp4

00:00
008 Handling Errors.mp4

00:00
009 The useEffect Dependency Array.mp4

00:00
010 Synchronizing Queries With Movie Data.mp4

00:00
011 Selecting a Movie.mp4

00:00
012 Loading Movie Details.mp4

00:00
013 Adding a Watched Movie.mp4

00:00
014 Adding a New Effect Changing Page Title.mp4

00:00
015 The useEffect Cleanup Function.mp4

00:00
016 Cleaning Up the Title.mp4

00:00
017 Cleaning Up Data Fetching.mp4

00:00
018 One More Effect Listening to a Keypress.mp4

00:00
019 CHALLENGE #1 Currency Converter.mp4

00:00
Section Quiz

13 – Custom Hooks, Refs, and More State

001 Section Overview.mp4

00:00
002 React Hooks and Their Rules.mp4

00:00
003 The Rules of Hooks in Practice.mp4

00:00
004 More Details of useState.mp4

00:00
005 Initializing State With a Callback (Lazy Initial State).mp4

00:00
006 useState Summary.mp4

00:00
007 How NOT to Select DOM Elements in React.mp4

00:00
008 Introducing Another Hook useRef.mp4

00:00
009 Refs to Select DOM Elements.mp4

00:00
010 Refs to Persist Data Between Renders.mp4

00:00
011 What are Custom Hooks When to Create One.mp4

00:00
012 Creating our First Custom Hook useMovies.mp4

00:00
013 Creating useLocalStorageState.mp4

00:00
014 Creating useKey.mp4

00:00
015 CHALLENGE #1 useGeolocate.mp4

00:00
Section Quiz

14 – (Optional) React Before Hooks Class-Based React

001 Section Overview.mp4

00:00
002 Our First Class Component.mp4

00:00
003 Working With Event Handlers.mp4

00:00
004 Class Components vs. Function Components.mp4

00:00
005 Starting the Classy Weather App.mp4

00:00
006 Fetching Weather Data.mp4

00:00
007 Displaying the Weather.mp4

00:00
008 Removing Boilerplate Code With Class Fields.mp4

00:00
009 Child to Parent Communication.mp4

00:00
010 Lifecycle Methods.mp4

00:00
Section Quiz

15 – PART 3 ADVANCED REACT + REDUX (4 PROJECTS)

16 – The Advanced useReducer Hook

001 Section Overview.mp4

00:00
002 Yet Another Hook useReducer.mp4

00:00
003 Managing Related Pieces of State.mp4

00:00
004 Managing State With useReducer.mp4

00:00
005 The React Quiz App.mp4

00:00
006 Loading Questions from a Fake API.mp4

00:00
007 Handling Loading, Error, and Ready Status.mp4

00:00
008 Starting a New Quiz.mp4

00:00
009 Displaying Questions.mp4

00:00
010 Handling New Answers.mp4

00:00
011 Moving to the Next Question.mp4

00:00
012 Displaying Progress.mp4

00:00
013 Finishing a Quiz.mp4

00:00
014 Restarting a Quiz.mp4

00:00
015 Setting Up a Timer With useEffect.mp4

00:00
016 Section Summary useState vs. useReducer.mp4

00:00
017 CHALLENGE #1 Creating a Bank Account With useReducer.mp4

00:00
Section Quiz

17 – React Router Building Single-Page Applications (SPA)

001 Section Overview.mp4

00:00
002 Creating Our First App With Vite WorldWise.mp4

00:00
003 Routing and Single-Page Applications (SPAs).mp4

00:00
004 Implementing Main Pages and Routes.mp4

00:00
005 Linking Between Routes With Link and NavLink.mp4

00:00
006 Styling Options For React Applications.mp4

00:00
007 Using CSS Modules.mp4

00:00
008 Building the Pages.mp4

00:00
009 Building the App Layout.mp4

00:00
010 Nested Routes and Index Route.mp4

00:00
011 Implementing the Cities List.mp4

00:00
012 Implementing the Countries List.mp4

00:00
013 Storing State in the URL.mp4

00:00
014 Dynamic Routes With URL Parameters.mp4

00:00
015 Reading and Setting a Query String.mp4

00:00
016 Programmatic Navigation with useNavigate.mp4

00:00
017 Programmatic Navigation with Navigate.mp4

00:00
Section Quiz

18 – Advanced State Management The Context API

001 Section Overview.mp4

00:00
002 CHALLENGE #1 Understand The Atomic Blog App.mp4

00:00
003 What is the Context API.mp4

00:00
004 Creating and Providing a Context.mp4

00:00
005 Consuming the Context.mp4

00:00
006 Advanced Pattern A Custom Provider and Hook.mp4

00:00
007 Thinking In React Advanced State Management.mp4

00:00
008 Back to WorldWise Creating a CitiesContext.mp4

00:00
009 Consuming the CitiesContext.mp4

00:00
010 Finishing the City View.mp4

00:00
011 Including a Map With the Leaflet Library.mp4

00:00
012 Displaying City Markers on Map.mp4

00:00
013 Interacting With the Map.mp4

00:00
014 Setting Map Position With Geolocation.mp4

00:00
015 Fetching City Data in the Form.mp4

00:00
016 Creating a New City.mp4

00:00
017 Deleting a City.mp4

00:00
018 Advanced State Management System Context + useReducer.mp4

00:00
019 Adding Fake Authentication Setting Up Context.mp4

00:00
020 Adding Fake Authentication Implementing Login.mp4

00:00
021 Adding Fake Authentication Protecting a Route.mp4

00:00
022 CHALLENGE #2 Refactoring React Quiz to Context API.mp4

00:00
Section Quiz

19 – Performance Optimization and Advanced useEffect

001 Section Overview.mp4

00:00
002 Performance Optimization and Wasted Renders.mp4

00:00
003 The Profiler Developer Tool.mp4

00:00
004 A Surprising Optimization Trick With children.mp4

00:00
005 Understanding memo.mp4

00:00
006 memo in Practice.mp4

00:00
007 Understanding useMemo and useCallback.mp4

00:00
008 useMemo in Practice.mp4

00:00
009 useCallback in Practice.mp4

00:00
010 Optimizing Context Re-Renders.mp4

00:00
011 Back to The WorldWise App.mp4

00:00
012 Optimizing Bundle Size With Code Splitting.mp4

00:00
013 Don’t Optimize Prematurely!.mp4

00:00
014 useEffect Rules and Best Practices.mp4

00:00
015 CHALLENGE #1 Fix Performance Issues in Workout Timer.mp4

00:00
016 Setting State Based on Other State Updates.mp4

00:00
017 Using Helper Functions In Effects.mp4

00:00
018 Closures in Effects.mp4

00:00
Section Quiz

20 – Redux and Modern Redux Toolkit (With Thunks)

001 Section Overview.mp4

00:00
002 Introduction to Redux.mp4

00:00
003 Creating a Reducer Bank Account.mp4

00:00
004 Creating a Redux Store.mp4

00:00
005 Working With Action Creators.mp4

00:00
006 Adding More State Customer.mp4

00:00
007 Professional Redux File Structure State Slices.mp4

00:00
008 Back to React! Connecting our Redux App With React.mp4

00:00
009 Dispatching Actions from Our React App.mp4

00:00
010 The Legacy Way of Connecting Components to Redux.mp4

00:00
011 Redux Middleware and Thunks.mp4

00:00
012 Making an API Call With Redux Thunks.mp4

00:00
013 The Redux DevTools.mp4

00:00
014 What is Redux Toolkit (RTK).mp4

00:00
015 Creating the Store With RTK.mp4

00:00
016 Creating the Account Slice.mp4

00:00
017 Back to Thunks.mp4

00:00
018 Creating the Customer Slice.mp4

00:00
019 Redux vs. Context API.mp4

00:00
Section Quiz

21 – PART 4 PROFESSIONAL REACT DEVELOPMENT (2 PROJECTS)

22 – React Router With Data Loading (v6.4+)

001 Section Overview.mp4

00:00
002 Setting Up a New Project Fast React Pizza Co.mp4

00:00
003 Application Planning.mp4

00:00
004 Setting Up a Professional File Structure.mp4

00:00
005 A New Way Of Implementing Routes.mp4

00:00
006 Building the App Layout.mp4

00:00
007 Fetching Data With React Router Loaders Pizza Menu.mp4

00:00
008 Displaying a Loading Indicator.mp4

00:00
009 Handling Errors With Error Elements.mp4

00:00
010 Fetching Orders.mp4

00:00
011 Writing Data With React Router Actions.mp4

00:00
012 Error Handling in Form Actions.mp4

00:00
Section Quiz

23 – (Optional) Tailwind CSS Crash Course Styling the App

001 Section Overview.mp4

00:00
002 What is Tailwind CSS.mp4

00:00
003 Setting Up Tailwind CSS.mp4

00:00
004 Working With Color.mp4

00:00
005 Styling Text.mp4

00:00
006 The Box Model Spacing, Borders, and Display.mp4

00:00
007 Responsive Design.mp4

00:00
008 Using Flexbox.mp4

00:00
009 Using CSS Grid.mp4

00:00
010 Styling Buttons Element States and Transitions.mp4

00:00
011 Styling Form Elements.mp4

00:00
012 Reusing Styles With @apply.mp4

00:00
013 Reusing Styles With React Components.mp4

00:00
014 Absolute Positioning, z-index, and More.mp4

00:00
015 Configuring Tailwind Custom Font Family.mp4

00:00
016 Styling the Menu.mp4

00:00
017 Styling the Cart.mp4

00:00
018 Styling the Order Form.mp4

00:00
019 Styling the Order Overview.mp4

00:00
Section Quiz

24 – Adding Redux and Advanced React Router

001 Section Overview.mp4

00:00
002 Modeling the User State With Redux Toolkit.mp4

00:00
003 Reading and Updating the User State.mp4

00:00
004 Modeling the Cart State.mp4

00:00
005 Adding Menu Items to the Cart.mp4

00:00
006 Building the Cart Overview With Redux Selectors.mp4

00:00
007 Building the Cart Page.mp4

00:00
008 Deleting Cart Items.mp4

00:00
009 Updating Cart Quantities.mp4

00:00
010 Using the Cart for New Orders.mp4

00:00
011 Redux Thunks With createAsyncThunk.mp4

00:00
012 Integrating Geolocation.mp4

00:00
013 Fetching Data Without Navigation useFetcher.mp4

00:00
014 Updating Data Without Navigation.mp4

00:00
Section Quiz

25 – Setting Up Our Biggest Project + Styled Components

001 Section Overview.mp4

00:00
002 Application Planning.mp4

00:00
003 Setting Up the Project The Wild Oasis.mp4

00:00
004 Introduction to Styled Components.mp4

00:00
005 Global Styles With Styled Components.mp4

00:00
006 Styled Component Props and the css Function.mp4

00:00
007 Building More Reusable Styled Components.mp4

00:00
008 Setting Up Pages and Routes.mp4

00:00
009 Building the App Layout.mp4

00:00
010 Building the Sidebar and Main Navigation.mp4

00:00
Section Quiz

26 – Supabase Crash Course Building a Back-End!

001 Section Overview.mp4

00:00
002 What is Supabase.mp4

00:00
003 Creating a New Database.mp4

00:00
004 Modeling Application State.mp4

00:00
005 Creating Tables.mp4

00:00
006 Relationships Between Tables.mp4

00:00
007 Adding Security Policies (RLS).mp4

00:00
008 Connecting Supabase With Our React App.mp4

00:00
009 Setting Up Storage Buckets.mp4

00:00
Section Quiz

27 – React Query Managing Remote State

001 Section Overview.mp4

00:00
002 What is React Query.mp4

00:00
003 Setting Up React Query.mp4

00:00
004 Make Sure to Use React Query v4!.html

00:00
005 Fetching Cabin Data.mp4

00:00
006 Mutations Deleting a Cabin.mp4

00:00
007 Displaying Toasts (Notifications).mp4

00:00
008 Introducing Another Library React Hook Form.mp4

00:00
009 Creating a New Cabin.mp4

00:00
010 Handling Form Errors.mp4

00:00
011 Uploading Images to Supabase.mp4

00:00
012 Editing a Cabin.mp4

00:00
013 Abstracting React Query Into Custom Hooks.mp4

00:00
014 Duplicating Cabins.mp4

00:00
015 Fetching Applications Settings.mp4

00:00
016 Updating Application Settings.mp4

00:00
Section Quiz

28 – Advanced React Patterns

001 Section Overview.mp4

00:00
002 An Overview of Reusability in React.mp4

00:00
003 Setting Up an Example.mp4

00:00
004 The Render Props Pattern.mp4

00:00
005 A Look at Higher-Order Components (HOC).mp4

00:00
006 The Compound Component Pattern.mp4

00:00
007 Building a Modal Window Using a React Portal.mp4

00:00
008 Converting the Modal to a Compound Component.mp4

00:00
009 Detecting a Click Outside the Modal.mp4

00:00
010 Confirming Cabin Deletions.mp4

00:00
011 Building a Reusable Table.mp4

00:00
012 Applying the Render Props Pattern.mp4

00:00
013 Building a Reusable Context Menu.mp4

00:00
Section Quiz

29 – (Optional) Implementing More Features Authentication, Dark Mode, Dashboard, etc

001 Section Overview.mp4

00:00
002 Client-Side Filtering Filtering Cabins.mp4

00:00
003 Client-Side Sorting Sorting Cabins.mp4

00:00
004 Building the Bookings Table.mp4

00:00
005 Uploading Sample Data.mp4

00:00
006 API-Side Filtering Filtering Bookings.mp4

00:00
007 API-Side Sorting Sorting Bookings.mp4

00:00
008 Building a Reusable Pagination Component.mp4

00:00
009 API-Side Pagination Paginating Bookings.mp4

00:00
010 Prefetching With React Query.mp4

00:00
011 Building the Single Booking Page.mp4

00:00
012 Checking In a Booking.mp4

00:00
013 Adding Optional Breakfast.mp4

00:00
014 Checking Out a Booking (+ Fixing a Small Bug).mp4

00:00
015 Deleting a Booking.mp4

00:00
016 Authentication User Login With Supabase.mp4

00:00
017 Authorization Protecting Routes.mp4

00:00
018 User Logout.mp4

00:00
019 Fixing an Important Bug.mp4

00:00
020 Building the Sign Up Form.mp4

00:00
021 User Sign Up.mp4

00:00
022 Authorization on Supabase Protecting Database (RLS).mp4

00:00
023 Building The App Header.mp4

00:00
024 Updating User Data and Password.mp4

00:00
025 Implementing Dark Mode With CSS Variables.mp4

00:00
026 Building the Dashboard Layout.mp4

00:00
027 Computing Recent Bookings and Stays.mp4

00:00
028 Displaying Statistics.mp4

00:00
029 Displaying a Line Chart With the Recharts Library.mp4

00:00
030 Displaying a Pie Chart.mp4

00:00
031 Displaying Stays for Current Day.mp4

00:00
032 Error Boundaries.mp4

00:00
033 Final Touches + Fixing Bugs.mp4

00:00
Section Quiz

30 – Deployment With Netlify and Vercel

31 – PART 5 FULL-STACK REACT WITH NEXT.JS (1 PROJECT)

32 – Overview of Next.js With the App Router

001 Section Overview.mp4

00:00
002 Download Fresh Starter Files + Slides!.html

00:00
003 An Overview of Server-Side Rendering (SSR).mp4

00:00
004 Experiment Manual SSR With React DOM + Node.js.mp4

00:00
005 The Missing Piece Hydration.mp4

00:00
006 Implementing Hydration.mp4

00:00
007 What is Next.js.mp4

00:00
008 Setting Up a Next.js Project.mp4

00:00
009 Frequent Next.js Updates + Documentation.html

00:00
010 Defining Routes and Pages.mp4

00:00
011 Navigating Between Pages.mp4

00:00
012 Creating a Layout.mp4

00:00
013 What are React Server Components (RSC – Part 1).mp4

00:00
014 Fetching Data in a Page.mp4

00:00
015 Adding Interactivity With Client Components.mp4

00:00
016 Displaying a Loading Indicator.mp4

00:00
017 How RSC Works Behind the Scenes (RSC – Part 2).mp4

00:00
018 RSC vs. SSR How are They Related (RSC – Part 3).mp4

00:00
Section Quiz

33 – Starting to Build the Wild Oasis Website

001 Section Overview.mp4

00:00
002 Project Planning The Wild Oasis Customer Website.mp4

00:00
003 Project Organization.mp4

00:00
004 Styling With Tailwind CSS.mp4

00:00
005 Adding Page Metadata and Favicon.mp4

00:00
006 Loading and Optimizing Fonts.mp4

00:00
007 Improving the Navigation and Root Layout.mp4

00:00
008 Optimizing Images With Next.js Image Component.mp4

00:00
009 Building the Home Page.mp4

00:00
010 Building the About Page With Responsive Images.mp4

00:00
011 Adding Nested Routes and Pages.mp4

00:00
012 Adding a Nested Layout.mp4

00:00
Section Quiz

34 – Data Fetching, Caching, and Rendering

001 Section Overview.mp4

00:00
002 Setting Up Supabase.mp4

00:00
003 Fetching and Displaying Cabin List.mp4

00:00
004 Streaming Route Segments With loading.js File.mp4

00:00
005 What is React Suspense.mp4

00:00
006 Streaming UI With Suspense Cabin List.mp4

00:00
007 Dynamic Route Segments Building the Cabin Page.mp4

00:00
008 Generating Dynamic Metadata.mp4

00:00
009 Error Handling Setting Up Error Boundaries.mp4

00:00
010 Error Handling Not Found Errors.mp4

00:00
011 Different Types of SSR Static vs. Dynamic Rendering.mp4

00:00
012 Analyzing Rendering in Our App.mp4

00:00
013 Making Dynamic Pages Static With generateStaticParams.mp4

00:00
014 Static Site Generation (SSG).mp4

00:00
015 Partial Pre-Rendering.mp4

00:00
016 How Next.js Caches Data.mp4

00:00
017 Experimenting With Caching and ISR.mp4

00:00
018 CHALLENGE #1 Fetching the Number of Cabins.mp4

00:00
Section Quiz

35 – Client and Server Interactions

001 Section Overview.mp4

00:00
002 Blurring the Boundary Between Server and Client (RSC – Part 4).mp4

00:00
003 Client Components in Server Components.mp4

00:00
004 Highlighting Current Side Navigation Link.mp4

00:00
005 Sharing State Between Client and Server The URL.mp4

00:00
006 Advanced Server Components in Client Components.mp4

00:00
007 Data Fetching Strategies for the Reservation Section.mp4

00:00
008 Using the Context API for State Management.mp4

00:00
009 Creating an API Endpoint With Route Handlers.mp4

00:00
Section Quiz

36 – Authentication With NextAuth (Auth.js)

001 Section Overview.mp4

00:00
002 Setting Up NextAuth.mp4

00:00
003 Getting the User Session.mp4

00:00
004 What is Middleware in Next.js.mp4

00:00
005 Protecting Routes With NextAuth Middleware.mp4

00:00
006 Building a Custom Sign In Page.mp4

00:00
007 Building a Custom Sign Out Button.mp4

00:00
008 Creating a New Guest on First Sign In.mp4

00:00
Section Quiz

37 – Mutations With Server Actions + Modern React Hooks

001 Section Overview.mp4

00:00
002 What are Server Actions.mp4

00:00
003 Updating the Profile Using a Server Action.mp4

00:00
004 Manual Cache Revalidation.mp4

00:00
005 Displaying a Loading Indicator The useFormStatus Hook.mp4

00:00
006 Building the Guest’s Reservations Page.mp4

00:00
007 Deleting a Reservation.mp4

00:00
008 Another Loading Indicator The useTransition Hook.mp4

00:00
009 CHALLENGE #1 Updating a Reservation.mp4

00:00
010 Removing Reservations Immediately The useOptimistic Hook.mp4

00:00
011 Back to the Cabin Page Finishing the Date Selector.mp4

00:00
012 Creating a New Reservation.mp4

00:00
Section Quiz

38 – Deployment With Vercel

39 – (OPTIONAL) Legacy Next.js The Pages Router

001 Section Overview.mp4

00:00
002 Setting Up Another Project.mp4

00:00
003 Routes, Pages, and Navigation.mp4

00:00
004 Dynamic Routes.mp4

00:00
005 Creating a Layout With a Custom _App.mp4

00:00
006 Creating Pages.mp4

00:00
007 Defining Page Title and Favicon.mp4

00:00
008 Fetching Data With getStaticProps (SSG).mp4

00:00
009 Fetching Data With getServerSideProps (SSR).mp4

00:00
010 API Routes.mp4

00:00
011 Handling Form Submissions.mp4

00:00
Section Quiz

40 – The End!

Add this certificate to your resume to demonstrate your skills & increase your chances of getting noticed.

Student Ratings & Reviews

No Review Yet

About Course

What Will You Learn?

Course Content

01 – Welcome, Welcome, Welcome!

A Message from the Professor

001 Course Roadmap and Projects.mp4

002 Building Our First React App!.mp4

003 Watch Before You Start!.mp4

004 Read Before You Start!.html

005 Downloading Course Material.mp4

theory-slides-v1.1.pdf

Section Quiz

02 – PART 1 REACT FUNDAMENTALS (4 PROJECTS)

001 Introduction to Part 1.mp4

002 Useful Resources for Part 1.html

03 – A First Look at React

001 Section Overview.mp4

002 Why Do Front-End Frameworks Exist.mp4

003 React vs. Vanilla JavaScript.mp4

004 What is React.mp4

005 Setting Up Our Development Environment.mp4

006 Pure React.mp4

007 A Quick Look at React’s Official Documentation.mp4

008 Setting Up a New React Project The Options.mp4

009 Setting Up a Project With Create-React-App.mp4

Section Quiz

04 – (Optional) Review of Essential JavaScript for React

001 Section Overview.mp4

002 Destructuring Objects and Arrays.mp4

003 RestSpread Operator.mp4

004 Template Literals.mp4

005 Ternaries Instead of ifelse Statements.mp4

006 Arrow Functions.mp4

007 Short-Circuiting And Logical Operators &&, ,.mp4

008 Optional Chaining.mp4

009 The Array map Method.mp4

010 The Array filter Method.mp4

011 The Array reduce Method.mp4

012 The Array sort Method.mp4

013 Working With Immutable Arrays.mp4

014 Asynchronous JavaScript Promises.mp4

015 Asynchronous JavaScript AsyncAwait.mp4

Section Quiz

05 – Working With Components, Props, and JSX

001 Section Overview.mp4

002 Rendering the Root Component and Strict Mode.mp4

003 Before We Start Coding Debugging.mp4

004 Components as Building Blocks.mp4

005 Creating And Reusing a Component.mp4

006 What is JSX.mp4

007 Creating More Components.mp4

008 JavaScript Logic in Components.mp4

009 Separation of Concerns.mp4

010 Styling React Applications.mp4

011 Passing and Receiving Props.mp4

012 Props, Immutability, and One-Way Data Flow.mp4

013 CHALLENGE #1 Profile Card (v1).mp4

014 The Rules of JSX.mp4

015 Rendering Lists.mp4

016 Conditional Rendering With &&.mp4

017 Conditional Rendering With Ternaries.mp4

018 Conditional Rendering With Multiple Returns.mp4

019 Extracting JSX Into a New Component.mp4

020 Destructuring Props.mp4

021 React Fragments.mp4

022 Setting Classes and Text Conditionally.mp4

023 Section Summary.mp4

024 CHALLENGE #2 Profile Card (v2).mp4

06 – State, Events, and Forms Interactive Components

001 Section Overview.mp4

002 Let’s Build a Steps Component.mp4

003 Handling Events the React Way.mp4

004 What is State in React.mp4

005 Creating a State Variable With useState.mp4

006 Don’t Set State Manually!.mp4

007 The Mechanics of State.mp4

008 Adding Another Piece of State.mp4

009 React Developer Tools.mp4

010 Updating State Based on Current State.mp4

011 More Thoughts About State + State Guidelines.mp4