1. Getting Started

• Welcome to the Course
• What Is React? And Why Would You Use It?
• ReactJS vs Vanilla JavaScript
• Editing Our First React App
• About the Course
• One Course, Two Paths
• How To Get The Most Out Of This Course
• How To Create New React Projects
• Why Do We Need A Special Project Setup?

2. JavaScript Refresher FREE CHAPTER

• Module Introduction
• Starting Project
• Adding JavaScript to a Page and How React Projects Differ
• React Projects Use a Build Process
• "import" and "export"
• Revisiting Variables and Values
• Revisiting Operators
• Revisiting Functions and Parameters
• Arrow Functions
• Revisiting Objects and Classes
• Arrays and Array Methods like map()
• Destructuring
• The Spread Operator
• Revisiting Control Structures
• Manipulating the DOM - Not With React!
• Using Functions as Values
• Defining Functions Inside Of Functions
• Reference vs Primitive Values

3. React Essentials - Components, JSX, Props, State & More

• Module Introduction
• It's All About Components! [Core Concept]
• Setting Up The Starting Project
• JSX & React Components [Core Concept]
• Creating & Using a First Custom Component
• How React Handles Components & How It Builds A "Component Tree" [Core Concept]
• Using & Outputting Dynamic Values [Core Concept]
• Setting HTML Attributes Dynamically & Loading Image Files
• Making Components Reusable with Props [Core Concept]
• Alternative Props Syntaxes
• Best Practice: Storing Components in Files & Using a Good Project Structure
• Storing Component Style Files Next To Components
• Component Composition: The special "children" Prop [Core Concept]
• Reacting to Events [Core Concept]
• Passing Functions as Values to Props
• Passing Custom Arguments to Event Functions
• How NOT to Update the UI - A Look Behind The Scenes of React [Core Concept]
• Managing State & Using Hooks [Core Concept]
• Deriving & Outputting Data Based on State
• Rendering Content Conditionally
• CSS Styling & Dynamic Styling
• Outputting List Data Dynamically
• Module Summary

4. React Essentials - Deep Dive

• Module Introduction
• You Don't Have To Use JSX!
• Working with Fragments
• When Should You Split Components?
• Splitting Components By Feature & State
• Problem: Props Are Not Forwarded To Inner Elements
• Forwarding Props To Wrapped Elements
• Working with Multiple JSX Slots
• Setting Component Types Dynamically
• Setting Default Prop Values
• Onwards To The Next Project & Advanced Concepts
• Not All Content Must Go Into Components
• New Project: First Steps Towards Our Tic-Tac-Toe Game
• Concept Repetition: Splitting Components & Building Reusable Components
• Concept Repetition: Working with State
• Component Instances Work In Isolation!
• Conditional Content & A Suboptimal Way Of Updating State
• Best Practice: Updating State Based On Old State Correctly
• User Input & Two-Way-Binding
• Rendering Multi-Dimensional Lists
• Best Practice: Updating Object State Immutably
• Lifting State Up [Core Concept]
• Avoid Intersecting States!
• Prefer Computed Values & Avoid Unnecessary State Management
• Deriving State From Props
• Sharing State Across Components
• Reducing State Management & Identifying Unnecessary State
• Disabling Buttons Conditionally
• Outsourcing Data Into A Separate File
• Lifting Computed Values Up
• Deriving Computed Values From Other Computed Values
• Tic-Tac-Toe Game: The "Game Over" Screen & Checking for a Draw
• Why Immutability Matters - Always!
• When NOT To Lift State Up
• An Alternative To Lifting State Up
• Final Polishing & Improving Components

5. React Essentials - Practice Project

• Module Introduction & A Challenge For You!
• Adding a Header Component
• Getting Started with a User Input Component
• Handling Events & Using Two-Way-Binding
• Lifting State Up
• Computing Values & Properly Handling Number Values
• Outputting Results in a List & Deriving More Values
• Outputting Content Conditionally

6. Styling React Components

