Autoplay
Autocomplete
Previous Lesson
Complete and Continue
React For The Rest Of Us
Intro: The 10 Days of React
What Problem Does React Solve? (15:14)
Let's Start Using React (18:04)
What Is JSX? (8:23)
Staying Organized: Components Using Other Components (6:22)
Using Props To Make a Component Flexible (7:43)
Looping Through An Array Within JSX (11:39)
State (11:41)
Handling Events (Like a Button Click etc...) (11:37)
Working With Forms (17:40)
What is useEffect? (19:58)
Getting Ready To Create a Real World App
Text Editor (14:15)
Quick VS Code Settings
Node.js (4:38)
Setting Up Our Workflow (19:58)
Important Note About NPM Packages and The Zip Files In This Course
Let's Start Building Our App!
React & Next.js (5:23)
Starting Our Complex App (18:21)
Tip: Always Have The Current Year In The Footer
Routing (Single Page Application) (19:41)
Quick Note About Rendering React Components To The DOM
React Developer Tools (4:30)
Creating a Visual Studio Code Snippet (8:06)
Create a Reusable "Container" Component (10:34)
Quick Details & Composition (12:12)
Working With a Real Back-End
Choosing The Right Approach For You
Getting a Database Ready (11:09)
Solution to Common Database Problem
Note About a Common Misspelling
Running The Back-End (6:03)
Optional Alternative: Simple Docker Back-End (11:27)
Connecting the Front-End and Back-End
Quick Note About Debugging
Sending a Request From the Front-End (12:55)
Access Form Field Values with React (7:19)
Logging In (12:00)
Render Different Components Depending on State (10:37)
Persisting State (Local Storage) (10:57)
Conditional Homepage Content (11:57)
Create Post Screen (17:28)
View Single Post Screen (10:22)
Flash Messages (14:22)
Leveling Up The Way We Approach State
Context (16:42)
useReducer (14:17)
A Powerful Duo: useReducer & Context (15:52)
What is Immer? (8:18)
useEffect Practice (15:45)
Actually Building Our App
Profile Screen (19:58)
Load Posts by Author (17:02)
Make Single Post Screen Actually Load The Real Content (12:09)
Animated Loading Icon (6:33)
Cleaning Up After Ourselves (useEffect) (7:37)
Markdown in React (6:58)
Edit & Delete Post Actions
Adding Tooltips on Hover for Actions (6:46)
Edit (Update) Post Component (19:28)
Edit Post Continued (18:35)
Client-Side Form Validation (17:06)
Quick Attention To Detail Features (19:27)
Delete a Post (14:50)
Search Overlay
Setting Up Search Overlay (16:21)
React Transition Group (CSS Transition) (13:51)
Regarding The Index In The Next Lesson
Waiting for User To Stop Typing (16:15)
Finishing Search (Part 1) (13:23)
Finishing Search (Part 2) (11:43)
Letting Users Follow Each Other
Follow User Feature (19:59)
Profile Followers and Following Tabs (17:10)
Homepage Post Feed (19:23)
Building a Live Chat Feature
Live Chat User Interface (18:11)
Sending & Receiving Chats (Part 1) (12:01)
Sending & Receiving Chats (Part 2) (9:03)
Finishing Chat (19:30)
Registration Form Validation
Improving Registration Form (19:59)
Finishing Registration Form (Part 1) (18:36)
Quick Note About If Statement
Finishing Registration Form (Part 2) (8:52)
Quick Flash Message Details (2:41)
Proactively Check If Token Has Expired (9:56)
Getting Ready To Go Live
React Suspense - Lazy Loading (part 1) (13:28)
React Suspense - Lazy Loading (part 2) (9:36)
Note About Suspense for Data Fetching
Building a "Dist" Copy of Our Site (16:45)
React Outside of the Browser (Part 1) (16:42)
React Outside of the Browser (Part 2) (7:33)
Two Quick Notes
Pushing Our API Backend Server Up To The Web (18:28)
Pushing Our React Front-End Up To The Web (15:36)
Next.js Essentials
Next.js Isn't Scary (Part 1) (17:19)
Next.js Isn't Scary (Part 2) (16:16)
Concurrent React
Understanding Concurrency (18:05)
Extra Credit Ideas / Challenges
Welcome To The Extra Credit Section
Profile Not Found Situation
Login Form: Highlight Empty Fields With Red Border
Allow For Other Color of Flash Messages (Not Only Green)
Teach online with
React Suspense - Lazy Loading (part 2)
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock