React JS Crash Course

Get started with React in this crash course. We will be building a task tracker app and look at components, props, state, hooks, working with an API and more.

Code:

React Front To Back 2022 Course:

💖 Support The Channel!

Timestamps:
0:00 - Intro & Slides
12:37 - Create a React app
14:52 - Files & folders
18:54 - App component & JSX
22:39 - Expressions in JSX
23:49 - Creating a component
27:18 - Component Props
28:50 - PropTypes
30:42 - Styling
34:17 - Button Component
37:46 - Events
40:18 - Tasks Component
41:03 - Create a list with .map()
43:07 - State & useState Hook
44:55 - Global state
46:52 - Task Component
49:30 - Icons with react-icons
51:41 - Delete task & prop drilling
55:50 - Optional message if no tasks
56:58 - Toggle reminder & conditional styling
1:03:13 - Add Task Form
1:06:16 - Form input state (controlled components)
1:09:18 - Add task submit
1:14:36 - showAddTask state
1:15:58 - Button toggle
1:19:33 - Build for production
1:21:51 - JSON Server
1:25:53 - useEffect Hook & Fetch tasks from server
1:30:13 - Delete task from server
1:31:51 - Add task to server
1:35:15 - Toggle reminder on server
1:39:15 - Routing, footer & about

[mvgiacomello]

Story-time: I've been a QA engineer with comp.sci background working in many places building quality tools for over 11 years. Last year during the pandemic most of my company was fired, including myself. So, I decided to apply for a web developer role at Napster. This video was literally all I used to do the technical exam. I am now finishing my probation period! Thanks, mate!

[TraversyMedia]

Hope you enjoy! This is obviously geared toward people learning React. I have a React project playlist for more project based videos as well as a few Udemy courses. I will also be updating my Vue, Angular crash courses and many others

[SprinkledLandSharks]

This is meticulously clear. I've watched 15 or more videos that took me through creating a ToDoList with React. You have explained things in a way that's easy to understand. Your explanations are thorough and I feel that I'm finally understanding what you are teaching instead of just following along in VScode. Thank you.

[TrevorRobertsJr]

1:43:40 Two more items for recent versions of React as of October 2022:
1. You must also import Routes from react-router-dom and wrap your <Route> tag in a <Routes> tag
2. Instead of component={About} use element={<About />}

[Kran]

I love the guest hosts, but I was surprised and delighted to hear brad himself!!!!

[romulororizz]

Man you’re just a blessing to this world

[lrajoo]

amazing stuff. I came from no coding background and watched your html, css, js videos - and now this - you've made this so much easier than I thought it would be. Thank you!

[clemguitarechal]

Thank you so much for this introduction to React !
I'm an old fashioned programmer, and struggle a bit getting my head around new technologies such as React, and your crash course is such an invaluable tool for me to get into it ; and actually get prepared for a job, for which I'll have to pass a test, next week (dec. 2021).
This won't make me an expert at a glance, but for sure i'll give me some confidence in, at the very least, being able to translate/transliterate my ideas into react-ready code.
Thanks a million ! <3

[TraversyMedia]

Just a heads up. If you use the React snippet extension, you can prefix rafce or whatever you use with an underscore to not generate the un-needed react import

[miles]

I've been getting + seriously into React lately, and thanks to you all of the things that were left unclear from the official documentation/tutorial are now clear as day.
I've already commented on other videos of yours, but again thank you so much Brad. You're an amazing teacher💯.

[austinmillbarge]

It's great to have a known objective to work towards, clear explanation of concepts, instructions presented in a logical sequence, with well organized time stamps. Best of all, no show stopping blockers in the form of hording and scrambling access or any other silly boot camp drama and interruptions. So refreshing!

[khansen]

Thank you so much for this! This has truly been the most fantastic react overview I've seen to date. I've been stuck in an endless loop of verbose tutorials, and I really needed a quick overview of hooks, state, and spread operators. This is so fantastic, thank you!

[danielledasilva]

I'm a new dev on my first gig and my new boss just told me that he wants our team to convert their entire website to react - bad news? never done it before, good news, they paying me to learn how, Great news? You have a crash course for me and the team to watch and use to supplement out learning! Excellent work! and thank you!

[Artix]

I can say this without an ounce of doubt in my mind: You are the most loved coding content creator on youtube!

[pierre]

Usually I struggle to watch a tutorial that last more than 1 hour at one go, but your approach made React more understandable!
Thanks for giving such good courses bro

[karljohannisson]

This video was amazing! I’ve been trying to grasp React for a few days now and this video just nailed it. It’s clear that you are very knowledgeable within this area, and you are terrific at conveying the concepts to others. Thank you!

Thank you Brad! Best tutorials!
1:29:30 => each child in a list must have a unique key => in your sample data the second entry has a "d" instead of "id" => Thats why suddenly the unique key warning is thrown :)

[captainnemonic]

Great course. Went from doing Python/NodeJS to React overnight. This is my first foray into that realm. Thanks for the no-nonsense tutorial!

[JN-cyqt]

Working on my first React project with The Odin Project and felt completely lost midway through. Watching this video cleared everything up thanks so much for taking the time to make this - the way you organized it into segments made it so easy to reference material later too.

[harryc]

Thanks for updating the course. I'm just getting into React and having a tutorial that's from 2021 is reassuring when it comes to relevant code.