React JS Full Course 2024

Support the Channel:

Connect with me:

0:00 Intro
2:30 Why learn React?
3:01 Prerequisites
6:56 Setup React with Vite
8:00 Install NPM Dependencies
9:10 Project File Overview
18:58 Intro to Components
27:10 Creating a Component
38:35 createElement function
45:04 Component Props
52:30 Evaluating Props
58:28 Type Checking Props
1:10:40 Children Components
1:14:28 Fragments
1:21:00 Styling with CSS & SCSS
1:37:41 Dynamic Rendering Lists/Arrays
2:05:23 Conditional Rendering
2:25:00 Handling Events
2:29:56 Input Field onChange Event
2:43:05 Form onSubmit Event
2:51:30 Registering Window Events
2:54:38 State
2:59:18 useState Hook
3:06:25 Binding State to Input Fields
3:30:00 State with Arrays
3:52:00 Updating Element in State Array
4:01:50 Delete Element from State Array
4:09:31 Add Elements to State Array
4:20:57 useEffect Hook
4:30:10 useEffect Dependency Array
4:40:00 Fetching Data Example
5:01:12 AbortController
5:04:00 useEffect Cleanup Function
5:08:30 POST Request Example
5:24:05 Creating Custom Hooks
5:43:38 React Context
5:50:41 Creating a Context
5:53:53 Using Context Provider
5:55:29 Consuming Context
6:05:43 Using State with Context
6:12:24 Updating Values in Context
6:16:17 Custom Data Fetching Hook
6:41:16 Intro to React Router
6:43:20 createBrowserRouter
6:45:40 Setting up Routes
6:50:40 Nested/Child Routes
6:52:48 Outlet
6:56:00 Link Component
6:59:37 useNavigate Hook
7:03:08 Navigating Programmatically
7:05:16 Passing State to Route
7:14:42 Intro to Unit Testing with Vitest
7:17:00 Setting up Vitest & React Testing Library
7:22:16 Writing our First Test
7:26:40 Rendering Component Under Test
7:29:48 Snapshot Testing
7:36:18 Using Screen to Query Elements
7:37:25 getByText query
7:45:00 Understanding getBy vs queryBy queries
7:53:00 findBy queries
7:55:52 findByText example
8:04:38 More examples of Testing
8:21:00 Using getByRole to query Buttons
8:26:30 Firing User Events
8:27:23 Simulating Click Event
8:34:11 Querying for Input Elements
8:38:35 getByLabelText example
8:43:56 Testing Multiple Elements of Same Instances
8:46:22 Data Test IDs
8:49:02 getByTestId example
8:53:30 using within() to search elements inside an HTML Element
9:15:51 Simulating type event
9:21:00 Other queries
9:28:24 Testing Component with Context API
9:57:40 Using Mock Service Worker to Mock API Requests

[ansonthedev]

Please be sure to like this video and leave a comment to help share and spread this video. That’s all I ask ❤ thanks!

[phyothiha]

4:53:00 For those who wondered why the catch block didn't work, fetch only rejects when a network error occurs. Since responses aren't network errors, there is nothing to catch. You have to check the "ok" property in the response object and need to throw an error yourself with throw new Error("Meaningful Message").

[suupershihab]

I know React already but just here to support Anson. I know it'll be a good watch and refresher. Keep up the good work, bro!

[tarekmohamedwfa]

Great content! Can't wait for your NextJS course

[Sanatan_shiksha]

Learning on YouTube feels like we are studying in abroad 😅

[godwinoyale]

1hr into the course and all I can say is that you are one of the best teachers on this app

[shadowgamer_-ylkt]

Thank you so much for this course. Tbh i was just going to learn React and I got this video in my subscription feed ❤.

[christophermawela]

Have already crossed 7 hr mark, this is a great tutorial and looking forward to your React projects. Thank you Anson...

[amapro]

Hey Anson, just wanna say I really appreciate for publishing these free courses for us to learn and practice. I enjoyed your Express.js course as I myself had a full-stack project at that period, and I was having a hard time understanding with other tutorials and sometimes the docs, but with your tutorials, it immensely helped me out in the process as I myself have easily grasped into the concepts of the framework now. Currently working on transitioning to TS. Thank you so much again.

[BadGood]

Excellent tutorial man, thanks for doing this for us.

[elatedtalha]

Dude amazing job! 👏

This video came up at the perfect time as I was just looking for a React tutorial for revision.

I hope you make a Next JS tutorial as well!

[OlanrewajuBadejo-cgzj]

Amazing tutorial. Really love your tutorials Anson.

[designordu]

this has been one big-time informative course, worth a lot but it's on here free.. bless up man for this course, thanks a lot. more height 💪💪

[jopadjr]

3.1k... Thanks Anson. This is a great video. I have just started the video and need to find out about other frameworks as well.

[amandacaecilia]

Wow, beautiful content Anson. Thank you so much and waiting for your projs💌

Anson, can you create a full course for DSA in Python please... That'd be so helpful

Thank ya!

[lanazoolander]

Thank you for this. I learned React using the class methods and this helped very much to switching to using hooks.

[ashutoshkumaarr]

Is this enough for learning all the important React concepts, or is there any topic you left out that I should definitely learn after this video? Thank you, Anson. You're a wonderful teacher, and I have already completed your ExpressJS course 🥳🥳

[viridianite]

Thanks a lot, dude! You're not only explaining syntax but also concepts, patterns, practices, and motivations. That's what makes a good programming tutorial.

4:53:00 From the fetch docs, "A fetch() promise only rejects when the request fails, for example, because of a badly-formed request URL or a network error. A fetch() promise does not reject if the server responds with HTTP status codes that indicate errors (404, 504, etc.)." After you changed the API endpoint to a non-existent one, you got a 404 error from the server which resolves and that explains why you couldn't catch it.

[DiaguLoL]

Hey! I'm starting learning React! Great video, you are explaining everything carefully, thank you!

Btw! Could you make a video, or share your VSC extensions? For example, if you use a component without importing it, it is importing itself automatically

[shadowgamer_-ylkt]

4 days on learning react using this tutorial and I've learned a lot and I have only reached 7 hours.

This tutorial is sooo well put together and there is no confusion whatsoever just great.

Thanks for this wonderfull tutorial.💓