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 Amazon AWS AWS Certified Developer - Associate CompTIA Security+
Photoshop Graphic Design Adobe Illustrator Drawing Digital Painting InDesign Character Design Canva Figure Drawing
Life Coach Training Neuro-Linguistic Programming Mindfulness Personal Development Personal Transformation Meditation Life Purpose Neuroscience Coaching
Web Development JavaScript React CSS Angular PHP WordPress Node.Js Python
Google Flutter Android Development iOS Development Swift React Native 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 Google Analytics
SQL Microsoft Power BI Tableau Business Analysis Business Intelligence MySQL Data Analysis Data Modeling Big Data
Business Fundamentals Entrepreneurship Fundamentals Business Strategy Online Business Business Plan Startup Freelancing 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

This course includes:

  • 17.5 hours on-demand video
  • 13 articles
  • 89 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
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.3 out of 54.3 (594 ratings)
3,703 students
Created by Dmytro Danylov
Last updated 11/2020
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

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

  • React with TypeScript Section Introduction
    00:26
  • Function Components
    05:42
  • Function Components - Quiz
    2 questions
  • Class Components
    05:23
  • Class Components - Quiz
    2 questions
  • Higher Order Components - React Redux
    15:14
  • Higher Order Components - Creating HOCs
    09:47
  • Render Props
    04:06
  • Event Handling
    08:33
  • Introduction to Hooks
    02:01
  • Hooks: useState
    08:03
  • Hooks: useEffect
    13:05

  • Preview01:32
  • What if you haven't used Redux before?
    00:05
  • Initial Setup
    10:34
  • Setting Up a Fake Server
    10:14
  • Setting Up Redux
    15:50
  • Creating the Recorder Component
    27:11
  • Creating the Event List Component
    04:08
  • Loading Events - Part 1
    15:38
  • Loading Events - Part 2 (using connect)
    22:05
  • Creating Events
    14:15
  • 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

  • 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

  • Using TypeScript with React
    01:07
  • 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
50 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.3 Instructor Rating
  • 594 Reviews
  • 3,703 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
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Featured courses
Udemy
© 2021 Udemy, Inc.