React & TypeScript Mastery
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:
- State Management: useReducer, useContext, Redux Toolkit, Zustand, and saving state in LocalStorage.
- Styles and Design: working with Figma, design systems, Tailwind CSS, responsive layout, animations, and UI libraries.
- Advanced React Techniques: asynchronous rendering, Suspense, testing with Jest, debugging, and strict mode.
- 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
Watch Online React & TypeScript Mastery
All Course Lessons (62)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionComments
0 commentsWant to join the conversation?
Sign in to commentSimilar courses
Learn React Hooks By Building A Real Application
React and WebRTC 2023 & Sharing Location App with Video Chat
Transform Your Craft with TDD: Master clean code and testing
Full Stack Development
