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

Join premium to watch
Go to premium
# Title Duration
1 Welcome to Epic React 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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Learn React Hooks By Building A Real Application

Learn React Hooks By Building A Real Application

Sources: reacttraining (Ryan Florence)
Learn React Hooks by building key features of a realistic app. After teaching this content to thousands, we've packaged it up into and on-demand course just for
7 hours 14 minutes 44 seconds
The Road to Next

The Road to Next

Sources: Robin Wieruch
As a full-stack developer, you have numerous opportunities. Whether it's launching a successful startup, building a career in a corporate company, or working...
30 hours 40 minutes 42 seconds
Django with React | An Ecommerce Website

Django with React | An Ecommerce Website

Sources: Brad Traversy
Build an eCommerce platform from the ground up with React, Redux, Django & Postgres. In this course, we will build a completely customized eCommerce / shopping cart application ...
18 hours 6 minutes 7 seconds
React Chrome Extension boilerplate | Shipped

React Chrome Extension boilerplate | Shipped

Sources: Luca Restagno (shipped.club)
Launch your Chrome Extension in hours, not weeks. The boilerplate for busy makers, to launch your React Chrome Extensions fast. ou don't need to reinvent the wheel and code ever...
Build a Notion Clone with React and TypeScript

Build a Notion Clone with React and TypeScript

Sources: zerotomastery.io
Master React and TypeScript by building a Notion clone. Learn to use Vite for project setup and Supabase for database management. Showcase your skills with a
7 hours 57 minutes 47 seconds