React & TypeScript - The Practical Guide

Learn how to install and use TypeScript, compile to JavaScript for the browser, and prepare for using TypeScript with React, via per-project or global setup with npm, npx, and Node.js.

Learn to use TypeScript with type inference and explicit type annotations using colon syntax to prevent errors and enforce strict typing between string and number values.

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 a typed object in TypeScript to enforce a specific shape, including name, age, isAdmin, and id, using string, number, boolean, and union types for strong type safety.

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.

Learn how to add types to functions in TypeScript by specifying parameter and return types, apply type inference to variables and constants, and distinguish void from undefined for type-safe code.

Create custom types in TypeScript using the type keyword to define aliases for functions, unions, and objects. Reuse these aliases across code to simplify long type definitions and improve readability.

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.

Explore when to use type aliases versus interfaces in TypeScript, including implementing interfaces in classes, using interfaces as contracts, and declaration merging for library extensibility.

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.

Explore literal types in TypeScript, using string and number literals to constrain a role variable to admin, user, or editor, and combine them with union types to allow multiple values.

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.

Explore generic types in TypeScript, from built-in generics like Array to custom DataStorage, with type placeholders, generic functions, and type inference for safer, type safe, and flexible code.

Apply TypeScript fundamentals to build a React project, showing how core concepts integrate with React and how to use TypeScript in React.

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 React and TypeScript project using vite, configure tsconfig.json, and write .tsx code that the build process compiles and optimizes for production.

Understand the tsconfig.json as TypeScript’s configuration for the compiler and IDE, including strict mode and error reporting. Run npm install and npm run dev to view the app at localhost:5173.

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

Define component props as a typed object with title and description, use destructuring to access props, and rely on TypeScript for type safety when passing props in React.

Define the props with a custom type using a type alias or an interface to improve readability in React and TypeScript, noting interfaces can be more extensible for library distribution.

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

Master typing props in React and TypeScript by exploring an alternative constant arrow-function component syntax using FC to type props and extract title and children.

Create a reusable header component in a React TypeScript project that takes an image prop (src and alt) and wraps around an h1 element containing your course goals.

Learn to manage dynamic state in a React app using useState with TypeScript, creating a CourseGoal type and empty goals array, updating goals on button click via handleAddGoal.

Update state using the functional form to append a new goal, then map the goals array to CourseGoal components with proper typing and unique keys.

Learn to refactor a React and TypeScript app by extracting the course goal list into a reusable component, passing goals via props, and reusing a shared CourseGoal type across files.

Learn to delete goals in a React and TypeScript app by passing a type-safe onDelete handler through CourseGoalList to CourseGoal, using id-based filtering and proper onClick wrapping.

Create a new goal form in React and TypeScript with a NewGoal component, two text inputs for your goal and short summary, and a typed FormEvent for onSubmit.

Explore how to extract form values in React with TypeScript using FormData and type the form event with HTMLFormElement for reliable data handling, preparing for useRef in the next lecture.

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.

Pass typed enteredGoal and enteredSummary from the NewGoal component to the App's handleAddGoal function via an onAddGoal prop, enabling type-safe two-string inputs. Reset the form after submission using event.currentTarget.reset.

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.

Dive into building more complex, type safe React components with TypeScript. Type content based on props, create wrapper and polymorphic components, and use forwarded refs to expose APIs.

Build a dynamic info box in React with TypeScript. Use a typed InfoBox component and a mode prop (hint or warning) for conditional rendering and styling.

Explore implementing a severity prop for the InfoBox in React with TypeScript, using union and literal types to drive dynamic class names and prevent undefined styling.

Learn to build a flexible info box component in React and TypeScript using a discriminated union to require severity only in warning mode, while hint mode uses lighter props.

Start a new project by adding a components folder and building a custom input component, while exploring advanced TypeScript features for a complete React demo.

Build a custom Input component that wraps a built-in input with a label. Configure label and id props to connect label to the input using HtmlFor in React TypeScript.

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.

Build a wrapper button component that renders a button or anchor via a discriminated union using an el prop, then merge ButtonProps and AnchorProps with ComponentPropsWithoutRef for type safety.

Create a single flexible button component that renders either an anchor or a button, using a type predicate to guide TypeScript types and ensure correct prop handling.

Develop a polymorphic wrapper component that renders any target component through an as prop and ElementType.

