React Full Course for free ⚛️ (2024)

[@BroCodez]

Hi all! I have decided to discontinue the React series. This video is every lesson compiled from the original playlist. There are more advanced hooks and concepts, but this course should give you at least a solid foundation. I'm going to be taking a break from coding to work on a few projects of mine that I am behind on. I unfortunately do not have the time right now to continue. Thanks for all of your support everyone!

[@tristanbautista6100]

Amazing tutorial, if you have time soon could you please make a Node/Express course?

[@youngwolf1009]

Hello bro ^^ Does that mean that you will drop courses about Data fetching, axios and Redux toolkit ? Thank you for sharing all this knowledge for free

[@harshitpant07]

so would continue you any time soon from where we left on

[@Kabeeye_7]

Amazing bro 👍

[@satyambidve7752]

Thank you bro

[@PineappleForScale]

Quick tip: you can have a browser window within vs code. Copy the localhost URL, open command palette (ctrl+shift+P), type 'simple browser' then enter and paste your URL. Now it opens another tab with your website in it. To have it side by side press ctrl + \ then drag and drop the browser tab to the right. It will make alt tabbing and resizing windows much easier.

[@DarshanKh3r]

great tip

[@chamalsena]

thanks

[@larryh8186]

Thanks for the tip... been looking for this for a while! 👍

[@binhunaish]

But you can't get a console:)

[@manohargella6523]

Thanks a lot bro!

[@Kikikuku2]

Fantastic walkthrough! Clear, concise, and just the right pace for beginners and intermediates alike. Really appreciated the practical examples. Thanks for making React more accessible! 🌟

[@YousefYahya-jd4rh]

❤

[@premman6052]

the best react tutorial ever made, thank you. so much so, I watched the adds too without a blinking.

[@ajinvarughese]

Bro dropped the best react class and thought we wouldn't notice ⚡🗿

[@VariouslyCommon]

bro thought he was slick

[@noobatorium]

atham ley varghese uh !!

[@user-mo6yo4kz1m]

@@VariouslyCommon why you hating 😭

[@VariouslyCommon]

@@user-mo6yo4kz1m its a joke

[@CouchBit]

why would he think we wouldn't notice tho? lmao

[@jerald1836]

I have watched many React tutorials on KZbin, but I find yours easier to understand when it comes to React JS. Thank you very much for your teaching style.

[@YousefYahya-jd4rh]

❤

[@DavidChijioke-hc8ub]

so true

[@petrus2746]

I gotta say man your work ethic is insane. Thank you for all the stuff you've put out

[@comedycove-zw6wc]

Plz Start node js bro 🤭

[@RESPECT-cq1qc]

What r u learning

[@georgeftw8947]

