Every React Concept Explained in 12 Minutes

My React course: reactbootcamp.dev
Chapters
0:00 - Intro
0:11 - Components
0:29 - JSX
1:02 - Curly Braces
1:29 - Fragments
1:49 - Props
2:20 - Children
2:54 - Keys
3:27 - Rendering
4:34 - Event Handling
5:05 - State
5:54 - Controlled Components
6:31 - Hooks
7:21 - Purity
8:03 - Strict Mode
8:22 - Effects
9:03 - Refs
9:30 - Context
10:10 - Portals
10:41 - Suspense
11:06 - Error Boundaries
11:35 - Learn More

[@AmineChM21]

"class" to "className" isn't to make it camelCase as "class" is already camelCase. It's to avoid conflict with the JS keyword "class" for creating classes.

[@eslamsami4986]

That's actually right

[@seannewell397]

_solidjs enters the chat_

[@szyszak]

You can't decalre a class inside JSX though. You can also use this seemingly reserved keyword between JSX tags, like class. React team can update their JSX parser to allow using the "class" and "for" attributes, but I guess it isn't really a pressing matter.

[@nivethan_me]

@@szyszak when you write class you're telling put the string "class" inside a tag. when you want to escape into javascript world you need to use the brackets { } so try writing { class } now you'll get an error since class is a reserved keyword in javascript and React is just Javascript end of the day.

[@bobwilkinsonguitar6142]

​@@nivethan_me when you write className in JSX, you're doing it inside , which also should tell the parser you're not using the class keyword. It's an arbitrary change

[@wass3411]

Software Engineer using React daily for 6 years now and this is hands down the cleanest explanations of those concepts I ever saw. Sharing this everywhere.

[@anil4real_]

This is the most cleanest and concise explanation of react concepts ever

[@suyogmahangade8434]

Best video ever to brush up most of the react concepts 😊

[@gustavo-santos-dev]

Awesome content, as a backend engineer that is starting dealing with React, this is pretty straightforward and saved me a lot of time.

[@Chillycloth]

Molim se da vaša velikodušnost prema nama bude nagrađena. Ovaj video je odličan poklon

[@RafaelBarbosa-yp9ii]

Man, this was the best class I've ever had on everything I learned in programming. I already knew most of the concepts but the simple way you exemplified was excellent. I will watch your other videos.

[@AntonyJoseph-im9xq]

This has to be the best react speed run ever means a lot bro thank you.

[@Omar-sr1ln]

Never heard such a great round up of react , awesome vid man 👍🏻

[@TheCodeBootcamp]

My pleasure. Any more topics you'd like me to cover?

[@knecks7374]

@@TheCodeBootcamp Can you do react advanced topics only. Like , proper advanced stuff that is often used too. Or maybe , as a second idea , a list of commonly used libraries and the like.

[@dikshantluthra5077]

great work man,I just revised react in 11 mins,Keep growing!!

[@Jai-xq5hi]

Very smoothly explained and so clear and concise.

[@moustafamohsen]

I'm a senior Angular developer, but wanted a quick way to pickup React, and I have to say this video is amazing, it doesn't get hanged up on the details and explains the concepts with text and examples, along with the reasoning as to why it's implemented this way, in addition you referenced the most used common patterns which is a great touch Just a great video!

[@wajdwael8775]

You have a unique way of explaining things. Keep up the good work!

[@phpsoftwareengineering]

Great video! I love how you added a bit of Foley as well. 💯

[@elsaman]

I love it. you have exceptional content creational skills

[@agresywniePL]

Awesome video. Especially for someone who worked with React before and needed some kind of refresh.

[@afrosoul4eva]

Damn this is the most clear explanation of React. Everything is on point.

[@VoiceHole]

lol i been teaching my self react for 2 years and this just put all the pieces together for me so well haha.

[@dvrk6140]

I am happy about the memes used throughout the whole video more than the fact that this video helped me learn concepts i didn't get previously

[@phpsoftwareengineering]

I also took a look at your course and it too looks excellent!

[@dumolwenkosigwetu6943]

Your tutorial is so insightful Sir. Thank you so much.

[@bhargavkumar]

Amazing video. Got me hooked. I think you should do this for other technologies as well, like Node & Express and Databases

[@bichaudjean-marc4948]

