Epic React (Epic React Pro)

27h 57m 10s
English
Paid

Course description

Building React applications demands that you make expert decisions before you write the first line of code. You're responsible for building a cohesive, maintainable code-base that will help your team succeed and build a React application that serves your customers' needs. You're faced with hundreds of decisions. If you don't choose correctly users will suffer.

Read more about the course

Your team will suffer.

You'll be stuck with your early bad decisions for the next 5 years at a minimum.

React is the smart choice for most web development projects in 2020

React provides an "assembly-level" set of tools without a lot of guidance on how to turn those tools into an application that scales.

That's what makes React awesome.

But React's flexibility is a double-edged sword.

It's up to you and your team to decide how your application will be architected and maintained over time.

To make those decisions, you need expertise.

You need experience.

This is where the official React documentation cuts you short.

You are left piecing together components like a bucket of Lego spilled on the floor.

You need to build applications that scale.

  • Well-tested.
  •  Well-architected.

You don't have time for trial and error.

You have to get it right.

One of the biggest challenges with learning React is the vast sea of low-grade internet learning content.

You're going to spend countless hours wading through out-of-date, low-effort, inconsistent, and often wrong blog posts, YouTube videos, and courses across the internet trying to understand how to build React applications that scale.

Books are out of date.

Articles are filled with bad advice.

Screencasts are old, stale, and too time-consuming to watch while not providing real practice.

Youtube channels are thinly veiled content-marketing schemes meant to harvest cash from your wallet without caring about you or your career. 

There has to be a better way.

What if you had a resource for you and your team that taught consistent fundamentals of React component development as well as a well defined, production-proven, enterprise-grade architecture for building applications that scale?

Wouldn't it be great to confidently develop React applications with a solid foundation?

Would you like to have a coherent strategy and remove the indecision that comes with building a new React application from scratch?

Epic React is hands-on practice coding in a real development environment.

Epic React is a series of code-along interactive workshops that have been play-tested live and in-person over several years for hundreds of developers like you.

This self-paced workshop collection will start from the very beginning of the React journey and guide you all the way through well-tested application architecture.

Epic React is hands-on practice coding in a real development environment.

Epic React is a series of code-along interactive workshops that have been play-tested live and in-person over several years for hundreds of developers like you.

This self-paced workshop collection will start from the very beginning of the React journey and guide you all the way through well-tested application architecture.

  • React Fundamentals 
  • React Hooks 
  • Advanced React Hooks 
  • Advanced React Patterns 
  • React Performance
  • Testing React Apps 
  • React Suspense 
  • Build an Epic React App 

Watch Online

This is a demo lesson (10:00 remaining)

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

View Pricing

Watch Online Epic React (Epic React Pro)

0:00
/
#1: Welcome to Epic React

All Course Lessons (363)