• Module Introduction & Starting Project
• Splitting CSS Code Across Multiple Files
• Styling React Apps with Vanilla CSS - Pros & Cons
• Vanilla CSS Styles Are NOT Scoped To Components!
• Styling React Apps with Inline Styles
• Dynamic & Conditional Inline Styles
• Dynamic & Conditional Styling with CSS Files & CSS Classes
• Scoping CSS Rules with CSS Modules
• Introducing "Styled Components" (Third-party Package)
• Creating Flexible Components with Styled Components
• Dynamic & Conditional Styling with Styled Components
• Styled Components: Pseudo Selectors, Nested Rules & Media Queries
• Creating Reusable Components & Component Combinations
• Introducing Tailwind CSS For React App Styling
• Adding & Using Tailwind CSS In A React Project
• Tailwind: Media Queries & Pseudo Selectors
• Dynamic & Conditional Styling with Tailwind
• Migrating The Demo App to Tailwind CSS
• Tailwind CSS: Pros & Cons

7. Debugging React Apps

• Module Introduction
• The Starting Project
• Understanding React Error Messages
• Using the Browser Debugger & Breakpoints
• Understanding React's "Strict Mode"
• Using the React DevTools (Browser Extension)

8. Working with Refs & Portals

• Module Introduction & Starting Project
• Repetition: Managing User Input with State (Two-Way-Binding)
• Introducing Refs: Connecting & Accessing HTML Elements via Refs
• Manipulating the DOM via Refs
• Refs vs State Values
• Adding Challenges to the Demo Project
• Setting Timers & Managing State
• Using Refs for More Than "DOM Element Connections"
• Adding a Modal Component
• Forwarding Refs to Custom Components
• Exposing Component APIs via the useImperativeHandle Hook
• More Examples: When To Use Refs & State
• Sharing State Across Components
• Enhancing the Demo App "Result Modal"
• Introducing & Understanding "Portals"

9. Practice Project: Project Management App (with Components, State, Refs & More)

• Module Introduction & Starting Project
• Adding a "Projects Sidebar" Component
• Styling the Sidebar & Button with Tailwind CSS
• Adding the "New Project" Component & A Reusable "Input" Component
• Styling Buttons & Inputs with Tailwind CSS
• Splitting Components to Split JSX & Tailwind Styles (for Higher Reusability)
• Managing State to Switch Between Components
• Collecting User Input with Refs & Forwarded Refs
• Handling Project Creation & Updating the UI
• Validating User Input & Showing an Error Modal via useImperativeHandle
• Styling the Modal via Tailwind CSS
• Making Projects Selectable & Viewing Project Details
• Handling Project Deletion
• Adding "Project Tasks" & A Tasks Component
• Managing Tasks & Understanding Prop Drilling
• Clearing Tasks & Fixing Minor Bugs

10. React's Context API & useReducer - Advanced State Management

• Module Introduction
• Understanding Prop Drilling & Project Overview
• Prop Drilling: Component Composition as a Solution
• Introducing the Context API
• Creating & Providing The Context
• Consuming the Context
• Linking the Context to State
• A Different Way Of Consuming Context
• What Happens When Context Values Change?
• Migrating the Entire Demo Project to use the Context API
• Outsourcing Context & State Into a Separate Provider Component
• Introducing the useReducer Hook
• Dispatching Actions & Editing State with useReducer

11. Handling Side Effects & Using useEffect

• Module Introduction & Starting Project
• What's a "Side Effect"? A Thorough Example
• A Potential Problem with Side Effects: An Infinite Loop
• Using useEffect for Handling (Some) Side Effects
• Not All Side Effects Need useEffect
• useEffect Not Needed: Another Example
• Preparing Another Use-Case For useEffect
• Using useEffect for Syncing With Browser APIs
• Understanding Effect Dependencies
• Preparing Another Problem That Can Be Fixed with useEffect
• Introducing useEffect's Cleanup Function
• The Problem with Object & Function Dependencies
• The useCallback Hook
• useEffect's Cleanup Function: Another Example
• Optimizing State Updates

12. Practice Project: Building a Quiz App

• Module Introduction & Starting Project
• A First Component & Some State
• Deriving Values, Outputting Questions & Registering Answers
• Shuffling Answers & Adding Quiz Logic
• Adding Question Timers
• Working with Effect Dependencies & useCallback
• Using Effect Cleanup Functions & Using Keys for Resetting Components
• Highlighting Selected Answers & Managing More State
• Splitting Components Up To Solve Problems
• Moving Logic To Components That Actually Need It ("Moving State Down")
• Setting Different Timers Based On The Selected Answer
• Outputting Quiz Results

13. A Look Behind The Scenes Of React & Optimization Techniques

• Module Introduction
• React Builds A Component Tree / How React Works Behind The Scenes
• Analyzing Component Function Executions via React's DevTools Profiler
• Avoiding Component Function Executions with memo()
• Avoiding Component Function Executions with Clever Structuring
• Understanding the useCallback() Hook
• Understanding the useMemo() Hook
• Introducing the React Compiler
• React Uses A Virtual DOM - Time To Explore It!
• Why Keys Matter When Managing State!
• More Reasons For Why Keys Matter
• Using Keys For Resetting Components
• State Scheduling & Batching
• Optimizing React with MillionJS

14. An Alternative Way Of Building Components: Class-based Components

• Module Introduction
• What & Why
• Adding a First Class-based Component
• Working with State & Events
• The Component Lifecycle (Class-based Components Only!)
• Lifecycle Methods In Action
• Class-based Components & Context
• Class-based vs Functional Components: A Summary
• Introducing Error Boundaries

15. Sending Http Requests (e.g. Connecting to a Database)

