The Ultimate React Course 2023: React/ Redux & More
About Course
*** Just launched in June 2023! ***
*** Take this course after taking my #1 bestselling JavaScript course (750,000+ students) ***
In 2023, React is still the #1 skill to learn if you want to become a successful front-end developer!
But it can be hard. There are so many moving parts, so many different libraries, so many tutorials out there.
That’s why you came here… And you came to the right place! This is THE ultimate React course for 2023 and beyond.
A practice-heavy approach to master React by building polished apps, backed up by diagrams, theory, and looks under the hood of React.
The all-in-one package that takes you from zero to truly understanding React and building modern, powerful, and professional web applications.
Real projects. Real explanations. Real React.
[01] Why is this the right React course for you?
This is the most in-depth React course on Udemy, and it’s fundamentally different from all the other ones.
Here’s why:
- Contains the biggest and most professional project, where we implement many common app features (see promo video!)
- 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
And these are just the highlights! Check out the full list below (+ the promo video and curriculum).
Also, make no mistake: “React course” actually means “Front-end development with React and modern libraries course”.
That’s right, besides the React library itself, you will learn and master them all: React Router, Redux, Redux Toolkit, React Query, React Hook Form, Styled Components, Tailwind CSS, and more.
This is how we plan, build, and deploy professional projects! We even use industry-standard tools such as Supabase (fully-fledged back-end), GitHub, Netlify, and Vercel.
As you expect, this course is 100% project-based. So throughout the course, 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.
[02] Why am I the right React teacher for you?
My name is Jonas, I’m an experienced web developer and designer, and one of Udemy’s top instructors. I’ve been teaching web development courses since 2015 to over 1,500,000 developers, so I know exactly how students learn and what is needed to master any subject.
With this in mind, I designed the ideal curriculum for this course: a unique blend of real-world projects, deep explanations, and theory lectures, to turn you into a confident React developer in just a couple of weeks.
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!
[03] Still not sure? Here are all the nerdy details of what we’ll cover:
- React fundamentals [why we even need React, components, JSX, props, events, forms, state, props vs. state]
- How to think about state [where to place state, guidelines, lifting state up, local vs. global state, UI vs. remote state]
- How to think about components [how to split components, props as API, how to build reusable and composable components, the children prop]
- Deep dive into effects and useEffect [data fetching, lifecycle vs. synchronization, when to use effects, effects vs. event handlers]
- Deep dive into hooks [rules of hooks, how hooks work, useRef, building super-reusable custom hooks]
- Performance optimization [wasted renders, memoization with memo, useMemo, and useCallback, optimizing Context API, code splitting + Suspense]
- Advanced state management [useReducer hook, the Context API, Redux, Redux Toolkit, Thunks, React Query]
- Building Single-Page Applications (SPA) [Vite, routing with React Router, URL parameters and query strings for state management, data loaders and actions (v6.4+)]
- Building real-world features found in many apps [authentication and authorization, data sorting, filtering and pagination, dark mode, dashboard with charts, etc.]
- Creating your own back-end with a DB and API using Supabase [gain the power to build full-stack apps on your own!]
- How to style React apps [Tailwind CSS, CSS Modules, and Styled Components (CSS-in-JS)]
- Advanced React patterns used by senior developers [render props, higher-order components, compound components (to build a modal, a context menu, and more)]
- How React works behind the scenes [rendering, virtual DOM, reconciliation, fiber tree, key prop, events, state batching, etc.]
[04] By signing up today, you’ll also get:
- Up-to-date HD-quality videos, that are easy to search and reference (great for Udemy Business learners)
- Downloadable slides PDF for 60+ theory videos (not boring, I promise!)
- Professional English captions (not auto-generated)
- 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)
What Will You Learn?
- 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)
-
001 Introduction to Part 1.mp4
00:00 -
002 Useful Resources for Part 1.html
00:00
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)
-
001 Introduction to Part 2.mp4
00:00 -
002 Useful Resources for Part 2.html
00:00
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)
-
001 Introduction to Part 3.mp4
00:00 -
002 Useful Resources for Part 3.html
00:00
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)
-
001 Introduction to Part 4.mp4
00:00 -
002 Useful Resources for Part 4.html
00:00
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
-
001 Section Overview.mp4
00:00 -
002 Deploying to Netlify.mp4
00:00 -
003 Setting Up a Git and GitHub Repository.mp4
00:00 -
004 Deploying to Vercel.mp4
00:00 -
Section Quiz
31 – PART 5 FULL-STACK REACT WITH NEXT.JS (1 PROJECT)
-
001 Introduction to Part 5.mp4
00:00 -
002 Useful Resources for Part 5.html
00:00
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
-
001 Section Overview.mp4
00:00 -
002 Setting Up the GitHub Repository.mp4
00:00 -
003 Deploying to Vercel.mp4
00:00 -
004 Updating Environment Variables and OAuth Credentials.mp4
00:00 -
Section Quiz
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!
-
001 Where to Go from Here.mp4
00:00
Earn a certificate
Add this certificate to your resume to demonstrate your skills & increase your chances of getting noticed.
Student Ratings & Reviews
No Review Yet
