Using Typescript With React

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

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
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 hookscreate and use a higher order componentsmerge declarationscreate types for GraphQL queries and mutations and use themSo, ready to broaden your skills in front end? If so, then take this course and let’s start coding!

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 What is TypeScript and why we need it?

Lecture 3 Installing TypeScript globally and locally

Lecture 4 Common TypeScript compiler and tsconfig options

Section 2: TypeScript

Lecture 5 TypeScript Section Introduction

Lecture 6 A note regarding the next lecture for students who use Windows

Lecture 7 Setting Up a Simple TypeScript Project

Lecture 8 Modules

Lecture 9 Types

Lecture 10 Interfaces

Lecture 11 Functions

Lecture 12 Classes

Lecture 13 ECMAScript Private Fields

Lecture 14 Implementing Interfaces

Lecture 15 Describing Classes Using Interfaces

Lecture 16 Generics

Lecture 17 Union Type

Lecture 18 Intersection Type

Lecture 19 Type Alias

Lecture 20 Using External Packages and Their Types

Lecture 21 Declaration Merging

Lecture 22 Utility Types

Lecture 23 Mapped Types

Lecture 24 Conditional Types

Lecture 25 TypeScript Tips

Section 3: TypeScript With React

Lecture 26 Section info

Lecture 27 TypeScript with React Section Introduction

Lecture 28 What is webpack?

Lecture 29 Setting up a webpack project

Lecture 30 TypeScript setup options

Lecture 31 Setting up TypeScript using ts-loader

Lecture 32 Setting up TypeScript using babel-loader

Lecture 33 Adding React

Lecture 34 Adding a source map

Lecture 35 Function components

Lecture 36 Setting up CSS Modules

Lecture 37 Importing SVGs - adding a logo

Lecture 38 Class components

Lecture 39 Handling events using React

Lecture 40 Using React context and the useState hook

Lecture 41 Replacing setState with useReducer

Lecture 42 Store cart data in local storage (useEffect hook)

Lecture 43 Creating a Higher Order Component - part 1

Lecture 44 Creating a Higher Order Component - part 2

Lecture 45 Creating a Render Props component

Lecture 46 Creating a custom hook

Lecture 47 Handling original DOM events

Section 4: Building a React Redux App

Lecture 48 Building a React Redux App Section Introduction

Lecture 49 What if you haven't used Redux before?

Lecture 50 Initial Setup

Lecture 51 Setting Up a Fake Server

Lecture 52 Setting Up Redux

Lecture 53 Creating the Recorder Component

Lecture 54 Creating the Event List Component

Lecture 55 Loading Events - Part 1

Lecture 56 IMPORTANT - please read this lecture before continuing to the next one

Lecture 57 Loading Events - Part 2 (using connect)

Lecture 58 Creating Events

Lecture 59 Deleting Events

Lecture 60 Editing Titles

Lecture 61 Useful Links

Section 5: Building the Tasks App (Updated)

Lecture 62 Building the Tasks App Section Introduction

Lecture 63 Resources to help you get started with Next.js (Optional)

Lecture 64 Section tips (Optional)

Lecture 65 Setting up a Next.js project with TypeScript

Lecture 66 Explaining the tsconfig options

Lecture 67 Explaining the esModuleInterop option

Lecture 68 Important: library updates. Please read this article first

Lecture 69 Setting up the GraphQL API route

Lecture 70 Setting up a local MySQL server

Lecture 71 Creating resolvers for the "tasks" query and "createTask" mutation

Lecture 72 Adding GraphQL code generator for the back end

Lecture 73 Finishing the GraphQL API

Lecture 74 Setting up Apollo Client

Lecture 75 Generating types for the front end

Lecture 76 Adding styles

Lecture 77 Adding the form for creating tasks

Lecture 78 Running the "createTask" mutation

Lecture 79 Adding the form for updating tasks

Lecture 80 Running the "updateTask" mutation

Lecture 81 Deleting tasks

Lecture 82 Filtering tasks by task status

Lecture 83 Marking the tasks as completed

Lecture 84 Using a single page to render the tasks list

Section 6: Cheatsheets

Lecture 85 Using TypeScript with React

Lecture 86 Using TypeScript with Next.js (Updated)

Lecture 87 [LEGACY] Using TypeScript with Next.js

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