• Module Introduction
• How (Not) To Connect To A Database
• Starting Project & Dummy Backend API
• Preparing the App For Data Fetching
• How NOT To Send HTTP Requests (And Why It's Wrong)
• Sending HTTP Requests (GET Request) via useEffect
• Using async / await
• Handling Loading States
• Handling HTTP Errors
• Transforming Fetched Data
• Extracting Code & Improving Code Structure
• Sending Data with POST Requests
• Using Optimistic Updating
• Deleting Data (via DELETE HTTP Requests)
• Practice: Fetching Data

16. Building Custom React Hooks

• Module Introduction & Starting Project
• Revisiting the "Rules of Hooks" & Why To Use Hooks
• Creating a Custom Hook
• Custom Hook: Managing State & Returning State Values
• Exposing Nested Functions From The Custom Hook
• Using A Custom Hook in Multiple Components
• Creating Flexible Custom Hooks

17. Working with Forms & User Input

• Module Introduction & Starting Project
• What Are Forms & What's Tricky About Them?
• Handling Form Submission
• Managing & Getting User Input via State & Generic Handlers
• Getting User Input via Refs
• Getting Values via FormData & Native Browser APIs
• Resetting Forms
• Validating Input on Every Keystroke via State
• Validating Input Upon Lost Focus
• Validating Input Upon Form Submission
• Validating Input via Built-in Validation Props
• Mixing Custom & Built-in Validation Logic
• Building & Using a Reusable Input Component
• Outsourcing Validation Logic
• Creating a Custom useInput Hook
• Using Third-Party Form Libraries

18. Handling Forms via Form Actions

• Module Introduction
• What are Form Actions?
• Adding Validation Checks
• Managing Form-dependent State with useActionState()
• Using User Input
• Moving the Action Function out of the Component
• A Demo App: Introduction
• Handling Form Submission
• Working with Asynchronous Form Actions
• Updating the UI with useFormStatus()
• Registering Multiple Form Actions
• Sending an HTTP Request via a Form Action
• Using the "pending" State from useActionState()
• Adding Optimistic Updating
• Module Summary

19. Practice Project: Building a Food Order App

• Module Introduction & Starting Project
• Planning the App & Adding a First Component
• Fetching Meals Data
• Adding a "MealItem" Component
• Formatting & Outputting Numbers as Currency
• Creating a Configurable & Flexible Custom Button Component
• Getting Started with Cart Context & Reducer
• Finishing & Using the Cart Context & Reducer
• Adding a Reusable Modal Component with useEffect
• Opening the Cart in the Modal via a New Context
• Working on the Cart Items
• Adding a Custom Input Component & Managing Modal Visibility
• Handling Form Submission & Validation
• Sending a POST Request with Order Data
• Adding a Custom HTTP Hook & Avoiding Common Errors
• Handling HTTP Loading & Error States
• Finishing Touches
• Migrating To Form Actions
• Managing Form Status with Form Actions

20. Diving into Redux

• Module Introduction
• Another Look At State In React Apps
• Redux vs React Context
• How Redux Works
• Exploring The Core Redux Concepts
• More Redux Basics
• Preparing a new Project
• Creating a Redux Store for React
• Providing the Store
• Using Redux Data in React Components
• Dispatching Actions From Inside Components
• Redux with Class-based Components
• Attaching Payloads to Actions
• Working with Multiple State Properties
• How To Work With Redux State Correctly
• Redux Challenges & Introducing Redux Toolkit
• Adding State Slices
• Connecting Redux Toolkit State
• Migrating Everything To Redux Toolkit
• Working with Multiple Slices
• Reading & Dispatching From A New Slice
• Splitting Our Code
• Summary

21. Advanced Redux

• Module Introduction
• Redux & Side Effects
• Refresher / Practice: Part 1/2
• Refresher / Practice: Part 2/2
• Redux & Async Code
• Frontend Code vs Backend Code
• Where To Put Our Logic
• Using useEffect with Redux
• Handling Http States & Feedback with Redux
• Using an Action Creator Thunk
• Getting Started with Fetching Data
• Finalizing the Fetching Logic
• Exploring the Redux DevTools
• Summary

22. Building a Multi-Page SPA with React Router

• Module Introduction
• Routing: Multiple Pages in Single-Page Applications
• Project Setup & Installing React Router
• Defining Routes
• Adding a Second Route
• Exploring an Alternative Way of Defining Routes
• Navigating between Pages with Links
• Layouts & Nested Routes
• Showing Error Pages with errorElement
• Working with Navigation Links
• Navigating Programmatically
• Defining & Using Dynamic Routes
• Adding Links for Dynamic Routes
• Understanding Relative & Absolute Paths
• Working with Index Routes
• Onwards to a new Project Setup
• Time to Practice: Problem
• Time to Practice: Solution
• Data Fetching with a loader
• Using Data From A Loader In The Route Component
• More loader Data Usage
• Where Should loader Code Be Stored?
• When Are loader Functions Executed?
• Reflecting The Current Navigation State in the UI
• Returning Responses in loader s
• Which Kind Of Code Goes Into loader s?
• Error Handling with Custom Errors
• Extracting Error Data & Throwing Responses
• The json Utility Function
• Dynamic Routes & loader s
• The useRouteLoaderData Hook & Accessing Data From Other Routes
• Planning Data Submission
• Working with action Functions
• Submitting Data Programmatically
• Updating the UI State Based on the Submission Status
• Validating User Input & Outputting Validation Errors
• Reusing Actions via Request Methods
• Behind-the-Scenes Work with useFetcher
• Deferring Data Fetching with defer
• Controlling Which Data Should Be Deferred
• Module Summary

23. Adding Authentication To React Apps

• Module Introduction
• How Authentication Works
• Project Setup & Route Setup
• Working with Query Parameters
• Implementing the Auth Action
• Validating User Input & Outputting Validation Errors
• Adding User Login
• Attaching Auth Tokens to Outgoing Requests
• Adding User Logout
• Updating the UI Based on Auth Status
• Adding Route Protection
• Adding Automatic Logout
• Managing the Token Expiration

24. Deploying React Apps

• Module Introduction
• Deployment Steps
• Understanding Lazy Loading
• Adding Lazy Loading
• Building the Code For Production
• Deployment Example
• Server-side Routing & Required Configuration

25. React Query / Tanstack Query: Handling HTTP Requests With Ease

• Module Introduction
• Project Setup & Overview
• React Query: What & Why?
• Installing & Using Tanstack Query - And Seeing Why It's Great!
• Understanding & Configuring Query Behaviors - Cache & Stale Data
• Dynamic Query Functions & Query Keys
• The Query Configuration Object & Aborting Requests
• Enabled & Disabled Queries
• Changing Data with Mutations
• Fetching More Data & Testing the Mutation
• Acting on Mutation Success & Invalidating Queries
• A Challenge! The Problem
• A Challenge! The Solution
• Disabling Automatic Refetching After Invalidations
• Enhancing the Demo App & Repeating Mutation Concepts
• React Query Advantages In Action
• Updating Data with Mutations
• Optimistic Updating
• Using the Query Key As Query Function Input
• React Query & React Router

26. A Introduction to NextJS - App Router

• Module Introduction
• Creating a NextJS Project
• Understanding File-based Routing & React Server Components
• Adding Another Route via the Filesystem
• Navigating Between Pages
• Working with Pages & Layouts
• Reserved File Names, Custom Components & How To Organize A NextJS Project
• Configuring Dynamic Routes & Using Route Parameters
• Onwards to the Main Project: The Foodies App
• Exercise: Your Task
• Exercise: Solution
• Revisiting The Concept Of Layouts
• Adding a Custom Component To A Layout
• Styling NextJS Project: Your Options & Using CSS Modules
• Optimizing Images with the NextJS Image Component
• Using More Custom Components
• Populating The Starting Page Content
• Preparing an Image Slideshow
• React Server Components vs Client Components - When To Use What
• Using Client Components Efficiently
• Outputting Meals Data & Images With Unknown Dimensions
• Setting Up A SQLite Database
• Fetching Data By Leveraging NextJS & Fullstack Capabilities
• Adding A Loading Page
• Using Suspense & Streamed Responses For Granular Loading State Management
• Handling Errors
• Handling "Not Found" States
• Loading & Rendering Meal Details via Dynamic Routes & Route Parameters
• Throwing Not Found Errors For Individual Meals
• Getting Started with the "Share Meal" Form
• Getting Started with a Custom Image Picker Input Component
• Adding an Image Preview to the Picker
• Introducing & Using Server Actions for Handling Form Submissions
• Storing Server Actions in Separate Files
• Creating a Slug & Sanitizing User Input for XSS Protection
• Storing Uploaded Images & Storing Data in the Database
• Managing the Form Submission Status with useFormStatus
• Adding Server-Side Input Validation
• Working with Server Action Responses & useFormState
• Building For Production & Understanding NextJS Caching
• Triggering Cache Revalidations
• Don't Store Files Locally On The Filesystem!
• Adding Static Metadata
• Adding Dynamic Metadata
• Module Summary

27. A (Pretty Deep Dive) Introduction to Next.js - Page Router

• About the NextJS Pages Router
• Creating a NextJS Project
• Analyzing the Created Project
• Adding First Pages
• Adding Nested Paths & Pages
• Creating Dynamic Pages
• Extracting Dynamic Parameter Values
• Linking Between Pages
• Onwards to a bigger Project!
• Preparing the Project Pages
• Outputting a List of Meetups
• Adding the New Meetup Form
• The "_app.js" File & Layout Wrapper
• Using Programmatic Navigation
• Adding Custom Components & CSS Modules
• How Pre-rendering Works & Which Problem We Face
• Data Fetching for Static Pages
• More on Static Site Generation
• Exploring Server-side Rendering with "getServerSideProps"
• Working with Params for SSG Data Fetching
• Preparing Paths with "getStaticPaths" & Working With Fallback Pages
• Introducing API Routes
• Working with MongoDB
• Sending Http Requests To Our API Routes
• Getting Data From The Database
• Getting Meetup Details Data & Preparing Pages
• Adding "head" Metadata
• Deploying Next.js Projects
• Using Fallback Pages & Re-deploying
• Summary

28. React Server Components (RSC) & Server Actions - A Closer Look

• Module Introduction
• Why We Need A Special Project Setup
• Understanding React Server Components
• Changing Server to Client Components
• Combining Server and Client Components
• Fetching Data with RSCs
• Submitting Data with Server Actions
• Using the use() Hook for Promises & Data Fetching
• The use() Hook In Action
• Handling Errors
• Theory Wrap Up

29. Animating React Apps with Framer Motion

• Module Introduction
• Project Setup & Overview
• Animating with CSS Transitions
• Animating with CSS Animations
• Introducing Framer Motion
• Framer Motion Basics & Fundamentals
• Animating Between Conditional Values
• Adding Entry Animations
• Animating Element Disappearances / Removal
• Making Elements "Pop" With Hover Animations
• Reusing Animation States
• Nested Animations & Variants
• Animating Staggered Lists
• Animating Colors & Working with Keyframes
• Imperative Animations
• Animating Layout Changes
• Orchestrating Multi-Element Animations
• Combining Animations With Layout Animations
• Animating Shared Elements
• Re-triggering Animations via Keys
• Scroll-based Animations

30. React Patterns & Best Practices

• Module Introduction
• Project Overview
• Introducing Compound Components
• Managing Multi-Component State with the Context API
• Grouping Compound Components
• Adding Extra Components For Reusability & Configurability
• Sharing Cross-Component State When Working With Compound Components
• Introducing & Using Render Props
• Adding Search To A React App
• Implementing a Search Functionality With Help Of Render Props
• Handling Keys Dynamically
• Working with Debouncing

31. Testing React Apps

• Module Introduction
• What & Why?
• Understanding Different Kinds Of Tests
• What To Test & How To Test
• Understanding the Technical Setup & Involved Tools
• Running a First Test
• Writing Our First Test
• Grouping Tests Together With Test Suites
• Testing User Interaction & State
• Testing Connected Components
• Testing Asynchronous Code
• Working With Mocks
• Summary & Further Resources

32. React & TypeScript

• Module Introduction
• What & Why?
• Installing & Using TypeScript
• Exploring the Base Types
• Working with Array and Object Types
• Understanding Type Inference
• Using Union Types
• Understanding Type Aliases
• Functions and Function Types
• Diving into Generics
• Creating a React + TypeScript Project
• Working with Components and TypeScript
• Working with Props and TypeScript
• Adding a Data Model
• Time to Practice: Exercise Time!
• Form Submissions in TypeScript Projects
• Working with refs and useRef()
• Working with "Function Props"
• Managing State and TypeScript
• Adding Styling
• Time to Practice: Removing a Todo
• The Context API and TypeScript
• Summary
• Bonus: Exploring tsconfig.json

33. Optional: React Hooks Introduction and Summary

• Module Introduction
• What Are React Hooks?
• The Starting Project
• Getting Started with useState()
• More on useState() and State Updating
• Array Destructuring
• Multiple States
• Rules of Hooks
• Passing State Data Across Components
• Time to Practice: Hooks Basics - Problem
• Time to Practice: Hooks Basics - Solution
• Sending HTTP Requests
• useEffect() and Loading Data
• Understanding useEffect() Dependencies
• More on useEffect()
• What's useCallback()?
• Working with Refs and useRef()
• Cleaning Up with useEffect()
• Deleting Ingredients
• Loading Errors and State Batching
• Understanding useReducer()
• Using useReducer() for the HTTP State
• Working with useContext()
• Performance Optimizations with useMemo()
• Getting Started with Custom Hooks
• Sharing Data Between Custom Hooks and Components
• Using the Custom Hook
• Wrap Up

34. Optional: React Summary and Core Feature Walkthrough

• Module Introduction
• What Is React and Why Would You Use It?
• React Projects - Requirements
• Creating React Projects
• Our Starting Project
• Understanding How React Works
• Building a First Custom Component
• Outputting Dynamic Values
• Reusing Components
• Passing Data to Components with Props
• CSS Styling and CSS Modules
• Exercise and Another Component
• Preparing the App for State Management
• Adding Event Listeners
• Working with State
• Lifting State Up
• The Special "children" Prop
• State and Conditional Content
• Adding a Shared Header and More State Management
• Adding Form Buttons
• Handling Form Submission
• Updating State Based on Previous State
• Outputting List Data
• Adding a Backend to the React SPA
• Sending a POST HTTP Request
• Handling Side Effects with useEffect()
• Handle Loading State
• Understanding and Adding Routing
• Adding Routes
• Working with Layout Routes
• Refactoring Route Components and More Nesting
• Linking and Navigating
• Data Fetching through loader()s
• Submitting Data with action()s
• Dynamic Routes
• Module Summary

35. Course Roundup

• Roundup