00:01 React is a JavaScript library for building web app interfaces using components 02:16 Setting up project folder and initializing a React app 07:20 App component as the root of the application 09:46 Creating a header component with React 15:18 Components and JSX Fragments 17:51 Creating and using React components 22:11 Using class name in JSX and creating a card component 24:25 Setting alternative text and importing profile picture 29:06 Styling image, title, and text in a card component 31:43 Creating and styling components in React 36:11 Moving component to a new folder and using CSS modules 38:28 Inline CSS styling is convenient and easy for isolated components. 43:12 Using props object to access and display data 45:32 Styling student component with CSS 50:30 Props in React and Default Props 52:53 Introduction to conditional rendering in react 57:55 Styling H2 elements with CSS 1:00:24 Conditional rendering in React 1:05:27 Creating and manipulating lists in JavaScript 1:07:50 Adding a unique key for each item in React 1:12:53 Filtering objects by calorie criteria 1:15:13 Transforming list component to be reusable 1:20:51 Applying CSS styling to list components 1:23:39 Using short circuiting to handle missing array or category 1:28:43 Setting up prop types for components 1:31:04 Setting onclick event handler in JavaScript 1:35:48 Handling click events with event object 1:38:13 Creating and using a profile picture component 1:43:04 Using the useState hook to create stateful variables in React 1:45:19 Using setter function to update state in React component. 1:50:02 Using the ternary operator for conditional rendering and creating a toggle function for boolean values. 1:52:32 Creating a stateful variable with useState hook 1:57:54 Understanding the UST State hook and the onchange event handler in React 2:00:21 Using useState for real-time updates 2:05:26 Using onchange event and select element in React 2:08:13 Handling payment and delivery options in React forms. 2:13:03 Creating a Color Picker program using React 2:15:22 Creating HTML elements for Color Picker component. 2:20:31 Styling HTML elements with borders, colors, and transitions 2:23:04 Explanation of updator functions in React 2:27:35 Use updater functions for state updates. 2:29:40 updator functions in React 2:34:20 Updating state of car object using setter function and spread operator 2:36:27 Using updator function for safe state updates 2:40:36 Creating functions to add and remove elements to an array 2:42:56 Handle adding new food items to an array 2:47:35 Filter method for arrays in React 2:49:39 Using JavaScript to set initial state for car year, make, and model 2:54:40 Creating and updating new car object in React 2:57:05 Using arrow function to create list item elements and handling events in React 3:01:45 Creating a to-do list app using React 3:04:10 Creating functions for adding, deleting, and moving tasks. 3:09:12 Creating buttons for tasks and applying CSS to the to-do list container 3:11:42 Styling H1 element and buttons 3:17:46 Styling the webpage and adding functionality with JavaScript. 3:20:07 Using filter method to delete tasks 3:24:47 useEffect as Side Code Handler 3:26:59 Creating button element and using useEffect 3:31:47 Creating a state variable for color and toggling between green and red 3:34:30 Benefits of using useEffect 3:39:05 Using useEffect to add and clean up event listeners. 3:41:26 useEffect hook allows for clean-up and updates based on dependencies 3:46:30 Styling the body and clock 3:49:08 Center align text and vertical clock 3:53:58 Create and clear intervals with useEffect 3:56:34 Using logical operators and templates for time formatting 4:01:41 Creating and organizing components in React 4:04:42 Prop drilling can be tedious, but there's a better solution with useContext hook. 4:10:01 useContext allows sharing values without prop drilling 4:12:21 Managing DOM elements and state in React 4:17:11 Use ref to reference HTML elements and manipulate them without causing re-renders 4:19:26 Access and change HTML elements using refs. 4:24:17 Creating a stopwatch component using React hooks 4:26:49 Creating a div element to act as a container and adding buttons for start, stop, and reset functions. 4:31:59 Styling buttons with border, border radius, cursor change, font color, background color, transition effect 4:34:18 Setting up start, stop, and reset functions in stopwatch component 4:38:45 Clear and format time function 4:41:24 Creating a reusable stopwatch component using React Crafted by Merlin AI.

[@jayasantosh5399]

😍 great work

[@lavenduct2001]

This is the best React Tutorial in the world... It doesn't dabble so far from the core/basics of react. It isn't verbose. Every action is clearly explained. Repetition is used to re-iterate concepts. Clarity of speech. And many more.

[@Hrishiiiii__]

Starting this course : Day 1 : 1:03:11 Day 2 : 1:03:11 Day 3 : 1:41:46 Day 4 : 2:22:27 Day 5 : 3:08:56 Day 6 : ✅done Thanks Bro for this awesome react class

[@mera6576]

Did he cover all the subjects in 4 hours because i have seen alot of tutorialsbin 8 hours so i am worried to watch this but i am in hurry in i want to see a shorter course + i want to ask did you understand it well in 6 days ?

[@abhilashm8965]

@@mera6576 watch this . try to do some problem based on that , while doing problem you automatically learn other things by googling , that is the perfect way to learn coding. other wise you ended up in tutorial hell.👍

[@watermellon6125]

@@mera6576 yea its very good

[@tiagolourenco7643]

@@mera6576 this is enough, do it and choose a small project to do, that's where you will actually learn react, by doing projects.

[@Mysterious_Person_AR_9]

@@mera6576he didn’t. He mentioned that above. He had work to do so he didn’t. He will do that in future, if you can find any. Tell me, I have just completed his html, css and JavaScript

[@MBRBLB]

