The Modern React 18 Bootcamp - A Complete Developer Guide

Name: The Modern React 18 Bootcamp - A Complete Developer Guide
Price: 9 USD
Availability: InStock

20h 35m 57s

English

Paid

September 24, 2024

In this course we will take you from a React 18 novice to a job ready engineer. This course is loaded with practical projects and examples so that you can truly understand and utilize React 18 in great depth!

We will be building five projects, each one getting more and more complex. We will end this course by building an Netflix clone with features like payments and user authentication. By the end of this course, you should have multiple practical example to show off your knowledge!

Here are a list of thing you will learn in this course:

The difference between pure Vanilla JS and React 18
How to utilize the all the different React hooks
Conditional rendering and mapping through a list of elements
Fetching data from an external API and handling the success, loading and error states
Handling user authentication
Building a Postgres database to handle complex relations
Utilizing TypeScript for bug free code
All the important ways to handle state (useState, useContext, useReducer, Redux Toolkit)
Handling subscriptions payments with Stripe
Scroll based pagination with the Observer Intersection API
Optimizing performance by preventing unnecessary re-renders

About the Author: udemy

By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

Watch Online 161 lessons

0:00

#1: A Little Setup

All Course Lessons (161)

#	Lesson Title	Duration
1	A Little Setup Demo	02:56
2	What is React	04:55
3	Building an App With Vanilla JS	14:16
4	Discussing the Annoyances We Faced	02:19
5	Building the Same App With ReactJS	18:29
6	Creating a React App	12:32
7	Exploring the Files and Folders	09:52
8	State and Event Handling	08:51
9	Project Intro	02:59
10	Class vs ClassName	07:40
11	Building the JSX Structure	07:53
12	Listing Out Everything We Need to Work On	02:42
13	Two Way Binding	10:26
14	Defining an Array State	11:52
15	Iterating Through the List to Render Elements	05:26
16	The Key Prop	04:22
17	Computing the Quantity	05:14
18	Conditionally Render JSX Elements	04:09
19	Deleting an Item	06:24
20	Two Way Binding a List Item	07:38
21	The useEffect Hook	10:10
22	Project Introduction	07:28
23	Building the JSX Structure	10:07
24	Two Way Binding	08:24
25	A Cleaner and DRYer Way of Two Way Binding	07:13
26	Input Validation and Conditional Styling	08:21
27	Storing Store List and Map Through List to Render Elements	12:38
28	Installing Dependencies	07:14
29	Computing a New State	07:29
30	Project Introduction	06:58
31	Building the JSX Structure for the Home Page	12:55
32	Dividing Our JSX into Components	10:32
33	Passing Props to Components	10:51
34	Understanding Routing	09:46
35	How React Renders Content to the Browser (CSR vs SSR)	12:07
36	Installing react-router-dom	05:05
37	Defining Our Routing Rules	05:38
38	Adding Another Page to Our App	03:23
39	Nested Routes for Common Elements	08:27
40	Link Based Navigation	07:14
41	Defining Dynamic Routes	05:32
42	The useParams Hook for Extracting the Params	08:00
43	The useNavigate Hook for Programmatic Navigation	05:56
44	Where Will the Data Come From	07:01
45	Fetching Data From an API With Our React App	06:22
46	Iterating Through the Fetched Data	08:08
47	Encapsulating the Fetch Logic in a Custom Hook	05:33
48	Handling a Loading State	07:07
49	Handling an Error State	04:22
50	Querying for Data by Keyword	12:01
51	A Quick Fix	02:34
52	Another Custom Hook	07:41
53	Traversing and Rendering the Data	13:26
54	The Children Prop	06:42
55	Building the Recipe Info Component	08:12
56	Potentials Issues With the State We Defined	03:34
57	The useReducer Hook	14:19
58	Adding Query Params	09:47
59	Handling Error State with an Error Message	06:16
60	A 404 Error Page	05:24
61	More Nested Pages	06:28
62	Passing Data to an Outlet With useOutletContext	07:03
63	Wrapping Things Up	03:55
64	Deploying the Application	07:07
65	Viewing Our Deployment	01:30
66	React Has Many Hooks	03:23
67	The useRef Hook	01:45
68	Building a Mini Project With useState	09:45
69	Improving Performance With useRef	07:55
70	Referencing Elements with useRef	08:42
71	The useMemo Hook	13:14
72	Memo and Props	07:43
73	The useCallback Hook	15:01
74	An Intro to TypeScript	03:48
75	Creating a TypeScript React App	04:32
76	A Quick TypeScript Lesson	16:09
77	Exploring the Starter Code	05:23
78	State with TypeScript	07:03
79	Props with TypeScript	07:34
80	Params with TypeScript	15:41
81	Installing Packages with TypeScript	02:51
82	Major Project Introduction	08:45
83	Creating a TypeScript React App	02:31
84	Tailwind Integration	08:08
85	Building the NavBar	12:00
86	Building the Home Page	11:45
87	Building the Login Page	09:39
88	Building the Plans Page	14:57
89	Building the Browse Page	24:23
90	Building the Watch Page	07:50
91	Implementing Page Navigation	09:16
92	How Will We Get the Data?	06:46
93	Building an Express Server	09:21
94	Create a Movies List GET Endpoint	03:21
95	useReducer with TypeScript	15:47
96	Fetching the Data From the Hook	08:51
97	Consuming the Data in Our Browse Page	06:27
98	Fixing the Card Styles	01:09
99	Conditionally Adding a NavBar Background	04:21
100	Navigating to the Watch Page	02:41
101	Creating a Movie GET Endpoint	02:57
102	Fetching and Rendering the Data From React	08:53
103	Introduction to Pagination	03:49
104	Types of Pagination	05:17
105	Offsets and Limits	04:35
106	Returning Paginated Data From the Server	03:05
107	Intersection Obersever API to Detecting the Visibility of an Element	13:13
108	Appending the Data Instead of Replacing	06:14
109	Adding a Loading State	07:28
110	Prevent Refetching When Client Has All the Data	08:14
111	Introduction to Database Solutions	05:54
112	Spinning Up a Postgres Database	04:37
113	Raw SQL vs ORM	06:12
114	Defining Our Schema & Connecting to the DB	11:18
115	Writing and Executing a Seed Script	10:16
116	Refactoring Our Endpoints to Fetch Data With Prisma	09:12
117	Introduction to Authentication	04:52
118	Refactoring Common Endpoints to Separate Files	07:32
119	Validating the User Inputs	14:46
120	Validating That the User Doesn't Already Exist	04:13
121	Three Different Ways to Store a Password	06:21
122	Hashing and Saving the Password	05:39
123	Saving the User	02:34
124	Forming and Returning a JSON Web Token	08:32
125	The Sign In Endpoint	09:39
126	The Me Endpoint	09:04
127	Back to the Client	01:33
128	Fixing the Form Card	06:43
129	The React Hook Form Library	02:13
130	Setting Up the Form With the useForm Hook	07:06
131	Managing State and Two Way Binding	08:14
132	Validating the Form Input Values	09:24
133	Handling Error States	06:14
134	Bring Things Together	02:32
135	Creating a useAuth Hook	06:08
136	Making the HTTP Requests	07:06
137	Handling Auth Errors	08:55
138	Navigating to the Browse Page Upon Successful Authentication	03:36
139	Storing the JWT in the Browser's Cookie	05:42
140	Introduction to Redux Toolkit	12:38
141	Defining Our Global State	06:24
142	Persisting the Authentication State	10:48
143	Defining Private Routes	07:14
144	Adding the Logout Logic	04:44
145	Time to Make Some Money	02:53
146	Adding Products to Stripe	02:56
147	Connecting Our Server to Stripe	08:08
148	Defining the Products Endpoint	05:04
149	The usePlans Hook	12:38
150	Rendering the Plans	12:22
151	Defining a Session Endpoint	11:34
152	Purchasing a Subscription From the Client	12:34
153	Walking Through All User Flows	04:37
154	Show the Plans Page Only if You Are Authenticated	01:36
155	A Check Auth Middleware	11:49
156	Creating a My Subscription Endpoint	08:26
157	Redirect Users that Have Plans to the Manage Plans Page	14:16
158	Manage Page Redirection	04:47
159	Add Permission Logic to the Movie List Endpoint	11:05
160	Redirect User to the Plan Page if They Don't Have a Subscription	04:34
161	Premium Plan Permissions	09:36

Unlock unlimited learning

Get instant access to all 160 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription