English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 15.5 Hours | 6.60 GB
Learn React JS to create Single Page Applications (SPA) using modern practices like Context, Reducer, Suspense and more
Learn the world’s most popular library for creating user interfaces!
What makes this course different is we take the time to understand *why* we’re doing what we’re doing. We begin by asking an important question that so many other React courses skip entirely; What problem does React solve?
Once we understand what React is and isn’t, we spend the remainder of the course together building the front-end for a real world social media app where you can post, follow other users and even hop into a live chatroom. Along the way we will:
- Understand what “state” is in React and how to bring our interfaces to life
- Use the modern “hook” approach with Function Components
- Leverage React Router to create a Single Page Application with shareable URLs
- See the power of Context, Reducer, and Immer and create an ideal way of working with state
- Run code at the perfect moments by understanding the power of useEffect()
- Use async HTTP requests to communicate with APIs so that our app feels meaningful by working with real data
- Deploy our app up onto the web so you can share it with your friends and family
What you’ll learn
- The problem React solves and *why* we should use it (aside from “because it’s popular”)
- How to create Single Page Applications with React
- The ability to keep your code organized and manageable
- How to seamlessly pull real and dynamic data into your front-end
Table of Contents
Intro The 10 Days of React
1 What Problem Does React Solve
2 What is UseEffect
3 Let’s Start Using React
4 What Is JSX
5 Staying Organized Components Using Other Components
6 Using Props To Make a Component Flexible
7 Looping Through An Array Within JSX
8 State
9 Handling Events (Like a Button Click etc…)
10 Working With Forms
Getting Ready To Create a Real World App
11 Text Editor
12 Quick VS Code Settings
13 Node.js
14 Setting Up Our Workflow
15 Important Note About NPM Packages and The Zip Files in This Course
Let’s Start Building Our App!
16 Starting Our Complex App
17 Routing (Single Page Application)
18 React Developer Tools
19 Creating a Visual Studio Code Snippet
20 Create a Reusable Container Component
21 Quick Details & Composition
Working With a Real Back-End
22 Getting a Database Ready
23 Note About a Common Misspelling
24 Running The Back-End
Connecting the Front-End and Back-End
25 Quick Note About Debugging
26 Flash Messages
27 Sending a Request From the Front-End
28 Access Form Field Values with React
29 Logging In
30 Render Different Components Depending on State
31 Persisting State (Local Storage)
32 Conditional Homepage Content
33 Create Post Screen
34 View Single Post Screen
Leveling Up The Way We Approach State
35 Context
36 useReducer
37 A Powerful Duo useReducer & Context
38 What is Immer
39 useEffect Practice
Actually Building Our App
40 Profile Screen
41 Load Posts by Author
42 Make Single Post Screen Actually Load The Real Content
43 Animated Loading Icon
44 Cleaning Up After Ourselves (useEffect)
45 Markdown in React
Edit & Delete Post Actions
46 Adding Tooltips on Hover for Actions
47 Edit (Update) Post Component
48 Edit Post Continued
49 Client-Side Form Validation
50 Quick Attention To Detail Features
51 Delete a Post
Search Overlay
52 Setting Up Search Overlay
53 React Transition Group (CSS Transition)
54 Waiting for User To Stop Typing
55 Finishing Search (Part 1)
56 Finishing Search (Part 2)
Letting Users Follow Each Other
57 Follow User Feature
58 Profile Followers and Following Tabs
59 Homepage Post Feed
Building a Live Chat Feature
60 Live Chat User Interface
61 Sending & Receiving Chats (Part 1)
62 Sending & Receiving Chats (Part 2)
63 Finishing Chat
Registration Form Validation
64 Improving Registration Form
65 Finishing Registration Form (Part 1)
66 Finishing Registration Form (Part 2)
67 Quick Flash Message Details
68 Proactively Check If Token Has Expired
Getting Ready To Go Live
69 React Suspense – Lazy Loading (part 1)
70 React Suspense – Lazy Loading (part 2)
71 Note About Suspense for Data Fetching
72 Building a Dist Copy of Our Site
73 React Outside of the Browser (Part 1)
74 React Outside of the Browser (Part 2)
75 Pushing Our API Backend Server Up To The Web
76 Pushing Our React Front-End Up To The Web
Extra Credit Ideas Challenges
77 Welcome To The Extra Credit Section
78 Profile Not Found Situation
79 Login Form Highlight Empty Fields With Red Border
80 Allow For Other Color of Flash Messages (Not Only Green)
Resolve the captcha to access the links!