React & TypeScript - The Practical Guide

Focused View

Academind by Maximilian Schwarzmüller,Maximilian Schwarzmüller

7:21:28

31 View

1 - Introduction

1 - Welcome To The Course.mp4

01:26

2 - Why React TypeScript.mp4

01:56

3 - About The Course Course Content.mp4

01:46

4 - Course Resources.txt

4 - How To Get The Most Out Of The Course.mp4

02:59

4 - Join Academind Discord Community.txt

5 - Learning Community Course Resources.html

6 - Creating Using React TypeScript Projects.mp4

01:00

2 - TypeScript Basics Core Concepts

7 - Module Introduction.mp4

01:13

8 - CodeSandbox Project.txt

8 - TypeScript Setup Using TypeScript.mp4

03:01

9 - Working with Types Type Inference Explicit Type Annotations.mp4

07:46

10 - Basic Primitive Types.mp4

01:08

11 - Invoking The TypeScript Compiler.mp4

03:13

12 - Combining Types Union Types Alternative Types.mp4

02:21

13 - Working with Object Types.mp4

05:40

14 - Working with Array Types.mp4

03:59

15 - Adding Types to Functions Parameter Return Value Types.mp4

05:04

16 - Defining Function Types.mp4

03:28

17 - Creating Custom Types Type Aliases.mp4

03:57

18 - Defining Object Types with Interfaces.mp4

03:06

19 - Interfaces vs Custom Types.mp4

04:24

20 - Being Specific With Literal Types.mp4

04:21

21 - Merging Types.mp4

03:05

22 - Adding Type Guards.mp4

03:42

23 - Type Guards Type Narrowing A Closer Look.html

24 - Making Sense Of Generic Types.mp4

12:20

25 - Summary.mp4

00:35

3 - Using TypeScript with React Essentials

26 - Module Introduction.mp4

01:13

27 - Creating a React TypeScript Project.mp4

06:31

28 - CodeSandbox Starting Project.txt

28 - Local Starting Project.txt

28 - Understanding the Role of tsconfigjson.mp4

05:04

28 - tsconfigjson.txt

29 - Building a First Component Facing a Missing Type.mp4

05:47

29 - ReactJS Crash Course.txt

30 - Defining Component Props Types.mp4

04:05

31 - Component Props The Special key Prop.html

32 - Storing Props Types as a Custom Type or Interface.mp4

02:04

33 - Defining a Type for Props with children.mp4

07:02

34 - Another Way Of Typing Components.mp4

03:18

35 - Exercise Creating a Header Component.mp4

06:11

36 - Using useState and TypeScript.mp4

06:39

37 - Working with State Outputting Statebased Values.mp4

05:49

38 - Another Exercise Reusing Types Across Files.mp4

07:31

39 - Passing Functions as Values In A TypeSafe Way.mp4

10:07

40 - Handling Typing Events.mp4

08:00

41 - Working with Generic Event Types.mp4

04:24

42 - Using useRef with TypeScript.mp4

08:50

43 - Handling User Input In A TypeSafe Way.mp4

05:08

44 - Summary.mp4

01:42

4 - Advanced Component Types Dynamic Components Polymorphic Components More

45 - Module Introduction.mp4

01:31

46 - Building a More Dynamic Flexible Component.mp4

11:08

46 - CodeSandbox Starting Project.txt

46 - Local Starting Project.txt

46 - indexcss.txt

47 - Problem Flexible Components With Required Prop Combinations.mp4

06:19

48 - Solution Building Components with Discriminated Unions.mp4

06:06

49 - CodeSandbox Starting Project.txt

49 - Local Starting Project.txt

49 - Onwards To A New Project.mp4

01:14

50 - Building a Basic Wrapper Component.mp4

04:56

51 - Building Better Wrapper Components with ComponentPropsWithoutRef.mp4

07:25

52 - Building a Wrapper Component That Renders Different Elements.mp4

07:05

53 - Working with Type Predicates Facing TypeScript Limitations.mp4

10:51

54 - Building a Basic Polymorphic Component.mp4

05:26

55 - Building a Better Polymorphic Component with Generics.mp4

10:06

56 - Examples More Component Ideas.html

57 - Using forwardRef with TypeScript.mp4

07:32

58 - Building Another Wrapper Component Custom Form Component.mp4

03:45

59 - Sharing Logic with unknown Type Casting.mp4

10:10

60 - Alternative Avoiding Type Casting with as.html

61 - Exposing Component APIs with useImperativeHandle with TypeScript.mp4

09:58

62 - Summary.mp4

00:57

5 - Advanced TypeSafe State with Context API useReducer

63 - Module Introduction.mp4

00:59

64 - CodeSandbox Starting Project.txt

64 - Local Starting Project.txt

64 - The Starting Project.mp4

01:39

65 - Creating a Context Fitting Types.mp4

07:07

66 - Creating a TypeSafe Provider Component.mp4

04:40

67 - Accessing Context TypeSafe With A Custom Hook.mp4

06:33

68 - Getting Started with useReducer TypeScript.mp4

03:15

69 - A Basic Reducer Function A Basic Action Type.mp4

06:28

70 - Changing State via the Reducer Function.mp4

02:44

71 - Using Better Action Types.mp4

05:47

72 - Wiring Everything Up Finishing the App.mp4

07:26

6 - Side Effects useEffect Data Fetching with TypeScript

73 - Module Introduction.mp4

00:46

74 - CodeSandbox Starting Project.txt

74 - Creating a First Side Effect.mp4

04:45

74 - Local Starting Project.txt

75 - Using useEffect with TypeScript.mp4

04:31

76 - Managing An Interval With Refs The Effect Cleanup Function.mp4

08:53

77 - useEffect Its Dependencies.mp4

05:45

78 - A Small Bug Its Solution.html

79 - CodeSandbox Starting Project.txt

79 - Local Starting Project.txt

79 - Onwards to Data Fetching.mp4

02:10

80 - Building a Utility get Function with TypeScript.mp4

07:00

81 - Fetching Transforming Data.mp4

13:27

82 - Alternative Using the zod Library for Response Data Validation.html

83 - Alternative A Generic get Function.html

84 - Handling Loading Error States.mp4

08:14

7 - Using Redux with TypeScript

85 - Module Introduction.mp4

01:04

86 - CodeSandbox Starting Project.txt

86 - Local Starting Project.txt

86 - The Starting Project.mp4

02:58

87 - Redux Setup.mp4

01:18

87 - Updated CodeSandbox Starting Project with Redux.txt

88 - Creating a Redux Store A First Slice.mp4

05:17

89 - Setting a State Type.mp4

02:40

90 - A First Reducer Controlling the Action Payload Type.mp4

03:28

91 - Adding Logic To The Reducer.mp4

06:17

92 - Providing the Redux Store.mp4

02:34

93 - Dispatching Actions Adjusting the useDispatch Hook.mp4

08:25

94 - Creating a TypeSafe useSelector Hook.mp4

05:15

95 - Selecting Transforming Redux Store Data.mp4

03:36

96 - Finishing Touches Summary.mp4

09:00

8 - Practice Project A Book a Session Management Application

97 - CodeSandbox Starting Project.txt

97 - Local Starting Project.txt

97 - Your Task.mp4

02:03

98 - Your Task Details.html

99 - Hints.html

100 - An Example Solution.html

100 - CodeSandbox Finished Project.txt

100 - Local Finished Project.txt

Description

Build type-safe React apps & use TypeScript to enhance your components, state management, Redux & side effects code.

What You'll Learn?

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

Who is this for?

React developers who want to improve the quality & type-safety of their codebase

TypeScript developers who want to apply their knowledge to React apps

What You Need to Know?

Basic React knowledge of core concepts (components, JSX, state) is needed

NO prior TypeScript knowledge is required

More details

Description
TypeScript is an amazing technology that helps developers write better code with less errors - simply because it let's you catch & fix type-related errors immediately whilst writing the code (instead of when testing the application).
But using TypeScript withÂ React can sometimes be tricky. Especially when building more complex, dynamic components, defining the right types can be challenging.
That's why IÂ built this course!
This course will teach you how to use TypeScript with React - and, of course, the course will introduce you to all the core concepts &Â patterns you need to work with components, state, side effects & more in a type-safe way!
This course will:
Teach you WHYÂ using TypeScript in your React projects might be a good idea
Introduce you to the key TypeScript concepts you'll need - when working with React &Â in general
Get you started with using TypeScript with React - for components, state &Â more
Explore more advanced, complex patterns &Â examples
Help you with building dynamic or even polymorphic components in a type-safe way
Teach you how to use TypeScript with React's Context API
Explore how you can enhance code used with useReducer() with help of TypeScript
Cover data fetchingÂ &Â useEffect() with TypeScript
Use the popular Redux library in a type-safe way
Build or improve multiple demo projects so that can apply your knowledge
By the end of the course, you'll be able to use TypeScript in your own (future)Â React projects and write better, more type-safe code.
Course prerequisites:
NOÂ prior TypeScript knowledge is required - though basic knowledge will help (but the course includes an introduction module)
Basic React knowledge (components, JSX, state)Â ISÂ required - more advanced concepts will be explained though
Who this course is for:
React developers who want to improve the quality & type-safety of their codebase
TypeScript developers who want to apply their knowledge to React apps

User Reviews

Rating

average 0

Total votes0

Focused display

Bundling the courses and know how of successful instructors, Academind strives to deliver high quality online education. Online Education, Real-Life Success - that's what Academind stands for. Learn topics like web development, data analyses and more in a fun and engaging way.We've taught more than 2,000,000 students on a broad variety of topics. We'd love to teach you as well! :)Keep learning!

Maximilian Schwarzmüller

Instructor's Courses

Experience as (Web) DeveloperStarting out at the age of 12 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. Besides web development I also explored Python and other non-web-only languages. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.Starting web development on the backend (PHP with Laravel, NodeJS, Python) I also became more and more of a frontend developer using modern frameworks like React, Angular or VueJS in a lot of projects. I love both worlds nowadays!I also build full-stack applications and acquired expert DevOps and cloud computing knowledge - proven by the many AWS certifications I hold (incl. the top-level Solutions Architect Professional certification).As a self-taught developer I had the chance to broaden my horizon by studying Business Administration where I hold a Master's degree. That enabled me to work in a major strategy consultancy as well as a bank. While learning, that I enjoy development more than these fields, the time in this sector greatly improved my overall experience and skills.Experience as InstructorAs a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enables me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses and more than 2,000,000 students on Udemy is the best proof for that.Whether working as development instructor or teaching Business Administration I always received great feedback. The most rewarding experience is to see how people find new, better jobs, build awesome web applications, acquire amazing projects or simply enjoy their hobby with the help of my content.Together with Manuel Lorenz, I founded Academind to offer the best possible learning experience to our more than 2,000,000 students.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.