Danh mục
Duocmmo Tedu Tin học văn phòng Laravel Cyberlearn Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Web Development
Typescript
Using TypeScript with React

Using TypeScript with React

Loại khoá học: Web Development

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

image
50.000 VND
1.499.000 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

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!

Bạn sẽ học được gì

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

Yêu cầu

  • Knowledge of JavaScript
  • Experience with React
  • Some experience with NextJS

Nội dung khoá học

6 sections

Introduction

4 lectures
Introduction
00:45
What is TypeScript and why we need it?
05:47
Installing TypeScript globally and locally
06:26
Common TypeScript compiler and tsconfig options
04:47

TypeScript

28 lectures
TypeScript Section Introduction
03: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
Implementing Interfaces
05: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
Utility Types
35:32
Mapped Types
12:15
Conditional Types
23:08
TypeScript Tips
01:49

TypeScript With React

24 lectures
Section info
00:10
TypeScript with React Section Introduction
00: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
Handling events using React
10:00
Quiz - Class components and event handling
2 questions
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

Building a React Redux App

20 lectures
Building a React Redux App Section Introduction
01: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

Building the Tasks App

23 lectures
Building the Tasks App Section Introduction
00: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
Important: library updates. Please read this article first
00:56
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

Cheatsheets

3 lectures
Using TypeScript with React
01:07
Using TypeScript with Next.js (Updated)
02:21
[LEGACY] Using TypeScript with Next.js
00:10

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

The Complete UML Course (2024): Learn to Design UML Diagrams

The Complete UML Course (2024): Learn to Design UML Diagrams

25 VND
50.000 VND
Master Network Automation with Python for Network Engineers

Master Network Automation with Python for Network Engineers

1.699.000 VND
50.000 VND
Unity Mobile Game Development - Exterminator

Unity Mobile Game Development - Exterminator

1.499.000 VND
50.000 VND
Mastering CSS Grid 2023 - With 3 cool projects

Mastering CSS Grid 2023 - With 3 cool projects

99 VND
50.000 VND
Django 3 - Full Stack Websites with Python Web Development

Django 3 - Full Stack Websites with Python Web Development

1.699.000 VND
50.000 VND
Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

95 VND
50.000 VND
Appium - Mobile Testing with Latest 2.0 and Live Projects

Appium - Mobile Testing with Latest 2.0 and Live Projects

70 VND
50.000 VND
Deep Learning for Object Detection with Python and PyTorch

Deep Learning for Object Detection with Python and PyTorch

899.000 VND
50.000 VND
Full Android Development Masterclass | 14 Real Apps-46 Hours

Full Android Development Masterclass | 14 Real Apps-46 Hours

1.699.000 VND
50.000 VND
Go Java Full Stack with Spring Boot and Angular

Go Java Full Stack with Spring Boot and Angular

90 VND
50.000 VND
Machine Learning Practical Workout | 8 Real-World Projects

Machine Learning Practical Workout | 8 Real-World Projects

79 VND
50.000 VND
WordPress 2024: The Complete WordPress Website Course

WordPress 2024: The Complete WordPress Website Course

90 VND
50.000 VND
Android App Development Master Course with Java | Android

Android App Development Master Course with Java | Android

99 VND
50.000 VND
Unreal Engine 5: Soulslike Melee Combat System

Unreal Engine 5: Soulslike Melee Combat System

1.399.000 VND
50.000 VND
ASP.NET Core Web Application Using Razor Pages

ASP.NET Core Web Application Using Razor Pages

1.699.000 VND
50.000 VND
Build Undetectable Malware Using C Language: Ethical Hacking

Build Undetectable Malware Using C Language: Ethical Hacking

75 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi