Using TypeScript with React

Learn how to use TypeScript to build React projects (including Next.js and Apollo GraphQL).

4.68 (1811 reviews)
Udemy
platform
English
language
Web Development
category
instructor
12,680
students
13.5 hours
content
Sep 2021
last update
$94.99
regular price

What you will learn

Basic and advanced features of TypeScript

Using TypeScript in React projects

Writing types for React patterns (higher order components, render props, etc)

How to integrate TypeScript into a Create React App with Redux

How to build a NextJS web app which uses the GraphQL API using TypeScript

Using types provided by third-party packages and creating custom type definitions

Using React with TypeScript in general

Description

What is this course about?

Nowadays, TypeScript and React are extremely popular in the world of front end, and many companies use them to develop their web apps. Therefore, being able to build React apps using TypeScript is quite a valuable skill in 2020. This course will teach you the TypeScript skills that are necessary to start building React apps with confidence.

You’ll learn how to describe types for the function and class components, use higher order components and render props patterns for code reuse, import third-party libraries, their types, and create custom types for them if necessary.

This course is most suited to those who have worked on React applications in the past and now want to learn TypeScript.

You'll learn how to use TypeScript to build a React web application.

What are we going to build?

Project 1:

We'll build an example Create React App project with TypeScript and Redux. The focus of this project is to show how to use TypeScript with Redux while developing a simple web app.

Project 2:

We’ll build a task list app called "Task Mate" using the Next.js framework and Apollo GraphQL libraries. You’ll learn how to:

  • use hooks

  • create and use a higher order components

  • merge declarations

  • create types for GraphQL queries and mutations and use them

So, ready to broaden your skills in front end? If so, then take this course and let’s start coding!

Content

Introduction

Introduction
What is TypeScript and why we need it?
Installing TypeScript globally and locally
Common TypeScript compiler and tsconfig options

TypeScript

Introduction Video
Setting Up a Simple TypeScript Project
Modules
Modules - Quiz
Types
Types - Quiz
Interfaces
Functions
Classes
Classes - Quiz
Implementing Interfaces
Describing Constructors Using Interfaces
Generics
Generics - Quiz
Union Type
Union Type - Quiz
Intersection Type
Intersection Type - Quiz
Type Alias
Type Alias - Quiz
Using External Packages and Their Types
Declaration Merging
Utility Types
TypeScript Tips

React With TypeScript

Introduction
Function Components
Function Components - Quiz
Class Components
Class Components - Quiz
Higher Order Components - React Redux
Higher Order Components - Creating HOCs
Render Props
Event Handling
Introduction to Hooks
Hooks: useState
Hooks: useEffect

Building the Tasks App (Updated)

Introduction
Important - please read this before watching the videos
Setting Up Next.js with TypeScript
Explaining the "tsconfig" Options
Explaining the "esmoduleinterop" Option
Adding Apollo
Running the local GraphQL API server
Running the first GraphQL query
Generate the types for queries and mutations using the GraphQL Code Generator
Adding styles
Moving the task list into its own component
Adding the "create task" form - part 1 - creating the mutation
Adding the "create task" form - part 2 - creating the form
Adding the "create task" form - part 3 - running the mutation
Adding the "update task" form - part 1 - preparing the queries
Adding the "update task" form - part 2 - creating the "update" page
Adding the "update task" form - part 3 - creating the "update" form
Adding the "update task" form - part 4 - running the "updateTask" mutation
Coding the "delete task" feature
Coding the "change task status" feature (the checkboxes)
Coding the task filter
Fix the tasks query's cache policy causing an extra request on initial page load
Using React Context to pass task status to the child components of the main page

Cheatsheets

Using TypeScript with React
Using TypeScript with Next.js

Screenshots

Using TypeScript with React - Screenshot_01Using TypeScript with React - Screenshot_02Using TypeScript with React - Screenshot_03Using TypeScript with React - Screenshot_04

Reviews

Robert
October 4, 2023
I learned A LOT! Only reason why its not a full 5 stars is because the technology moves so fast, that we are already braking versions behind in the Apollo Client / Server part.
Stefan
August 26, 2023
Several parts in the Next.js section was outdated which made it hard to follow. Overall an okay introduction to typescript and react. Think there are better resources if you wish to learn next.js
Alejandro
August 15, 2023
Si, ha sido una buena elección. Hasta los momentos está abarcando lo que espero del curso y me anima a continuar con otros cursos similares.
Paulo
August 4, 2023
Outstanding course! It provides incredibly engaging and practical knowledge. There are only a few outdated aspects, but overall, it's highly beneficial. Definitely worth it!
Tomara
March 25, 2023
Very good information with no fluff. Perfect course if you want to create lightweight react applications utilizing typescript and webpack.
Nicolas
January 23, 2023
Why waste time on CSS. GraphQL an more stuff like these? There are numerous different occasions on complex functional components that should have been included in this course. It scratches the surface. To get a grasp and get going is good.
Oscar
January 2, 2023
Yes, I especially like that you explain a little bit about the config for setup of Typescript, webpack project. This is useful to learn if I encounter errors with Typescript or the WEbpack bundler.
Eric
December 31, 2022
Fast paced, where I have to read elsewhere to get a grasp of what he's talking about. Also, pretty low on interaction so the course is mostly dull instructional and I struggle to maintain focus. I find myself guessing on most of the quizzes, since they tend to be worded confusingly. It's usually somewhat obvious to get the correct answer since the wrong answer is something short and simple and the correct answer is much longer and thorough.
Fabio
November 17, 2022
The way he explain typescript is amazing, very good and deep course. I've not enjoyed the Graphql lectures, but I think this was my fault, was a completely new subject for me. Recommended!
Johnny
November 14, 2022
So far the content is good but the lecturer seems to neglect that the students may have zero knowledge of typescript coming into this. I have learned a little bit of typescript from else where, so it was okay for me to follow along. However, even I wish the lecturer would explain from a beginner's perspective.
Kelli
October 25, 2022
I am halfway through the course, and I am thinking about abandoning it. The first part with TS explanations is good, but it quickly changes when you start the first project. He starts clicking on all of these different types suggested by VS code, but there is no explanation as to what they are or what they do. Plus, there were so many different things install / do that had nothing to do with TS or React, so it ended up leaving me confused as to what was actually needed. I would have preferred the first project be more basic to simply illustrate how TS with React generally works (without incorporating Webpack). The focus of the first project was on class components; while I learned about class components when I started, I focus now on functional components and CRA - the first project does not focus on these in the slightest, so at the end of the project, I am honestly still not entirely sure how/when to integrate TS into React. This might be ok for people who've worked with Webpack and are more experienced with React, but this is not what I thought it was when I purchased. I ended up finding some free videos on YouTube that discuss CRA and TypeScript that have been far more helpful.
George
October 24, 2022
This is well suited for those looking to integrate typescript with react. This is a well-explained and well-detailed course.
WayneCarl
September 6, 2022
He is pretty good at answering your questions I think the very last turtorial where he uses graphQL might be outdated, but I am overall happy with my purchase and would by again
Uğur
August 24, 2022
I strongly recommend whose are new in Typescript language. There are lot of knowledge that you must learn absolutely. However, I am not used to speaker's accent yet.
Tyler
August 8, 2022
This course is a great way to take my existing baseline knowledge about React JS and apply the relevant parts of TypeScript to my existing projects. I would love a few more quizzes with answers that are a bit less leading, but the lectures and course materials are thorough and easy to follow. If you have existing React projects and want to begin working with TypeScript in your React projects this is a great course!

Charts

Price

Using TypeScript with React - Price chart

Rating

Using TypeScript with React - Ratings chart

Enrollment distribution

Using TypeScript with React - Distribution chart

Related Topics

2321154
udemy ID
4/13/2019
course created date
5/10/2019
course indexed date
Bot
course submited by