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
Node.js
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock