Using TypeScript with React by Udemy
Learn how to use TypeScript to build React projects (including Next.js and Apollo GraphQL).
Course Highlights
- 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
Skills you will learn!
Curriculum
4 Topics
Introduction
What is TypeScript and why we need it?
Installing TypeScript globally and locally
Common TypeScript compiler and tsconfig options
28 Topics
TypeScript Section Introduction
A note regarding the next lecture for students who use Windows
Setting Up a Simple TypeScript Project
Modules
Modules - Quiz
Types
Types - Quiz
Interfaces
Functions
Classes
Classes - Quiz
ECMAScript Private Fields
Implementing Interfaces
Describing Classes Using Interfaces
Generics
Generics - Quiz
Union Type
Union Type - Quiz
Intersection Type
Intersection Type - Quiz
Type Alias
Type Alias - Quiz
Using External Packages and Their Types
Declaration Merging
Utility Types
Mapped Types
Conditional Types
TypeScript Tips
24 Topics
Section info
TypeScript with React Section Introduction
What is webpack?
Setting up a webpack project
TypeScript setup options
Setting up TypeScript using ts-loader
Setting up TypeScript using babel-loader
Adding React
Adding a source map
Function components
Quiz - Function components
Setting up CSS Modules
Importing SVGs - adding a logo
Class components
Handling events using React
Quiz - Class components and event handling
Using React context and the useState hook
Replacing setState with useReducer
Store cart data in local storage (useEffect hook)
Creating a Higher Order Component - part 1
Creating a Higher Order Component - part 2
Creating a Render Props component
Creating a custom hook
Handling original DOM events
20 Topics
Building a React Redux App Section Introduction
What if you haven't used Redux before?
Initial Setup
Quiz - Initial Setup
Setting Up a Fake Server
Setting Up Redux
Quiz - Setting Up Redux
Creating the Recorder Component
Quiz - Creating the Recorder Component
Creating the Event List Component
Loading Events - Part 1
Quiz - Loading Events - Part 1
IMPORTANT - please read this lecture before continuing to the next one
Loading Events - Part 2 (using connect)
Quiz - Loading Events - Part 2
Creating Events
Quiz - Creating Events
Deleting Events
Editing Titles
Useful Links
23 Topics
Building the Tasks App Section Introduction
Resources to help you get started with Next.js (Optional)
Section tips (Optional)
Setting up a Next.js project with TypeScript
Explaining the tsconfig options
Explaining the esModuleInterop option
Important: library updates. Please read this article first
Setting up the GraphQL API route
Setting up a local MySQL server
Creating resolvers for the "tasks" query and "createTask" mutation
Adding GraphQL code generator for the back end
Finishing the GraphQL API
Setting up Apollo Client
Generating types for the front end
Adding styles
Adding the form for creating tasks
Running the "createTask" mutation
Adding the form for updating tasks
Running the "updateTask" mutation
Deleting tasks
Filtering tasks by task status
Marking the tasks as completed
Using a single page to render the tasks list
3 Topics
Using TypeScript with React
Using TypeScript with Next.js (Updated)
[LEGACY] Using TypeScript with Next.js
Using TypeScript with React
Related Typescript Courses
Thank You!
Your review has been submitted successfully.