 Courses from Chance Strickland

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

For older applications, it's likely that you have some Class components. TypeScript works a little differently with these. The React.Component class is a generic class and it takes the props type as its first type argument. We will write out an alias for our props that I'll pass in the type argument space for the class. Child classes can also implement their own various methods for overriding parent methods, we'll also want to explicitly type the props in our constructor. 

With that, you've finished my course! Congratulations and thank you for taking it!

Use TypeScript to Type a React Class Component

Our `Radio`component file contains several compound components to create a related group of radio inputs. The `RadioGroupContext` is receiving a type of `any` currently.

This is a great example to peer into how Strict mode works. To see the difference between the strict mode's true and false setting, we will set `strict` to `true`. This will change our `RadioGroupContext` to be of type `null` which will raise some issues later down the line where trying to destructure an object that might be null. 

This also gives us the opportunity to better our application with error handling. I will write out a couple of custom hooks to help out with that.

Type a Radio Button Component in React using TypeScript

We get the state of our board from a `reduce` function. It currently has no error but also has no type safety since everything is inferred to be of type `any`. `useReducer` is generic and accepts type arguments, describing the state as well as the events it can expect to receive. 

The simplest way to add types to a `useReducer` is to add them directly to the `reducer` function itself. We will do this by using an alias for our types.

Use TypeScript to Type React useReducer

Previously, I added some type information for the utility function we are going to look at. By clicking on the function, a lightbulb appears. We can click that and select `Annotate everything with types from JSDoc`. Thanks to our plugin, it will type our function for us. It's not always perfect so double check to make sure it's exactly as you would like. 

Along with the utility function, we are going to look at how to type a `useMemo` hook, a `useCallback` hook, a `useRef` hook, a `useState` hook, and a custom hook.

Type React Hooks using TypeScript

We are going to start refactoring our `CountDisplay` component. It is a small stateless component but it has a few props that can benefit from type safety. 

There are three ways to type a component, inline, alias, and as a function expression. The inline typing adds a bit of noise to our code and can make it difficult to parse right out of the gate. To fix this, we use a type alias that reads a little bit nicer. To add in a function expression, which we get from the React Types that we downloaded, we can declare this variable to have a type of `React.FunctionComponent` which takes as a type argument, our props.

Refactor a React Component using TypeScript

There are a bunch of different ways that you can compile TypeScript and how you go about doing it will depend largely on what build tooling that you use. Since I'm using `rollup` and `babel` already to transpile my TypeScript code, I think it makes sense to utilize babel's typescript preset to handle all of our TypeScript compilation as well. So we will install it with `npm i -D @babel/preset-typescript` and configure it in our `rollup.config.js`.

Configure Build Tools to Work with TypeScript

First things first, let's install TypeScript in our project locally using `npm i -D typescript`. Next, I need to install our type dependencies. We could write our own types, but using type dependencies will speed this up and ease our process. So we will install those types using `npm i -D @types/react @types/react-dom`. 

To have TypeScript in our project, we need to create and configure a `tsconfig.json` file. In this lesson, we will quickly configure the basics.

Install and Configure TypeScript and Dependencies

The pluggable linting utility for JavaScript and JSX.

eslint

One of the other tools I use is Emmet. It's used for writing HTML much more quickly by using shorthand. It can also be used for JSX. VSCode also supports ESLint which we will use and configure in our VSCode `settings.json`. I will also set up Prettier as my default formatter for TypeScript and TypeScript React files. 

Configure Emmet, ESlint, and Prettier Extensions

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

typescript

To enhance our experience for coding, we are going to install a couple of extensions for VSCode, the TypeScript Importer and JavaScript and TypeScript Nightly. 

The TypeScript Importer helps you search your project's TypeScript paths as you type to look for models that it can auto-import. 

The JavaScript and TypeScript Nightly tells VSCode to use the very latest version of TypeScript available as its built-in TypeScript version. Only use this when you don't have a local version of TypeScript installed in your project.

Download TypeScript Importer and Javascript and TypeScript Nightly for VSCode

Let's run through the file structure so that you understand what is going on in our application. We will quickly view the src directory which houses our `lib`, `styles`, and `UI`. This course will focus on the components in the `UI` folder. 

Generally, I would start off an application using `create-react-app` which will build out all of the file structure for us for TypeScript but this course will teach you how to implement TypeScript in an already built application.

Walkthrough of the Refactoring Project

This course is split up into two main parts. The first half is the TypeScript compiler and how it fits into your existing build infrastructure and local dev environment. The second half is about refactoring your JavaScript code to TypeScript. 

