React Crash Course 2024

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

Code:

React Front To Back Full Course:

Check out all my courses:

Social Media:

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

[bushigi]

Even though I don't need this, it's still unbelievable that someone would ever create such useful, lengthy videos FOR FREE. Thank you!

[marshax]

"It's JavaScript. You're always going to be confused." Well said.

[husseinkizz]

Thanks Brad, always one of the best teachers on internet, you taught me react 4 years ago, I now make react libraries and stuff, thanks man, can't appreciate your works enough!

[zdream]

import { Route, RouterProvider } from "react-router-dom";
import { createBrowserRouter } from "react-router-dom";

const router = createBrowserRouter([{ path: "/", element: <HomePage /> }]);

const App = () => {
return <RouterProvider router={router} />;
};

[naelcodes]

The timing is insane, needed a refresher. Thanks Brad

[codeJourneyGuides]

Omg i was searching for new react courses to learn and i just found the best one 😁 Hoping to complete this... thanks brad 👍

I HATE it when learning one thing becomes learning 4-5 things in an instant..this is a react course but just within few minutes you realize you don't know anything about Vite or Tailwind .. why can't one technology be learnt without having to learn 10 more side technologies? it just makes you lose focus

[OnD]

let me tell you something Brad, you're like my Big brother and tech mentor. even though i graduated in software engineering with 3.93GPA from the top technology University in my country; i didn't have much real world experiences. 3 years ago while i was in the University i start learning MERN Stack from you and JavaScript mastery Chanel. then i got a job and work for Ethiopian Military. while i was working for the Military i also got a chance to work for the biggest security agency in my country. right now i am working for a big private enterprise and 19 banks.

on top of that a year ago i started a software development company and i own 50% of the company.

i learn a lot from you than my university courses combined.

All i can say is thank you and God bless you!

[reginold]

Next MERN 2024 course pls with typescript this time ❤❤❤❤

[Jan-vy]

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

[vectoralphaSec]

Is there any chance you will be doing a 2024 Django Crash Course??

[zarianas]

Can you please tell us what extension or command you use to fix formating ( indentation and code format ). It seems like you have a keyboard shortcut or it's automatic . how is that possible . And thank you for this beautiful Course

[roshangobind]

For anyone whose tailwind CSS is not loading, make your postcss.config.js look like this

module.exports = {
plugins: {
tailwindcss: {
content: ['./index.html', './src/**/*.{js, ts, jsx, tsx}']
},
autoprefixer: {},
},
}

[JessieTraslavina]

I like the way you teach. You are very clear and bright. Not Salesy, like everyone else on yt. Thank you

[RoyMaina-px]

You didn't mention component names need to start with an uppercase letter, could have saved me hours of troubleshooting😞

[leimengdeK]

Finished it! took me 2 days to follow along but I did it! The journey of a thousand miles begins with the a single step.

[NBGdeki]

Hi, Brad! Are you maybe thinking to renew your old React course? That would be really cool 😎

[lhasungaming]

#weloveBradTraversy.🙌

Sir can you please help us make beginer friendly react projects too. Old ones are class based 🥲

[skydandelion]

Can you do a Angular 17 tutorial like this? highly appreciated if you could!

[devine_noise]

Hey Brad. Your speech pacing is a perfect speed for me to learn. I find a lot of tutorials want to rush through things. Thanks for the refresher on React. I’ve been building mainly Shopify sites for work and needed to brush up on React for our companies Next JS blog.