5- Creating a React Component | Code with Mosh

Show Sidebar

Autoplay
Autocomplete

Previous Lesson Complete and Continue

React 18 for Beginners

1 - Getting Started (2m)

1- Welcome (1:41)
2- Prerequisites (0:49)
3- Source Code
4- Questions and Support
5- Connect with Me
6- Learning Paths

Getting Started with React (18m)

1- What is React (2:14)
2- Setting Up the Development Environment (1:28)
3- Creating a React App (2:54)
4- Project Structure (2:03)
5- Creating a React Component (5:22)
6- How React Works (2:20)
7- React Ecosystem (1:23)
8 - Summary
Side Note: My VSCode Theme

Building Components (1h)

1- Introduction (0:35)
2- Creating a ListGroup Component (5:36)
3- Fragments (2:28)
4- Rendering Lists (3:30)
5- Conditional Rendering (5:25)
6- Handling Events (6:07)
7- Managing State (6:03)
8- Passing Data via Props (3:58)
9- Passing Functions via Props (3:46)
10- State vs Props (1:33)
11- Passing Children (5:05)
12- Inspecting Components with React Dev Tools (2:10)
13- Exercise- Building a Button Component (7:02)
14- Exercise- Showing an Alert (5:02)
15- Summary

Styling Components (32m)

1- Introduction (0:26)
2- Vanilla CSS (4:11)
3- CSS Modules (3:45)
4- CSS-in-JS (7:51)
5- Separation of Concerns (2:30)
6- Inline Styles (1:02)
7- Popular UI Libraries (2:03)
8- Adding Icons (1:52)
9- Exercise- Using CSS Modules (3:00)
10- Building a Like Component (5:19)
11- Summary

Managing Component State (42m)

1- Introduction (0:25)
2- Understanding the State Hook (4:28)
3- Choosing the State Structure (2:56)
4- Keeping Components Pure (2:03)
5- Understanding the Strict Mode (2:42)
6- Updating Objects (2:21)
7- Updating Nested Objects (2:15)
8- Updating Arrays (1:49)
9- Updating Array of Objects (1:46)
10- Simplifying Update Logic with Immer (2:56)
11- Sharing State between Components (6:22)
12- Exercise- Updating State (4:49)
13- Exercise- Building an ExpandableText Component (6:22)
14- Summary

Building Forms (71m)

1- Introduction (0:24)
2- Building a Form (3:45)
3- Handling Form Submission (2:23)
4- Accessing Input Fields (5:46)
5- Controlled Components (4:33)
6- Managing Forms with React Hook Form (4:33)
7- Applying Validation (5:38)
8- Schema based Validation with Zod (7:33)
9- Disabling the Submit Button (0:45)
10- Project- Expense Tracker (1:23)
11- Building ExpenseList (10:28)
12- Building ExpenseFilter (5:51)
13- Building the Expense Form (4:36)
14- Integrating with React Hook Form and Zod (9:54)
15- Adding an Expense (3:35)
16- Summary
A Quick Note

Connecting to the Backend (69m)

1- Introduction (0:53)
2- Understanding the Effect Hook (3:50)
3- Effect Dependencies (8:34)
4- Effect Clean Up (2:30)
5- Fetching Data (5:32)
6- Understanding HTTP Requests (3:02)
7- Handling Errors (2:03)
8- Working with Async and Await (4:21)
9- Cancelling a Fetch Request (2:27)
10- Showing a Loading Indicator (3:02)
11- Deleting Data (5:50)
12- Creating Data (5:09)
13- Updating Data (5:25)
14- Extracting a Reusable API Client (3:55)
15- Extracting the User Service (8:22)
16- Creating a Generic HTTP Service (8:00)
17- Creating a Custom Data Fetching Hook (3:53)
18- Summary

Project: Building a Video Game Discovery App (3h)

1- What We'll Build (1:23)
2- Source Code
Up for a Challenge?
3- Setting Up the Project (1:31)
4- Installing Chakra UI (5:00)
5- Creating a Responsive Layout (4:53)
6- Building the Navigation Bar (3:58)
7- Implementing the Dark Mode (2:44)
8- Building the Çolor Mode Switch (3:36)
9- Fetching the Games (8:19)
Note: Secure API Key Management
10- Creating a Custom Hook for Fetching Games (4:59)
11- Building Game Cards (6:08)
12- Displaying Platform Icons (13:42)
13- Displaying Critic Score (4:20)
14- Getting Optimized Images (3:56)
15- Improving User Experience with Loading Skeletons (5:37)
16- Refactor- Removing Duplicated Styles (2:34)
17- Fetching the Genres (4:31)
18- Creating a Generic Data Fetching Hook (6:42)
19- Displaying the Genres (8:52)
20- Showing a Spinner (1:27)
21- Filtering Games by Genre (12:33)
22- Highlighting the Selected Genre (1:43)
23- Building Platform Selector (4:30)
24- Filtering Games by Platform (6:15)
25- Refactoring- Extracting a Query Object (5:11)
26- Building Sort Selector (2:59)
27- Sorting Games (8:10)
28- Handling Games without an Image (1:07)
29- Fixing the Issue with Chakra Menus (1:28)
30- Building Search Input (2:38)
31- Searching Games (6:05)
32- Adding a Dynamic Heading (4:38)
33- Cleaning Up the Genres (2:20)
34- Cleaning Up the Game Cards (1:23)
35- Adding Emojis (5:35)
36- Shipping Static Data (3:16)
37- Customizing the Chakra Theme (2:57)
38- Refactoring Game Grid (0:56)
39- Building for Production (2:49)
40- Deploying to Vercel (4:42)
41- Course Wrap Up (0:25)
42- Course Summary
43- What's Next
44- Feedback

5- Creating a React Component

Complete and Continue