React & TypeScript - The Practical Guide

Explore TypeScript's built-in primitive types, including string, number, and boolean, and learn how type inference and explicit typing help manage these essential values.

Learn how to compile TypeScript with the tsc command or npx tsc, turning typed code into JavaScript for browser or Node.js, and relying on IDE errors during development.

Learn how to use union types in TypeScript to allow a variable to be either a string or a number, using the pipe symbol, as shown with a userID.

Define and use TypeScript array types to store string, number, boolean, or object values; explain generic typing, union types, string[] shorthand, and build a solid TypeScript foundation for React.

Define object types with the interface keyword in TypeScript, using credentials as an example, and compare it to the type keyword while highlighting IDE support.

Learn how to merge object types in TypeScript by using the & operator to create AppAdmin from Admin and AppUser, ensuring permissions and username properties, and compare with interface extends.

define a custom role type as a union of admin, user, and editor, then implement guards that execute actions only when the role matches and the action type is string.

Connect TypeScript to React by building a basic demo project, then explore components, props, events, state, forms, and refs to establish a solid React and TypeScript foundation.

Create a course goal component in tsx, export it, and render it in the app, using props with explicit types to satisfy strict mode.

Learn to define a props type that includes the React children using the React node type or the props with children helper in TypeScript.

Learn how to extract input values with useRef in TypeScript by creating null-initialized refs, typing them as HTMLInputElement, and safely accessing current.value for form handling.

Master essential TypeScript and React concepts to build components, type props, and manage state with proper typing, while handling events and user input with refs for robust data flow.

Learn to build wrapper components that accept all native input props via ComponentPropsWithoutRef, merge custom props with built-in ones, and spread them onto the input for flexibility.

Turn a custom input into a forwardRef component in React with TypeScript. Use forwardRef and generics to type the ref as HTMLInputElement and pass props correctly.

Build a custom React form wrapper in TypeScript that forwards standard form props to a native form and handles submission logic. Use it with input components and a custom button.

Learn to access and type-safely consume React context using a custom hook, useTimersContext, which wraps useContext and guards against null, enabling start timers and stop timers controls.

Explore useReducer to manage TimersState with a timersReducer and dispatch actions such as add timer, start timers, and stop timers, using action objects and union literal types.

Finish the timers app by adding a key side effect with useEffect in React and TypeScript, then explore HTTP requests, data fetching, and responses in a TS project.

Create a timer in the timer component using setInterval to update remaining time and a progress bar, converting duration to milliseconds and refreshing every 50 ms; note a major flaw.

Create a reusable get function in a TypeScript util to fetch data with the browser's fetch, handle responses, throw on errors, and return json as unknown.

Wrap the app with the React Redux provider to expose the Redux store across components, import and export the store, and learn how to dispatch actions that trigger reducers.