Learning React for 2 weeks. Your video really helped me to make sense of a lot of code in my project 🎉

[@zNeoDev]

This is the best React video I have seen on the internet since I've first learned React.

[@MuhammadBasurah]

watched this 1 time.. will comeback for sure

[@visajpanchal6789]

Damn, its my 3rd day of learning React and you already taught me a lot.!! What a great way to explain, so much easy explanation and best visuals

[@TheDjTotzy]

Using index as a key is ok for rendering UI derived from an array that doesn't have to change the order of it's elements. But when you have an array that does change the order of it's elements you gotta use a unique key (usually the id of that data item coming from the DB)

[@khaouitiabdelhakim]

Thank you so much for such a great video, you have explained almost every needed concept; keep it up bro

[@maxkalashnyk3378]

I very rarely leave comments on KZbin but it’s the best video about basics of React. Thank you!

[@prajwalk6685]

wow awesome explantion of all react concepts in a simpler way . Please also make a video on next JS also

[@QuranProductions23]

Your videos are awesome ❤❤. Can you make more of these types of videos for other programming languages? I’m sure nobody has done what you’re doing. It’s remarkable 🎉🎉

[@siyapandey8799]

Really great explanation ❤

[@graphixafa3180]

Complete React Tutorial in less than 15 minutes. That's incredible.

[@Filaxsan]

Cool stuff brother! 💪🔥

[@user-zx2hb4ld8w]

very well summarized!

[@alii2284]

This guy is underrated. Thank you man

[@subhayanbairagi510]

Really happy to have you back , looking forward for more content , love from india

[@VaibhavShewale]

well that was interesting a nice way to brush up some concept faster

[@princereyes5400]

hope you could do something like this in data structures and algorithms.

[@2012jhon]

Beautifully Discribed.

[@amranimohamad4741]

like the teaching style keep it UP!!

[@1337bitcoin]

Using react again after 4 years and this was an awesome refresher!

[@SULTAN-db3fq]

We need more videos like this one

[@Sahil.1]

As a dev who's getting his hand into react this video is piece of art

[@pavelgordon6669]

Very helpful, thank you!

[@arhabersham]

Loved this ❤

[@orlando_kawaii]

This is actually pretty gooodd

[@donaldpetervicente8351]

this content explains well .. more vid to watch.. its refresh my knowledge on react and js again. 😁

[@almatnarmatov]

bro this is the best tutorial on react

[@uniq6318]

Awesome buddy❤

[@hijazi479]

00:01 Understanding React Components and JSX 01:36 Passing Data in React Components 02:58 Key prop in React for component identification. 04:28 React uses reconciliation to update the DOM and manage events using event handling and state. 05:58 Controlled components provide predictable behavior 07:31 React components purity and usage of strict mode 09:00 Using Context and Portals in React 10:32 Tools like Create Portal and Suspense enhance React components.

[@TheCodeBootcamp]

Thanks for this. Just added chapters.

[@manthanpatel8409]

Amazing video 👏🏻

[@ewaneewane4154]

Great! Pretty clear

[@jeffgathumbi3559]

glad to see y back.

[@cryptocurrencydailybugal]

@code.bootcamp make Vue concepts Plz ser thenks

[@wlockuz4467]

Never use indexes as keys, it can lead to behaviours that are very hard to debug, especially if the underlying list is modified.

[@omagadavid9923]

What can we use instead

[@wlockuz4467]

@@omagadavid9923 for all practical cases, for example users, products, posts etc. there should be some unique identifier already present, so you should always use that.

[@tigabumunaye9778]

I use crypto.randomuuid

[@samibhadgaokar2326]

Then what is alternative for index as key

[@KarthicRaghupathi]

You should never iterate over an iterable that will be modified. You must create a copy of the iterable for the loop and modify the original iterable separately.

[@aaronward9140]

great video, would be great to see this exact same video but for vue

[@20s_football61]

That ownsome vid man !!!

[@agmwpomewg]

Thank you for awesome video 🙏 NextJS please

[@coderzafarjon]

Excellent!

[@rabiulhasannayan8220]

just here to say you...i comment really occasionaly.... and this video..as a react developer..i understand...you realy a great great developer.

[@wisdak]

X'cellent you just got a new sub😍

[@zariusspritee]

thank you for such a clear and concise information . i owe you a coffe good sir.

[@MrxyzOfcl]