Explore building a polymorphic component with generics in React and TypeScript, accepting children as ReactNode, using as to render different elements, and merging props via ComponentPropsWithoutRef.

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 handle form submissions in React with TypeScript by building a reusable form wrapper, extracting data with FormData, and using unknown and as casting to pass data upward.

Expose a component API with useImperativeHandle and forwardRef in a TypeScript React Form, adding a clear method that resets the underlying HTMLFormElement via a FormHandle type.

Master advanced React patterns by handling forwarded refs, polymorphic components, and generic types to build type-safe wrapper components that minimize TypeScript complaints.

Explore advanced state management in React by using the Context API and the useReducer hook to build a timer demo app with multiple timers, enhanced by TypeScript.

Adjust the starting project by moving components into a ui components subfolder and adding the AddTimer form from a custom form with inputs, button, and TypeScript submission that registers timers.

Explore how to use the ReactJS context API to share cross-component state, define timers state and context value with TypeScript types, and implement addTimer, startTimers, and stopTimers across the app.

Create a type-safe TimersContextProvider that wraps app components with TimersContext.Provider, supplying a TimersContextValue (timers, isRunning, addTimer, startTimers, stopTimers) for centralized context access.

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.

Learn to use useReducer with React context to manage a timers state in TypeScript, defining initialState, reducer function, and the isRunning and timers properties.

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.

Learn how to manage state with a reducer in React and TypeScript by handling Start Timers, Stop Timers, and Add Timer actions, while immutably updating isRunning and the timers array.

Apply discriminated unions to model reducer actions in TypeScript, defining distinct actions (start timers, stop timers, add timer) with a non-optional payload to ensure type-safe access to action.payload.

Use context and reducer to manage timer state, toggle between start and stop with on click, add timers by converting duration from string to number, and render a timer list.

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.

Learn to manage timers and side effects in React with useEffect and TypeScript, preventing infinite loops by moving interval setup into an effect and formatting remaining time.

Learn to stop a timer when remaining time reaches zero by using a useRef to store the interval and a useEffect cleanup function to clear it under React strict mode.

Use useEffect with a dependencies array to start and stop timers based on a running state. Access the global timers context via a custom hook to manage intervals and cleanup.

Learn to fetch data in a React and TypeScript app with the native fetch API, building a component and a helper to display blog posts, and consider TanStack Query.

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.

Fetches data from jsonplaceholder using a get function, stores and transforms it into blog posts with id and title, then renders them in the blog posts component.

Enable loading and error handling in a React and TypeScript app by using an isFetching state and a loading fallback. Catch fetch errors with try-catch and display an error message.

Explore how to integrate Redux with TypeScript in a React project, including setup, state management, and dispatching actions to replace Context API for global state.

Begin with a prepared code sandbox starting project for a dummy online shop; learn to implement redux for cart updates and a modal cart rendered with React portals.

Install Redux Toolkit and react-redux via npm to connect your React app to a Redux store, then start the development server and set up global state management.

Learn how to set up a Redux store with @reduxjs/toolkit, create a cart slice using createSlice, and integrate reducers to manage a global cart state.

Define a cart state with TypeScript by creating CartState and CartItem, initialize an empty items array, and implement reducers like addToCart and removeFromCart.

Explore how to implement reducers triggered by dispatched actions, wire an add to cart flow, and use PayloadAction with a typed payload (id, title, price) to produce a mutable CartState.

Add items to the cart in a React and TypeScript reducer by updating quantities or pushing new items with a payload id, using findIndex and mutating state with Redux Toolkit.

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.

Explore dispatching actions with Redux toolkit, using cartSlice actions to create action objects and dispatch them via a type-safe custom hook, enabling add to cart with id, title, and price.

Create a type-safe useSelector hook for Redux by exporting a custom useCartSelector, using the TypedUseSelectorHook, and deriving store data types with RootState via the ReturnType of getState.

Use the custom useCartSelector to extract cart data, compute the total quantity with reduce, and render it in the header button. Dispatch actions to update the UI on state changes.

Finish the cart by rendering cart items via useCartSelector, compute a formatted total price with reduce and toFixed, and wire addToCart and removeFromCart actions using CartItem types in Redux TypeScript.

Practice applying React and TypeScript by building a demo app that lets users browse, sign up for, book, view, and cancel coaching sessions, using the provided starting project and resources.