Using TypeScript with React

Gain insights into integrating TypeScript with React to improve productivity. Learn about strongly-typed props, state, and events, and set up projects using Create React App, Webpack, and Babel.

Intermediate

64 Lessons

Certificate of Completion

Gain insights into integrating TypeScript with React to improve productivity. Learn about strongly-typed props, state, and events, and set up projects using Create React App, Webpack, and Babel.

AI-POWERED

Explanations

AI-POWERED

Explanations

This course includes

60 Playgrounds

12 Quizzes

This course includes

60 Playgrounds

12 Quizzes

Course Overview

If you are a React developer and want to build your React apps faster and more robustly, this course is for you. Learn to integrate TypeScript with React, boost your productivity, and create apps that are easier to maintain. In this course, you will learn how to utilize TypeScript’s sophisticated type system to make React development faster and your code more readable. You will learn how to create component props, state, and events that are strongly-typed, allowing you to quickly understand what you can pa...Show More

TAKEAWAY SKILLS

Typescript

Front End Development

React

Course Content

Why TypeScript?

Learn how to use TypeScript to enhance React development with robust type checking and refactoring.

Understanding TypeScript

Understanding the benefits of TypeScript with React

Quiz

Using basic types

Unpack the core of TypeScript's type system, type annotations, and effective type usage.

Understanding the types in JavaScript

Using type annotations

Understanding type inference

Understanding the any type

Understanding and using the void type

Using the never type

Using the unknown type

Using type assertions

Quiz

Creating types

Explore creating and managing strong, flexible types in TypeScript with arrays, tuples, objects, and more.

Creating a strongly-typed array

Creating a strongly-typed tuple

Creating a strongly-typed object

Creating type aliases

Creating interfaces

Creating union types

Creating intersection types

Understanding type compatibility

Quiz

Working with generic types

Apply your skills to using TypeScript generics for functions, interfaces, aliases, and classes.

Using some standard generic types

Creating generic functions

Creating generic interfaces

Creating generic type aliases

Creating generic classes

Quiz

Creating strongly-typed function component props

Solve problems in defining and managing strongly-typed props in React with TypeScript.

Specifying a type for function component props

Specifying a prop as optional

Specifying a default for a function component prop

Specifying a type for an object prop

Specifying a type for a function prop

Quiz

Creating strongly-typed function component state

3 Lessons

Simplify complex topics on strongly-typed states in React with useState and useReducer hooks.

Creating strongly-typed class components

4 Lessons

Master the steps to creating strongly-typed props, state, and using access modifiers in React.

Creating strongly-typed component events and event handlers

3 Lessons

Create strongly-typed component events and handlers for robust TypeScript-React applications.

Creating strongly-typed context

4 Lessons

Grasp the fundamentals of creating and using strongly-typed contexts in React with TypeScript.

10.

Creating strongly-typed refs

3 Lessons

Master the steps to create strongly-typed refs in both function and class components.

11.

Creating React projects with TypeScript using Create React App

4 Lessons

Grasp the fundamentals of creating, configuring, and testing React projects with TypeScript using Create React App.

12.

Creating a React and TypeScript project manually

7 Lessons

Take a closer look at manually setting up a React and TypeScript project, covering essential tools, configurations, and enhancements.

13.

Putting everything together

3 Lessons

Follow the process of integrating TypeScript with React for enhanced productivity and efficiency.

Course Author

Part of the TypeScript Learning Path

Learn TypeScript for Front-End Developers

Adapt your current JavaScript knowledge to master TypeScript and optimize your front-end projects.

3 Modules

Trusted by 1.4 million developers working at companies

Anthony Walker

@_webarchitect_

Evan Dunbar

ML Engineer

Carlos Matias La Borde

Software Developer

Souvik Kundu

Front-end Developer

Vinay Krishnaiah

Software Developer

Eric Downs

Musician/Entrepeneur

Kenan Eyvazov

DevOps Engineer

Souvik Kundu

Front-end Developer

Eric Downs

Musician/Entrepeneur

Anthony Walker

@_webarchitect_

Evan Dunbar

ML Engineer

Hands-on Learning Powered by AI

See how Educative uses AI to make your learning more immersive than ever before.

Instant Code Feedback

Evaluate and debug your code with the click of a button. Get real-time feedback on test cases, including time and space complexity of your solutions.

AI-Powered Mock Interviews

Put your skills to the test in a simulated interview setting. Receive personalized feedback based on your performance. Available in Premium & Premium Plus plans.

Adaptive Learning

At various checkpoints throughout Educative courses, you will be prompted to take a quick assessment. Receive a condensed curriculum tailored to your strengths and skill gaps.

Explain with AI

Select any text within any Educative course, and get an instant explanation — without ever leaving your browser.

AI Code Mentor

AI Code Mentor helps you quickly identify errors in your code, learn from your mistakes, and nudge you in the right direction — just like a 1:1 tutor!

FOR TEAMS

Interested in this course for your business or team?

Unlock this course (and 1,000+ more) for your entire org with DevPath