#Lesson TitleDurationAccess
1
Welcome to Epic React Demo
00:58
2
Project READMEs and Pre Reqs
01:40
3
Clone and Setup
04:45
4
Running the Epic React Workshop App
04:34
5
File Structure
05:39
6
Running Tests
03:33
7
Example Runthrough
10:03
8
React Fundamentals Welcome
02:38
9
Basic JS "Hello World"
00:53
10
Generate DOM Nodes Extra Credit Solution
02:28
11
Generate DOM Nodes Extra Extra Credit
01:47
12
Intro to Raw React APIs
01:10
13
Raw React APIs Solution
06:38
14
Nesting Elements Extra Credit Solution
04:59
15
Break Time
00:50
16
Using JSX
02:07
17
Write Markup with JSX Solution
04:02
18
Interpolate className and Children Extra Credit Solution 01
05:12
19
Spread Props Extra Credit Solution 02
01:17
20
Creating Custom Components
09:17
21
Render JSX From Functions Solution
03:34
22
React.createElement Extra Credit Solution 01
03:49
23
JSX Extra Credit Solution 02
05:27
24
Validation with PropTypes Extra Credit Solution 03
06:00
25
Use prop-types Package Extra Credit Solution 04
02:12
26
React Fragments Extra Credit Solution 05
04:19
27
Styling
01:13
28
style Prop Solution
03:16
29
Create a Custom Component Extra Credit Solution 01
06:36
30
Accept a Size Prop to Encapsulate Styling Extra Credit Solution 02
02:24
31
Break Time
00:56
32
Forms
01:02
33
Form Basics
09:25
34
Using refs Extra Credit Solution 01
01:14
35
Validate lower-case Extra Credit Solution 02
04:29
36
Control the Input Value Extra Credit Solution 03
04:21
37
Rendering Arrays
00:44
38
Render Arrays Solution
04:55
39
Focus demo Extra Credit Solution 01
02:07
40
React Fundamentals Outro
00:11
41
React Hooks Welcome
02:26
42
useState: greeting
00:47
43
Set State in React Solution
03:43
44
Set Initial Values Through Props Extra Credit Solution
02:09
45
useEffect: persistent state
01:14
46
localStorage useEffect Solution
03:31
47
Lazy State Initialization Extra Credit Solution 1
04:13
48
Effect Dependencies Extra Credit Solution 2
05:36
49
Custom Hook Extra Credit Solution 3
05:30
50
Flexible localStorage Hook Extra Credit Solution 4
08:12
51
Hooks Flow
13:06
52
Lifting state
01:12
53
Lift State Solution
03:29
54
Colocate State Extra Credit Solution
03:45
55
useState: tic tac toe
01:19
56
Managed and Derived State Solution
08:40
57
Preserve State in localStorage Extra Credit Solution 1
02:31
58
useLocalStorageState Custom Hook Extra Credit Solution 2
01:24
59
Add Game History Feature Extra Credit Solution 3
12:13
60
Class Refactor
08:09
61
useRef and useEffect: DOM interaction
00:59
62
Solution
05:58
63
Class Refactor
02:32
64
Break Time
00:52
65
useEffect: HTTP requests
02:22
66
Fetch Data
05:05
67
Handle Errors Extra Credit Solution 1
02:24
68
Use a status Extra Credit Solution 2
04:03
69
Store the State in an Object Extra Credit Solution 3
05:39
70
ErrorBoundary Component Extra Credit Solution 4
08:20
71
Re-mount the ErrorBoundary Extra Credit Solution 5
04:02
72
Use react-error-boundary Extra Credit Solution 6
01:09
73
Reset the ErrorBoundary Extra Credit Solution 7
04:47
74
use resetKeys Extra Credit Solution 8
02:51
75
React Hooks Outro
00:40
76
Advanced React Hooks Welcome
02:11
77
useReducer: simple Counter
01:03
78
Simple Counter Solution
02:41
79
Accept Step as Action Extra Credit Solution 1
01:19
80
setState with Object Extra Credit Solution 2
02:23
81
Object or Function Extra Credit Solution 3
02:24
82
Traditional Dispatch Object Extra Credit Solution 4
03:03
83
useCallback: custom hooks
01:12
84
Extract Logic into Hook Solution
08:50
85
useCallback for Memoization Extra Credit Solution 1
04:50
86
Return Memoized run Function Extra Credit Solution 2
04:27
87
Make safeDispatch Extra Credit Solution 3
06:40
88
useContext: simple Counter
02:03
89
CountProvider Solution
03:49
90
Create a Consumer Hook Extra Credit Solution 1
03:38
91
Caching in Context Provider Extra Credit Solution 2
06:13
92
useLayoutEffect: auto-growing textarea
01:21
93
useLayoutEffect Solution
02:59
94
useImperativeHandle: scroll to top/bottom
01:46
95
Scroll to Top/Bottom Solution
05:12
96
useDebugValue: useMedia
01:30
97
Label useDebugValue Solution
01:35
98
Use the Format Function Extra Credit Solution 1
01:50
99
Advanced React Hooks Outro
00:59
100
Advanced React Patterns Welcome
03:04
101
Context Module Functions
02:27
102
Extract Helper Function Solution
05:08
103
Compound Components
02:11
104
Refactor Toggle Solution
05:54
105
Support DOM Component Children Extra Credit Solution 1
03:16
106
Flexible Compound Components
01:08
107
Extract State into Context Solution
03:38
108
Custom Hook Validation Extra Credit Solution 1
02:03
109
Prop Collections and Getters
01:31
110
Object of Props Solution
01:17
111
Prop Getters Extra Credit Solution 1
05:57
112
State Reducer
01:18
113
Inversion of Control Solution
02:50
114
Default State Reducer Extra Credit Solution 1
02:28
115
State Reducer Action Types Extra Credit Solution 2
02:05
116
Control Props
04:10
117
Control State with on and onChange Solution
08:05
118
Add Read Only Warning Extra Credit Solution 1
05:25
119
Add a Controlled State Warning Extra Credit Solution 2
04:38
120
Extract Warnings to a Custom Hook Extra Credit Solution 3
05:58
121
Don't Warn in Production Extra Credit Solution 4
02:40
122
Advanced React Patterns Outro
00:56
123
React Performance Welcome
04:57
124
Code Splitting
04:00
125
Code Split Solution
04:17
126
Eager Loading Extra Credit Solution 1
03:51
127
Webpack Magic Comments Extra Credit Solution 2
03:17
128
Suspense Position
03:34
129
Coverage Tool
05:02
130
useMemo for Expensive Calculations
04:07
131
Wrap a Function in useMemo Solution
05:47
132
Production Mode Extra Credit Solution 1
03:23
133
getItems Web Worker Extra Credit Solution 2
05:38
134
React.memo for Reducing re-renders
04:40
135
Memoize Components Solution
04:07
136
Custom Comparator Extra Credit Solution 1
07:04
137
Primitive Values Extra Credit Solution 2
02:45
138
Window Large Lists with react-virtual
02:12
139
Render Large Lists Solution
10:39
140
Optimize Context Value
03:51
141
Memoize Context Value Solution
05:02
142
Separate the Contexts Extra Credit Solution 1
05:34
143
Fix Perf Death by a Thousand Cuts
02:54
144
Colocate State Solution
04:13
145
Separate Contexts Extra Credit Solution 1
06:03
146
Consuming Components Extra Credit Solution 2
04:34
147
Slice of App State Extra Credit Solution 3
04:28
148
Use recoil Extra Credit Solution 4
06:43
149
Production Performance Monitoring
02:29
150
Add Performance Monitoring Solution
03:37
151
Use Trace API Extra Credit Solution 1
03:54
152
React Performance Outro
01:11
153
Testing React Apps Welcome
04:33
154
Simple Test with ReactDOM
02:06
155
Render Counter Component Solution 1
02:05
156
Test Counter Component Solution 2
01:54
157
Increment and Decrement Buttons Solution 3
02:33
158
Cleaning up Test Environments Solution 4
03:59
159
Add use dispatchEvent Extra Credit Solution 1
02:14
160
Simple Test with React Testing Library
01:05
161
Rendering Solution 1
03:02
162
Firing Events Solution 2
02:45
163
Accretions Extra Credit Solution 1
04:13
164
Avoid Implementation Details
01:46
165
Screen Utility Solution
04:23
166
Browser Interactions Extra Credit Solution 1
01:52
167
Form Testing
01:04
168
Exposes a Debug Method to Test Elements Solution 1
05:09
169
PLEASE SKIP
02:19
170
Abstract Variables Extra Credit Solution 1
02:19
171
Jest Mock Functions Extra Credit Solution 2
02:48
172
Generate Test Data Extra Credit Solution 3
01:27
173
Allow for Overrides Extra Credit Solution 4
01:54
174
Mocking HTTP Requests
01:25
175
Mock Service Worker Solution 1
04:49
176
Mocked Responses Solution 2
00:57
177
Reuse Server Request Handlers Extra Credit Solution 1
01:28
178
Unhappy Path Extra Credit Solution 2
02:01
179
Use Inline Snapshots Extra Credit Solution 3
02:23
180
Use One-off Server Handlers Extra Credit Solution 4
04:50
181
Mocking Browser APIs and Modules
02:18
182
Mock Geolocation Solution 1
05:47
183
Act Function Solution 2
02:25
184
Mock the module Extra Credit Solution 1
06:42
185
Context and Custom Render Method
03:01
186
Wrapper Component Solution
02:51
187
Dark Theme Extra Credit Solution 1
00:50
188
Render Method Extra Credit Solution 2
03:42
189
App Test Utils Extra Credit Solution 3
03:34
190
Testing Custom Hooks
01:58
191
Test Functionality of Custom Hook Solution
02:56
192
Fake Component Extra Credit Solution 1
04:00
193
Setup Function Extra Credit Solution 2
04:09
194
Using React-Hooks Testing Library Extra Credit Solution 3
02:42
195
Testing React Apps Outro
01:06
196
React Suspense Welcome
05:38
197
Concurrent Mode
01:15
198
Simple Data-Fetching
01:14
199
React.Suspense Solution
05:04
200
Handle Error with Error Boundary Extra Credit Solution 1
03:03
201
Make More Generic createResource Extra Credit Solution 2
03:57
202
Use utils Extra Credit Solution 3
01:18
203
Render as You Fetch
05:01
204
Refactor PokemonInfo Solution
06:36
205
Error Boundary Positioning Extra Credit Solution 1
02:37
206
useTransition
02:50
207
startTranistion and isPending Solution
05:32
208
Use CSS Transitions Extra Credit Solution 1
03:16
209
Avoid Flash of Loading Content Extra Credit Solution 2
03:35
210
Cache Resources
01:48
211
Cache an Object Solution
03:04
212
Put Cache in Context Extra Credit Solution 1
01:59
213
Create a Context Provider Extra Credit Solution 2
03:08
214
Add Cache Timeout Extra Credit Solution 3
04:23
215
Suspense Image
04:39
216
Suspend an Image Component Solution
04:31
217
Avoid Waterfall Extra Credit Solution 1
04:27
218
Render as You Fetch Extra Credit Solution 2
03:02
219
Suspense with a Custom Hook
00:42
220
Create a Custom Suspense Hook Solution
01:47
221
Reuse Pre-Built Hook Extra Credit Solution 1
00:35
222
Coordinate Suspending Components with SuspenseList
02:00
223
Load States Solution
04:46
224
React Suspense Outro
00:45
225
Build an Epic React App Welcome
07:08
226
Walkthrough of Project Setup
05:39
227
Render a React App
00:46
228
Render Logo and Title Solution
03:02
229
Use @reach/dialog Extra Credit Solution 01
03:27
230
Create a LoginForm Component Extra Credit Solution 02
04:32
231
Add Styles
02:17
232
Style a Button with Variants Solution 01
04:04
233
Style Input and Formgroup Solution 02
01:21
234
Style with Emotion CSS Prop Solution 03
03:13
235
Use the Emotion Macro Extra Credit Solution 01
02:22
236
Use Colors and Media Queries File Extra Credit Solution 02
02:37
237
Make a Loading Spinner Component Extra Credit Solution 03
03:29
238
Make HTTP Requests
01:54
239
Query Data with useEffect Solution 01
07:12
240
Query Data with useEffect Solution 02
02:32
241
Handle Failed Requests Extra Credit Solution 01
05:08
242
Use the useAsync Hook Extra Credit Solution 02
01:48
243
Authentication
03:43
244
Wire up Authentication Solution
03:14
245
User Data on Page Load Extra Credit Solution 01
04:57
246
Use useAsync Extra Credit Solution 02
04:32
247
Automatically Logout on 401 Extra Credit Solution 03
01:45
248
Support Posting Data Extra Credit Solution 04
01:51
249
Routing
01:44
250
Handle Routing Solution
07:52
251
Handle URL Redirects Extra Credit Solution-01
03:57
252
Add useMatch to Highlight the Active Nav Item Extra Credit Solution-02
01:40
253
Cache Management
03:48
254
Create listItems with React Query useMutation Solution 01
04:31
255
View listItems with React Query useQuery Solution 02
05:29
256
Remove listItems with useMutation Solution 03
01:49
257
Update listItems with useMutations Solution 04
03:07
258
View listItem Data in BookRow with useQuery Solution 05
01:33
259
Update a Book Rating with useMutation Solution 06
01:45
260
Refactor useAsync to useQuery Solution 07
02:39
261
Load and Persist Book Data with useQuery Solution 08
03:46
262
Query with useQuery for listItems in ListItemList Solution 09
01:23
263
Clear queryCache on User Logout Solution 10
01:58
264
Create useBookSearch Custom Hook Extra Credit Solution 01-01
03:38
265
Create a useBook Custom Hook Extra Credit Solution 01-02
01:33
266
Create useListItem(s) Custom Hook Extra Credit Solution 01-03
03:50
267
Reuse Mutation Logic in a Custom Extra Credit Solution 01-04
02:04
268
Reuse Custom Hooks to Reduce Code Extra Credit Solution 01-05
01:13
269
Create and Remove Custom Hook Extra Credit Solution 01-06
02:10
270
useMatch: highlight active nav item Extra Credit Solution 02
04:15
271
Show Error When Request Fails Extra Credit Solution 03-01
04:01
272
React Query Custom Error Handling Extra Credit Solution 03-02
04:10
273
Add a Loading Spinner for the Notes Extra Credit Solution 04
01:10
274
Prefetch the Book Search Query Extra Credit Solution 05
04:28
275
Add Books to the Query Cache Extra Credit Solution 06
04:04
276
Add Optimistic Updates and Recovery Extra Credit Solution 07
05:37
277
Context
01:25
278
Create and Provide an AuthContext Solution 01
03:04
279
Grab a Value from Context in a Hook Solution 02
02:21
280
Use Context Value in ListItem Hooks and AuthenticatedApp Solution 03
05:16
281
Expose User Context Value to refetchBookSearchQuery Solution 04
02:53
282
Create a useAuth Hook Extra Credit Solution 01
02:50
283
Create an AuthProvider Component Extra Credit Solution 02
05:28
284
Colocate Global Providers Extra Credit Solution 03
02:35
285
Create a useClient Hook Extra Credit Solution 04
04:08
286
Compound Components
01:09
287
Create Compound Components for a Flexible Modal Solution
08:35
288
Add callAll Extra Credit Solution 01
03:40
289
Create ModalContentsBase Extra Credit Solution 02
03:39
290
Performance
02:20
291
Improve the Time to First Meaningful Paint Solution
07:54
292
Prefetch the Authenticated App Extra Credit Solution 01
03:17
293
Memoize Context Extra Credit Solution 02
05:58
294
Custom React.Profiler to Moninitor App Extra Credit Solution 03-01
06:45
295
Add Metadata and Profile Book Screen Extra Credit Solution 03-02
03:34
296
List Item List and Discover Sceen List Extra Credit Solution 03-03
03:03
297
Add Profiling to Production Builds Extra Credit Solution 03-04
02:28
298
Add Interaction Tracing Extra Credit Solution 04-01
03:47
299
Profile All Updates in an Interaction Extra Credit Solution 04-02
03:44
300
Render as You Fetch
01:11
301
Fetch User before AuthProvider Mounts Solution
03:23
302
Preload All Initial Data Extra Credit Solution 01
02:46
303
Unit Testing
01:39
304
Test formatDate Solution 01
01:39
305
Set up a Server to Test Requests Solution 02
06:15
306
Test if a Request has an Auth Header Solution 03
01:48
307
Client Request Config Overrides Solution 04
01:37
308
POST by Default when Body Present and Stringified Solution 05
02:21
309
Automatic Log Out on 401 Error Extra Credit Solution 01-01
03:40
310
Ensure Promise Rejects on Error Extra Credit Solution 01-02
02:18
311
Use setupTests.js Extra Credit Solution 02
01:01
312
Testing Hooks and Components
01:32
313
Modal Compound Components Solution 01
06:08
314
Set up useAsync Test with renderHook Solution 02
02:36
315
Wrap an act around an async Function Solution 03
02:21
316
Add an async act to Resolve a Promise Solution 04
03:20
317
Reset React State in a Test Solution 05
01:13
318
Call Run with a Promise That Resolved Solution 06
01:43
319
Can Specify an Initial State Solution 07
01:27
320
Can Set the Data Solution 08
02:03
321
No State Updates if Unmounted Solution 09
03:32
322
Call run without Promise Errors Solution 10
01:21
323
AHA Testing Extra Credit Solution 01
03:44
324
Integration Testing
02:56
325
Render the Application with AppProviders Solution 01
02:35
326
Wait for Loading Element to Be Removed Solution 02
00:56
327
Reverse-engineer AuthProvider and Log In Solution 03
03:49
328
Render a Book Page in a Test Solution 04
04:54
329
Test What UI Elements are Present Solution 05
06:45
330
Isolate Tests by Cleaning up State and Cache Solution 06
00:49
331
Create Mock msw Server Extra Credit Solution 01
06:59
332
Write Second Integration Test Extra Credit Solution 02
05:33
333
Abstract Functionality Extra Credit Solution 03-01
01:29
334
Custom Render Function Extra Credit Solution 03-02
06:24
335
Global Utils Extra Credit Solution 04
03:29
336
Can Remove List Item for Book Extra Credit Solution 05-01
03:50
337
Can Mark a List Item as Read Extra Credit Solution 05-02
03:28
338
Can Edit a Note Extra Credit Solution 05-03
04:55
339
Use Jest Fake Timers Extra Credit Solution 05-04
03:04
340
Set up Mock Profiler for Tests Extra Credit Solution 05-05
01:54
341
Create Component-Specific Utility Extra Credit Solution 06
07:44
342
Show Error when Load Fails Extra Credit Solution 07-01
02:35
343
Scope Hooks to Describe Block Extra Credit Solution 07-02
02:55
344
Update Failures are Displayed Extra Credit Solution 07-03
04:16
345
E2E Testing
01:42
346
Register a User in Cypress Solution 01
03:55
347
Find and Add a Book to Reading List Solution 02
04:00
348
Mark Book as Read and Rate Solution 03
04:06
349
Remove Book from Reading List Solution 04
02:21
350
Build an Epic React App Outro
01:34
351
Creating Open Source Libraries with Tanner Linsley
39:12
352
Animations and Interactions with Josh Comeau
37:26
353
Next.js and Vercel with Guillermo Rauch
40:29
354
Building React-based Design Systems with Ben Ilegbodu
34:01
355
The React Ecosystem with Tejas Kumar
28:59
356
Encapsulation and Styling with Michael Chan
39:53
357
3D Animation in the Browser with Paul Henschel
39:13
358
Best Practices for Maintainers with Jenn Creighton
29:04
359
Breaking into Tech with Samantha Bretous
24:03
360
Best Practices of Server-Side Rendering with Monica Powell
31:56
361
Mock Service Worker (MSW) with Artem Zakharchenko
32:27
362
React and React Native documentation with Rachel Nabors
42:30
363
React Developer Tools with Brian Vaughn
49:12

