Refactor a React Application to TypeScript

Walkthrough of the Refactoring Project

Download TypeScript Importer and Javascript and TypeScript Nightly for VSCode

Configure Emmet, ESlint, and Prettier Extensions

Install and Configure TypeScript and Dependencies

Configure Build Tools to Work with TypeScript

Refactor a React Component using TypeScript

Type React Hooks using TypeScript

Use TypeScript to Type React useReducer

Type a Radio Button Component in React using TypeScript

Use TypeScript to Type a React Class Component

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.

https://app.egghead.io/api/v1/lessons/react-walkthrough-of-the-refactoring-project/subtitles

Instructor: [0:00] The directory structure is fairly flat, which I generally prefer with my apps, and all of the source code is going to live in this src directory. All of our components here in this UI directory are styles and styles and some various utilities in our lib.

[0:16] Generally, I would build a React app using a tool like Create React App, Vite, Remix, or some other framework. The reason for that is, I don't love reinventing the wheel when it comes to our build and all of the tools that are required to set these things up. Those frameworks are going to do quite a lot to help us reduce the boilerplate and setup of our apps.

[0:39] This one is a relatively simple but custom build that is going to compile all of our source using Rollup. The reason for that is that we will eventually explore how the compilation step of TypeScript factors into the overall process.

[0:54] Most frameworks these days are going to just compile TypeScript for us out of the box with no additional configuration needed, but if you have a bespoke React app with your own build tooling, you will want to know how TypeScript fits into the greater compilation story.

[1:11] This isn't a lesson about compilers, and I expect that your apps might look a little different than mine, but I hope this helps provide some context that will help you as you start the refactoring journey.

[1:22] We see that we've got a bunch of source code in our src directory and a rollup.config file down here that is going to bundle everything up into a dist directory. Let's run our dev script and see what we're working with.

[1:38] Check it out. Our app is the early Windows classic Minesweeper. I used to love this game, so this should be a fun lesson. We've got our app running, and we have a good idea of what our project code looks like. Let's get ready to dive in.

Walkthrough of the Refactoring Project

Share this video with your friends

Course

Refactor a React Application to TypeScript