Epic React (Epic React Pro)

27:57:10 Inglés Premium 20/11/2023 363 videos

Descripción del curso

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

Curriculum

Section 1: Module 1

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

About the Instructor

Kent C. Dodds

$0.00

$8.00

Que esta incluido?

Streaming Multiplataforma
Acceso de por vida
Soporte al cliente
Actualizaciones gratuitas