Unlock unlimited learning

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

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

React & TypeScript Chrome Extension Development [2021]

React & TypeScript Chrome Extension Development [2021]

Sources: udemy
Hi! Welcome to the comprehensive Chrome Extension Development course using modern web frameworks in 2021. This is the only course on Udemy that is focused on bu
8 hours 52 minutes 35 seconds
React Supabase Full Course

React Supabase Full Course

Sources: fireship.io
Build and deploy a full-stack, production-ready web app with Supabase, React, and Postgres. The Supabase Course is a project-based course that builds a Reddit-inspired web app f...
1 hour 39 minutes 49 seconds
Build a Shopping Cart App

Build a Shopping Cart App

Sources: Reed Barger
Gain expert skills to build and deploy an amazing React app. An epic training course that gives you the entire process to build and deploy your own top-tier e-c
1 hour 41 minutes 52 seconds
The Official React Query Course - query.gg

The Official React Query Course - query.gg

Sources: ui.dev (ex. Tyler McGinnis)
React Query has been one of the fastest growing and most popular third party libraries in the React ecosystem, and this course will teach you everything you...
4 hours 17 minutes 17 seconds
Composing Layouts in React

Composing Layouts in React

Sources: fullstack.io
In this course we show you how to build complex layouts in React by composing just a few foundational layout primitives. Along the way you will learn modern CSS Layout tools lik...
4 hours 38 minutes 12 seconds