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:
github.com/bradtraversy/react...
React Front To Back Full Course:
www.traversymedia.com/Modern-...
Check out all my courses:
traversymedia.com
Social Media:
Github - github.com/bradtraversy
Twitter - / traversymedia
Instagram - / traversymedia
Facebook - / traversymedia
Linkedin - / 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

Пікірлер: 397

  • @bushigi5913
    @bushigi5913Ай бұрын

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

  • @ailtonjosue6817

    @ailtonjosue6817

    Ай бұрын

    hell yes ,-,

  • @marshax
    @marshaxАй бұрын

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

  • @waklara9973
    @waklara997317 күн бұрын

    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!

  • @husseinkizz
    @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!

  • @whatscooking104
    @whatscooking104Ай бұрын

    Please team up with some folks and do a professional E-commerce course where you put everything together. Planning, Figma, UI/UX, frontend, backend, database, microservices, version control, CI/CD etc etc etc etc. Pay attention to everything

  • @naelcodes
    @naelcodesАй бұрын

    The timing is insane, needed a refresher. Thanks Brad

  • @chivicks_hazard
    @chivicks_hazardАй бұрын

    Thank you Brad 😊 I was considering watching the old tutorial with respect to React 19 but I'm so much relieved now. You're the best 👍💯

  • @fromagetriste
    @fromagetristeАй бұрын

    super happy about the video, thank you so much

  • @ivanperez4878
    @ivanperez4878Ай бұрын

    Awesome course, right on time! Thank you for helping us all.

  • @aholicstudy7720
    @aholicstudy7720Ай бұрын

    Thank you so much, Brad. I've studying your 2021 React Crash Course, this video comes just at the right time. Many many thanks

  • @davidemmanuel5057
    @davidemmanuel50572 күн бұрын

    just finished the entire 3 hours and have my code in my github for future reference, pretty good tutorial as the others from this channel, concise, explanatory, direct and practical. The json server mockup just amazed me, I didn't know you can support an entire crud with a json file, cool. I came from vue and there are some things I don't like yet from react, mostly the syntaxis is prone to errors and a bit tangled, but I remember I complained a lot when started with vue a couple of years ago. Still thinking vue is more refined (better in short) than react but react and angular are way more popular, so for job offers I'm learning this one. Thx

  • @Potatomato44
    @Potatomato4413 күн бұрын

    THX Brad, learned everything from you, it gives me a very peaceful vibe just listening to your voice, so I still watch/listen your every video.

  • @tingyutsai3419
    @tingyutsai3419Ай бұрын

    Exactly what I need! Thank you for making such a high quality video!

  • @EdMartinModesto
    @EdMartinModestoАй бұрын

    Awesome Tutorial that really explains and brings things to light! Well done Brad, I look forward to learning more from you.

  • @christopherlopez2491
    @christopherlopez249113 күн бұрын

    I started watching you and your html intro video in 2019. Im still here… still learning and still building thank you so much for these videos

  • @affanmustafa2606
    @affanmustafa2606Ай бұрын

    Doing some revisions and Brad comes in with an updated React course. You're absolutely insane Brad, thank you for all that you do!

  • @braveitor
    @braveitorАй бұрын

    Fantastic tutorial. This is for me, the best way to learn and get used to a real project structure. Excellent job. You're an amazing teacher. Thank you.

  • @BMRG14
    @BMRG14Ай бұрын

    Right on time! Thank you very much.

  • @HimalayanFishing
    @HimalayanFishing17 күн бұрын

    Hats off to you for crafting these incredibly beneficial and extensive videos out of sheer generosity. Your efforts are truly appreciated!

  • @Steliosgiannatos
    @SteliosgiannatosАй бұрын

    Amazing video, bundles everything you need to make an entire project. Keep up the amazing work!

  • @codeJourneyGuides
    @codeJourneyGuidesАй бұрын

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

  • @hideperson7310

    @hideperson7310

    Ай бұрын

    Same I am also searching thank you Bard...........

  • @akashbroo2985
    @akashbroo2985Ай бұрын

    So far, this is the best react course that I've watched. Thanks Brad ❤

  • @ah3yo
    @ah3yoАй бұрын

    Just in time, I was looking for a React course! Thank you, Brad!

  • @llody7777
    @llody7777Ай бұрын

    This video is what i was looking for. Thank you so much!

  • @shahbazjavedqureshi
    @shahbazjavedqureshiАй бұрын

    Couldn't have come at a better time. Looking forward to the 19's official release and your update. You have no idea how much this helps, thank you!

  • @PenguinCatHybridDev
    @PenguinCatHybridDevАй бұрын

    This video perfectly timed, i was just getting into react and this was exactly what i needed right now. Best timing, and best explanation ever. W guy thanks yo

  • @CynthiaAmaji-zd1ip
    @CynthiaAmaji-zd1ipАй бұрын

    The is truly beginner friendly. One of the best react tutorials. Thanks for the video.

  • @user-lb5yn1ff8w
    @user-lb5yn1ff8wАй бұрын

    Great Video!!! Thx for sharing your knowledge. My top 1 on the list must-see!

  • @ker0h489
    @ker0h489Ай бұрын

    Literally when I just started a project in React for uni, thanks man!

  • @mxoh8325
    @mxoh8325Ай бұрын

    what a good timing been waiting latest react tutorial thank you.

  • @adriande_leon
    @adriande_leonАй бұрын

    Thank you so much Brad for posting this, I haven't touched React in a couple years and this is a good refresher!

  • @stevemosi254

    @stevemosi254

    20 күн бұрын

    Same

  • @devine_noise
    @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.

  • @Peywan
    @Peywan27 күн бұрын

    1 hour and 8 minutes into the video, and you catch me late and give me an AHA moment for react. thanks a lot Brad. Very appreciated that you do videos consistently and keep up to date with what we need to learn and give this information for free. thanks!!

  • @IainEmslie
    @IainEmslieАй бұрын

    This is such a good tutorial. It's so concise, useful and straight to the point. Awesome.

  • @aliciaromano6335
    @aliciaromano63356 күн бұрын

    This was incredibly helpful. I am blown away by the time and effort you put in to making this tutorial. Thank you so much!

  • @MrUnknown-eq8rh
    @MrUnknown-eq8rhАй бұрын

    It was much needed I am learning full stack right now... Thank you so much

  • @mauricedsouza5215
    @mauricedsouza5215Ай бұрын

    Im super excited to learn React. I was just waiting for you course🎉. Thanks Brad. God bless you ❤

  • @m_shakes
    @m_shakes6 күн бұрын

    You are amazing! Thank you so much for this, you make it look easy!

  • @webdevluc
    @webdevlucАй бұрын

    Amazing work with the updated React crash course. It's rare to find such high quality learning resource offered for free

  • @chivicks_hazard

    @chivicks_hazard

    Ай бұрын

    Honestly speaking

  • @emmang2010

    @emmang2010

    Ай бұрын

    I only skimmed the section names but are contexts and providers not covered?

  • @ImFantin
    @ImFantinАй бұрын

    Such an amazing tutorial man. I can confidently say I can start a react project with no problems after watching this. I really appreciate your videos!

  • @maycoral1224
    @maycoral12249 күн бұрын

    The first channel that I have subscribed to. Thanks for these helpful videos.

  • @mphatsomtogolo6263
    @mphatsomtogolo6263Ай бұрын

    I love this channel man, always cooking useful content

  • @knowlife4486
    @knowlife4486Ай бұрын

    Thankyou for all your efforts, it makes a difference !

  • @wcyee26
    @wcyee26Ай бұрын

    very helpful for a startup project to understand the essential tools for ReactJs, thank you so much.

  • @MarijanRaicevic
    @MarijanRaicevicАй бұрын

    Amazing tutorial. Always loved Traversy Media tutorials, so indepth and easy to understand.

  • @randomhominid9816
    @randomhominid9816Ай бұрын

    Thanks for putting together such an excellent course. I can now do basic react react development. This was so well explained.

  • @AvinashSingh-ts1cn
    @AvinashSingh-ts1cnАй бұрын

    Great tutorial no bs all very informative. Thanks for such high quality video.

  • @someRandomNameHere
    @someRandomNameHereАй бұрын

    I was searching for an updated React course ❤

  • @mastle313
    @mastle313Ай бұрын

    I can't ever thank you enough, Brad. Keep up the great work

  • @prabirroy4480
    @prabirroy4480Ай бұрын

    Waiting for this video. Thank you 🙏

  • @topherreynolds3999
    @topherreynolds3999Ай бұрын

    Thank you! Been studying React for about 3 weeks now. Your video does an excellent job of explaining things in a way I understand. Some other videos I have found just have you follow along without telling you why you are doing the current task. Appreciate this! 🙂

  • @bencipherx

    @bencipherx

    Ай бұрын

    Can we be accountability partners, I am on my way to full stack but my achilles heel tbh is styling lol

  • @nyihtutlwin4107
    @nyihtutlwin4107Ай бұрын

    Finally, finish and complete this course!! Nice concepts

  • @jawaderfani8743
    @jawaderfani8743Ай бұрын

    thanks brad you are doing great 👍👍

  • @enzo.n.aguiar
    @enzo.n.aguiarАй бұрын

    Thank you Brad. I was looking foward to get up to date on React after coming back on coding. As always your content is and will always be very helpfull.

  • @prasadhonrao
    @prasadhonraoАй бұрын

    Many thanks Brad. Took me full 8 hrs to code it while watching, but it was all worth the effort. Now I will go back to your React course on Traversy Media and add remaining features like backend API and authentication.

  • @centralcoding
    @centralcodingАй бұрын

    i remember, Ive learned html and css from your youtube channel, then im know teaching many people. and you came at the right time when i just started learning REACT. I have commented before watching the tutorial. I hope i will grab some important basics of react. thank you!

  • @volmedo
    @volmedoАй бұрын

    great! you make it look so easy, thank you

  • @HazemTamimi
    @HazemTamimiАй бұрын

    Man you are an inspiration. Thanks for the great course!

  • @mdtanjimahmmed9082
    @mdtanjimahmmed9082Ай бұрын

    Thank you so much for this amazing crash course this is really helping me to understand the functionality in really easy way. Thank you so much Brad.

  • @rahmatullahbizhan7796
    @rahmatullahbizhan779625 күн бұрын

    Thank you so much for sharing this course.

  • @nouchance
    @nouchanceАй бұрын

    Thanks Brad! You are awesome!

  • @fatiemami6692
    @fatiemami6692Ай бұрын

    Thank you very much. I was thinking about it 😅.

  • @kiddosknowledgewizbyakshit9954
    @kiddosknowledgewizbyakshit9954Ай бұрын

    Thanks a ton! For the valuable video... Really amazing explanation in a simple way.

  • @elranasher3708
    @elranasher3708Ай бұрын

    Awesome up to date tutorial. Thanks!

  • @felixgreen4138
    @felixgreen4138Ай бұрын

    Thanks Brad... God Bless you real Good. I enjoyed his React Crash Course

  • @CodeWithClinton
    @CodeWithClinton25 күн бұрын

    Thank you so much Brad, for this course. I am a Backend Engineer who wants to have a taste of the frontend. Thanks again Brad Traversy.

  • @jackson_studios
    @jackson_studiosАй бұрын

    Great timing, Thanks.

  • @hudsonsilvaoliveira5674
    @hudsonsilvaoliveira5674Ай бұрын

    Oh man, I've learn so much from you, Brad. Thank you so much! I'm a Angular developer (thanks to you too lol) and after knowing Astro, I felt motivated to learn more about React. And it looks so much simpler than Angular, I loved it. But the organization of the project really concerned me. You have freedom to do things however you want, but that opens a whole lot of chances to mess things up, specially long term. You made it clear that your focus on this crash course was to make it as simples as possible, but maybe this could be an interesting topic for another video. How to make this application more advanced (in terms of code). Best practices, other libraries, refactoring code, avoid repetition and so on. Thanks again!!

  • @christopherhiggins9155
    @christopherhiggins9155Ай бұрын

    Great course! I've been trying to dig into React, Vue, etc., by tinkering on my own but couldn't quite grasp it. This is the first resource that finally made sense to the point that I'm convinced I can start using it in projects. Thanks for the walk-through and excellent explanations!

  • @swapnilwadhankar983
    @swapnilwadhankar983Ай бұрын

    Can't wait to complete it ❤❤❤

  • @HHJoshHH
    @HHJoshHH19 күн бұрын

    This was awesome Brad! Thank you man!!!!! The only thing I had to fix was the email text box on the jobs page was overflowing which I fixed with break-words and whitespace-pre-wrap properties. But that was it. I had such a good time following along. 🔥

  • @nimira43
    @nimira43Ай бұрын

    Even before starting this course you know it's going to be quality from the best coding instructor. Would of gladly paided for this. Thanks always Brad.

  • @rheavictor7
    @rheavictor7Ай бұрын

    Great, man, really great. Thanks for this!

  • @eriikelnino6545
    @eriikelnino6545Ай бұрын

    Thank you so much Brad ..God bless you

  • @ichiroutakashima4503
    @ichiroutakashima4503Ай бұрын

    Hey, Brad. I just want to say thanks to your contents. Even though docs exists, I'm more of a visual learner. I had a hard time understanding the latest concepts of React Router and this video has simplified it.

  • @MarcangeloGilig
    @MarcangeloGiligАй бұрын

    Thankyou for creating this helpful Tutorial Thank you!

  • @shreyanshiparihar956
    @shreyanshiparihar95621 күн бұрын

    This was much needed thank you Brad

  • @ashutosh_tiwari
    @ashutosh_tiwariАй бұрын

    One of the Best Crash Course on React in 2024!! Thankyou very much Brad❤.

  • @tariqkhan5206
    @tariqkhan5206Ай бұрын

    That's exactly what I was looking for... thanks bro 😊

  • @vicentesoto1628
    @vicentesoto1628Ай бұрын

    Uploaded 10 days ago, love it!

  • @FllrOfSonOfRageNLove
    @FllrOfSonOfRageNLove12 күн бұрын

    Excellent Tutorial!!!! I did not know anything about React JS, but with this video I learnt the basic CRUD project using React JS. It was a lot of fun. I cannot thank you enough for your great effort.

  • @StefanIordan
    @StefanIordanАй бұрын

    I needed this. Thanks!

  • @coffeeintocode
    @coffeeintocodeАй бұрын

    I'm 15 mins in and this is damn good already. Great work, as always

  • @Alcaracol66
    @Alcaracol667 күн бұрын

    Great front end tutorial , easy and fast

  • @TannerBarcelos
    @TannerBarcelosАй бұрын

    Been a few months since writing UI at work (been doing a lot of backend stuff lately). I was a UI Engineer entering my current company but now I feel rusty. This was perfect to ramp back up for a project.

  • @aminesedki
    @aminesedkiАй бұрын

    Thanks Brad always top courses ❤

  • @arminntube
    @arminntubeАй бұрын

    Amazing crash course. Thanks for sharing!

  • @aceeder2
    @aceeder2Ай бұрын

    Perfect timing, gonna be doing a react native project this summer 💪

  • @OniLgnd
    @OniLgnd28 күн бұрын

    I had previously commented about the edit page not displaying the correct salary amount, but I have now figured out the issue for anyone curious. The original 6 jobs all have a salary amount that is not actually an option in the drop down menu. For one, the amount is not an option. And the others is because the higher amount in the salary does not have a $. You can fix the issue by simply updating the salary for each job on the edit job page. After that, the edit job page will display the correct salary. Again, thank you so much for the video, I learned a ton!

  • @stevenr6185
    @stevenr618522 күн бұрын

    Your work is great! I have so many questions lol. Its JS, and I'm confused. But I've never learned so much so fast.

  • @GilAguilar
    @GilAguilar18 күн бұрын

    Thanks Brad this was a great refresher, thanks for putting this together for us. Love seeing your journey from the beginning to now and you are still that truly an amazing soul. You were a big part of why I was able to break into development. Keep shining the light bright for all of us cheers.

  • @crashingatom6755
    @crashingatom6755Ай бұрын

    Sweet, this will be handy AF. Gracias, sir!

  • @pavankumar-of4ew
    @pavankumar-of4ewАй бұрын

    Brad you made JS , so simple to learn ,now i am confident to code it in a consistent way, thanks

  • @christianhelwig
    @christianhelwigАй бұрын

    As always, thank you Brad

  • @user1234-xu5ix
    @user1234-xu5ixАй бұрын

    Thank you very much Mr. Brad ❤

  • @aleksandr3153
    @aleksandr3153Ай бұрын

    It is awesome! Thanks for your time!

  • @astianmuchui
    @astianmuchuiАй бұрын

    This is just what I needed. Now All I have to do is look for 6 hours to watch this

  • @bilalahmed4065
    @bilalahmed406514 күн бұрын

    Superb tutorial. Really love it.

  • @imuhammadessa
    @imuhammadessaАй бұрын

    Thanks Brad 💞

  • @ynarhammargatroid6414
    @ynarhammargatroid6414Ай бұрын

    really looking forward to complete it...

Келесі