An Intro to JSX | PedroTech

Autoplay
Autocomplete

Previous Lesson Complete and Continue

Ultimate React Course - Beginner to Advanced

Welcome to the Course

Intro to The Course (3:33)
How to Learn This Course (3:02)
What is React and Why You Should Learn It? (4:14)

Getting Started with React

Installing NodeJS (3:03)
Setting up a React development environment (4:30)
VSCode Extensions (3:17)

Basic React Concepts

React Project Folder Structure (6:55)
An Intro to JSX (10:33)
What is the App Component? (2:46)
How to use Components? (10:23)
Lists in React (9:45)
CSS in React (9:10)

Component Project - Build A Simple Website

First React Project (3:34)
Making A Navbar (7:11)
Displaying Images (7:11)
Making the About Us Section (2:35)
Creating A Footer (3:38)

Intro to States in React

What is the useState Hook? (10:38)
What is the useState Hook? Part 2. (4:42)
What is the useState Hook? Part 3. (14:50)

Intro React Project - Task Tracker App

Beginner Project - Task Tracker App (35:03)

Free Resource - Build A Quiz App (optional)

What Are Free Resources?
Build a Quiz App

React Component Lifecycle

React's Virtual Dom (1:50)
Reacts Component Lifecycle (1:42)
React Component Lifecycle - useEffect Hook (15:40)
React Component Lifecycle - useEffect Hook Part 2. (8:41)

Routing in React

Routing in React (14:05)
Routing in React - Part 2. (14:28)

Advanced Forms in React

Forms in React - React Hook Form (25:36)

State Management

Intro To State Management - Global States (18:37)

Beginner Project - Build A Blog App

Intermediate Project - Build A Blog App (40:40)
Intermediate Project - Build A Blog App (Part 2.) (26:57)

Other Useful React Hooks

Rules of Hooks (4:05)
Learn the useReducer Hook (9:54)
Learn the useRef Hook (12:03)
Making Your Own Custom Hook (12:10)

Advanced State Management - Zustand

Why Zustand? (5:22)
Intro to Zustand (11:08)
Zustand Subscriptions (9:01)

Advanced Data Handling with React Query

Why React Query? (6:18)
The useQuery Hook (16:38)
The useMutation Hook (8:45)

Intermediate Project - Build a FullStack Game Manager

What are we building? (2:54)
Project Demo (2:26)
Project Structure (5:28)
Setup REST API (12:43)
Set Up React Project (6:02)
Setup the Project Routes (9:12)
Fetch List of Games (8:13)
Display List of Games (1:44)
Create Game Page (20:03)
Invalidating Queries (5:34)
Update Game Page (6:05)
Fetch Game By Id (3:47)
Reseting the Form (7:21)
Update Game Endpoint (4:28)
Update Game Mutation (2:49)
Invalidating More Queries (2:58)
Creating the Delete Game Endpoint (1:58)
Adding the Delete Button (5:28)
Creating the Theme Manager (11:59)
Creating the 404 Page Not Found (2:19)

Thinking In React - Best Practices

Rules of React (4:01)
Keeping Components Focused (5:08)
What Are Class Components? (4:19)

Transition to TypeScript in React

Why Typescript? (3:16)
Basic Typescript Types (6:23)
Functions in Typescript (2:41)
Custom Typescript Types (4:34)
Unions (3:33)
Interfaces (5:31)
Intersections (1:54)
Enums (2:40)
Setting Up Typescript in React (4:05)
Props using Typescript (3:39)
States using Typescript (3:30)
Forms using Typescript (2:02)
Zustand using Typescript (2:16)

Advanced Final Project - Real Time Chat Messaging App

What are we building? (4:44)
Project Demo (4:05)
Project Setup (4:42)
Setting up SupaBase (8:27)
Creating the Login Page (8:19)
Login Page Form Validation (5:15)
Setting Up Supabase Auth (9:42)
Supabase Auth Listener (12:04)
Setting Up Project Routes (11:08)
Chat Room Page (7:45)
Creating the Database Table (17:42)
Loading the Chat Messages (11:04)
Displaying the Messages (9:44)
Realtime Messages (9:34)
Create a New Room Page (11:08)
List Available Rooms (8:00)

Testing Strategies in React

Intro to Testing In React (3:25)
Setup Testing (9:16)
How to Test A Simple Component? (9:35)
How to Test User Events? (10:14)
How to Test Data Fetching? (11:46)
Bonus: Writing Tests for The Final Project (16:38)

Free Resource - What is New With React 19? (optional)

React 19 Changes

How To Deploy a React Website?

Deploying To Vercel (8:44)

What Now?

End of The Course
Free Resource - Build Your Personal Portfolio Using TailwindCSS (optional)

Teach online with

An Intro to JSX

Lesson content locked

If you're already enrolled, you'll need to login.

Enroll in Course to Unlock