This course is not an intro to React or TypeScript. If you are struggling to follow along because of this, try checking out one of the intros to React or TypeScript courses here on egghead.

Refactor a React Application to TypeScript

## Intro

TypeScript has been growing in popularity among companies who build their products with React, and for good reason!

Types play nicely when working with components, and lead to a super smooth developer experience.

But what if your application is already being shipped and continuously deployed? It doesn't mean you can't take advantage of everything TypeScript has to offer.

Refactoring an application to TypeScript doesn't have to be daunting. Follow Chance's lead, and you'll be well on your way!

The course starts with an overview of some of Chance's favorite tools and their TypeScript-specific settings. These tools will help you search your project's TypeScript paths for auto-importing, a shorthand tool for writing JSX and TypeScript to speed up your writing, and a tool for helping you to maintain your code to a high quality.

The tools are Emmet, ESLint, Prettier, and a variety of VSCode extensions. There's even some rollup and Babel thrown in for transpiling and compiling our TypeScript to make configuration and build setup a breeze.

## The Project

![https://res.cloudinary.com/dg3gyk0gu/video/upload/e_loop/q_100/v1639426695/course-resources/refactor-react-components-to-typescript-c70bffa0/landing-page-gif.gif](https://res.cloudinary.com/dg3gyk0gu/video/upload/e_loop/q_100/v1639426695/course-resources/refactor-react-components-to-typescript-c70bffa0/landing-page-gif.gif)

Once the tooling is in place, Chance works through converting a completely functional Windows 98-style Minesweeper game away from JS React into one that takes advantage of the power of TypeScript. It'll be clear how changing the JS to TS will not affect the functionality of the game at all but improves the safety of your app. 

Topics in the second half of the course include component refactoring as well as adding types to React Hooks, useReducer, and Context. You'll even see how to add types to a legacy Class component!

Chance has several years of experience working with component libraries and this is your opportunity to learn from his experience and apply his process to your own.

## Gain these Skills

Chance will give you the knowledge of how to incorporate TypeScript into any React application, whether it's shipped and continuously deployed or not. You'll take the practices and tools that you learn here to be much more productive in your TypeScript, wherever you use it. Lastly, He will give you the knowledge of when you see React Types vs your own custom types. 

## Prerequisites

This is not an introduction to React or TypeScript course. You will need to have a basic understanding of the two to be able to follow along. If you don't have that basic understanding, or just want a refresher on the subjects, [The Beginner's Guide to React](https://egghead.io/courses/the-beginner-s-guide-to-react) and [Up and Running with TypeScript](https://egghead.io/courses/up-and-running-with-typescript) are the best two places to start. 

## What's Next?

**[The Beginner's Guide to React](https://egghead.io/courses/the-beginner-s-guide-to-react)** is the best place to go if you are just starting out in React. This course by Kent C. Dodds covers all the basics to get you up and running with React. 

**[Advanced TypeScript Fundamentals](https://egghead.io/courses/advanced-typescript-fundamentals-579c174f)** by Marius Schulz will take you beyond the basics to teach you some new language features TypeScript has to offer courtesy of the wonderful team over ta TypeScript.

[TypeScript: Tips and Tricks](https://egghead.io/courses/typescript-tips-and-tricks-20c4) by Kamran Ahmed is where to go once you've started using TypeScript but looking for that little something to take it to the next level.

Cursor's default inline edit (`Cmd+K`) has scope limitations, and using the full chat (`Cmd+I`) for simple refactors can be overly conversational. This lesson demonstrates how to create a custom chat mode specifically configured for direct code editing. By setting up a dedicated mode with custom instructions and a keybinding (like `Cmd+E`), you can bypass unnecessary AI chatter and apply targeted, file-aware modifications more efficiently than standard methods.

**Workflow Demonstrated in this Lesson:**

*   Create a "Custom Mode" within Cursor's chat interface.
*   Assign a name (e.g., "Edit") and a preferred AI model.
*   Set a dedicated keybinding (e.g., `Cmd+E`).
*   Configure allowed tools (enable `Edit`, disable `Run`/`MCP`).
*   Use "Advanced options" to enable `auto-run`.
*   Add "Custom instructions" to prompt the AI for direct edits without explanation.
*   Trigger the mode with the keybinding on a code selection to perform edits beyond the selection's scope (e.g., hoisting variables).

**Key Benefits:**

*   Perform refactors and edits beyond the scope of the initial selection, overcoming `Cmd+K` limitations.
*   Achieve a more direct, less "chatty" AI editing experience compared to standard chat (`Cmd+I`).
*   Streamline common AI-assisted modifications with a dedicated keybinding.
*   Gain fine-grained control over the AI's editing behavior using custom instructions.

**Want to Learn More? Sign-up for my Cursor Workshop!**

[https://egghead.io/workshop/cursor](https://egghead.io/workshop/cursor)

John Lindquist

Build a Better Edit Tool in Cursor with Custom Agent Modes

Stop waiting for a single AI agent! This lesson demonstrates a powerful workflow to massively parallelize your AI-driven development in Cursor. Learn how to use tools like `file-forge` to package your project context, prompt advanced AI models (like Gemini in AI Studio) to brainstorm features and generate setup scripts, and then leverage a custom `git worktree` CLI tool (`wt`) to automatically launch an "army" of isolated Cursor instances, each tackling a different task on its own branch.

**Workflow Demonstrated / Key Benefits:**

*   **Bundle Project Context:** Use `file-forge` to create an AI-friendly representation of your codebase.
*   **AI-Powered Brainstorming & Scripting:** Prompt a reasoning model (e.g., Gemini via AI Studio) to suggest features *and* generate a shell script (`zsh`/`bash`) to automate setup.
*   **Automated Worktree Creation:** Execute the generated script which uses a custom `git worktree` CLI (`wt`) to:
    *   Create new branches and worktrees for each suggested feature.
    *   Install dependencies automatically (e.g., `pnpm install`).
    *   Launch multiple, isolated Cursor instances.
*   **Parallel AI Development:** Assign different features or implementation approaches to each Cursor agent (Composer) simultaneously.
*   **Efficient Monitoring:** Easily switch between active Cursor projects/worktrees using `Ctrl+R` or OS spaces.
*   **Seamless Integration:** Merge completed features back into your main branch using `wt merge` or use agents to commit, push, and create Pull Requests via the GitHub CLI (`gh pr create`).
*   **Boost Productivity:** Dramatically speed up iteration and experimentation by running multiple AI agents concurrently without conflicts.

This approach transforms your workflow, allowing you to explore multiple development paths simultaneously and integrate the best results efficiently using standard Git practices.

**Resources** 

[https://www.npmjs.com/package/@johnlindquist/worktree](https://www.npmjs.com/package/@johnlindquist/worktree)
[https://www.npmjs.com/package/@johnlindquist/file-forge](https://www.npmjs.com/package/@johnlindquist/file-forge)

**Want to Learn More? Sign-up for my Cursor Workshop!**

[https://egghead.io/workshop/cursor](https://egghead.io/workshop/cursor)

Swarm Intelligence: Massively Parallelize Your AI Agents in Cursor

Creating powerful and context-aware tools for Cursor IDE becomes straightforward when leveraging information directly from your current project. In this lesson, you'll learn how to build a custom MCP (model context protocol) tool that intelligently requests essential details—such as the current project path and conversation summaries—from your Cursor project.

Workflow demonstrated in this lesson:

- Define MCP tool parameters to request specific project details.
- Pass project path and conversation summaries into your MCP tool.
- Automatically write or update files within your current project using these parameters.

Key benefits:

- Automate tasks with precision based on your active project's context.
- Simplify interactions by creating AI-driven CLI commands tailored to your needs.
- Open endless possibilities for integrating external APIs and advanced automation.

Through this practical demonstration, you'll gain a versatile technique for enhancing your development workflow in Cursor IDE.

[https://github.com/johnlindquist/mcp-cursor-tool-starter](https://github.com/johnlindquist/mcp-cursor-tool-starter)

Build MCP Tools Using Project Context for Custom Cursor IDE Automation

Setting up custom MCP (Machine Command Protocol) servers in Cursor can involve tedious steps, such as configuring node paths or referencing additional commands. This lesson shows how to streamline this process by bundling your MCP server directly into a standalone executable.

Workflow demonstrated in this lesson:

- Use a simple MCP server project starter.
- Run a single bundling command to create an executable.
- Right-click the generated executable, copy its full path, and add that directly to your Cursor settings.

Key benefits:

- Eliminates the need for complex node path configurations.
- Simplifies the setup and integration of custom MCP servers into Cursor.
- Makes the server executable instantly accessible within your Cursor environment.

By following this streamlined approach, you can quickly and easily integrate custom MCP servers into Cursor, making your development workflow cleaner and more efficient.

[https://github.com/johnlindquist/mcp-cursor-tool-starter]()

Easy MCP Server Setup in Cursor IDE with Bundled Executables

TanStack Router is the foundation for TanStack Start, which is gaining significant attention due to its innovative approach to application development.

This course focuses on getting effective TanStack Router, a modern and scalable routing solution for React applications. You will learn how to:
- set up and scaffold new applications,
- use file-based routing
- create nested routes
- manage dynamic route parameters and more.

The course covers advanced features like route loaders, caching strategies, and lifecycle hooks, which are crucial for enhancing application performance and user experience.

By understanding TanStack Router, you can build more efficient, type-safe, and maintainable applications, leveraging its integration with data fetching libraries like TanStack Query.

This knowledge is essential for developers looking to improve their routing skills and stay ahead in the field.

Tomasz Ducin

Up and Running with Tanstack Router and React

Learn TanStack Router for React: set up apps, use file-based routing, manage routes, and boost app performance.


In this lesson, we explore how TanStack Router integrates with the [native browser history API](https://developer.mozilla.org/en-US/docs/Web/API/History) to manage navigation.

As we navigate through different routes, the URL changes are stored in the browser's history, allowing users to use the forward and backward buttons to traverse their navigation history.

This functionality also **enables permalinks**, meaning users can copy and paste URLs to access specific routes directly.

Additionally, we learn how to programmatically interact with the history object to move forward or backward through the navigation stack, enhancing the user experience by providing full control over navigation actions.

This compatibility with the native history API ensures that TanStack Router applications behave similarly to traditional websites, offering a seamless and intuitive user experience.

Browse History in Tanstack Router

Browse history in TanStack React Router using the native history API for seamless navigation

In this lesson, we explore how to hook into TanStack Router's lifecycle hooks to execute custom logic during route changes.

The hooks we'll look into are: `onEnter`, `onStay`, and `onLeave`, which are triggered when entering, staying within, or leaving a route, respectively.

All hooks receive a detailed match parameter, providing information about the route's path, ID, and tons of other details.

This allows for the implementation of features like animations or logging when navigating between routes.

We also learn how to use these hooks to track and manage state changes as users interact with the application, making it easier to implement complex behaviors based on route transitions.

Hook into Route Lifecycle Hooks in Tanstack Router

Hook into TanStack React Router's lifecycle hooks for custom route logic and animations.

In this lesson, we learn how to handle not found errors in TanStack Router by using the `notFoundComponent` at both nested and global levels.

To trigger the display of a `notFoundComponent`, we must throw a specific error using the `notFound` function within a loader or other lifecycle method of a route. This approach allows us to provide custom error messages for specific routes or globally across the application.

We explore how to define a notFoundComponent within a specific route's configuration and how to set a `defaultNotFoundComponent` at the router global level, which applies to all routes unless overridden locally. This flexibility ensures that users receive meaningful feedback when encountering non-existent routes.

Provide NotFoundComponent at Nested Route or Global Level in Tanstack Router

Handle notFound errors in TanStack Router with notFoundComponent at nested or global levels.



In this lesson, we learn how to access dynamic route parameters using the `useParams` hook in TanStack Router.

When used with a specific `Route` object, `useParams` provides type-safe access to route parameters, ensuring that TypeScript knows the exact types of these parameters.

This approach eliminates the possibility of undefined/optional values, making it safer for accessing parameters like `employeeId`.

However, when using `useParams` globally without specifying a route, it requires an options object with `{ strict: false }`, which reduces type safety.

In this case, the hook can access parameters from any route in the application, but it does not guarantee their existence or type. This flexibility allows components to be reused across different routes, but it requires careful handling of potential errors.



Access Dynamic Route Parameters with useParams in Tanstack Router

Access dynamic route parameters with useParams in TanStack React Router for type-safe routing.

In this lesson, we learn how to reorganize file-based routes in TanStack Router to accommodate nested routing structures.

We explore how to create additional nested routes by converting files into directories, allowing for further nesting.

For example, to create a nested route like `/employees/$employeeId/edit`, we can create a **directory** (!) named `$employeeId` and place an `index.tsx` file inside it to define the route component for this nested route.

This approach provides flexibility in organizing files while maintaining the convention that file names and locations align with route paths. We also see how to adapt existing components and loaders to work with these reorganized routes, enabling features like edit forms or delete actions (or whatever) within nested routes.


Reorganize File-Based Routes in Tanstack Router

Reorganize file-based routes in TanStack Router for flexible nested routing.



Chance Strickland

Search Results

Use TypeScript to Type a React Class Component

Type a Radio Button Component in React using TypeScript

Use TypeScript to Type React useReducer

Type React Hooks using TypeScript

Refactor a React Component using TypeScript

Configure Build Tools to Work with TypeScript

Install and Configure TypeScript and Dependencies

Configure Emmet, ESlint, and Prettier Extensions

Download TypeScript Importer and Javascript and TypeScript Nightly for VSCode

Walkthrough of the Refactoring Project

Refactor a React Application to TypeScript

Refactor a React Application to TypeScript