React & TypeScript - The Practical Guide from Udemy

What's inside

Learning objectives

Learn how to build react apps with typescript
Get a structured introduction to typescript
Use both basic & advanced typescript concepts
Build dynamic & highly flexible components with react & typescript

Build advanced & highly dynamic components in a type-safe way
Use typescript with react's context api & usereducer() hook
Manage state and events with react and typescript
Use typescript with redux for type-safe global state management

Learn how to build react apps with typescript
Get a structured introduction to typescript
Use both basic & advanced typescript concepts
Build dynamic & highly flexible components with react & typescript
Build advanced & highly dynamic components in a type-safe way
Use typescript with react's context api & usereducer() hook
Manage state and events with react and typescript
Use typescript with redux for type-safe global state management

Syllabus

Introduction

Welcome To The Course!

Why React & TypeScript?

About The Course & Course Content

How To Get The Most Out Of The Course

Learning Community & Course Resources

Creating & Using React + TypeScript Projects

Learn about the core TypeScript concepts & features you'll need for this course and for working with TypeScript in general - with or without React.

Module Introduction

TypeScript Setup & Using TypeScript

Working with Types: Type Inference & Explicit Type Annotations

Basic Primitive Types

Invoking The TypeScript Compiler

Combining Types Union Types (Alternative Types)

Working with Object Types

Working with Array Types

Adding Types to Functions - Parameter & Return Value Types

Defining Function Types

Creating Custom Types / Type Aliases

Defining Object Types with Interfaces

Interfaces vs Custom Types

Merging Types

Being Specific With Literal Types

Adding Type Guards

Type Guards & Type Narrowing - A Closer Look

Making Sense Of Generic Types

Summary

Learn how to use TypeScript with React - how to type components and their props, how to use it with state and how to handle events and user input with TypeScript.

Creating a React + TypeScript Project

Understanding the Role of tsconfig.json

Building a First Component & Facing a Missing Type

Defining Component Props Types

Storing Props Types as a Custom Type or Interface

Defining a Type for Props with "children"

Component Props & The Special "key" Prop

Another Way Of Typing Components

Exercise: Creating a Header Component

Using useState() and TypeScript

Working with State & Outputting State-based Values

Another Exercise & Reusing Types Across Files

Passing Functions as Values - In A Type-Safe Way

Handling & Typing Events

Working with Generic Event Types

Using useRef() with TypeScript

Handling User Input In A Type-Safe Way

Learn how to use TypeScript with more advanced component patterns - for example when building dynamic, highly flexible or polymorphic components.

Building a More Dynamic & Flexible Component

Problem: Flexible Components With Required Prop Combinations

Solution: Building Components with Discriminated Unions

Onwards To A New Project

Building a Basic Wrapper Component

Building Better Wrapper Components with ComponentPropsWithoutRef

Building a Wrapper Component That Renders Different Elements

Working with Type Predicates & Facing TypeScript Limitations

Building a Basic Polymorphic Component

Building a Better Polymorphic Component with Generics

Examples: More Component Ideas

Using forwardRef with TypeScript

Building Another Wrapper Component (Custom Form Component)

Sharing Logic with "unknown" & Type Casting

Exposing Component APIs with useImperativeHandle (with TypeScript)

Alternative: Avoiding Type Casting with "as"

Learn how to use React's Context API & useReducer Hook with TypeScript - how to define type-safe actions and manage cross-application state.

The Starting Project

Creating a Context & Fitting Types

Creating a Type-Safe Provider Component

Accessing Context Type-Safe With A Custom Hook

Getting Started with useReducer() & TypeScript

A Basic Reducer Function & A Basic Action Type

Changing State via the Reducer Function

Using Better Action Types

Wiring Everything Up & Finishing the App

Learn how (and if) TypeScript affects side-effect handle, the usage of useEffect() and how data fetching can be done in a type-safe way.

Creating a First Side Effect

Using useEffect() with TypeScript

Managing An Interval With Refs & The Effect Cleanup Function

useEffect() & Its Dependencies

A Small Bug & Its Solution

Onwards to Data Fetching!

Building a Utility "get" Function with TypeScript

Fetching & Transforming Data

Alternative: Using the "zod" Library for Response Data Validation

Alternative: A Generic "get" Function

Handling Loading & Error States

Learn how to integrate Redux into a React + TypeScript application and how to configure & use type-safe Redux reducers and actions.

Redux Setup

Creating a Redux Store & A First Slice

Setting a State Type

A First Reducer & Controlling the Action Payload Type

Adding Logic To The Reducer

Providing the Redux Store

Dispatching Actions & Adjusting the useDispatch Hook

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Teaches the fundamentals of TypeScript, which is highly relevant to the React ecosystem

Offers a strong foundation for beginners to learn how to use TypeScript with React

Provides extensive coverage of advanced TypeScript concepts, such as generic types and type guards

Uses a series of hands-on projects to help learners apply their knowledge of TypeScript with React

Instructed by Maximilian Schwarzmüller, who is recognized for his expertise in React and TypeScript

May require learners to have some prior knowledge of TypeScript, which could be a barrier for complete beginners

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in React & TypeScript - The Practical Guide with these activities:

Review TypeScript Fundamentals

Show steps

Helps you brush up on TypeScript fundamentals and strengthen your understanding of core concepts.

Show steps

Revisit tutorials on TypeScript data types, variables, and operators.
Practice writing simple TypeScript functions and classes.
Review the TypeScript compiler and its usage.

Show all one activities

Career center

Learners who complete React & TypeScript - The Practical Guide will develop knowledge and skills that may be useful to these careers:

Front-End Engineer

Front-end Engineers design, develop, and maintain the user-facing interfaces of websites and applications. They work closely with back-end engineers to ensure that the user experience is seamless and that the application meets the business requirements. React & TypeScript - The Practical Guide is an excellent course for aspiring Front-end Engineers who want to learn how to use TypeScript to build type-safe React applications. The course covers all the core concepts and patterns you need to work with components, state, side effects, and more in a type-safe way.

See salaries and explore the career path for Front-End Engineer

TypeScript Developer

TypeScript Developers design, develop, and maintain TypeScript applications. They work closely with other developers to ensure that the application meets the business requirements and that the user experience is seamless. React & TypeScript - The Practical Guide is an excellent course for aspiring TypeScript Developers who want to learn how to use TypeScript to build type-safe React applications. The course covers all the core concepts and patterns you need to work with components, state, side effects, and more in a type-safe way.

See salaries and explore the career path for TypeScript Developer

React Developer

React Developers design, develop, and maintain React applications. They work closely with other developers to ensure that the application meets the business requirements and that the user experience is seamless. React & TypeScript - The Practical Guide is an excellent course for aspiring React Developers who want to learn how to use TypeScript to build type-safe React applications. The course covers all the core concepts and patterns you need to work with components, state, side effects, and more in a type-safe way.

See salaries and explore the career path for React Developer

Web Developer

Web Developers design, develop, and maintain websites and web applications. They work closely with other developers to ensure that the website meets the business requirements and that the user experience is seamless. React & TypeScript - The Practical Guide is an excellent course for aspiring Web Developers who want to learn how to use TypeScript to build type-safe React applications. The course covers all the core concepts and patterns you need to work with components, state, side effects, and more in a type-safe way.

See salaries and explore the career path for Web Developer

UI Engineer

UI Engineers design, develop, and maintain the user interfaces of websites and applications. They work closely with other engineers to ensure that the user experience is seamless and that the application meets the business requirements. React & TypeScript - The Practical Guide is an excellent course for aspiring UI Engineers who want to learn how to use TypeScript to build type-safe React applications. The course covers all the core concepts and patterns you need to work with components, state, side effects, and more in a type-safe way.

See salaries and explore the career path for UI Engineer

Full Stack Engineer

Full-Stack Engineers design, develop, and maintain both the front-end and back-end of websites and applications. They work closely with other engineers to ensure that the application meets the business requirements and that the user experience is seamless. React & TypeScript - The Practical Guide is an excellent course for aspiring Full-Stack Engineers who want to learn how to use TypeScript to build type-safe React applications. The course covers all the core concepts and patterns you need to work with components, state, side effects, and more in a type-safe way.

See salaries and explore the career path for Full Stack Engineer

UX Engineer

UX Engineers design, develop, and maintain the user experience of websites and applications. They work closely with other engineers to ensure that the user experience is seamless and that the application meets the business requirements. React & TypeScript - The Practical Guide may be useful for UX Engineers who want to learn how to use TypeScript to build type-safe React applications. However, the course focuses on front-end development, so it may not be as relevant for UX Engineers who are primarily interested in UX design.

See salaries and explore the career path for UX Engineer

Software Engineer

Software Engineers design, develop, and maintain software applications. They work closely with other engineers to ensure that the software meets the business requirements and that the user experience is seamless. React & TypeScript - The Practical Guide may be useful for Software Engineers who want to learn how to use TypeScript to build type-safe React applications. However, the course focuses on front-end development, so it may not be as relevant for Software Engineers who are primarily interested in back-end technologies or other areas of software engineering.

See salaries and explore the career path for Software Engineer

Back End Engineer

Back-end Engineers design, develop, and maintain the back-end infrastructure of websites and applications. They work closely with front-end engineers to ensure that the application meets the business requirements and that the user experience is seamless. React & TypeScript - The Practical Guide may be useful for Back-end Engineers who want to learn how to use TypeScript to build type-safe React applications. However, the course focuses on front-end development, so it may not be as relevant for Back-end Engineers who are primarily interested in back-end technologies.

See salaries and explore the career path for Back End Engineer

Data Scientist

Data Scientists are responsible for collecting, analyzing, and interpreting data. They work closely with other teams to ensure that the data is used to make informed decisions. React & TypeScript - The Practical Guide may be useful for Data Scientists who want to learn how to use TypeScript to build type-safe React applications. However, the course focuses on front-end development, so it may not be as relevant for Data Scientists who are primarily interested in data science.

See salaries and explore the career path for Data Scientist

Machine Learning Engineer

Machine Learning Engineers are responsible for developing and deploying machine learning models. They work closely with other teams to ensure that the models are used to make informed decisions. React & TypeScript - The Practical Guide may be useful for Machine Learning Engineers who want to learn how to use TypeScript to build type-safe React applications. However, the course focuses on front-end development, so it may not be as relevant for Machine Learning Engineers who are primarily interested in machine learning.

See salaries and explore the career path for Machine Learning Engineer

Product Manager

Product Managers are responsible for the product vision and roadmap. They work closely with other teams to ensure that the product meets the needs of the users and the business. React & TypeScript - The Practical Guide may be useful for Product Managers who want to learn how to use TypeScript to build type-safe React applications. However, the course focuses on front-end development, so it may not be as relevant for Product Managers who are primarily interested in product management.

See salaries and explore the career path for Product Manager

Software Architect

Software Architects are responsible for designing and developing the software architecture of a system. They work closely with other teams to ensure that the system meets the needs of the users and the business. React & TypeScript - The Practical Guide may be useful for Software Architects who want to learn how to use TypeScript to build type-safe React applications. However, the course focuses on front-end development, so it may not be as relevant for Software Architects who are primarily interested in software architecture.

See salaries and explore the career path for Software Architect

Technical Lead

Technical Leads are responsible for providing technical leadership to a team of engineers. They work closely with other teams to ensure that the project is completed on time, within budget, and to the required quality. React & TypeScript - The Practical Guide may be useful for Technical Leads who want to learn how to use TypeScript to build type-safe React applications. However, the course focuses on front-end development, so it may not be as relevant for Technical Leads who are primarily interested in technical leadership.

See salaries and explore the career path for Technical Lead

Project Manager

Project Managers are responsible for planning, organizing, and executing projects. They work closely with other teams to ensure that the project is completed on time, within budget, and to the required quality. React & TypeScript - The Practical Guide may be useful for Project Managers who want to learn how to use TypeScript to build type-safe React applications. However, the course focuses on front-end development, so it may not be as relevant for Project Managers who are primarily interested in project management.

See salaries and explore the career path for Project Manager

React & TypeScript - The Practical Guide

14 deals to help you save

What's inside

Learning objectives

Syllabus

Good to know

Save this course

Activities

Career center

Reading list

Share

Similar courses