Using TypeScript with React
Using TypeScript with React

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

Created by Dmytro Danylov
Language English

Using TypeScript with React

Using TypeScript with React
Using TypeScript with React

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

Created by Dmytro Danylov
Language English
1. Introduction
  • 1. Introduction .html
  • 2. What is TypeScript and why we need it 00:05:47
  • 3. Installing TypeScript globally and locally 00:06:26
  • 3.1 Compiler Options .html
  • 3.2 TypeScript Website .html
  • 4. Common TypeScript compiler and tsconfig options .html
2. TypeScript
  • 1. TypeScript Section Introduction 00:03:31
  • 2. Setting Up a Simple TypeScript Project 00:17:14
  • 2.1 simple-typescript .zip
  • 2.2 Compiler Options .html
  • 3. Modules 00:04:33
  • 3.1 Modules .zip
  • 4. Modules - Quiz .html
  • 5. Types 00:12:43
  • 5.1 Types .zip
  • 6. Types - Quiz .html
  • 7. Interfaces 00:06:07
  • 7.1 TypeScript Handbook Interfaces .html
  • 7.2 Interfaces .zip
  • 8. Functions 00:05:26
  • 8.1 Functions .zip
  • 9. Classes 00:11:04
  • 9.1 Classes .zip
  • 10. Classes - Quiz .html
  • 11. Implementing Interfaces 00:05:59
  • 11.1 Implementing-Interfaces .zip
  • 12. Describing Classes Using Interfaces 00:11:03
  • 13. Generics 00:13:36
  • 14. Generics - Quiz .html
  • 15. Union Type 00:07:27
  • 16. Union Type - Quiz .html
  • 17. Intersection Type 00:07:01
  • 17.1 Intersection-Type.zip .html
  • 18. Intersection Type - Quiz .html
  • 19. Type Alias 00:02:39
  • 19.1 Type-Alias .zip
  • 20. Type Alias - Quiz .html
  • 21. Using External Packages and Their Types 00:05:33
  • 21.1 Using-External-Packages-and-Their-Types .zip
  • 22. Declaration Merging 00:12:31
  • 23. Utility Types 00:35:32
  • 23.1 TypeScript Handbook Utility Types .html
  • 24. Mapped Types 00:12:15
  • 25. Conditional Types 00:23:08
  • 25.1 TypeScript Handbook Conditional Types .html
  • 26. TypeScript Tips .html
3. React With TypeScript
  • 1. React with TypeScript Section Introduction .html
  • 2. Function Components 00:05:42
  • 2.1 Setting Up Next.js with TypeScript .html
  • 2.2 Function-Components .zip
  • 2.3 Basic Next.js TypeScript Setup Code .html
  • 3. Function Components - Quiz .html
  • 4. Class Components 00:05:23
  • 4.1 Class-Components .zip
  • 5. Class Components - Quiz .html
  • 6. Higher Order Components - React Redux 00:15:14
  • 6.1 HOCs-React-Redux .zip
  • 7. Higher Order Components - Creating HOCs 00:09:47
  • 7.1 HOCs-Creating-HOCs .zip
  • 8. Render Props 00:04:06
  • 8.1 Render-Props .zip
  • 9. Event Handling 00:08:33
  • 9.1 Event-Handling .zip
  • 9.2 The repo with the starting project setup .html
  • 10. Introduction to Hooks 00:02:01
  • 11. Hooks useState 00:08:03
  • 11.1 Use-State .zip
  • 11.2 The repo with the starting project setup .html
  • 12. Hooks useEffect 00:13:05
  • 12.1 The repo with the starting project setup .html
  • 12.2 Use-Effect .zip
