React 18 for Beginners

React 18 for Beginners

English | MP4 | AVC 1920×1080 | AAC 44KHz 2ch | 119 Lessons (7h 58m) | 1.33 GB

A Step-by-Step Guide to Building Modern Web Apps with React and TypeScript

React 18: From Zero to Hero
React is the most popular JavaScript library for building front-ends. It was created by Facbeook and is widely used for building web, mobile, and desktop apps.

With so many uses, it’s one of best the tools to learn these days.

The problem is: React is complicated and most books and courses confuse learners or show outdated ways of using React that nobody uses anymore. That’s why I’ve created this series for you.

I’ve put together what I’ve learned about React over the last 5 years into a series of easy-to-understand videos packed with the latest best practices and techniques using real-world examples and a full-blown production-grade project.

Comprehensive, clear, concise, and free of fluff.

By the end of this course, you’ll be able to…

  • Confidently build front-end apps with React and TypeScript
  • Apply the latest techniques and best practices
  • Troubleshoot errors with ease
  • Write clean code like a pro
  • Get ready to learn more advanced concepts

What You’ll Learn…
This course is the first part of a two-part series and covers the fundamentals. You’ll learn how to:

  • Build reusable function components
  • Style your components using vanilla CSS, CSS modules, and CSS-in-JS
  • Manage component state
  • Build forms with React Hook Forms
  • Implement form validation using Zod
  • Connect your React apps to the backend
  • Deploy your React apps
  • Use VSCode shortcuts to increase your productivity
  • Write clean code like a pro
  • Apply best practices

The second part covers advanced concepts. You’ll learn how to:

  • Use React Router to handle navigation within your application
  • Implement global state management with React Context API or Zustand
  • Use React Query for efficient data fetching and caching
  • Implement authentication using Firebase
  • Optimize performance with memoization, code splitting, and lazy loading
  • And more…
Table of Contents

1 Welcome
2 Prerequisites
3 What is React
4 Setting Up the Development Environment
5 Creating a React App
6 Project Structure
7 Creating a React Component
8 How React Works
9 React Ecosystem
10 Introduction
11 Creating a ListGroup Component
12 Fragments
13 Rendering Lists
14 Conditional Rendering
15 Handling Events
16 Managing State
17 Passing Data via Props
18 Passing Functions via Props
19 State vs Props
20 Passing Children
21 Inspecting Components with React Dev Tools
22 Exercise- Building a Button Component
23 Exercise- Showing an Alert
24 Introduction
25 Vanilla CSS
26 CSS Modules
27 CSS-in-JS
28 Separation of Concerns
29 Inline Styles
30 Popular UI Libraries
31 Adding Icons
32 Exercise- Using CSS Modules
33 Building a Like Component
34 Introduction
35 Understanding the State Hook
36 Choosing the State Structure
37 Keeping Components Pure
38 Understanding the Strict Mode
39 Updating Objects
40 Updating Nested Objects
41 Updating Arrays
42 Updating Array of Objects
43 Simplifying Update Logic with Immer
44 Sharing State between Components
45 Exercise- Updating State
46 Exercise- Building an ExpandableText Component
47 Introduction
48 Building a Form
49 Handling Form Submission
50 Accessing Input Fields
51 Controlled Components
52 Managing Forms with React Hook Form
53 Applying Validation
54 Schema based Validation with Zod
55 Disabling the Submit Button
56 Project- Expense Tracker
57 Building ExpenseList
58 Building ExpenseFilter
59 Building the Expense Form
60 Integrating with React Hook Form and Zod
61 Adding an Expense
62 Introduction
63 Understanding the Effect Hook
64 Effect Dependencies
65 Effect Clean Up
66 Fetching Data
67 Understanding HTTP Requests
68 Handling Errors
69 Working with Async and Await
70 Cancelling a Fetch Request
71 Showing a Loading Indicator
72 Deleting Data
73 Creating Data
74 Updating Data
75 Extracting a Reusable API Client
76 Extracting the User Service
77 Creating a Generic HTTP Service
78 Creating a Custom Data Fetching Hook
79 What We’ll Build
80 Setting Up the Project
81 Installing Chakra UI
82 Creating a Responsive Layout
83 Building the Navigation Bar
84 Implementing the Dark Mode
85 Building the Çolor Mode Switch
86 Fetching the Games
87 Creating a Custom Hook for Fetching Games
88 Building Game Cards
89 Displaying Platform Icons
90 Displaying Critic Score
91 Getting Optimized Images
92 Improving User Experience with Loading Skeletons
93 Refactor- Removing Duplicated Styles
94 Fetching the Genres
95 Creating a Generic Data Fetching Hook
96 Displaying the Genres
97 Showing a Spinner
98 Filtering Games by Genre
99 Highlighting the Selected Genre
100 Building Platform Selector
101 Filtering Games by Platform
102 Refactoring- Extracting a Query Object
103 Building Sort Selector
104 Sorting Games
105 Handling Games without an Image
106 Fixing the Issue with Chakra Menus
107 Building Search Input
108 Searching Games
109 Adding a Dynamic Heading
110 Cleaning Up the Genres
111 Cleaning Up the Game Cards
112 Adding Emojis
113 Shipping Static Data
114 Customizing the Chakra Theme
115 Refactoring Game Grid
116 Building for Production
117 Deploying to Vercel
118 What’s Next
119 Course Wrap Up