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

8 sections • 117 lectures • 17h 32m 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:41
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
Setting up CSS Modules
10:17
Importing SVGs - adding a logo
05:39
Class components
06:34
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

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

Building the Tasks App Section Introduction
02:43
Important - please read this before watching the videos
00:16
Setting Up Next.js with TypeScript
11:19
Explaining the "tsconfig" Options
06:38
Explaining the "esmoduleinterop" Option
08:19
Adding Apollo
32:19
Running the local GraphQL API server
03:53
Running the first GraphQL query
10:53
Generate the types for queries and mutations using the GraphQL Code Generator
12:28
Adding styles
06:11
Moving the task list into its own component
02:28
Adding the "create task" form - part 1 - creating the mutation
04:21
Adding the "create task" form - part 2 - creating the form
02:51
Adding the "create task" form - part 3 - running the mutation
10:11
Adding the "update task" form - part 1 - preparing the queries
03:02
Adding the "update task" form - part 2 - creating the "update" page
08:54
Adding the "update task" form - part 3 - creating the "update" form
06:51
Adding the "update task" form - part 4 - running the "updateTask" mutation
08:09
Coding the "delete task" feature
10:32
Coding the "change task status" feature (the checkboxes)
08:25
Coding the task filter
13:08
Fix the tasks query's cache policy causing an extra request on initial page load
03:44
Using React Context to pass task status to the child components of the main page
05:23

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

50 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.3 Instructor Rating
600 Reviews
3,716 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.

This course includes:

Using TypeScript with React

What you'll learn

Course content

Requirements

Description

Who this course is for:

Featured review

Instructor

This course includes:

Using TypeScript with React

What you'll learn

Course content

Introduction4 lectures • 18min

TypeScript21 lectures • 3hr 27min

TypeScript With React22 lectures • 2hr 49min

[LEGACY] React With TypeScript10 lectures • 1hr 12min

Building a React Redux App13 lectures • 2hr 33min

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

[LEGACY] Building the Tasks App23 lectures • 3hr 3min

Cheatsheets2 lectures • 1min

Requirements

Description

Who this course is for:

Featured review

Instructor