React - The Complete Guide (incl. Next.js, Redux)

Module Introduction

Starting Project

Adding JavaScript To A Page & How React Projects Differ

React Projects Use a Build Process

"import" & "export"

Revisiting Variables & Values

Revisiting Operators

Revisiting Functions & Parameters

Exercise: Working with Functions

Arrow Functions

More on the Arrow Function Syntax

Revisiting Objects & Classes

Arrays & Array Methods like map()

Exercise: Array Methods

Destructuring

Destructuring in Function Parameter Lists

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

Next-Gen JavaScript - Summary

JS Array Functions

Module Resources

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

A Closer Look: Components & File Extensions

Building & Using a Component

How React Handles Components & How It Builds A "Component Tree" [Core Concept]

Components & JSX

Using & Outputting Dynamic Values [Core Concept]

Setting HTML Attributes Dynamically & Loading Image Files

Outputting Dynamic Content

Making Components Reusable with Props [Core Concept]

Alternative Props Syntaxes

More Prop Syntaxes

Working with Props

Dynamic Values & Props

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]

Component Composition

Reacting to Events [Core Concept]

Passing Functions as Values to Props

Reacting to Events

Passing Custom Arguments to Event Functions

Configuring Event Handlers

Best Practices & Event Handling

How NOT to Update the UI - A Look Behind The Scenes of React [Core Concept]

Managing State & Using Hooks [Core Concept]

Working with State

Deriving & Outputting Data Based on State

State & Computed Values

Rendering Content Conditionally

Conditional Content

CSS Styling & Dynamic Styling

Dynamic Styling

Outputting List Data Dynamically

Dynamic List Content

Conditional Content & Dynamic Lists

Essentials Summary Slides

Module Summary

Module Introduction

You Don't Have To Use JSX!

Working with Fragments

Using Fragments

When Should You Split Components?

Splitting Components By Feature & State

Problem: Props Are Not Forwarded To Inner Elements

Forwarding Props To Wrapped Elements

Forwarding Props

Working with Multiple JSX Slots

Setting Component Types Dynamically

Setting Default Prop Values

Creating Flexible Components

Onwards To The Next Project & Advanced Concepts

Not All Content Must Go Into Components

Closer Look: public/ vs assets/ for Image Storage

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

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

Summary Slides

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

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 Styling with Inline Styles

Dynamic & Conditional Styling with CSS Files & CSS Classes

Dynamic Styling with 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

Tailwind 3 vs 4

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

Exercise: Dynamic Styles

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)

Exercise: Fix Errors

Module Introduction & Starting Project

Repetition: Managing User Input with State (Two-Way-Binding)

Repetition: Fragments

Introducing Refs: Connecting & Accessing HTML Elements via Refs

Manipulating the DOM via Refs

Accessing DOM Elements with "refs"

Refs vs State Values

Adding Challenges to the Demo Project

Setting Timers & Managing State

Using Refs for More Than "DOM Element Connections"

Managing Other Values with Refs

Adding a Modal Component

Forwarding Refs to Custom Components

Forwarding Refs

Exposing Component APIs via the useImperativeHandle Hook

Exposing Component APIs

More Examples: When To Use Refs & State

Sharing State Across Components

Enhancing the Demo App "Result Modal"

Closing the Modal via the ESC (Escape) Key

Introducing & Understanding "Portals"

Working with Portals

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

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

Creating & Using Context

Introducing the useReducer Hook

Dispatching Actions & Editing State with useReducer

Using useReducer()

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

Fixing a Small Bug

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

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

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

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

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

Module Resources

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

Importing from Error.jsx

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

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

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 (Blur)

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

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

Module Introduction & Starting Project

Planning the App & Adding a First Component

Fetching Meals Data (GET HTTP Request)

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

Module Introduction

Another Look At State In React Apps

Redux vs React Context

How Redux Works

MUST READ: Redux createStore() is (not) deprecated

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

Module Introduction

Redux & Side Effects (and Asynchronous Code)

Refresher / Practice: Part 1/2

Refresher / Practice: Part 2/2

Using Firebase as a Backend

Redux & Async Code

Frontend Code vs Backend Code

Where To Put Our Logic

Using useEffect with Redux

A Problem with useEffect()

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

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 (NavLink)

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()

Defer() and json() with React Router v7

Controlling Which Data Should Be Deferred

Module Summary

Module Resources

Old Lectures

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

Important: loader()s must return null or any other value

Adding Route Protection

Adding Automatic Logout

Managing the Token Expiration

Module Resources

Module Introduction

Deployment Steps

Understanding Lazy Loading

Adding Lazy Loading

Building the Code For Production

Deployment Example

Server-side Routing & Required Configuration

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

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

Reserved Filenames

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

Improving the Image Picker Component

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!

Bonus: Storing Uploaded Images In The Cloud (AWS S3)

Adding Static Metadata

Adding Dynamic Metadata

Module Summary

About the NextJS Pages Router

Creating a NextJS Project

Analyzing the Created Project

Adding First Pages

Adding Nested Paths & Pages (Nested Routes)

Creating Dynamic Pages (with Parameters)

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 (Imperative) Navigation

Adding Custom Components & CSS Modules

