Epic React – Get Really Good at React | Epic React by Kent C. Dodds 2020-7

Description

Get Really Good at React | Epic React by Kent C. Dodds is the name of a complete workshop for teaching React and using it as a profession, taught by Kent C. Dodds and concluding with a number of interviews on a variety of topics. Building React applications requires that you make your professional decision before writing the first line of code. You are responsible for building a program that can meet the needs of the customer. React is a smart choice for most websites in 2021 and has a lot of flexibility, but depending on the type of use you can be harmful or beneficial, it depends more on your experience.

What in the course Get Really Good at React | You will learn Epic React by Kent C Dodds

Teach the basics of React

React Hooks

Advanced React Hooks

Advanced React Templates

React performance review

Test and evaluate React applications

Introduction to React Suspense

Build a professional React program

Course information

Publisher: Epic React Instructor: Kent C. Dodds English language Level of training: basic to advanced Number of courses: 363 Duration: 27 hours and 55 minutes

Topics

Welcome to Epic React (31m)

Project READMEs and Pre Reqs Clone and Setup Running the Epic React Workshop App File Structure Running Tests Example Runthrough

React Fundamentals (1h 51m)

Basic JS “Hello World” Generate DOM Nodes Extra Credit Solution Generate DOM Nodes Extra Extra Credit Intro to Raw React APIs Raw React APIs Solution Nesting Elements Extra Credit Solution Break Time Using JSX Write Markup with JSX Solution Interpolate className and Children Extra Credit Solution 01 Spread Props Extra Credit Solution 02 Creating Custom Components Render JSX From Functions Solution React.createElement Extra Credit Solution 01 JSX Extra Credit Solution 02 Validation with PropTypes Extra Credit Solution 03 Use prop-types Package Extra Credit Solution 04 React Fragments Extra Credit Solution 05 Styling style Prop Solution Create a Custom Component Extra Credit Solution 01 Accept a Size Prop to Encapsulate Styling Extra Credit Solution 02 Break Time Forms Form Basics Using refs Extra Credit Solution 01 Validate lower-case Extra Credit Solution 02 Control the Input Value Extra Credit Solution 03 Rendering Arrays Render Arrays Solution Focus demo Extra Credit Solution 01 React Fundamentals Outro

React Hooks (2h 24m)

UseState: greeting Set State in React Solution Set Initial Values Through Props Extra Credit Solution useEffect: persistent state localStorage useEffect Solution Lazy State Initialization Extra Credit Solution 1 Effect Dependencies Extra Credit Solution 2 Custom Hook Extra Credit Solution 3 Flexible localStorage Hook Extra Credit Solution 4 Hooks Flow Lifting state Lift State Solution Colocate State Extra Credit Solution useState: tic tac toe Managed and Derived State Solution Preserve State in localStorage Extra Credit Solution 1 useLocalStorageState Custom Hook Extra Credit Solution 2 Add Game History Feature Extra Credit Solution 3 Class Refactor useRef and useEffect: DOM interaction Solution Class Refactor Break Time useEffect: HTTP requests Fetch Data Handle Errors Extra Credit Solution 1 Use a status Extra Credit Solution 2 Store the State in an Object Extra Credit Solution 3 ErrorBoundary Component Extra Credit Solution 4 Re-mount the ErrorBoundary Extra Credit Solution 5 Use react-error-boundary Extra Credit Solution 6 Reset the ErrorBoundary Extra Credit Solution 7 use resetKeys Extra Credit Solution 8 React Hooks Outro

Advanced React Hooks (1h 14m)

UseReducer: simple Counter Simple Counter Solution Accept Step as Action Extra Credit Solution 1 setState with Object Extra Credit Solution 2 Object or Function Extra Credit Solution 3 Traditional Dispatch Object Extra Credit Solution 4 useCallback: custom hooks Extract Logic into Hook Solution useCallback for Memoization Extra Credit Solution 1 Return Memoized run Function Extra Credit Solution 2 Make safeDispatch Extra Credit Solution 3 useContext: simple Counter CountProvider Solution Create a Consumer Hook Extra Credit Solution 1 Caching in Context Provider Extra Credit Solution 2 useLayoutEffect: auto-growing textarea useLayoutEffect Solution useImperativeHandle: scroll to top/bottom Scroll to Top/Bottom Solution useDebugValue: useMedia Label useDebugValue Solution Use the Format Function Extra Credit Solution 1 Advanced React Hooks Outro

Advanced React Patterns (1h 19m)

Context Module Functions Extract Helper Function Solution Compound Components Refactor Toggle Solution Support DOM Component Children Extra Credit Solution 1 Flexible Compound Components Extract State into Context Solution Custom Hook Validation Extra Credit Solution 1 Prop Collections and Getters Object of Props Solution Prop Getters Extra Credit Solution 1 State Reducer Inversion of Control Solution Default State Reducer Extra Credit Solution 1 State Reducer Action Types Extra Credit Solution 2 Control Props Control State with on and onChange Solution Add Read Only Warning Extra Credit Solution 1 Add a Controlled State Warning Extra Credit Solution 2 Extract Warnings to a Custom Hook Extra Credit Solution 3 Don’t Warn in Production Extra Credit Solution 4 Advanced React Patterns Outro

React Performance (2h 14m)

Code Splitting Code Split Solution Eager Loading Extra Credit Solution 1 Webpack Magic Comments Extra Credit Solution 2 Suspense Position Coverage Tool useMemo for Expensive Calculations Wrap a Function in useMemo Solution Production Mode Extra Credit Solution 1 getItems Web Worker Extra Credit Solution 2 React.memo for Reducing re-renders Memoize Components Solution Custom Comparator Extra Credit Solution 1 Primitive Values Extra Credit Solution 2 Window Large Lists with react-virtual Render Large Lists Solution Optimize Context Value Memoize Context Value Solution Separate the Contexts Extra Credit Solution 1 Fix Perf Death by a Thousand Cuts Colocate State Solution Separate Contexts Extra Credit Solution 1 Consuming Components Extra Credit Solution 2 Slice of App State Extra Credit Solution 3 Use recoil Extra Credit Solution 4 Production Performance Monitoring Add Performance Monitoring Solution Use Trace API Extra Credit Solution 1 React Performance Outro

Testing React Apps (2h 3m)

Simple Test with ReactDOM Render Counter Component Solution 1 Test Counter Component Solution 2 Increment and Decrement Buttons Solution 3 Cleaning up Test Environments Solution 4 Add use dispatchEvent Extra Credit Solution 1 Simple Test with React Testing Library Rendering Solution 1 Firing Events Solution 2 Accretions Extra Credit Solution 1 Avoid Implementation Details Screen Utility Solution Browser Interactions Extra Credit Solution 1 Form Testing Exposes a Debug Method to Test Elements Solution 1 Jest Mock Solution 2 Abstract Variables Extra Credit Solution 1 Jest Mock Functions Extra Credit Solution 2 Generate Test Data Extra Credit Solution 3 Allow for Overrides Extra Credit Solution 4 Mocking HTTP Requests Mock Service Worker Solution 1 Mocked Responses Solution 2 Reuse Server Request Handlers Extra Credit Solution 1 Unhappy Path Extra Credit Solution 2 Use Inline Snapshots Extra Credit Solution 3 Use One-off Server Handlers Extra Credit Solution 4 Mocking Browser APIs and Modules Mock Geolocation Solution 1 Act Function Solution 2 Mock the module Extra Credit Solution 1 Context and Custom Render Method Wrapper Component Solution Dark Theme Extra Credit Solution 1 Render Method Extra Credit Solution 2 App Test Utils Extra Credit Solution 3 Testing Custom Hooks Test Functionality of Custom Hook Solution Fake Component Extra Credit Solution 1 Setup Function Extra Credit Solution 2 Using React-Hooks Testing Library Extra Credit Solution 3 Testing React Apps Outro

React Suspense (1h 34m)

Concurrent Mode Simple Data-Fetching React.Suspense Solution Handle Error with Error Boundary Extra Credit Solution 1 Make More Generic createResource Extra Credit Solution 2 Use utils Extra Credit Solution 3 Render as You Fetch Refactor PokemonInfo Solution Error Boundary Positioning Extra Credit Solution 1 useTransition startTranistion and isPending Solution Use CSS Transitions Extra Credit Solution 1 Avoid Flash of Loading Content Extra Credit Solution 2 Cache Resources Cache an Object Solution Put Cache in Context Extra Credit Solution 1 Create a Context Provider Extra Credit Solution 2 Add Cache Timeout Extra Credit Solution 3 Suspense Image Suspend an Image Component Solution Avoid Waterfall Extra Credit Solution 1 Render as You Fetch Extra Credit Solution 2 Suspense with a Custom Hook Create a Custom Suspense Hook Solution Reuse Pre-Built Hook Extra Credit Solution 1 Coordinate Suspending Components with SuspenseList Load States Solution React Suspense Outro

Build an Epic React App (7h 7m)

Walkthrough of Project Setup Render a React App Render Logo and Title Solution Use @reach/dialog Extra Credit Solution 01 Create a LoginForm Component Extra Credit Solution 02 Add Styles Style a Button with Variants Solution 01 Style Input and Formgroup Solution 02 Style with Emotion CSS Prop Solution 03 Use the Emotion Macro Extra Credit Solution 01 Use Colors and Media Queries File Extra Credit Solution 02 Make a Loading Spinner Component Extra Credit Solution 03 Make HTTP Requests Query Data with useEffect Solution 01 Query Data with useEffect Solution 02 Handle Failed Requests Extra Credit Solution 01 Use the useAsync Hook Extra Credit Solution 02 Authentication Wire up Authentication Solution User Data on Page Load Extra Credit Solution 01 Use useAsync Extra Credit Solution 02 Automatically Logout on 401 Extra Credit Solution 03 Support Posting Data Extra Credit Solution 04 Routing Handle Routing Solution Handle URL Redirects Extra Credit Solution-01 Add useMatch to Highlight the Active Nav Item Extra Credit Solution-02 Cache Management Create listItems with React Query useMutation Solution 01 View listItems with React Query useQuery Solution 02 Remove listItems with useMutation Solution 03 Update listItems with useMutations Solution 04 View listItem Data in BookRow with useQuery Solution 05 Update a Book Rating with useMutation Solution 06 Refactor useAsync to useQuery Solution 07 Load and Persist Book Data with useQuery Solution 08 Query with useQuery for listItems in ListItemList Solution 09 Clear queryCache on User Logout Solution 10 Create useBookSearch Custom Hook Extra Credit Solution 01-01 Create a useBook Custom Hook Extra Credit Solution 01-02 Create useListItem(s) Custom Hook Extra Credit Solution 01-03 Reuse Mutation Logic in a Custom Extra Credit Solution 01-04 Reuse Custom Hooks to Reduce Code Extra Credit Solution 01-05 Create and Remove Custom Hook Extra Credit Solution 01-06 useMatch: highlight active nav item Extra Credit Solution 02 Show Error When Request Fails Extra Credit Solution 03-01 React Query Custom Error Handling Extra Credit Solution 03-02 Add a Loading Spinner for the Notes Extra Credit Solution 04 Prefetch the Book Search Query Extra Credit Solution 05 Add Books to the Query Cache Extra Credit Solution 06 Add Optimistic Updates and Recovery Extra Credit Solution 07 Context Create and Provide an AuthContext Solution 01 Grab a Value from Context in a Hook Solution 02 Use Context Value in ListItem Hooks and AuthenticatedApp Solution 03 Expose User Context Value to refetchBookSearchQuery Solution 04 Create a useAuth Hook Extra Credit Solution 01 Create an AuthProvider Component Extra Credit Solution 02 Colocate Global Providers Extra Credit Solution 03 Create a useClient Hook Extra Credit Solution 04 Compound Components Create Compound Components for a Flexible Modal Solution Add callAll Extra Credit Solution 01 Create ModalContentsBase Extra Credit Solution 02 Performance Improve the Time to First Meaningful Paint Solution Prefetch the Authenticated App Extra Credit Solution 01 Memoize Context Extra Credit Solution 02 Custom React.Profiler to Moninitor App Extra Credit Solution 03-01 Add Metadata and Profile Book Screen Extra Credit Solution 03-02 List Item List and Discover Sceen List Extra Credit Solution 03-03 Add Profiling to Production Builds Extra Credit Solution 03-04 Add Interaction Tracing Extra Credit Solution 04-01 Profile All Updates in an Interaction Extra Credit Solution 04-02 Render as You Fetch Fetch User before AuthProvider Mounts Solution Preload All Initial Data Extra Credit Solution 01 Unit Testing Test formatDate Solution 01 Set up a Server to Test Requests Solution 02 Test if a Request has an Auth Header Solution 03 Client Request Config Overrides Solution 04 POST by Default when Body Present and Stringified Solution 05 Automatic Log Out on 401 Error Extra Credit Solution 01-01 Ensure Promise Rejects on Error Extra Credit Solution 01-02 Use setupTests.js Extra Credit Solution 02 Testing Hooks and Components Modal Compound Components Solution 01 Set up useAsync Test with renderHook Solution 02 Wrap an act around an async Function Solution 03 Add an async act to Resolve a Promise Solution 04 Reset React State in a Test Solution 05 Call Run with a Promise That Resolved Solution 06 Can Specify an Initial State Solution 07 Can Set the Data Solution 08 No State Updates if Unmounted Solution 09 Call run without Promise Errors Solution 10 AHA Testing Extra Credit Solution 01 Integration Testing Render the Application with AppProviders Solution 01 Wait for Loading Element to Be Removed Solution 02 Reverse-engineer AuthProvider and Log In Solution 03 Render a Book Page in a Test Solution 04 Test What UI Elements are Present Solution 05 Isolate Tests by Cleaning up State and Cache Solution 06 Create Mock msw Server Extra Credit Solution 01 Write Second Integration Test Extra Credit Solution 02 Abstract Functionality Extra Credit Solution 03-01 Custom Render Function Extra Credit Solution 03-02 Global Utils Extra Credit Solution 04 Can Remove List Item for Book Extra Credit Solution 05-01 Can Mark a List Item as Read Extra Credit Solution 05-02 Can Edit a Note Extra Credit Solution 05-03 Use Jest Fake Timers Extra Credit Solution 05-04 Set up Mock Profiler for Tests Extra Credit Solution 05-05 Create Component-Specific Utility Extra Credit Solution 06 Show Error when Load Fails Extra Credit Solution 07-01 Scope Hooks to Describe Block Extra Credit Solution 07-02 Update Failures are Displayed Extra Credit Solution 07-03 E2E Testing Register a User in Cypress Solution 01 Find and Add a Book to Reading List Solution 02 Mark Book as Read and Rate Solution 03 Remove Book from Reading List Solution 04 Build an Epic React App Outro Creating Open Source Libraries with Tanner Linsley Animations and Interactions with Josh Comeau Next.js and Vercel with Guillermo Rauch Building React-based Design Systems with Ben Ilegbodu The React Ecosystem with Tejas Kumar Encapsulation and Styling with Michael Chan 3D Animation in the Browser with Paul Henschel Best Practices for Maintainers with Jenn Creighton Breaking into Tech with Samantha Bretous Best Practices of Server-Side Rendering with Monica Powell Mock Service Worker (MSW) with Artem Zakharchenko React and React Native documentation with Rachel Nabors React Developer Tools with Brian Vaughn

Epic React Expert Interviews

Creating Open Source Libraries with Tanner Linsley (39m) Animations and Interactions with Josh Comeau (37m) Next.js and Vercel with Guillermo Rauch (40m) Building React-based Design Systems with Ben Ilegbodu (34m) The React Ecosystem with Tejas Kumar (28m) Encapsulation and Styling with Michael Chan (39m) 3D Animation in the Browser with Paul Henschel (39m) Best Practices for Maintainers with Jenn Creighton (29m) Breaking into Tech with Samantha Bretous (24m) Best Practices of Server-Side Rendering with Monica Powell (31m) Mock Service Worker (MSW) with Artem Zakharchenko (32m) React and React Native documentation with Rachel Nabors (42m) React Developer Tools with Brian Vaughn (49m)

Prerequisite

This is intermediate/advanced material.

Epic React is not for novice developers.

We assume the following about your experience:

Strong understanding of modern JavaScript and, more generally, web development (HTML/CSS) – we won’t spend time remediating the basics in this self-paced workshop collection.

Willingness to do the work actively this isn’t a passive course, and you won’t be successful if you don’t make an effort. It’s very challenging.

Installation

After Extract, watch with your favorite Player.

Subtitle: None

Quality: 1080