Using TypeScript with React

Name: Using TypeScript with React
Rating: 4.4 (754 reviews)

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

(753 ratings)

4,676 students

Created by Dmytro Danylov

Last updated 3/2021

English

English [Auto]

30-Day Money-Back Guarantee

What you'll 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

Curated for the Udemy for Business collection

6 sections • 86 lectures • 13h 20m total length

Introduction
00:45
Preview05:47
Installing TypeScript globally and locally
06:26
Common TypeScript compiler and tsconfig options
04:47

Preview03:31
A note regarding the next lecture for students who use Windows
00:44
Setting Up a Simple TypeScript Project
17:14
Modules
04:33
Modules - Quiz
6 questions
Types
12:43
Types - Quiz
4 questions
Interfaces
06:07
Functions
05:26
Classes
11:04
Classes - Quiz
11 questions
ECMAScript Private Fields
07:23
Preview05:59
Describing Classes Using Interfaces
11:03
Generics
13:36
Generics - Quiz
4 questions
Union Type
07:27
Union Type - Quiz
3 questions
Intersection Type
07:01
Intersection Type - Quiz
1 question
Type Alias
02:39
Type Alias - Quiz
3 questions
Using External Packages and Their Types
05:33
Declaration Merging
12:31
Preview35:32
Preview12:15
Preview23:08
TypeScript Tips
01:49

Section info
00:10
Preview00:28
What is webpack?
02:23
Setting up a webpack project
09:04
TypeScript setup options
02:37
Setting up TypeScript using ts-loader
05:54
Setting up TypeScript using babel-loader
11:19
Adding React
05:21
Adding a source map
07:25
Function components
08:46
Quiz - Function components
2 questions
Setting up CSS Modules
10:17
Importing SVGs - adding a logo
05:39
Class components
06:34
Quiz - Class components
2 questions
Handling events using React
10:00
Using React context and the useState hook
18:43
Replacing setState with useReducer
15:46
Store cart data in local storage (useEffect hook)
08:19
Creating a Higher Order Component - part 1
06:24
Creating a Higher Order Component - part 2
14:47
Creating a Render Props component
06:02
Creating a custom hook
02:14
Handling original DOM events
10:28

Preview01:32
What if you haven't used Redux before?
00:05
Initial Setup
10:34
Quiz - Initial Setup
3 questions
Setting Up a Fake Server
10:14
Setting Up Redux
15:50
Quiz - Setting Up Redux
1 question
Creating the Recorder Component
27:11
Quiz - Creating the Recorder Component
2 questions
Creating the Event List Component
04:08
Loading Events - Part 1
15:38
Quiz - Loading Events - Part 1
3 questions
IMPORTANT - please read this lecture before continuing to the next one
00:41
Loading Events - Part 2 (using connect)
22:05
Quiz - Loading Events - Part 2
3 questions
Creating Events
14:15
Quiz - Creating Events
1 question
Deleting Events
11:17
Editing Titles
19:53
Useful Links
00:04

Preview00:55
Resources to help you get started with Next.js (Optional)
00:21
Section tips (Optional)
00:13
Setting up a Next.js project with TypeScript
07:50
Explaining the tsconfig options
09:47
Explaining the esModuleInterop option
08:19
Setting up the GraphQL API route
11:42
Setting up a local MySQL server
20:34
Creating resolvers for the "tasks" query and "createTask" mutation
13:05
Adding GraphQL code generator for the back end
10:57
Finishing the GraphQL API
14:39
Setting up Apollo Client
32:09
Generating types for the front end
06:31
Adding styles
07:27
Adding the form for creating tasks
03:00
Running the "createTask" mutation
10:48
Adding the form for updating tasks
16:32
Running the "updateTask" mutation
11:10
Deleting tasks
21:57
Filtering tasks by task status
31:37
Marking the tasks as completed
05:14
Using a single page to render the tasks list
05:04

Requirements

Knowledge of JavaScript
Experience with React
Some experience with NextJS

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!

Who this course is for:

People who have worked on React applications in the past and now want to learn how to integrate TypeScript into React projects.

Featured review

Joey bronzoni

53 courses

24 reviews

a year ago

Perfect match. This course was exactly what I needed. Dmytro is one of the better virtual teachers I've encountered and I haven't even begun to get into the nitty gritty of the course. I'll be sure to look for his name on other topics.

Dmytro Danylov

JavaScript Software Engineer

4.4 Instructor Rating
753 Reviews
4,679 Students
1 Course

I’ve been interested in programming since my childhood, because it gave me freedom to build something with which people can interact, and it didn’t require a big investment. All I needed was a computer and a C++ teach-myself book. This started my software development journey.

After school, I received a Computer Science diploma from Intercollege, Larnaca, and I started my career in web development in 2009. Thus far in my career, I’ve worked in Ciklum, Booking, Wix, and others. Also I've been working as a freelancer.

For quite some time I wanted to start creating online courses to share my knowledge professionally. Today I'm doing my best to achieve this goal.

Using TypeScript with React

What you'll learn

Course content

Introduction4 lectures • 18min

TypeScript21 lectures • 3hr 27min

TypeScript With React22 lectures • 2hr 49min

Building a React Redux App14 lectures • 2hr 33min

Building the Tasks App (Updated)22 lectures • 4hr 10min

Cheatsheets3 lectures • 4min

Requirements

Description

Who this course is for:

Featured review

Instructor