Intro

What Is React? (Slide)

Why React? (Slide)

What Are Components? (Slide)

What Is State? (Slide)

What Are Hooks? (Slide)

What Is JSX? (Slide)

SPA, SSR, SSG (Slide)

Vite (Slide)

Project Demo

Setup React With Vite

File Explanation

Boilerplate Cleanup

Tailwind CSS Setup

JSX Crash Course

Start Homepage

Navbar Component

Image Import

Hero Component

Props

Default Props

Wrapper Components

JobListings Component

Create Lists With map()

Single JobListing Component

Limit Jobs to 3

useState() Hook & Desc Toggle

Creating an Event

Updating Component State

React Icons Package

React Router Setup

Create Routes From Elements

Router Provider

Homepage Component/Route

Layouts

Jobs Page Component/Route

Link Component

Custom 404 Page

Active Links With NavLink

Conditional Rendering

JSON Server Setup

useEffect() & Data Fetching

Loading Spinner

Proxying

Single Job Page

useParams() to Get ID

Data Loaders

Single Job Output

Add Job Page

Working With Forms

Form Submission

Pass Function as Prop

POST Request to Add Job

Delete Job Button/function

DELETE Request to Remove Job

React Toastify Package

Edit Job Page/Form

Update Form Submission

PUT Request to Update Job

Build Static Assets For Production

Traversy Media

Learn the basics of React, such as components, props, state, data fetching, and more, while building a job listing frontend.

Code:
https://github.com/bradtraversy/react-crash-2024

React Front To Back Full Course:
https://www.traversymedia.com/Modern-React-Front-To-Back-Course

Check out all my courses:
https://traversymedia.com

Social Media:
Github - https://github.com/bradtraversy
Twitter - https://twitter.com/traversymedia
Instagram - https://www.instagram.com/traversymedia
Facebook - https://www.facebook.com/traversymedia
Linkedin - https://www.linkedin.com/in/bradtraversy

Timestamps:

0:00 - Intro
1:55 - What Is React? (Slide)
3:43 - Why React? (Slide)
7:19 - What Are Components? (Slide)
8:21 - What Is State? (Slide)
10:00 - What Are Hooks? (Slide)
11:17 - What Is JSX? (Slide)
12:42 - SPA, SSR, SSG (Slide)
15:38  - Vite (Slide)
16:30 - Project Demo
19:53 - Setup React With Vite
22:29 - File Explanation
25:11 - Boilerplate Cleanup
26:48 - Tailwind CSS Setup
30:24 - JSX Crash Course
39:37 - Start Homepage 
42:00 - Navbar Component
43:56 - Image Import
45:24 - Hero Component
46:17 - Props
48:00 - Default Props
48:51 - Wrapper Components
55:14 - JobListings Component
58:50 - Create Lists With map()
1:03:20 - Single JobListing Component
1:05:49 - Limit Jobs to 3
1:07:50 - useState() Hook & Desc Toggle
1:13:07 - Creating an Event
1:14:20 - Updating Component State
1:16:00 - React Icons Package
1:18:00 - React Router Setup
1:20:21 - Create Routes From Elements
1:21:36 - Router Provider
1:22:36 - Homepage Component/Route
1:24:40 - Layouts
1:29:06 - Jobs Page Component/Route
1:30:50 - Link Component
1:34:20 - Custom 404 Page
1:36:55 - Active Links With NavLink
1:41:00 - Conditional Rendering
1:43:10 - JSON Server Setup
1:47:00 - useEffect() & Data Fetching
1:53:07 - Loading Spinner
1:51:06 - Conditional Fetching
1:59:45 - Proxying
2:03:38 - Single Job Page
2:09:04 - useParams() to Get ID
2:12:25 - Data Loaders
2:16:36 - Single Job Output
2:22:00 - Add Job Page
2:23:40 - Working With Forms
2:30:05 - Form Submission
2:35:27 - Pass Function as Prop
2:39:32 - POST Request to Add Job
2:41:45 - Delete Job Button/function
2:45:12 - DELETE Request to Remove Job
2:46:50 - React Toastify Package
2:50:08 - Edit Job Page/Form
2:56:05 - Update Form Submission
2:58:54 - PUT Request to Update Job
3:02:10 - Build Static Assets For Production

React Crash Course 2024

React Crash Course 2024

React Crash Course 2024

Get Full Course Access

Highly Recommended Courses

Explore top skills

In-demand Careers

Popular Topics

Creative Skills

Business Skills

Choose your learning path