Need: "Every Svelte Concept Explained in 12 Minutes" Thanks❤

[@chiranthchiplunkar3608]

Awesome explanation🔥🔥👏👏.

[@blackpinkdumplings]

Best video ever 🎉

[@jessejames6216]

Outstanding content 🎉

[@MRROBOT-fc5ny]

Amazing video!

[@capslock3250]

Amazing video. Thanks 👍

[@haricharanvalleru4411]

Excellent explanation

[@justfun8525]

thanks best explaination

[@weiweicoding]

3:19 If possible, it is not recommended to use index as key, good video!!

[@heyyounotyouyou3761]

Why?

[@eee012]

@@heyyounotyouyou3761the key is meant to tell react reconciliation when an item in a list changes so it doesn’t need to do rerenders on items which haven’t changed. If your list changes order then the index is not reliable as a key.

[@afonsopimenta]

@@heyyounotyouyou3761 React uses the "key" prop under the hood to know which elements were kept the same and which ones were added/removed in the next render when a mutation of the list happens. The problem with using index as the "key" is as follows: imagine we have a list containing the strings ["a", "b", "c," "d"], iterating over the list and giving them the index as the "key" prop would generate the following - lets say we remove the string "b" from the list, the map function would generate , as you can see, the elements with the text "c" and "d" now have different keys, so, instead of react knowing the element with the string "b" was deleted, it thinks the element with the string "b" was changed to have "c", the element with string "c" was changed to have "d" and that the "d" element was deleted. This makes react re-render 3 components unecessarily instead of just 1. This might not be a big deal for short lists, but for big ones, it's a huge performance loss. Hope this helps. And if you still don't understand, feel free to ask questions 😄

[@al3xg.0]

@@heyyounotyouyou3761 when you render a list of items that can be modified (for example by removing elements) the index will shift and you may see some inconsistencies on the page. If the key is based on a property of the item, then the behaviour is always consistent

[@user-ii7xc1ry3x]

Cool explaining

[@marvelmaher5426]

thanks, that is very useful video for me and very simple😍

[@sadik_farhan_]

Nailed It

[@tamis5908]

Absolutely FABULOUSLY clean and understandable explanation - KUDOS! Please provide a link to your Bootcamp site in your vid description details above!!🙌🙏🙏🙏

[@INetreba]

awesome!

[@tigabumunaye9778]

Great explanation thanks

[@aryaman958]

well explained !! , Please create React projects as well

[@tanw89]

This is great! Could you do one for NextJS please?

[@Student-lj9qh]

By this video i cleard my unbroken dought help full

[@Axorax]

Great video!

[@iancarr3923]

Excellent - especially for the older geezer!

[@milkdrom3da]

As a MERN stack dev of 1 year...... I learned a lot today

[@MrCrsistian]

Great

[@moviespalace17]

On 5:42 the function handle click should have the setLikes method instead of setClicks

[@prasad_vlog]

hey buddy, thanks for such valuable video... 🙃

[@VIETMIXER]

so great

[@10xFrontend]

Very cool !!

[@justaperson2247]

Great video

[@ben-iz9pj]

With this videos, now I love more my htmx approach

[@aashishupadhyay5566]

this is gem !

[@shaansharma2504]

nice one :)

[@SanketGanorkar-lb3xn]

Please bring more such content on nodejs and expressjs

[@ashish_prajapati_tr]

awesome guide.

[@frankie_goestohollywood]

Love your video! @5:41 - Should the update function inside of the handleClick function be setLikes, instead of setClicks? Thank you 🤓

[@luizfelipediniz5711]

Aula mto boa professor! Imagino q o fato de enterrarem os antepassados na própria casa pode ter relação com oq vc falou no vídeo da Cidade Antiga, que a região era puramente familiar. Outra coisa interessante que pode ser pauta de um vídeo futuro é a relação entre a monogâmia, o patriarcado e a revolução agrícola. Até onde eu me lembro, sociedades pré agricultura não tinham muito claro esses dois conceitos sedimentados.

[@indianforever4314]

please post a video on Best Practices of react and react integration to other codes ⭐⭐⭐

[@batek34]

Never in my wildest dreams would I have thought of seeing Dom from Broscience in a React video 😂😂

[@kasisshrestha238]

Good one

[@sulmanahmad6943]

Great 👍