Section 1: Getting Started
1.1 Welcome To The Course
1.2 What is React.js?
1.3 Why React Instead Of "Just JavaScript"?
1.4 Building Single-Page Applications (SPAs) with React
1.5 Exploring React.js Alternatives (Angular / Vue)
1.6 Setting Up The Course Dev Environment (Code Editor)
Section 2: JavaScript Refresher
2.1 Module Introduction
2.2 Understanding "let" and "const"
2.3 Arrow Functions
2.4 Exports and Imports
2.5 Understanding Classes
2.6 Classes, Properties, and Methods
2.7 The Spread & Rest Operator
2.8 Destructuring
2.9 Reference and Primitive Types Refresher
2.10 Refreshing Array Functions
2.11 JS Array Functions
Section 3: React Basics & Working With Components
3.1 Module Introduction
3.2 What Are Components? And Why Is React All About Them?
3.3 React Code Is Written In A "Declarative Way"!
3.4 Creating a new React Project
3.5 The Starting Project
3.6 Analyzing a Standard React Project
3.7 Introducing JSX
3.8 How React Works
3.9 Building a First Custom Component
3.10 Writing More Complex JSX Code
3.11 Adding Basic CSS Styling
3.12 Outputting Dynamic Data & Working with Expressions in JSX
3.13 Passing Data via "props"
3.14 Adding "normal" JavaScript Logic to Components
3.15 Splitting Components Into Multiple Components
3.16 The Concept of "Composition" ("children props")
3.17 A Closer Look At JSX
3.18 Organizing Component Files
3.19 An Alternative Function Syntax
Section 4: React State & Working with Events
4.1 Module Introduction
4.2 Listening to Events & Working with Event Handlers
4.3 How Component Functions Are Executed
4.4 Working with "State"
4.5 A Closer Look at the "useState" Hook
4.6 State can be updated in many ways!
4.7 Adding Form Inputs
4.8 Listening to User Input
4.9 Working with Multiple States
4.10 Using One State Instead (And What's Better)
4.11 Updating State That Depends On The Previous State
4.12 Handling Form Submission
4.13 Adding Two-Way Binding
4.14 Child-to-Parent Component Communication (Bottom-up)
4.15 Lifting The State Up
4.16 Controlled vs Uncontrolled Components & Stateless vs Stateful Components
Section 5: Rendering Lists & Conditional Content
5.1 Module Introduction
5.2 Rendering Lists of Data
5.3 Using Stateful Lists
5.4 Understanding "Keys"
5.5 Outputting Conditional Content
5.6 Adding Conditional Return Statements
5.7 Demo App: Adding a Chart
5.8 Adding Dynamic Styles
Section 6: Styling React Components
6.1 Module Introduction
6.2 Setting Dynamic Inline Styles
6.3 Setting CSS Classes Dynamically
6.4 Introducing Styled Components
6.5 Styled Components & Dynamic Props
6.6 Styled Components & Media Queries
6.7 Using CSS Modules
6.8 Dynamic Styles with CSS Modules
Section 7: Debugging React Apps
7.1 Module Introduction
7.2 Understanding React Error Messages
7.3 Analyzing Code Flow & Warnings
7.4 Working with Breakpoints
7.5 Using the React DevTools
Section 8: Time to Practice: A Complete Practice Project
8.1 Module Introduction
8.2 Adding a "User" Component
8.3 Adding a re-usable "Card" Component
8.4 Adding a re-usable "Button" Component
8.5 Managing the User Input State
8.6 Adding Validation & Resetting Logic
8.7 Adding a Users List Component
8.8 Managing a List Of Users via State
8.9 Adding The "ErrorModal" Component
8.10 Managing the Error State
Section 9: Diving Deeper: Working with Fragments, Portals & "Refs"
9.1 Module Introduction
9.2 JSX Limitations & Workarounds
9.3 Creating a Wrapper Component
9.4 React Fragments
9.5 Introducing React Portals
9.6 Working with Portals
9.7 Working with "ref"s
9.8 Controlled vs Uncontrolled Components
Section 10: Advanced: Handling Side Effects, Using Reducers & Using the Context API
10.1 Module Introduction
10.2 What are "Side Effects" & Introducing useEffect
10.3 Using the useEffect() Hook
10.4 useEffect & Dependencies
10.5 What to add & Not to add as Dependencies
10.6 Using the useEffect Cleanup Function
10.7 useEffect Summary
10.8 Introducing useReducer & Reducers In General
10.9 Using the useReducer() Hook
10.10 useReducer & useEffect
10.11 Adding Nested Properties As Dependencies To useEffect
10.12 useReducer vs useState for State Management
10.13 Introducing React Context (Context API)
10.14 Using the React Context API
10.15 Tapping Into Context with the useContext Hook
10.16 Making Context Dynamic
10.17 Building & Using a Custom Context Provider Component
10.18 React Context Limitations
10.19 Learning the "Rules of Hooks"
10.20 Refactoring an Input Component
10.21 Diving into "Forward Refs"
Section 11: Practice Project: Building a Food Order App
11.1 Module Introduction
11.2 Starting Setup
11.3 Adding a "Header" Component
11.4 Adding the "Cart" Button Component
11.5 Adding a "Meals" Component
11.6 Adding Individual Meal Items & Displaying Them
11.7 Adding a Form
11.8 Fixing Form Input IDs
11.9 Working on the "Shopping Cart" Component
11.10 Adding a Modal via a React Portal
11.11 Managing Cart & Modal State
11.12 Adding a Cart Context
11.13 Using the Context
11.14 Adding a Cart Reducer
11.15 Working with Refs & Forward Refs
11.16 Outputting Cart Items
11.17 Working on a More Complex Reducer Logic
11.18 Making Items Removable
11.19 Using the useEffect Hook
|
Section 12: A Look Behind The Scenes Of React & Optimization Techniques
12.1 Module Introduction
12.2 How React Really Works
12.3 Component Updates In Action
12.4 A Closer Look At Child Component Re-Evaluation
12.5 Preventing Unnecessary Re-Evaluations with React.memo()
12.6 Preventing Function Re-Creation with useCallback()
12.7 useCallback() and its Dependencies
12.8 A First Summary
12.9 A Closer Look At State & Components
12.10 Understanding State Scheduling & Batching
12.11 Optimizing with useMemo()
Section 13: An Alternative Way Of Building Components: Class-based Components
13.1 Module Introduction
13.2 What & Why
13.3 Adding a First Class-based Component
13.4 Working with State & Events
13.5 The Component Lifecycle (Class-based Components Only!)
13.6 Lifecycle Methods In Action
13.7 Class-based Components & Context
13.8 Class-based vs Functional Components: A Summary
13.9 Introducing Error Boundaries
Section 14: Sending HTTP Requests (e.g. Connecting to a Database)
14.1 Module Introduction
14.2 How To (Not) Connect To A Database
14.3 Our Starting App & Backend
14.4 Sending a GET Request
14.5 Using async / await
14.6 Handling Loading & Data States
14.7 Handling HTTP Errors
14.8 Using useEffect() For Requests
14.9 Preparing The Project For The Next Steps
14.10 Sending a POST Request
Section 15: Building Custom React Hooks
15.1 Module Introduction
15.2 What is "Custom Hooks"?
15.3 Creating a Custom React Hook Function
15.4 Using Custom Hooks
15.5 Configuring Custom Hooks
15.6 Onwards To A More Realistic Example
15.7 Building a Custom HTTP Hook
15.8 Using the Custom HTTP Hook
15.9 Adjusting the Custom Hook Logic
15.10 Using The Custom Hook In More Components
Section 16: Working with Forms & User Input
16.1 Module Introduction
16.2 Our Starting Setup
16.3 What's So Complex About Forms?
16.4 Dealing With Form Submission & Getting User Input Values
16.5 Adding Basic Validation
16.6 Providing Validation Feedback
16.7 Handling the "was touched" State
16.8 React To Lost Focus
16.9 Refactoring & Deriving States
16.10 Managing The Overall Form Validity
16.11 Adding A Custom Input Hook
16.12 Re-Using The Custom Hook
16.13 A Challenge For You!
16.14 Applying Our Hook & Knowledge To A New Form
Section 17: Practice Project: Adding Http & Forms To The Food Order App
17.1 Module Introduction
17.2 Moving "Meals" Data To The Backend
17.3 Fetching Meals via Http
17.4 Handling the Loading State
17.5 Handling Errors
17.6 Adding A Checkout Form
17.7 Reading Form Values
17.8 Adding Form Validation
17.9 Submitting & Sending Cart Data
17.10 Adding Better User Feedback
Section 18: Diving into Redux (An Alternative To The Context API)
18.1 Module Introduction
18.2 Another Look At State In React Apps
18.3 Redux vs React Context
18.4 How Redux Works
18.5 Exploring The Core Redux Concepts
18.6 More Redux Basics
18.7 Preparing a new Project
18.8 Creating a Redux Store for React
18.9 Providing the Store
18.10 Using Redux Data in React Components
18.11 Dispatching Actions From Inside Components
18.12 Redux with Class-based Components
18.13 Attaching Payloads to Actions
18.14 Working with Multiple State Properties
18.15 How To Work With Redux State Correctly
18.16 Redux Challenges & Introducing Redux Toolkit
18.17 Adding State Slices
18.18 Connecting Redux Toolkit State
18.19 Migrating Everything To Redux Toolkit
18.20 Working with Multiple Slices
18.21 Reading & Dispatching From A New Slice
18.22 Splitting Our Code
Section 19: Advanced Redux
19.1 Module Introduction
19.2 Redux & Side Effects (and Asynchronous Code)
19.3 Refresher / Practice: Part 1/2
19.4 Refresher / Practice: Part 2/2
19.5 Redux & Async Code
19.6 Frontend Code vs Backend Code
19.7 Where To Put Our Logic
19.8 Using useEffect with Redux
19.9 A Problem with useEffect()
19.10 Handling Http States & Feedback with Redux
19.11 Using an Action Creator Thunk
19.12 Getting Started with Fetching Data
19.13 Finalizing the Fetching Logic
19.14 Exploring the Redux DevTools
Section 20: Building a Multi-Page SPA with React Router
20.1 Module Introduction
20.2 What is Routing & Why?
20.3 Installing React Router
20.4 Defining & Using Routes
20.5 Working with Links
20.6 Using NavLinks
20.7 Adding Dynamic Routes with Params
20.8 Extracting Route Params
20.9 Using "Switch" and "exact" For Configuring Routes
20.10 Working with Nested Routes
20.11 Redirecting The User
20.12 Time to Practice: Onwards to a New Project
20.13 Practice Redirecting & Extracting Params
20.14 Practicing Nested Routes
20.15 Adding a Layout Wrapper Component
20.16 Adding Dummy Data & More Content
20.17 Outputting Data on the "Details" Page
20.18 Adding a "Not Found" Page
20.19 Implementing Programmatic (Imperative) Navigation
20.20 Preventing Possibly Unwanted Route Transitions with the "Prompt" Component
20.21 Working with Query Parameters
20.22 Getting Creative With Nested Routes
20.23 Writing More Flexible Routing Code
20.24 Sending & Getting Quote Data via Http
20.35 Adding the "Comments" Features
Section 21: Deploying React Apps
21.1 Module Introduction
21.2 Deployment Steps
21.3 Adding Lazy Loading
21.4 Building The Code For Production
21.5 Getting Started With Deployment (Uploading Files)
21.6 Exploring Routing Issues & Finishing Deployment
Section 22: Adding Authentication To React Apps
22.1 Module Introduction
22.2 What, How & Why?
22.3 More on "Authentication Tokens"
22.4 Starting Setup & First Steps
22.5 Adding User Signup
22.6 Showing Feedback To The User
22.7 Adding User Login
22.8 Managing The Auth State With Context
22.9 Using The Token For Requests To Protected Resources
22.10 Redirecting The User
22.11 Adding Logout
22.12 Protecting Frontend Pages
22.13 Persisting The User Authentication Status
22.14 Adding Auto-Logout
|
Section 23: A (Pretty Deep Dive) Introduction to Next.js
23.1 Module Introduction
23.2 What is NextJS?
23.3 Key Feature 1: Built-in Server-side Rendering (Improved SEO!)
23.4 Key Feature 2: Simplified Routing with File-based Routing
23.5 Key Feature 3: Build Fullstack Apps
23.6 Creating a New Next.js Project & App
23.7 Analyzing the Created Project
23.8 Adding First Pages
23.9 Adding Nested Paths & Pages (Nested Routes)
23.10 Creating Dynamic Pages (with Parameters)
23.11 Extracting Dynamic Parameter Values
23.12 Linking Between Pages
23.13 Onwards to a bigger Project!
23.14 Preparing the Project Pages
23.15 Outputting a List of Meetups
23.16 Adding the New Meetup Form
23.17 The "_app.js" File & Layout Wrapper
23.18 Using Programmatic (Imperative) Navigation
23.19 Adding Custom Components & CSS Modules
23.20 How Pre-rendering Works & Which Problem We Face
23.21 Data Fetching for Static Pages
23.22 More on Static Site Generation (SSG)
23.23 Exploring Server-side Rendering (SSR) with "getServerSideProps"
23.24 Working with Params for SSG Data Fetching
23.25 Preparing Paths with "getStaticPaths" & Working With Fallback Pages
23.26 Introducing API Routes
23.27 Working with MongoDB
23.28 Sending Http Requests To Our API Routes
23.29 Getting Data From The Database
23.30 Getting Meetup Details Data & Preparing Pages
23.31 Adding "head" Metadata
23.32 Deploying Next.js Projects
23.33 Using Fallback Pages & Re-deploying
Section 24: Animating React Apps
24.1 Module Introduction
24.2 Preparing the Demo Project
24.3 Using CSS Transitions
24.4 Using CSS Animations
24.5 CSS Transition & Animations Limitations
24.6 Using ReactTransitionGroup
24.7 Using the Transition Component
24.8 Wrapping the Transition Component
24.9 Animation Timings
24.10 Transition Events
24.11 The CSSTransition Component
24.12 Customizing CSS Classnames
24.13 Animating Lists
24.14 Alternative Animation Packages
Section 25: Replacing Redux with React Hooks
25.1 Module Introduction
25.2 Starting Project & Why You Would Replace Redux
25.3 Alternative: Using the Context API
25.4 Toggling Favorites with the Context API
25.5 Context API Summary (and why NOT to use it instead of Redux)
25.6 Getting Started with a Custom Hook as a Store
25.7 Finishing the Store Hook
25.8 Creating a Concrete Store
25.9 Using the Custom Store
25.10 Custom Hook Store Summary
25.11 Optimizing the Custom Hook Store
25.12 Bonus: Managing Multiple State Slices with the Custom Store Hook
Section 26: Testing React Apps (Unit Tests)
26.1 Module Introduction
26.2 What & Why?
26.3 Understanding Different Kinds Of Tests
26.4 What To Test & How To Test
26.5 Understanding the Technical Setup & Involved Tools
26.6 Running a First Test
26.7 Writing Our First Test
26.8 Grouping Tests Together With Test Suites
26.9 Testing User Interaction & State
26.10 Testing Connected Components
26.11 Testing Asynchronous Code
26.12 Working With Mocks
Section 27: React + TypeScript
27.1 Module Introduction
27.2 What & Why?
27.3 Installing & Using TypeScript
27.4 Exploring the Base Types
27.5 Working with Array & Object Types
27.6 Understanding Type Inference
27.7 Using Union Types
27.8 Understanding Type Aliases
27.9 Functions & Function Types
27.10 Diving Into Generics
27.11 A Closer Look At Generics
27.12 Creating a React + TypeScript Project
27.13 Working with Components & TypeScript
27.14 Working with Props & TypeScript
27.15 Adding a Data Model
27.16 Time to Practice: Exercise Time!
27.17 Form Submissions In TypeScript Projects
27.18 Working with refs & useRef
27.19 Working with "Function Props"
27.20 Managing State & TypeScript
27.21 Adding Styling
27.22 Time to Practice: Removing a Todo
27.23 The Context API & TypeScript
Section 28: Optional: React Hooks Introduction & Summary
28.1 Module Introduction
28.2 What Are React Hooks?
28.3 The Starting Project
28.4 Getting Started with useState()
28.5 More on useState() & State Updating
28.6 Array Destructuring
28.7 Multiple States
28.8 Rules of Hooks
28.9 Passing State Data Across Components
28.10 Sending Http Requests
28.11 useEffect() & Loading Data
28.12 Understanding useEffect() Dependencies
28.13 More on useEffect()
28.14 What's useCallback()?
28.15 Working with Refs & useRef()
28.16 Cleaning Up with useEffect()
28.17 Deleting Ingredients
28.18 Loading Errors & State Batching
28.19 More on State Batching & State Updates
28.20 Understanding useReducer()
28.21 Using useReducer() for the Http State
28.22 Working with useContext()
28.23 Performance Optimizations with useMemo()
28.24 Getting Started with Custom Hooks
28.25 Sharing Data Between Custom Hooks & Components
28.26 Using the Custom Hook
Section 29: Optional: React Summary & Core Feature Walkthrough
29.1 Module Introduction
29.2 What Is React?
29.3 Why React?
29.4 Building SPAs (Single Page Applications)
29.5 React Alternatives
29.6 Creating a React Project
29.7 Setting Up A Code Editor
29.8 Diving Into The Created Project
29.9 How React Works & Understanding Components
29.10 More Component Work & Styling with CSS Classes
29.11 Building & Re-Using Another Component
29.12 Working with "props" & Dynamic Content
29.13 Handling Events
29.14 Adding More Components
29.15 Introducing State
29.16 Working with "Event Props" (Passing Function As Props)
29.17 Adding Routing
29.18 Adding Links & Navigation
29.19 Styling with CSS Modules
29.20 Outputting Lists of Data
29.21 Adding More React Components
29.22 Building Wrapper Components with props.children
29.23 Adding a Form
29.24 Getting User Input & Handling Form Submission
29.25 Preparing the App for Http
29.26 Sending a POST Request
29.27 Navigating Programmatically
29.28 Getting Started with Fetching Data
29.29 Using the useEffect() Hook
29.30 Introducing React Context
29.31 Context Logic & Different Ways Of Updating State
29.32 Using Context In Components
29.33 More Context Usage
|