Bro! your channel has helped me out tremendously. To be completely honest you are one of the best people on youtube.

[@preciousbanigo]

He's simply the best, not one the best.

[@htvital4184]

I searched 10-20 yt videos non of them satisfied me for easy start. But after 5 minutes I stick with your video. Thank you so much giving us valuable knowledge.

[@thesnedit5406]

Thank you for your generous contribution to the community!

[@memmudmemmed3022]

Out of all youtubers, you're the only one, who gets to the fcking point! As always, amazing explanation to everything in a simple yet direct way

[@ResolveX11]

Completed it and It was the best collection of videos for React, if you are reading this you have found a gem of a channel.

[@AhadQasimi]

Thanks a lot for this video and please don't stop making the React series and continue to create more. As someone who relies on free tutorials, knowing you're there for us is comforting. Thank you "Bro".

[@oldirtybirdy2533]

Bro you are a blessing!! Really appreciate you taking the time out for us newbies.💯

[@RESPECT-cq1qc]

What r u learning

[@oldirtybirdy2533]

@@RESPECT-cq1qc React

[@HarshCodes-w3m]

went through several react courses and tutorials,none was as understandable and ssimplified as this hats off to you!!!

[@kingarth0r]

Just finished the Javascript playlist yesterday. Gonna watch this today. Thanks for everything.

[@mickey-bz5cf]

Take a break

[@prathmeshkalehere]

dont forget to practice

[@ayushdwivedi8841]

Bro you need to practice js. Take some break

[@kartz2010]

i’m only into the first 30 minutes of the video,but i’m already impressed with the quality of presentation! You’ve done a fantastic job! Thanks a million!

[@shammahugbebor9651]

Less than 30 minutes in, and I have learnt more than watching 10 hours videos from various channels and tutorials. I am super excited to finish this, thank you so so much. You are my Bro

[@the.shivam.bhushan]

This is by far the best react class I have taken. I used to hate learning react cause it seemed complicated but you explained it so well. Thanks for this.❣

[@newtanagmukhopadhyay4716]

yup he made it easy. our indian series are so trashy tbh. overrated like anything.

[@user-mo6yo4kz1m]

@@newtanagmukhopadhyay4716 i mean, anything will help as last resort, no?

[@zemiorka]

Crystal clear! Straight to the point. Thank you very much for your video.

[@YousefYahya-jd4rh]

❤

[@frostedflakes537]

You've taught me more than all my professors this semester combined and in half the time. Honestly dont know where I'd be without this

[@wanimose]

this is why I dropped out anyone can literally teach themselves with just KZbin alone and get crazy good

[@kattasathvikreddy6487]

@@wanimose hey hope you're doing good now

[@wanimose]

@@kattasathvikreddy6487 Blessed

[@mirjalol49]

Holly crap. Thanks man. For all effort.

[@ChrisTOLAa]

[@saltech2024]

@@ChrisTOLAa Cra!! Very annoying

[@d3m3tri0]

Everybody... please... smash that Like Button. It is not normal how Bro explains complex things in that simple (to the point) and easy way.

[@ftbanwagon]

Day 1: 52:49 Day 2: 1:29:43 Day 3: 1:42:05 Day 4: 1:58:37 Day 5: 2:27:02 Day 6: 2:49:00 Day 7: 3:35:51 Day 8: 4:00:04 Day 9: 4:11:50

[@gurdeeppunj3707]

bro simplified this react too much that its now logical course for me, honestly i was searching for the best react course but ultimatly landed at the right spot. thx bro

[@cornsalad14]

This lecture was absolutely amazing. I’ve never completed an entire lecture on KZbin before, but this time I watched the whole thing. It was just that great!

[@mohammadzahran4215]

So I started React Basic Course in Coursera but sometimes it felt tedious and boring that even sometimes they were very rushing in the course so I paused the react course for a while then you showed up and helped me I returned to the videos without any difficulty I even got my Certificate because of you thank you really much !!!

[@girishgarg5311]

Can you tell me which coursera course you bought and are they teaching more then what taught in this Video...?

[@overunityinventor]

