Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Development Tools No-Code Development
Business
Entrepreneurship Communications Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certification Network & Security Hardware Operating Systems Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design Design Thinking 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition Yoga Mental Health Dieting Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Teacher Training Test Prep Other Teaching & Academics
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Cisco CCNA CompTIA Security+ Amazon AWS Microsoft AZ-900
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Mindfulness Life Purpose Meditation CBT Emotional Intelligence
Web Development JavaScript React CSS Angular PHP Node.Js WordPress Vue JS
Google Flutter Android Development iOS Development React Native Swift Dart Programming Language Mobile Development Kotlin SwiftUI
Digital Marketing Google Ads (Adwords) Social Media Marketing Google Ads (AdWords) Certification Marketing Strategy Internet Marketing YouTube Marketing Email Marketing Retargeting
Microsoft Power BI SQL Tableau Business Analysis Data Modeling Business Intelligence MySQL Data Analysis Blockchain
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Business Plan Startup Freelancing Online Business Blogging Home Business
Unity Game Development Fundamentals Unreal Engine C# 3D Game Development C++ 2D Game Development Unreal Engine Blueprints Blender
30-Day Money-Back Guarantee
Development Web Development Typescript

Using TypeScript with React

Learn how to use TypeScript to build React projects (including Next.js and Apollo GraphQL).
Rating: 4.4 out of 54.4 (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

Course content

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

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

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
Joey bronzoni
53 courses
24 reviews
Rating: 5.0 out of 5a 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.

Instructor

Dmytro Danylov
JavaScript Software Engineer
Dmytro Danylov
  • 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.

  • Udemy for Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.