Routes | Sloppy Networks

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)

Teach online with

Routes

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock