Mastering Maintainable React

Explore ES6 variable declarations using let and const, and contrast them with var. Discover that let is mutable while const cannot be reassigned, yet object properties within const can change.

Explore six ES6 patterns for objects and arrays, including arrow functions, template literals, default parameters, destructuring, and spreading. Learn aliasing and rest techniques and see React examples with CodeSandbox exercises.

Explore how JavaScript arrays use filter, map, and reduce to extract subsets, transform elements, and summarize data with practical examples using a user array.

Master the essentials of TypeScript, including type definitions and primary types like string and number. Explore optional fields, unions, and exporting or importing types for safer React code.

Master React basics in a concise overview: build declarative UIs with components and props, render lists with keys, handle events, and manage state with useState using JSX and className.

Learn to spot code smells in React, including long functions, long props lists, divergent changes, shotgun surgery, and data clumps, and explore refactoring to improve readability and testability.

Learn how to replace boilerplate raw for loops with JavaScript collection APIs like map, using higher-order functions to transform lists efficiently and improve readability.

This lecture spotlights code smells in a real-world payload generation function, explains why practices like using booleans, in-place loops, and untyped breakdown items are risky, and previews refactoring strategies.

Learn refactoring as a test-preserving technique to improve code readability and modifiability. Apply renaming, moving, extracting variables or functions, and inlining, guided by Fowler, to produce clearer, maintainable code.

Refactor to remove boolean parameters, prefer explicit function names like payload and payload with arrow, reuse payload logic with spread, reduce duplication for clearer React API.

Refactor the critical payload by extracting a named function to get the last span end time, using ES6 destructuring to pull spans from data and apply shorthand.

Learn to refactor React code by extracting a functional contact component and its detail subcomponent to improve readability and reusability, using props for name, row, and team.

Identify code smells and apply common refactorings to a row sorting example. Convert let to const, replace for loops with map, rename and extract functions, and introduce constants for readability.

Learn to write tests in a simple calculation example using code sandbox, implementing an add(a,b) function, creating calculation dot tests, and validating with jest by asserting 5 from 2+3.

Learn to structure tests and test cases with nested describe blocks in Jest, using before each and after each, and selectively run tests with only or skip to debug efficiently.

Apply test-driven development with React Testing Library to build and test a header component. Render components, query the DOM, and simulate user events to verify behavior.

Demonstrates applying TDD in React with the React testing library to type a comment in an input, click save, and render the new paragraph via user events.

Explore the compose principle by building a stack view that decouples header and footer from content, enabling props such as show account and avatar while keeping the component highly composable.

Set up your local environment with NodeJS and NVM, then use create-react-app to scaffold a TypeScript-enabled React project, start the app, and explore the project structure.

Develop and test a to-do list feature in React using a test-driven approach, adding items, marking them as done, searching, filtering, and removing with accessibility shortcuts and a theme toggle.

Refactor a to-do app by extracting a list component and an input component to separate rendering from input handling, and implement an on item added callback.

Mastering maintainable react teaches you to implement click-to-complete in a to-do list by adding a completed flag, data-completed attribute, and a parent-driven toggle with css styling.

Refactor by extracting a custom useTodos hook to manage the todos list, exposing add, toggle, and delete operations and separating data manipulation from rendering.

Learn to add a todo summary with total, completed, and active counts, enable filtering by category, and maintain a single source of truth with a memoized display.

Polish the UI to display total, completed, and active counts using a flex aggregation and labels, then extract an aggregation subcomponent driven by a useMemo-based object and the switchCategory function.

Mastering maintainable React demonstrates implementing keyword search for a todo app, using useMemo for active and completed lists, managing a query state, and introducing a reusable search box.

Enhance accessibility with keyboard navigation, color contrast considerations, and clear placeholders for the to-do and search inputs, while refactoring into reusable hooks and components.

Mastering maintainable React teaches Mirage.js to mock API calls in tests, spin up a lightweight mock server, and simulate order status changes that enable a button.

Implement robust error handling and a fallback UI for the order status feature by simulating server errors with Mirage, handling 500 responses, and rendering actionable messages and a call button.

Extract hooks to encapsulate network logic, creating use fetch order to manage status, and move shared logic to utils while separating the network request from rendering.

Implement a retry-enabled 'I'm here' button that notifies the store via an API and hides on success, using periodic polling and a retry counter to handle long-running readiness.

Use react query to simplify network status checks by installing the package, wrapping your app with a query client provider, and using useQuery for order status with retries.

Configure react-query in tests by wrapping the app in a query provider, customize render, and adjust default query retry options to zero delay and a three-second timeout, ensuring tests pass.

Implement a notify store feature in React using useMutation to post an order id, update status to notified, and hide the button once the request succeeds.