very precise, to the point, no irrelevant talks, covered all necessary concepts, thanks BroCode for making and posting!

[@Lyricsconcept]

"Your coding tutorials are an absolute game-changer! your clear explanations and detailed walkthroughs have been incredibly helpful in boosting my programming skills. thank you for sharing your expertise with the community!" and please we need a responsive web course bro even if its 20 minute or 30 minute thanks.

[@rexroze]

thank you bro for making content like this for free, you're the best!

[@Tech-Man3]

you do good senior,watching you from Ghana.I love coding and i have been trying all my possible best with you.

[@MapleTheSecond]

Thank you so much for all your hard work Brocode! I love your videos, they are easy to understand , and straight to the point. Appreciate you doing what you do, you've help me, and surely many others, on our coding journeys!

[@zoolanderbestmovie2]

bro i have seen many tutorials of yours and they are the best and most understanding. That is because of your little projects every part of the tutorials the strong points of your teaching is that you break the learning process in small parts and you give an actual reason for every component to be used (plus you remind every video things you used previously to refresh our knowledge). I wish every teacher i had was like you it would make my learning experience so much better

[@moizhussain05]

I had been struggling with React Js until I started this tutorial, it took me 6 days to complete the course, but hands down, what a level of explanation 👏👏

[@Bhuvan.Shetty]

Will you suggest this for a person who completed javascript?

[@moizhussain05]

@@Bhuvan.Shetty definitely yes

[@Unorthodox999]

Is this enough to start coding in react?

[@user-mo6yo4kz1m]

@@Unorthodox999 you need to know js, css and html to start learning reactJs

[@michaelgohn2554]

Been watching some of your short tutorials for a few years. First time watching a full length tutorial! Super helpful thanks! Also just officially became a fellow bro!

[@Ver2ion]

this was so concise , spent my day off learning this and i would say i have a very good understanding now. thanks bro. 😎

[@unfolded8]

best react tutorial on the internet hands down, clear concise and no bs.

[@Naz-h8z]

One of the things that learned in this 1h is that BroCode likes HSL values

[@crashx5717]

bro stop clicking me 😂

[@ianchristianhundanapagacit4013]

i love that he repeats some tips in every part

[@SpaceTalon]

Man, that's exactly what I was looking for! Happy new year!

[@AWGERSS]

Hey, I was really struggling with React for the past 2-3 days and nothing was really clicking, but I'm really happy you made this tutorial cause the stuff that I was questioning , I no longer question. Thank you for making this free btw. Your the goat for that.

[@PrinceofDev]

Bro Code you're the best, I'm a junior software developer and learning from your courses has made me transform a lot that I'm now an intermediate developer thank you for your hard work and dedication.

[@hamadaelwarky3640]

could u give me some tips?

[@userglls]

Keep it up

[@Not_Aran8276]

@@hamadaelwarky3640 Do a project on your own, don't just tutorial and replicating it to avoid the tutorial hell (aka just do nothing other than just do the same syntaxes from tutorials you watch) try to minimize using ChatGPT/other AI/LLMs tools so you wouldn't be spoiled and only using when necessary (you should kinda treat it like a calculator) so when you mastered all of those, the AI tool became even more powerful if you know what you're doing, don't just straight up code, instead think a structured approach on how to achieve your goals first (could prevent hours of debugging).

[@vinodsagar2412]

Bro ...Thank you for this amazing React class. I'm so grateful for your clear explanations and well-organized content. This course is a great resource for anyone wanting to learn React.

[@Brandcode-yq2wn]

Thank you very much I've been waiting patiently for a full course❤

[@YousefYahya-jd4rh]

❤

[@randomenia]

The Best, I have 16 years You help me , thanks You , sorry for error I don't speak english

[@udayan285]

Thank you so much BroCode for explaining react smoothly for us. Take love from Bangladesh.

[@heygauravshukla]

At 1:01:30, Instead of writing defaultprops you must write defaultProps

[@Ndunda_Kelvin]

I just love how bro is always there for us.

[@CarCinCal]

Thank you so much for making and sharing these!!! Sorry to hear about your time constraints - do you know if you will look into making a combined series on Next JS / React / Tailwind in the future?

