React & TypeScript Mastery

24h 15m 54s
English
Paid

Course description

React & TypeScript Mastery is a practical course that will guide you step-by-step from the basics to an advanced level in developing modern applications with React using TypeScript.

You will begin with a basic introduction to React and TypeScript, learn how the library differs from a framework, and when to choose Next.js. Then, you will set up the working environment, learn how to create projects from scratch, and deploy them to production.

The course details the fundamental features of TypeScript: types, annotations, interfaces, generics, and compiler configuration. Based on this knowledge, you will move on to studying the basics of React: components and JSX/TSX, props and state, events, list rendering, forms, component lifecycle, and hooks (useState, useEffect, useRef, custom hooks).

Read more about the course

Individual modules are dedicated to:

  1. State Management: useReducer, useContext, Redux Toolkit, Zustand, and saving state in LocalStorage.
  2. Styles and Design: working with Figma, design systems, Tailwind CSS, responsive layout, animations, and UI libraries.
  3. Advanced React Techniques: asynchronous rendering, Suspense, testing with Jest, debugging, and strict mode.
  4. Performance Optimization: useMemo, useCallback, memoization, virtualization, and code splitting.


The final part of the course is a real project: a full-fledged eCommerce platform with a cart, authentication via Firebase, product management, and payment integration through Stripe. You will go through all stages—from design to deployment in production.

Watch Online

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 62 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online React & TypeScript Mastery

0:00
/
#1: IntroductionToReact

All Course Lessons (62)

#Lesson TitleDurationAccess
1
IntroductionToReact Demo
10:33
2
LibraryVSFramework
11:13
3
Introduction to TypeScript
09:23
4
SettingUpNodeJS
12:12
5
Create a new React App
12:28
6
Setting up GitHub
13:11
7
Deploying our first App
05:41
8
Getting Started with TypeScript
15:53
9
Advanced Types
17:53
10
Funtions in TypeScript
31:46
11
Classes in TypeScript
15:03
12
Generics in TypeScript
26:32
13
Compiler Options
19:01
14
react components & JSX-TSX
21:16
15
props and state in ts
22:39
16
event handling
17:28
17
conditional rendering
25:18
18
list rendering
08:33
19
basics hooks and components lifecycles
15:47
20
Dom manipulation with refs
11:36
21
custom hooks
23:51
22
introduction to state management
05:33
23
React useReducer
28:34
24
Providers and React usecontext
33:38
25
Redux Toolkit
24:19
26
zustad
16:40
27
Local Storage
20:13
28
Figma Basics
46:33
29
images
23:03
30
Inline Styles
19:00
31
CSS MODULES
10:42
32
tailwind css
17:22
33
responsive design
11:41
34
Animations
07:42
35
UI LIBRARIES
11:57
36
following a design system
02:01:49
37
introduction to Advanced React
04:19
38
Data Fetching
57:36
39
advanced custom hooks
41:35
40
React Suspense
25:07
41
Strict Mode and Linting
11:51
42
Unit Testing
30:49
43
Debugging React
21:58
44
useMemo
29:45
45
useCallback
18:14
46
Memoization
09:29
47
Virtualization
16:16
48
Introduction to Final Project
09:32
49
Project Setup
16:41
50
Layout and Hero Section
28:17
51
Connecting to Firebase
13:07
52
Firebase Google Auth
24:00
53
Data Modeling With Firestore DB
31:57
54
Saving Users Profiles in Firebase
11:14
55
Fetching and Displaying Products
21:18
56
Dynamic Route For Checkout
24:10
57
Intro to Stripe
22:04
58
Implementing Stripe Payments
01:34:05
59
Handling Stripe Webhooks
49:48
60
Displaying Purchased Products
51:59
61
Production Readiness
20:20
62
Production Deployment
24:20

Unlock unlimited learning

Get instant access to all 61 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Laravel with React JS - Build Twitter Like Real Time Web App

Laravel with React JS - Build Twitter Like Real Time Web App

Sources: udemy
Do you want to use React Js with Laravel to build powerful web applications? How about building a twitter like real time web app while learning Modern JavaScrip
4 hours 56 minutes 37 seconds
Project React. Build a complex React project as a total beginner

Project React. Build a complex React project as a total beginner

Sources: Cosden Solutions
Project React is a course featuring a unique application that will guide you step by step in creating large and complex applications using React. No prior exper
16 hours 31 minutes 5 seconds
MERN Stack Web Development with Ultimate Authentication

MERN Stack Web Development with Ultimate Authentication

Sources: udemy
MERN Stack (MongoDB Express React Node) FullStack Project from Scratch to Live Server with production ready Authentication Learn MERN stack web development by building productio...
9 hours 24 minutes 59 seconds
Mastering Next.js - 50+ Lesson Video Course on React and Next

Mastering Next.js - 50+ Lesson Video Course on React and Next

Sources: masteringnuxt.com
The premiere video course for building static and server-side rendered applications with Next.js and React. Sign up now and get two videos instantly!
5 hours 9 minutes 45 seconds
Add React Storybook to a Project

Add React Storybook to a Project

Sources: egghead
In this lesson, we show how to setup React Storybook into an existing React project. We’ll go through common configuration files and how to adjust them.
3 minutes 36 seconds