CF

The Modern React 18 Bootcamp - A Complete Developer Guide

20h 35m 57s
English
Paid

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

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 161 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 161 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: A Little Setup
All Course Lessons (161)
#Lesson TitleDurationAccess
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

Related courses

Frequently asked questions

What prerequisites are needed before taking this course?
This course assumes a basic understanding of JavaScript and web development concepts. Familiarity with HTML and CSS will be beneficial as the course builds upon these foundational skills to teach React 18. There are no specific prerequisites mentioned, but a general comfort with coding in JavaScript is expected to facilitate a smoother learning experience.
What projects will I build during the course?
Throughout the course, you will build five projects, each increasing in complexity. Key projects include building an app with Vanilla JS, followed by its ReactJS version, and culminate in creating a Netflix clone featuring payment integration and user authentication. These projects are designed to solidify your understanding of React 18 and provide practical examples to showcase your skills.
Who is the target audience for this course?
The course is aimed at individuals who are new to React 18 but have some background in JavaScript and web development. It's ideal for those looking to deepen their understanding of React and its ecosystem, as well as developers aiming to become job-ready engineers by mastering practical skills and building complex applications.
How does the depth of this course compare to other React courses?
This course offers a detailed exploration of React 18, covering fundamental concepts such as state and event handling, routing with react-router-dom, and API data fetching with custom hooks. The curriculum progresses to advanced topics like user authentication and building a Netflix clone, making it a comprehensive guide for those seeking to develop complex React applications.
What specific tools or platforms will be used in the course?
The course utilizes React 18, along with react-router-dom for routing. You will also work with APIs and custom hooks to fetch and manage data within your applications. These tools are integral to building dynamic and responsive web applications, aligning with modern industry standards.
What topics are not covered in this course?
The course does not cover server-side technologies, backend development, or non-React frameworks. Its focus is strictly on client-side application development using React 18, ensuring you gain expertise in building complex frontend applications without delving into backend programming.
What is the estimated time commitment for completing this course?
The course comprises 161 lessons, but the total runtime is not specified. Given the depth and breadth of topics covered, including practical projects and examples, prospective students should be prepared to invest significant time to fully engage with the material and complete the exercises. The exact time may vary depending on individual learning pace.