Epic React (Epic React Pro)

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