This course was created with the
course builder. Create your online course today.
Start now
Create your course
with
Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Getting Dirty With React
Setting Up Development Environment
Section Intro (0:46)
Apple/Mac Setup (3:15)
Windows Installation (1:43)
Getting Familiar with React
Section Intro (0:52)
Create-React-App Windows Setup (9:49)
Create-React-App Mac Setup (10:38)
Create-React-App Overview (6:22)
Rendering First Element (5:45)
What is JSX (6:27)
What Are React Components (3:09)
Class vs Functional Components (2:25)
First React Component (5:03)
React Fragments (3:51)
Rendering Dynamic Data (6:02)
CSS Classes in React Part 1 (6:19)
CSS Classes in React Part 2 (7:23)
Render Lists (12:07)
Multiple Components (7:52)
Handling Events in React (4:49)
Managing State in React
Managing State Intro (12:51)
Adding a Second Counter (2:35)
State as an Object (7:02)
State as List (5:19)
Event Handler Arguments (5:50)
Responsive NavBar Project
Project Intro (1:16)
NavBar Project (20:56)
Tweeter Project & Intro to Props
Project Intro (1:01)
Creating Tweet Component (10:05)
Passing Data Through Props (7:11)
Loading Tweet Data (7:08)
Render List of Tweets (4:58)
Implement Voting System (8:34)
Passing data to parent components (18:36)
Props Continued
Child Props (5:21)
Destructure Props (4:43)
Contacts App, Your first CRUD Application
Project Intro (1:20)
Intro to useRef hook (9:48)
Uncontrolled inputs (6:06)
Controlled Inputs (7:05)
Starting Contact App (7:52)
Adding Contacts (Create) (4:51)
Contacts Component (Read) (4:06)
Deleting Contacts (Delete) (7:38)
Updating Contacts (Update) (6:59)
React Developer Tools (4:44)
Search Component (4:54)
Use-Effect hook (16:43)
Fetching Data from an API
Project Intro (1:40)
Fetching Data with Axios (8:55)
Fixing useEffect error (2:09)
Fetching Data only When Component Mounts (3:29)
Rendering Posts (3:40)
Pexels Project
Project Intro (1:20)
Pexels Registration (2:13)
Fetching Data from API (7:48)
Render Images (7:34)
Search Functionality (10:32)
Giphy Project
Project Intro (1:45)
API Setup (5:52)
Loading Trending Gifs (9:28)
Loading Functionality (12:56)
Error Handling (9:33)
Pagination (23:52)
Search Functionality (12:05)
Context API
Why We need Context (6:45)
Setting up Context Provider (16:52)
Receiving State (6:25)
Expense Tracker Project
App Overview (1:22)
Building UI (17:50)
Setting Up Context API (6:55)
Total Component (3:59)
Summary Component (3:05)
Entries Component (8:40)
Add Entries Component (7:40)
Reducers
Reducer Basics (10:02)
Banking App with UseState (15:51)
Banking App with Reducers (15:26)
React Router
URL Basics (5:57)
React vs MPA (5:27)
Routes (14:12)
NavBar (8:58)
NavBar Styling (3:23)
NavLinks (4:12)
Relative Paths (8:36)
Dummy Authentication (6:13)
Protected URL (4:32)
2nd Method for Protected URLs (12:06)
History API
What Are URLS (3:21)
History API Example (10:00)
SPA vs MPA (8:17)
History API in React Router (14:58)
CoinStar Project
Project Intro (4:05)
Routing & Bootstrap (11:25)
CoinGecko API (13:48)
WatchList Context API (5:44)
Join Watchlist (2:00)
Loading Functionality (1:56)
Render Coins to Screen (13:43)
Deleting Coins (14:07)
URL Parameters (9:01)
Fetching Data for DetailPage (22:23)
Setup Loading (1:14)
Working With Charts (21:51)
Charts Continued (12:01)
Chart Responsiveness Fix (0:20)
CoinData Component (8:39)
Local Storage (12:00)
Redux Basics
Benefits of Redux (9:42)
Benefits of Global State (7:07)
Redux Building Blocks (14:16)
Redux WorkFlow (2:28)
Redux Banking App
Project Intro (3:38)
Project Bootstrap (5:17)
Component Boilerplate (3:21)
Create Store (5:40)
Defining Actions (5:39)
Reducer (8:28)
Provider (3:00)
Dispatching Actions (11:43)
Action Creator (6:21)
Account Status (14:34)
Authentication & Combine Reducer (18:00)
Redux Miles Tracker Project
Project Intro (3:55)
Bootstrapping Project (3:45)
Building Components (10:16)
Add Entry (9:55)
Wiring Up Redux (2:13)
Dispatch Add Entry (13:05)
Render Entries UUID (7:43)
Delete Entries (5:52)
Total Miles (6:25)
Redux Middleware
What is Redux Middleware (3:02)
Middleware Example (24:21)
Redux Async
Section Intro (1:06)
Async Issues (14:12)
Redux Thunk (8:43)
Redux Request/Success/Failure Pattern (14:37)
Create Store
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock