Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Refactor a React Application to TypeScript

via egghead.io

Overview

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
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 and Up and Running with TypeScript are the best two places to start.
What's Next?
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 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 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.

Syllabus

  • 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

Taught by

Chance Strickland

Reviews

4 rating at egghead.io based on 51 ratings

Start your review of Refactor a React Application to TypeScript

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.