4. Building a React Redux App
  • 1. Building a React Redux App Section Introduction 00:01:32
  • 2. What if you havent used Redux before .html
  • 3. Initial Setup 00:10:34
  • 3.1 1-initial-setup .zip
  • 3.2 TypeScript and Babel 7 (more info about the isolatedModules option) .html
  • 3.3 TypeScript Compiler Options .html
  • 3.4 babel-plugin-transform-typescript .html
  • 3.5 Create React App Website .html
  • 4. Setting Up a Fake Server 00:10:14
  • 4.1 JSON Server .html
  • 4.2 2-setting-up-a-fake-server .zip
  • 5. Setting Up Redux 00:15:50
  • 5.1 React Redux Website .html
  • 5.2 3-setting-up-redux .zip
  • 5.3 Ducks Redux Reducer Bundles .html
  • 6. Creating the Recorder Component 00:27:11
  • 6.1 4-creating-recorder-component .zip
  • 7. Creating the Event List Component 00:04:08
  • 7.1 5-creating-the-events-list .zip
  • 8. Loading Events - Part 1 00:15:38
  • 8.1 6-loading-events-part-1 .zip
  • 8.2 Redux Thunk .html
  • 9. Loading Events - Part 2 00:22:05
  • 9.1 Function Overloads .html
  • 9.2 6-loading-events-part-2 .zip
  • 10. Creating Events 00:14:15
  • 10.1 7-creating-events .zip
  • 11. Deleting Events 00:11:17
  • 11.1 8-deleting-events .zip
  • 12. Editing Titles 00:19:53
  • 12.1 9-editing-titles .zip
  • 13. Useful Links .html
5. Building the Tasks App (Updated)
  • 1. Building the Tasks App Section Introduction 00:02:43
  • 2. Important - please read this before watching the videos .html
  • 3. Setting Up Next.js with TypeScript 00:11:19
  • 3.1 Commit - Setting Up Next.js with TypeScript .html
  • 3.2 Next.js Documentation .html
  • 3.3 task-mate .zip
  • 4. Explaining the tsconfig Options 00:06:38
  • 4.1 TypeScript Compiler Options .html
  • 5. Explaining the esmoduleinterop Option 00:08:19
  • 6. Adding Apollo 00:32:19
  • 6.1 1-adding-apollo .zip
  • 6.2 adding-apollo-with-apollo-client-3-BETA .zip
  • 6.3 initial-apollo .js
  • 7. Running the local GraphQL API server 00:03:53
  • 8. Running the first GraphQL query 00:10:53
  • 8.1 3-running-first-query-fetching-tasks .zip
  • 9. Generate the types for queries and mutations using the GraphQL Code Generator 00:12:28
  • 9.1 4-setting-up-graphql-code-generator .zip
  • 9.2 GraphQL Code Generator Website .html
  • 10. Adding styles 00:06:11
  • 10.1 5-adding-styles .zip
  • 11. Moving the task list into its own component 00:02:28
  • 11.1 6-moving-task-list-into-its-own-component .zip
  • 12. Adding the create task form - part 1 - creating the mutation 00:04:21
  • 12.1 7-adding-create-task-form-part-1 .zip
  • 13. Adding the create task form - part 2 - creating the form 00:02:51
  • 13.1 8-adding-create-task-form-part-2 .zip
  • 14. Adding the create task form - part 3 - running the mutation 00:10:11
  • 14.1 9-adding-create-task-form-part-3 .zip
  • 15. Adding the update task form - part 1 - preparing the queries 00:03:02
  • 15.1 10-adding-update-task-page-part-1 .zip
  • 16. Adding the update task form - part 2 - creating the update page 00:08:54
  • 16.1 11-adding-update-task-page-part-2 .zip
  • 17. Adding the update task form - part 3 - creating the update form 00:06:51
  • 17.1 12-adding-update-task-page-part-3 .zip
  • 18. Adding the update task form - part 4 - running the updateTask mutation 00:08:09
  • 18.1 13-adding-update-task-page-part-4 .zip
  • 19. Coding the delete task feature 00:10:32
  • 19.1 14-deleting-tasks .zip
  • 20. Coding the change task status feature (the checkboxes) 00:08:25
  • 20.1 15-changing-task-status .zip
  • 21. Coding the task filter 00:13:08
  • 21.1 16-1-adding-task-filter .zip
  • 22. Fix the tasks querys cache policy causing an extra request on initial page load 00:03:44
  • 22.1 16-2-tasks-query-cache-policy .zip
  • 23. Using React Context to pass task status to the child components of the main page 00:05:23
  • 23.1 17-context-for-task-status .zip
6. Cheatsheets
  • 1. Using TypeScript with React .html
  • 2. Using TypeScript with Next.js .html
  • 2.1 next-ts-example .zip