English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 86 Lessons (7h 57m) | 1.13 GB
Enhance your React and TypeScript technical skills and build a portfolio-worthy application that demonstrates to employers your ability to create complex, full-stack applications. Plus you’ll learn to utilize Vite for efficient project scaffolding and Supabase for database management and authentication.
Learn to use React with TypeScript, enhance your technical skills, and build a portfolio-worthy application that demonstrates to employers your ability to create complex, full-stack applications. Plus you’ll learn to utilize Vite for efficient project scaffolding and Supabase for database management and authentication!
WHAT YOU’LL LEARN
- Learn how to create a React app with TypeScript
- Understand the benefits of React TypeScript apps
- Build a comprehensive, standout portfolio project that will wow employers
- How to test React TypeScript applications
- Advanced UI techniques, such as drag and drop, to create engaging interfaces
- Type-safe programming skills for more reliable and maintainable code
Table of Contents
1 Project Demo
2 What is TypeScript_ Lesson Summary
3 Why use TypeScript with React_
4 Your First React TypeScript Application
5 Prepare Dev Environment – Windows
6 Prepare Dev Environment – MacOS
7 How to Set up a New Typescript Project
8 TypeScript Configuration Options
9 Setting up React TypeScript Using App Generators
10 Setting up React TypeScript App Using Create React App
11 Setting up React TypeScript Apps Using Vite
12 Setting up React TypeScript App Using Parcel
13 Configure Webpack with TypeScript
14 Configure ESLint and Prettier
15 Adding Third Party Libraries
16 Integrating with APIs
17 Deploying an App
18 What Are We Building_
19 Generate the App Scaffold
20 Setup Supabase and Netlify
21 Supabase Setup Continued
22 Types Basics
23 What Types Does TypeScript Have_
24 Creating Custom Types
25 Arrays and Tuples
26 Type Aliases
27 Union and Intersection Types
28 Interfaces
29 Enums
30 Functions
31 Parametric Types and Generics
32 Utility Types
33 Advanced Type Manipulations
34 Identifying and Addressing Type Errors
35 Using Props and State
36 Using Hooks
37 Handling Events
38 Using Context
39 Using Refs
40 Styling React Components
41 Define the Types
42 Basic Implementation
43 Cover Image Component
44 Spacer Component
45 Title Component
46 Basic Node
47 useFocusedNodeIndex Hook
48 Page Component
49 Render the Page and Test the App
50 Move State Management to Context
51 Create the usePageState Hook
52 Create AppStateContext
53 Make the BasicNode – the AppStateContext
54 Make the Page – the AppStateContext
55 Add Multiple Node Kinds
56 Create NodeTypeSwitcher
57 useOverflowsScreenBottom
58 Create CommandPanel
59 Render CommandPanel Inside the BasicNode
60 Make the Nodes Draggable
61 Create the NodeContainer Component
62 Reordering the Nodes
63 Using HOCs
64 Typing HOCs
65 Using Render Props
66 Implement Navigation
67 Create AuthSessionContext
68 Create the Auth Page
69 Create the Private Route Component
70 Sync the State with the Backend
71 Create the withInitialState HOC
72 Create Page Node Component
73 Create FileImage Component
74 Update the Cover Component
75 Create ImageNode Component
76 Upload the Project to Netlify
77 Testing with Jest or Vitest and React Testing Library
78 Setting Up Jest and React Testing Library
79 Setting Up Vitest and React Testing Library
80 Testing Components
81 Testing Hooks
82 Using Mocks
83 Prepare the Project for Migration
84 Migrate React Components
85 Migrate React Hooks
86 Update TypeScript Version
Resolve the captcha to access the links!