How Pre-rendering Works & Which Problem We Face

Data Fetching for Static Pages

More on Static Site Generation (SSG)

Exploring Server-side Rendering (SSR) 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

Module Resources

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

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

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

Module Introduction

React 18 & This Section

Starting Project & Why You Would Replace Redux

Alternative: Using the Context API

Toggling Favorites with the Context API

Context API Summary (and why NOT to use it instead of Redux)

Getting Started with a Custom Hook as a Store

Finishing the Store Hook

Creating a Concrete Store

Using the Custom Store

Custom Hook Store Summary

Optimizing the Custom Hook Store

Bonus: Managing Multiple State Slices with the Custom Store Hook

Wrap Up

Module Resources

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

Module Introduction

What & Why?

Installing & Using TypeScript

Exploring the Base Types

Working with Array & Object Types

Understanding Type Inference

Using Union Types

Understanding Type Aliases

Functions & Function Types

Diving Into Generics

A Closer Look At Generics

Creating a React + TypeScript Project

Working with Components & TypeScript

Working with Props & TypeScript

Adding a Data Model

Time to Practice: Exercise Time!

Form Submissions In TypeScript Projects

Working with refs & useRef

Working with "Function Props"

Managing State & TypeScript

Adding Styling

Time to Practice: Removing a Todo

The Context API & TypeScript

Summary

Bonus: Exploring tsconfig.json

Module Introduction

What Is React & Why Would You Use It?

React Projects - Requirements

Creating React Projects

Out Starting Project

Understanding How React Works

Building A First Custom Component

Outputting Dynamic Values

Reusing Components

Passing Data to Components with Props

CSS Styling & CSS Modules

Exercise & Another Component

Preparing the App For State Management

Adding Event Listeners

Working with State

Lifting State Up

The Special "children" Prop

State & Conditional Content

Adding a Shared Header & 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 & Adding Routing

Adding Routes

Working with Layout Routes

Refactoring Route Components & More Nesting

Linking & Navigating

Data Fetching via loader()s

Submitting Data with action()s

Dynamic Routes

Module Summary

Module Resources

Course Roundup

Bonus!

Course Update Overview, Explanation & Migration Guide

Old Course Content Download

About these [BONUS / OPTIONAL] sections

Module Introduction

What Are Components? And Why Is React All About Them?

React Code Is Written In A "Declarative Way"!

Creating a new React Project

The Starting Project

Analyzing a Standard React Project

Introducing JSX

How React Works

Exercise: Working with JSX Code

Building a First Custom Component

Exercise: Building a First Component

Writing More Complex JSX Code

Adding Basic CSS Styling

Outputting Dynamic Data & Working with Expressions in JSX

Passing Data via "props"

Exercise: Passing Data via "props"

Alternative Ways of Passing & Receiving / Handling "props"

Adding "normal" JavaScript Logic to Components

Splitting Components Into Multiple Components

Time to Practice: React & Component Basics

The Concept of "Composition" ("children props")

Exercise: Component Composition

A First Summary

A Closer Look At JSX

Organizing Component Files

An Alternative Function Syntax

Learning Check: React Basics, Components, Props & JSX

Module Resources

Module Introduction

The Starting Project & Your Tasks

Exercise Hints

Outputting Key Concepts Data

Identifying Possible Components

Creating & Using a Custom Component

Outsourcing Concept Items Into a Reusable Component

Module Resources

Module Introduction

Listening to Events & Working with Event Handlers

Exercise: Listening to Events

How Component Functions Are Executed

Working with "State"

Exercise: Working with "State"

A Closer Look at the "useState" Hook

State can be updated in many ways!

Adding Form Inputs

Listening to User Input

Working with Multiple States

Using One State Instead (And What's Better)

Updating State That Depends On The Previous State

Exercise: Using State with Form Inputs

Exercise: Updating State Based On Older State

Alternative: Creating A Shared Handler Function

Handling Form Submission

Adding Two-Way Binding

Time to Practice: Working with Events & State

Child-to-Parent Component Communication (Bottom-up)

Lifting The State Up

Derived / Computed State

Controlled vs Uncontrolled Components & Stateless vs Stateful Components

Learning Check: Working with Events & State

Module Resources

Module Introduction

Rendering Lists of Data

Exercise: Rendering Lists of Data

Using Stateful Lists

Understanding "Keys"

Outputting Conditional Content

Exercise: Outputting Conditional Content

Adding Conditional Return Statements

Demo App: Adding a Chart

Adding Dynamic Styles

Wrap Up & Next Steps

Fixing a Small Bug

Learning Check: Outputting Lists & Conditional Content

Module Resources

Module Introduction

The First Practice Project & Your Tasks

Exercise Hints

Splitting the App Into Components

Handling Events

Managing State

Lifting the State Up

Outputting Results Conditionally

Adding CSS Modules

Fixing a Small Bug

Introducing the Second Project

Exercise Hints

Adding a "User" Component

Adding a re-usable "Card" Component

Adding a re-usable "Button" Component

Managing the User Input State

Adding Validation & Resetting Logic

Adding a Users List Component

Managing a List Of Users via State

Adding The "ErrorModal" Component

Managing the Error State

Module Resources