[@hyannumcham6203]

I've never felt so refresh when watching coding tutorial but this. 💪💪

[@codewithawan1]

Sit back, relax, and enjoy the show. Love from Pakistan. Your content is absolutely amazing

Thank god for this tutorial. It has a tempo, speed, no nonsense. No talking for hour about some high level concepts. Just diving right into it. Here, lets build a component, lets go.

[@Christopher-7424]

I have always wanted to learn react. God bless you!

[@RESPECT-cq1qc]

What r u learning or doing any job

[@motivation_moon1]

Bro!, this your teaching goes straight to my brain⚡⚡, where have you been all this years, WOW!! 💗

[@quvomiddinkamalov3292]

Is React that easy? Or is this Bro explaining it clearly???

[@axftbl7999]

Yeah. This video is very helpful to understand some important concepts of react js

[@ParasProgramming123]

Easy it is younglings makes react docs easy more read it you must Master Yoda

[@vishnuvardhan2687]

Bro code made react js to easy lol..

[@pope1089]

I love you man. You saved my brain from melting. Soon as i get a Job ill be donating. Broke and learning to code.....

[@krishnakapil6479]

How yall gyz be saving all this stuff ? i am making a new folder for every concept

[@benjacobkoshy6636]

Your teaching style is fantastic! Keep up the great work!

[@hinatashoyo3891]

WE NEED PART 2

[@gamershub4212]

😂 broo chat gpt and Google are your part 2

[@jopaslona1]

Best guide I've seen in a while

[@_amonimus_]

bro how many languages do you know?

[@KidusDawit-h9g]

He knows...... Millions Billions You name it!

[@QuantumVirus]

Can't thank you enough for this man, I'll always support this channel whenever I get my first job.

[@mndevitmndevit]

mate, this is awesome! Please don't abandon your channel, your work is treasure!

[@zainahmed677]

I am developing react applications for 5+ years now and surprisingly there were a many things I didnt know before. Learning never stops.

[@saywhatnow9422]

You have no idea how much you helped me and many others. it's sad to hear that you would discontinue your series but I'm sure everyone understands that a Bro must take some time for himself. Thank you so much!

[@Ali_Was_Humbled]

I'll update my progress insh Allah Session 1 - 2: 32:26 -> 1:03:07 Session 3 - 4: 1:29:10 -> 1:42:04

[@famousforpersonal]

I can't thank you enough I could not understand any video on youtube explaing react, but your video is really really really great i am understanding every concept so quickly, thanks!!!

[@MrPuzzoncello]

I wish you could like the same video more than once. This is the best react tutorial out there, hands down!

[@sakshichoudhary7014]

I search for a course on KZbin, scrolls a lot but then see Bro Code tutorial on the same topic and I start watching it. Thank you so much for this amazing tutorial. ❤

[@CT--LamVu]

Thank you Bro, this is the first video of you that I spend almost my free time in 3 days to complete it.

[@ПавелКостенников]

Bro.. it’s awesome. I mostly watch videos in Russian, but in 30 minutes I understood what was explained to me in 1.5 hours. Even though I don't understand everything you say, but the principle is easy to grasp with you

[@cppexplorery]

This man really does cool things. Thanks to him, I started making videos myself. I wish good luck to everyone who is learning. May everything work out for you 💪

[@alihusseini5251]

I have learned a lot from this channel and truly appreciate the creator's work. It's been incredibly helpful not only for React beginners but also for junior developers. I hope you consider making a video on the MERN stack in the future. Thank you for all the valuable content you provide!

[@afrikana_tech]

I just love the way you teach. A day cannot be done without a review on your videos.

[@LizyAd]

Please do not ever stop teaching!! You are amazing!

[@SandR_Music]

Thank you soo much brother for this crash course. Really helped me a lot

[@0xUndefine.d]

Let take a moment and praise this guy for his work. I'm not even her to learn js or any of it frame works. But I can see how much efforts he have putted in those type of videos

[@petakirikiri4074]

This is SO good man thanks.I like how it builds upon the previous skills and you show them so you get lots of repetition

