React Basics Crash Course (2020): Functional Components vs Class Components

  Рет қаралды 41,182

CodingWithChandler

CodingWithChandler

Күн бұрын

Watch my previous React tutorial on how to build a starter project and make your first component! • React Basics Crash Cou...
GitHub: github.com/chandlerkeyes
Blog: thinkwithcolor.com/
Read my blog post about functional components vs classes here: thinkwithcolor.com/react-basi...
SUBSCRIBE TO MY MAIN CHANNEL - ChandlerKnowsBest:
/ chandlerknowsbest
DONATE TO MY PATREON:
/ chandlerkeyes
Feel free to make/upload a response video! I’d love to see what my fans think. 
Want to collaborate? Shoot me an email!
chandlerknowsbest247@gmail.com

Пікірлер: 104
@maxrush206
@maxrush206 4 жыл бұрын
good explanation, but music is very distracting
@JenniferStewart100
@JenniferStewart100 3 жыл бұрын
Max Rush Agreed... React takes all my focus... music is too distracting. Couldn't make it past a minute in 😕
@musicraftmenship4785
@musicraftmenship4785 3 жыл бұрын
literally was about to comment that @Max Rush
@brendanleighton
@brendanleighton 3 жыл бұрын
I didn't even notice the music haha.
@johnkriervillanueva5112
@johnkriervillanueva5112 3 жыл бұрын
Me tooo. Didn't notice the music hahah. The explanation was so good
@prabinlamsal5125
@prabinlamsal5125 2 жыл бұрын
i liked the music though. was not very distracting to me.
@soufianechalouh7454
@soufianechalouh7454 3 жыл бұрын
Great explanation, please next time, reduce music volume. After 10h of programming, focusing on words with the background music literally gave me headaches. But content is dope! subscribing now.
@nateargaw6955
@nateargaw6955 3 жыл бұрын
This seven minute video made more sense to me than the hours I spent watching other tutorials. Thank you!
@SumitKumar-os1kv
@SumitKumar-os1kv 3 жыл бұрын
Hey! I just wanted to say that this is the best Class vs Functional Component comparison video that I've found on KZfaq. Short and to the point - exactly what I wanted. Thank you!
@00el04
@00el04 3 жыл бұрын
best explanation on the internet on react atm, especially with the new updates you summarised in the end! 👏
@tylermartinez3279
@tylermartinez3279 2 жыл бұрын
Best and quickest explanation I've seen so far. Get it!!! Keep the vids coming.
@thecucuybird
@thecucuybird 3 жыл бұрын
This is the first video of yours I have watched. I chose it over a few others search results because the length seemed about right. Really delivered on a great explanation!
@edwardkeselman5118
@edwardkeselman5118 4 жыл бұрын
Very clear and short explanation. Thanks!
@ariflowers6688
@ariflowers6688 2 жыл бұрын
You just cleared up SO much confusion that I've been struggling with for weeks!! Thank you SO MUCH!
@kamranshahid8825
@kamranshahid8825 3 жыл бұрын
best explanation about react components I have found on youtube till now. Good work keep it up.
@hectorcano8003
@hectorcano8003 3 жыл бұрын
You have answered all my questions about React, thank you.
@playwithvayofficial
@playwithvayofficial 2 жыл бұрын
Top video! Thanks for the short and precise explanations 👍
@GeorgeLathem
@GeorgeLathem 2 жыл бұрын
Clear and to the point. Thank you! Can't wait on video for useEffect.
@JazzyJunior
@JazzyJunior 3 жыл бұрын
Really great practical explanation, obviously able to communicate your understanding clearly which is the most important part of a tutorial.
@Ace718215
@Ace718215 2 жыл бұрын
outstanding work. learned more on this 7 min vid then days of lectures. cheers to you. subscribed!
@ericcapiz6516
@ericcapiz6516 3 жыл бұрын
You did amazing breaking things down and explaining both
@adamkalimi3542
@adamkalimi3542 3 жыл бұрын
Thanks for this. Solid, succinct, and clear explanation
@samyeung699
@samyeung699 4 жыл бұрын
easy to understand! love your video
@AnthonySherritt
@AnthonySherritt 3 жыл бұрын
Very well explained. Thank you!
@jasonpmerrigan
@jasonpmerrigan 2 жыл бұрын
Great explanation, thank you.
@andysierra5141
@andysierra5141 3 жыл бұрын
I'm an english and react learner... it's hard but very satisfactory the fact of understand and learn what are she saying, without set slow this video.
@divyagji
@divyagji 3 жыл бұрын
kzfaq.info/get/bejne/hqx9ndl7nbDbdKs.html Join My Friend's new React Series Dude..... He has created it for absolute beginners with some amazing projects :)
@amyo
@amyo 3 жыл бұрын
U explain things so well, thank u!!!
@fausto7394
@fausto7394 3 жыл бұрын
Wasn't expecting such an amazing explanation. Iam starting with React Native today (after 1,5 year of pure java and kotlin development only) and I think I just understand everything you said)! Sorry for any english grammar mistake, thank you very much!
@evgenyyakimov7779
@evgenyyakimov7779 3 жыл бұрын
Great summary explanation, thank you
@robinsu3796
@robinsu3796 3 жыл бұрын
Thanks! excellent and clear explanation done in 7mins
@misterjaypeasmith
@misterjaypeasmith 3 жыл бұрын
This cleared up a lot for me. And I like the lofi beats 🙌🏽
@ferdeen13
@ferdeen13 3 жыл бұрын
Really nice explanation. Now I'm moving over to funcs:)
@didkei
@didkei 2 жыл бұрын
Great video, thanks!
@AliRaza-hf9bz
@AliRaza-hf9bz 2 жыл бұрын
love it.. a great video!!
@JumpPanda
@JumpPanda 3 жыл бұрын
Thank you for this explanation!
@rickyhobbs3004
@rickyhobbs3004 2 жыл бұрын
Wow that was helpful! thank you.
@JamesThomas-nr2og
@JamesThomas-nr2og 3 жыл бұрын
Great description, thanks. When you have a function inside a class or object, is it not a method? At 2:08 the method in the SideNavigation class is referred to as a function. Thanks
@allanlimaverde6201
@allanlimaverde6201 3 жыл бұрын
Wow. This was so helpful. Thank you
@avimehenwal
@avimehenwal 3 жыл бұрын
Great video (Y) nice work. A small question though, are there any performance gains when writing class-styled react components over function-styled components?
@cristianrosas8674
@cristianrosas8674 3 жыл бұрын
great beautiful explanation
@daniellepetway5102
@daniellepetway5102 3 жыл бұрын
This is a great explanation! I was going through my course material and it just wasn't clicking. Thanks for the click!
@badcodinghabits
@badcodinghabits Жыл бұрын
wasn't expecting that when I clicked the link!
@whoami-so2hy
@whoami-so2hy 2 жыл бұрын
thanks for sharing, its clear to me 😁👏👏
@academician4462
@academician4462 3 жыл бұрын
Thankyou...it really helped
@CalvinJ06
@CalvinJ06 3 жыл бұрын
Great explanation of class and functional components
@htmlfivedev
@htmlfivedev 2 жыл бұрын
Wow, look how small the fonts are ... it's impossible to read anything ... what's up with that?
@d0zerd0zer75
@d0zerd0zer75 2 жыл бұрын
Chandler, how did you get the "Home, About, Contact" to pop up within your Navigation component?
@MisterCuriousController
@MisterCuriousController 3 жыл бұрын
does the defination is also same with the idea in react native? thanks :)
@totalgaming6302
@totalgaming6302 2 жыл бұрын
Hello, nice video ! I'm wondering, is it possible to allow a child component to set its parent state using functionnal component ? I know we can do that by giving a bind method (as props) using class component but i'm not sure the same is possible using functional components
@tuskin77
@tuskin77 2 жыл бұрын
Very clear, thank you 👍 music not an issue for me!
@tonyregalado7281
@tonyregalado7281 3 жыл бұрын
Great video!
@amosmoyo963
@amosmoyo963 3 жыл бұрын
I love this video, much love from Kenya
@thomasmatthewgibsonsings
@thomasmatthewgibsonsings Жыл бұрын
Great stuff.
@openworld7585
@openworld7585 3 жыл бұрын
Great explanations
@scottbruton4002
@scottbruton4002 4 жыл бұрын
Great crash course, really enjoyed it and learnt a few things that I didn't previously know. One question though: If one has many state variables within a page, lets say a Wifi Page where you wish to store multiple variables that could change such as: current network, list of networks, etc, etc. Which would be better to handle multiple state variables? Currently I have been using a functional component for this because you can set a customized "setState" function for each variable. (Such as your `setMenuOpened` function). However, I was wondering if a class component would be easier to use if say you have 10 different state variables? Thank you for your help
@novak4697
@novak4697 Жыл бұрын
Great video, thank you. Greetings from Sweden
@jalenharris8354
@jalenharris8354 3 жыл бұрын
Great video!! Just little confused about what exactly is a life cycle function?
@lohaustin9758
@lohaustin9758 3 жыл бұрын
Where'd you get your wallpaper? It looks dope!!
@cpmcmanaman
@cpmcmanaman 3 жыл бұрын
Your videos are awesome in every way! Content! Clarity! And Delivery. Thank you!! Please do more of them! :) I agree though...lose the music :) I have a strong feeling you will take off in the next year if you keep going.
@EmmanuelMannyNsanga
@EmmanuelMannyNsanga 3 жыл бұрын
Great explanation
@johnkriervillanueva5112
@johnkriervillanueva5112 3 жыл бұрын
What if I need to use redux? Which one do I choose?
@adityayaduvanshi3813
@adityayaduvanshi3813 2 жыл бұрын
Is there any security threat in functions than class or which is industry standard?
@hk_build
@hk_build 3 жыл бұрын
Why we need functional components in react?? Though there are illustration that Functional components are stateless, more of representational components ,no need to extend from component, code size is less, No render function.. etc But even we can use states in fun component then what other things that makes fun component different from class component Anything extra you feel wanted to add ? Thanks
@bigstick256
@bigstick256 2 жыл бұрын
Thank you!
@rajnishgiri6252
@rajnishgiri6252 2 жыл бұрын
So basically we can achieve everything with functional components (with hooks sometimes) what we already had with class components. Then what was the need to introduce Functional components?
@sloppytony
@sloppytony 2 жыл бұрын
Super helpful
@techlifewithjo1859
@techlifewithjo1859 4 жыл бұрын
Very informative and neat video! But a couple ways that might make it better is, if you slowed down the talking just a little bit (it was hard to keep track of the information, had to rewind a couple times.) and if you could zoom in on your code in the editor (maybe increase the font size in your editor). Loved the music in the background also.
@Joel-yp4yt
@Joel-yp4yt 3 жыл бұрын
Nice video. I MUCH prefer hooks, but still commonly come across class components when working on others' codebases, so class components are still very relevant.
@d0zerd0zer75
@d0zerd0zer75 2 жыл бұрын
Thank You
@yaldakarimi3772
@yaldakarimi3772 2 жыл бұрын
thanks for the nice, quick and simple comparison, but one small point, the music was too loud
@darudeSandstorm.
@darudeSandstorm. 3 жыл бұрын
good content !!!!!!!!!!!!!!!!!!!!!!
@AL-iq5qr
@AL-iq5qr 2 жыл бұрын
Good video
@coyotemoon722
@coyotemoon722 2 жыл бұрын
Very good tutorial. However, by the end I was convinced that Class components were easier to use; This is probably because I have been programming on the backend where classes are dominant. I'll have to start coding my own projects to determine the one that works for me. In regard to the music: The music did not distract from presentation because it was low-volume and very generic in nature, however I can see how some people with hyperawareness issues would be troubled by it.
@gabriel-mk7jk
@gabriel-mk7jk 3 жыл бұрын
perfect
@Mackin7777
@Mackin7777 3 жыл бұрын
The class component example being 2 space indented while the functional component example being 4 space indented triggers me for some reason.
@ravikurup8350
@ravikurup8350 Жыл бұрын
Thank
@ayushthakur733
@ayushthakur733 3 жыл бұрын
Great
@damar1967
@damar1967 4 жыл бұрын
🔥Subscribed
@aayushshah8443
@aayushshah8443 2 жыл бұрын
Music OP
@JessieJussMessy
@JessieJussMessy 3 жыл бұрын
Music in beginning? So many tutorial channels have this song and I require it for meme purposes. You understand
@MiSt3300
@MiSt3300 3 жыл бұрын
That was pretty consise. I think I'll stick to class components and only use function components when just returning jsx
@coolpriyanks
@coolpriyanks 3 жыл бұрын
Easy to understand langauge
@JC-fd8ho
@JC-fd8ho 2 жыл бұрын
amazing video just don't put music pls it's so distracting
@i5artube
@i5artube 3 жыл бұрын
Functional components don't return JSX but simple JS components (6:40). Babel does the conversion from JSX to JS before feeding React with your functions. React is a library! JSX has nothing to do with how it works... You can use both Hooks and Classes without JSX if you want: reactjs.org/docs/react-without-jsx.html
@oscarcardoso7599
@oscarcardoso7599 3 жыл бұрын
I had to put this video slow down because my listening in english is no so good and she speak very fast hahaha
@shashankranamusic
@shashankranamusic 2 жыл бұрын
The background music was so disturbing. I would recommend you decrease the volume of music in your next videos.
@jehanpaula9470
@jehanpaula9470 2 жыл бұрын
the music damage the video
@rinjusherpa2184
@rinjusherpa2184 3 жыл бұрын
background music is so distracting!
@rauldeandrade
@rauldeandrade 3 жыл бұрын
I love the video but the music is too loud and competes for attention with your voice, so it's hard to keep up
@shubhammore7928
@shubhammore7928 3 жыл бұрын
Please don't use that background music its very disturbing, Thanks.
@tawandagamedevs
@tawandagamedevs 3 жыл бұрын
I JUST NEEDED 69 COMMENTS
@playsec9370
@playsec9370 3 жыл бұрын
I cannot understand, music district much
@divyagji
@divyagji 3 жыл бұрын
kzfaq.info/get/bejne/hqx9ndl7nbDbdKs.html Join My Friend's new React Series Dude..... He has created it for absolute beginners with some amazing projects :)
@ReynaldAdolphe
@ReynaldAdolphe 2 жыл бұрын
Good stuff but damn... Please slow the eff down. Wtf! I had to play at .5 speed.
@benjaminmoseslieb9856
@benjaminmoseslieb9856 3 жыл бұрын
Couldn't watch. Music too distracting.
@divyagji
@divyagji 3 жыл бұрын
kzfaq.info/get/bejne/hqx9ndl7nbDbdKs.html Join My Friend's new React Series Dude..... He has created it for absolute beginners with some amazing projects :)
@sangrambarge7081
@sangrambarge7081 3 жыл бұрын
WHY THE FUCK WE NEED MUSIC IN THIS
@divyagji
@divyagji 3 жыл бұрын
kzfaq.info/get/bejne/hqx9ndl7nbDbdKs.html Join My Friend's new React Series Dude..... He has created it for absolute beginners with some amazing projects :) Just join if you find this one cool;)
@21agdmnm
@21agdmnm 3 жыл бұрын
I hate React class components... good video tho
@ricko13
@ricko13 3 жыл бұрын
why?
@riyazm.4585
@riyazm.4585 3 жыл бұрын
Annoying music
@hasnathabdullah1253
@hasnathabdullah1253 2 жыл бұрын
please mute that bloody background music ....
@trustingod0
@trustingod0 3 жыл бұрын
Are you just rambling on about something or teaching
Custom Hooks in React (Design Patterns)
12:56
Cosden Solutions
Рет қаралды 31 М.
КАХА и Джин 2
00:36
К-Media
Рет қаралды 3,9 МЛН
Sigma Girl Education #sigma #viral #comedy
00:16
CRAZY GREAPA
Рет қаралды 65 МЛН
5 Pro-Level React Do's & Don'ts
30:06
Traversy Media
Рет қаралды 173 М.
How React ACTUALLY works (DEEP DIVE 2023)
12:59
FrontStart
Рет қаралды 47 М.
10 React Antipatterns to Avoid - Code This, Not That!
8:55
Fireship
Рет қаралды 709 М.
React 18 - What's New, What Changed & Upgrade Guide
9:22
Academind
Рет қаралды 250 М.
99% React Developers Fail to Answer THIS Question!
8:56
Mehul - Codedamn
Рет қаралды 100 М.
Async JS Crash Course - Callbacks, Promises, Async Await
24:31
Traversy Media
Рет қаралды 1,4 МЛН
React JS Explained In 10 Minutes
10:00
Dennis Ivy
Рет қаралды 228 М.
Creating High-Quality React Components: Best Practices for Reusability
12:47
React Hooks Course - All React Hooks Explained
1:26:21
PedroTech
Рет қаралды 1 МЛН
Learn React #8: The React Lifecycle of a Functional Component
11:29
Anthony Sistilli
Рет қаралды 78 М.
What’s your charging level??
0:14
Татьяна Дука
Рет қаралды 7 МЛН
cool watercooled mobile phone radiator #tech #cooler #ytfeed
0:14
Stark Edition
Рет қаралды 6 МЛН
Эффект Карбонаро и бумажный телефон
1:01
История одного вокалиста
Рет қаралды 2,6 МЛН
XL-Power Best For Audio Call 📞 Mobile 📱
0:42
Tech Official
Рет қаралды 772 М.
Very Best And Good Price Smart Phone
0:42
SDC Editing Zone 9K
Рет қаралды 217 М.