Epic React (Epic React Pro)

Name: Epic React (Epic React Pro)
Price: 12.75 USD
Availability: InStock
Rating: 2.5 (2 reviews)

27h 57m 10s

English

Paid

November 20, 2023

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.

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

Additional

That was Epic for CH. Thank you for your patience.

About the Author: Kent C. Dodds

Kent C. Dodds is a US developer and one of the most influential modern voices on JavaScript testing and the React ecosystem. He is the creator of Testing Library (the de-facto standard for testing React components), EpicReact.dev, EpicWeb.dev, and previously authored the Testing JavaScript course on egghead.io. His teaching has anchored a generation of React developers' approach to component testing and modern React patterns.

His paid course catalog covers React in depth (Epic React: hooks, advanced patterns, performance, suspense, the App Router era), the testing tracks (Epic Web's testing course, the original Testing JavaScript material), TypeScript with React, and the broader full-stack JavaScript craft. Material is taught at the level of a working senior React engineer.

The CourseFlix listing under this source carries 5 Kent C. Dodds courses spanning that range. Material is paid; Kent's courses run on per-course or membership pricing on the original platforms (EpicWeb / EpicReact). Courses are aimed at intermediate-and-up React developers.

Watch Online 363 lessons

0:00

#1: Welcome to Epic React

All Course Lessons (363)

#	Lesson Title	Duration
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

Course content

363 lessons · 27h 57m 10s

Show all 363 lessons

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

Related courses

Classic
React Query
By: UI.dev (Tyler McGinnis)
Learn React Query with the official React Query course. WANT TO SKIP THE DOCS? There s an easier way to master React Query.
7 hours 1 minute 30 seconds 5 / 5
FreeUpdated 9mo ago
React JS 19 Crash Course | Build an App and Master React in 2 Hours
By: JavaScript Mastery, Adrian Hajdin
This course offers a practical approach: clear explanations, real tasks, and necessary tools, so you can not only understand but also immediately apply the new.
2 hours 7 minutes 16 seconds
Updated 2y ago
Building Applications with React 17 and ASP.NET Core 6
By: Udemy
With ASP.NET Core we can develop Web APIs using C#. With React you can create modern, fast and flexible web applications. In this course we will use both tools
19 hours 28 minutes 31 seconds

Frequently asked questions

What is Epic React (Epic React Pro) about?

Who teaches Epic React (Epic React Pro)?

Epic React (Epic React Pro) is taught by Kent C. Dodds. You can find more courses by this instructor on the corresponding source page.

How long is Epic React (Epic React Pro)?

Epic React (Epic React Pro) contains 363 lessons with a total runtime of 27 hours 57 minutes. All lessons are available to watch online at your own pace.

Is Epic React (Epic React Pro) free to watch?

Epic React (Epic React Pro) is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.

Where can I watch Epic React (Epic React Pro) online?

Epic React (Epic React Pro) is available to watch online on CourseFlix at https://courseflix.net/course/epic-react-epic-react-pro. The page hosts every lesson with the integrated video player; no download is required.

Epic React (Epic React Pro)

Additional

About the Author: Kent C. Dodds

React Query

React JS 19 Crash Course | Build an App and Master React in 2 Hours

Building Applications with React 17 and ASP.NET Core 6