[@CallMeMojtaba]

this course is the best for beginners, there are some stuff that i already knew about and some i learnt watching the video. the explanation is super simple and a step by step thank you for the hard work❤

[@VitalisOfoegbu-um1mh]

You are the best teacher i have seen so far on KZbin,,,, I am just flowing with every step of yours…. Thanks so much sir

[@aaronfox56]

day1: 1:03:03 day2: 1:58:37 day3: 2:30:42 day4: 3:24:17 day5: done! BroCode, thank you for such an understandable and easy course. It was so interesting to learn ReactJS!

[@WendyWebSA]

HI Bro Code, I literally never comment on videos, but I have been trying to learn REACT for a while now and it just wasn't making sense, until I came acroos your video yesterday. You've literally changed everything for me, I understand it, I am progressing, thanks to you I have taken a massive step forward in my learning progress. Thank you so so much!!

[@joshuaedward6893]

Ilove how this video is straight to the point on every important aspect of react

[@thewalrusdragon9579]

Id really like to see PostgresQL tutorial and an Electron tutorial. Love your stuff man. Concise and to the point. I’ve learned more from you than almost anywhere

[@franciscosilva2135]

You are probably one of the best if not the best at teaching a specific language you cover everything and explain very well, thanks for your teachings

[@VARYPATRICK]

Great bro! keep this upraising fact.

[@desmondqoza123]

Hi... and thank you, thank you, thank you - for the double click event handler. You explained it so much better that you make it look so easy. Thank you very much and I'm continuing with the course

[@Rose-Is-Here-h2t]

Hiii, CS student here. Day 1: 20:26 Day 2: 52:50 Day 3: -- Day 4: 1:36:45 Day 5: -- Day 6: 1:58:26 Day: 7 I was busy the last two weeks but I will continue. idk if I should say day 1 or day 8 but I will start again to be more serious and remind myself that stopping sth is bad and I need to continue no matter what happened !! Day 1: 2:39:56 Day 2:

[@roman-vahram.margaryan]

This course is great, and the examples are very descriptive! Though would suggest a tiny change to the `start` function to handle an edge case: when clicking "Start" multiple times while the stopwatch is already running, the current implementation updates `startTimeRef.current` each time. Not a big deal, although if we set the interval to update every 5 seconds and click "Start" just before the interval callback, it could reset the elapsed time to approximately 1 millisecond instead of the expected 5 seconds. To fix this, we can add a conditional check to ensure `startTimeRef.current` is only updated if the stopwatch is not already running. Something like this: function start() { if (!isRunning) { setIsRunning(true); startTimeRef.current = Date.now() - elapsedTime; } } Once again thank you very much for the course!

[@OgenBertrand]

Thanks for the time you taking to make this tutorials this is a solid foundation to get started with react. I do love all your courser and the way you lecture it's amazing for real. Thanks again.

[@vpd2121]

paid a bunch for a course that I'm attending. I felt sooo bored and wasn't understanding ANY of the concepts cuz of the way they were explaining, was getting stressed out, and decided to watch a youtube video and wow, now all of a sudden you've made react js feel so interesting. I'll complete this video today thank you soo much TT_TT

[@MDBilal-ob8zz]

I have watched so many tutorails for learning beginner level react but this one is the best of the best, conceptual and to the point.

[@SF__JS]

Wow impressed really detailed and amazing tutorial, please keep em coming and thank you so much.

[@quantaburocracia9683]

Gigachad Edit 1: I'm already in 1:51:28 and updating it in my Git. Ty very much bro, your content and didactic as a programmer are amazing. You go direct to the point in a simple way for everyone. I'm loving it Bro.

[@AmiraKhaled-ul6li]

If this man decided to drop a node js tutorial, I'm sure it's gonna be the best node js tutorial in the history of KZbin

[@DonnieEdwine-si8ij]

You are best teacher bro your taught me every thing i know . i am now a front end developer because of you May Allah Almighty Reward you.

[@shobhitsrivastava708]

I cant thank you enough...this course is amazing...learnt a lot from you...thankss a lot "BRO"