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.
"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.
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.
@@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.
@@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
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.
@@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.
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)
This is a great resource for anyone learning React: accessible, concise, and fun. I just shared it with some devs on my team who have been learning React, and they found it the most helpful of everything else they've studied.
Ive been coding React for 4 years now and this is an amazing explanation of the entire thing, also love the humour from time to time, very well placed.
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.
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!
I’m impressed. You were able to explain a lot of concepts in under 12 minutes. I would definitely recommend this video to someone just getting started with React. 👏
@@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.
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.
Great video. As somebody learning React and already familiar with some of these concepts, this really helped me grasp the bigger picture much faster. Thank You.
Wow! , As a Vue developer, I did not expect that React's concept is almost the same as in Vue but just a different syntax. I'm really excited to switch to React now since it has more job openings 😊.
I didn't get to React yet, but I perfectly understood almost everything here. I guess focusing in getring a decent base in JS does works pretty well, huh... Anyway, awesome vid.
Im in love of these kind of presentations of concept. I watched a lot of videos like these(every religion explained, every ideology) and its actually a good way.
You deserve a hug and some sort of reward like a medal or a cake. Thank you so much for posting this, I made the mistake of starting with ReactNative, so circling back to React is now easier thanks to you! Cheers!
Nice video, great work. Just my two cents: I think that a more accurate definition of useEffect is that it actually controls the collateral effects of the component through the dependency array. Connect to external systems like an API call for example isn’t a good practice, being a better option to put it on another layer using custom hooks to manage this kind of data
@@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.
@@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 😄
@@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
Absolutely FABULOUSLY clean and understandable explanation - KUDOS! Please provide a link to your Bootcamp site in your vid description details above!!🙌🙏🙏🙏
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 🎉🎉
00:01 React components are the building blocks of every React app 01:36 Understanding how to pass data and components in React using props and children prop 02:58 Key prop in React 04:28 React uses reconciliation for updating the DOM and handling events. 05:58 Controlled components ensure predictable behavior 07:31 React components need to return the same output for the same input to maintain purity. 09:00 Using ref for direct DOM manipulation and context for prop data passing 10:32 Create portal and suspense can improve user experience.
I nominate you for Javascript Peace Prize! That is hands down the most effective and succinct overview, plus the ironic use of comic sans and papyrus font made me fall in love! lol 😆
Notes - React is a JS LIBRARY, not a framework. - COMPONENTS are the building blocks of React. They allow us to make all the visible parts of the app (bottons, inputs, entire pages etc). Every compontent is a JS function that returns JSX markup. JSX attributes come in camel case. - {curlyBraces} are used to pass JS PROPERTIES. - Only one PARENT ELEMENT can be passed to a component. Either pass everything inside a (or another HTML) tag or an EMPTY COMPONENT, a react fragment - PROPS are a way to pass data from one component to another. Props are passed in the component and are then used in the component you passed it to. Anything can be passed as props, including other components. export default function Component(props) { return (
{ props.text }
); }; - The KEY PROP is used so react can tell one component apart from another (usually when creating a list with .map). - RENDERING is the process of displaying and updating the UI. Rendering is done using the virtual DOM or VDOM. Document | HTML / \ Head Body / \ / \ Meta Title h1 h2 1) If the state of the app changes, react updates the VDOM. 2) Then, it uses diffing to compare the updated VDOM to a previous version of the VDOM. 3) Once it sees what's different, it uses "reconcilication" to update the real DOM. - EVENTS are actions that occur in the browser, such as click, input, submit and focus.
- EVENT HANDLING is how we take those events and do something with them. EVENT PROPS are passed to the HTML element. . /> . /> . /> function Alert() { const handleClick = () => { alert('Clicked') } return (
Click me!
); }; - We manage data in React using STATES, which are like snapshots of the app at any giving time. To manage states, we can't use JS variables since they don't cause the app rerender. Instead we use special functions like useState() and useReducer(). useState takes an argument that serves as the starting value of the state variable and returns an array containing the STATE VARIABLE and the function to update that state. const [ stateVariable, setStateVariable ] = useState(0); - CONTROLLED COMPONENTS are form elements (such as ) whose value is controlled by the component's state. They use state values to have more predictable behaviour. Ex:
function ControlledInput() { const [value, setValue] = useState('') return ( setValue(e.target.value)} /> ); }; 1) The user types on the input, setValue is called and sets what the user typed into state. 2) The state value is updated. 3) The input uses the updatded state as its value. Controlled components are a great pattern to use because if we want to change the component's behavior, we just need to change the state that controlls it. - HOOKS are functions that allow you to use state and other React features in function components. useState is an example of a React hook. There are 5 main types of hooks:
1) STATE HOOKS (useState() and useReducer()) - help managing state within components. 2) CONTEXT HOOKS (useContext()) - lets you use data passed through context. 3) REF HOOKS (useRef()) - lets you refernce things like HTML elements. 4) EFFECT HOOKS (useEffect()) - lets you connect to external systems like APIs. 5) PERFORMANCE HOOKS (useMemo() and useCallback()) - improves performance by preventing unnecessary work. useState(), useEffect() and useRef() are the 3 main hooks. - PURITY is a term used to describe how components should work. In a pure component, the same input always returns the same output. To keep a component pure, it should only return JSX and not change any objects or variables that existed before rendering. Example of an impure component:
let count = 0 function Cup() { count = count + 1 (*changed variable outside component*)
return ( Cup {count} ); }; - STRIC MODE is used to prevent errors. It's a special component that tells us about mistakes as we develop a React app. It's usually wraped around the component:
import('./Component') );
- ERROR BOUNDARIES are components that let you catch app breaking errors and show a fallback component to tell the user what happened. This is useful because React apps are all Javascript and errors that happen during rendering can break the app. Ex: function App({ user }) { if (!user) { throw new Error("No user data") };
return {user.name}; };
This code will break the app when ran because it throws an error when there's no user. import { ErrorBoundary } from 'react-error-boundary' function Fallback({ error }) { return (
No user provided: {error.message}
); };
To prevent the app from crashing, we add an ErrorBoundary to display a Fallback component in App.jsx with a more helpful message to be displayed to the user.
did an interview where they asked for an angular developer, repeated angular concepts, they instead asked me react and next js, i will not let them find me unprepared the next time
Minor suggestion, in 10:07 I think you could have combined 2 and 3, as they are very close together, in addition they have different examples where the next step overrides the step behind it, which is always confusing for first timers to a new framework like me
I'd optimize it like this next time, 1. Create your context ```jsx const MyAppContext = createContext() ``` 2. Put data on value prop and Wrap the component ```jsx ``` 3. Access the data from the child ```jsx function Title(){ const text = useContext(MyAppContext) return {text} } ```
Since the introduction of hooks, React components are no longer pure. You cannot determine the outcome of a component solely based on the input properties, hooks bring internal state, an inherent property of OOP.
I’m sure others have pointed it out but using the provided index as the key on react is not recommended, it can cause errors or holes if your array of values ever changes.
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.
it is clear for you because you were already working for six years on React
@@whatever-s3e It was also very clear for me and I'm just learning React buddy :)
should've have tis video long time ago... when im learning at such micro level i just dont understand why its like this or that
@@whatever-s3esounds like a skill issue here a lil bit
Umm, no. This is just a refresher for you. Put yourself in the shoes of a newbie. Y'all forget the beginning so easily.
"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.
That's actually right
_solidjs enters the chat_
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.
@@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.
@@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
This is the most cleanest and concise explanation of react concepts ever
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.
Awesome content, as a backend engineer that is starting dealing with React, this is pretty straightforward and saved me a lot of time.
Never heard such a great round up of react , awesome vid man 👍🏻
My pleasure. Any more topics you'd like me to cover?
@@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.
Molim se da vaša velikodušnost prema nama bude nagrađena. Ovaj video je odličan poklon
This has to be the best react speed run ever means a lot bro thank you.
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)
Don't be that guy. LOL. It's a 12 minute video, not a comprehensive video.
@@jay_wright_thats_right good information to know though, he's just adding on to the info from the video
This is a great resource for anyone learning React: accessible, concise, and fun. I just shared it with some devs on my team who have been learning React, and they found it the most helpful of everything else they've studied.
Ive been coding React for 4 years now and this is an amazing explanation of the entire thing, also love the humour from time to time, very well placed.
On 5:42 the function handle click should have the setLikes method instead of setClicks
Thank you. I thought it should be. I was just staring at the freeze frame trying to figure it out..
exactly am also thinking that and find someone also notice this....
Just came to comments to confirm this, thanks buddy ☺️
@@1mlister Same... I was confused for a bit there
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.
Thanks for this. Just added chapters.
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!
You really must understand a topic deeply to be able to explain it so succinctly.
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
This is the best experience of learning React I've ever had! Months of practical knowledge easily digested in minutes!
I very rarely leave comments on UA-cam but it’s the best video about basics of React. Thank you!
Damn this is the most clear explanation of React. Everything is on point.
Best video ever to brush up most of the react concepts 😊
I’m impressed. You were able to explain a lot of concepts in under 12 minutes. I would definitely recommend this video to someone just getting started with React. 👏
Never use indexes as keys, it can lead to behaviours that are very hard to debug, especially if the underlying list is modified.
What can we use instead
@@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.
I use crypto.randomuuid
Then what is alternative for index as key
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.
Learning React for 2 weeks. Your video really helped me to make sense of a lot of code in my project 🎉
lol i been teaching my self react for 2 years and this just put all the pieces together for me so well haha.
Complete React Tutorial in less than 15 minutes. That's incredible.
Been studying React for 6 months now and I could have just watched this video. Essential and to the point thanks!
great work man,I just revised react in 11 mins,Keep growing!!
Amazing video. Got me hooked. I think you should do this for other technologies as well, like Node & Express and Databases
Great video. As somebody learning React and already familiar with some of these concepts, this really helped me grasp the bigger picture much faster. Thank You.
One of the finest React JS video explanation . Deserves a million views!!
Very smoothly explained and so clear and concise.
Wow! , As a Vue developer, I did not expect that React's concept is almost the same as in Vue but just a different syntax. I'm really excited to switch to React now since it has more job openings 😊.
I love it. you have exceptional content creational skills
I didn't get to React yet, but I perfectly understood almost everything here. I guess focusing in getring a decent base in JS does works pretty well, huh...
Anyway, awesome vid.
Im in love of these kind of presentations of concept. I watched a lot of videos like these(every religion explained, every ideology) and its actually a good way.
You deserve a hug and some sort of reward like a medal or a cake.
Thank you so much for posting this, I made the mistake of starting with ReactNative, so circling back to React is now easier thanks to you!
Cheers!
You are right..
hope you could do something like this in data structures and algorithms.
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
This was a great explaination. Working with React for the past 3 years and this was a wonderful refresher for me and a great recap for new developers.
Please make more videos like this. These are very helpful for a quick revision during interviews.
Wow, thanks for the information! I really learned a lot from you. I am a React beginner, and this will help me complete my project. 🤓
Nice video, great work. Just my two cents: I think that a more accurate definition of useEffect is that it actually controls the collateral effects of the component through the dependency array. Connect to external systems like an API call for example isn’t a good practice, being a better option to put it on another layer using custom hooks to manage this kind of data
your explanation is already the cleanest i've ever read but i still lost focus at like 3mins😵
3:19 If possible, it is not recommended to use index as key, good video!!
Why?
@@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.
@@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 😄
@@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
Why???
You have a unique way of explaining things. Keep up the good work!
As a MERN stack dev of 1 year...... I learned a lot today
This is the best React video I have seen on the internet since I've first learned React.
He explained every concept precisely ❤
might be the best video ive ever watched
watched this 1 time..
will comeback for sure
wow awesome explantion of all react concepts in a simpler way . Please also make a video on next JS also
The more I watch this, the more I appreciate vuejs.
As a dev who's getting his hand into react this video is piece of art
Absolutely FABULOUSLY clean and understandable explanation - KUDOS! Please provide a link to your Bootcamp site in your vid description details above!!🙌🙏🙏🙏
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 🎉🎉
Need: "Every Svelte Concept Explained in 12 Minutes"
Thanks❤
I like how every react dev talk down on HTML whilst in fact they are writing HTML with extra steps.
00:01 React components are the building blocks of every React app
01:36 Understanding how to pass data and components in React using props and children prop
02:58 Key prop in React
04:28 React uses reconciliation for updating the DOM and handling events.
05:58 Controlled components ensure predictable behavior
07:31 React components need to return the same output for the same input to maintain purity.
09:00 Using ref for direct DOM manipulation and context for prop data passing
10:32 Create portal and suspense can improve user experience.
I love this explanation so much, I'm literally taking notes out of this video.
Such a Great video!
I spent a worth watching 12 mins
Good stuff man!! Kudos
100% the best introductory video on youtube. Great job.
bro this is the best tutorial on react
I nominate you for Javascript Peace Prize! That is hands down the most effective and succinct overview, plus the ironic use of comic sans and papyrus font made me fall in love! lol 😆
Who the hell thought about Arthur's fist when discussing 'strict mode.' Hilarious stuff! 🤣🤣
Awesome video. Especially for someone who worked with React before and needed some kind of refresh.
This is the greatest explanation of react that i have ever found. Thanks for your awsome video
Great video! Super concise and a quick way to level up React knowledge. Appreciate the clear explanations.
34 second in and I can already tell this is gold
Love your video!
@5:41 - Should the update function inside of the handleClick function be setLikes, instead of setClicks? Thank you 🤓
Yes, typo
Notes
- React is a JS LIBRARY, not a framework.
- COMPONENTS are the building blocks of React.
They allow us to make all the visible parts of the app
(bottons, inputs, entire pages etc). Every compontent is a
JS function that returns JSX markup. JSX attributes come in
camel case.
- {curlyBraces} are used to pass JS PROPERTIES.
- Only one PARENT ELEMENT can be passed to a component.
Either pass everything inside a (or another HTML) tag or
an EMPTY COMPONENT, a react fragment
- PROPS are a way to pass data from one component to another.
Props are passed in the component
and are then used in the component you passed it to. Anything
can be passed as props, including other components.
export default function Component(props) {
return (
{ props.text }
);
};
- The KEY PROP is used so react can tell one component apart
from another (usually when creating a list with .map).
- RENDERING is the process of displaying and updating the UI.
Rendering is done using the virtual DOM or VDOM.
Document
|
HTML
/ \
Head Body
/ \ / \
Meta Title h1 h2
1) If the state of the app changes, react updates the VDOM.
2) Then, it uses diffing to compare the updated VDOM to a
previous version of the VDOM.
3) Once it sees what's different, it uses "reconcilication"
to update the real DOM.
- EVENTS are actions that occur in the browser, such as click,
input, submit and focus.
- EVENT HANDLING is how we take those events and do something
with them. EVENT PROPS are passed to the HTML element.
. />
. />
. />
function Alert() {
const handleClick = () => {
alert('Clicked')
}
return (
Click me!
);
};
- We manage data in React using STATES, which are like
snapshots of the app at any giving time. To manage states, we
can't use JS variables since they don't cause the app
rerender. Instead we use special functions like useState() and
useReducer(). useState takes an argument that serves as the
starting value of the state variable and returns an array
containing the STATE VARIABLE and the function to update that
state.
const [ stateVariable, setStateVariable ] = useState(0);
- CONTROLLED COMPONENTS are form elements (such as )
whose value is controlled by the component's state. They use
state values to have more predictable behaviour. Ex:
function ControlledInput() {
const [value, setValue] = useState('')
return (
setValue(e.target.value)}
/>
);
};
1) The user types on the input, setValue is called and sets
what the user typed into state.
2) The state value is updated.
3) The input uses the updatded state as its value.
Controlled components are a great pattern to use because if
we want to change the component's behavior, we just need to
change the state that controlls it.
- HOOKS are functions that allow you to use state and other
React features in function components. useState is an example
of a React hook. There are 5 main types of hooks:
1) STATE HOOKS (useState() and useReducer()) - help managing
state within components.
2) CONTEXT HOOKS (useContext()) - lets you use data passed
through context.
3) REF HOOKS (useRef()) - lets you refernce things like HTML
elements.
4) EFFECT HOOKS (useEffect()) - lets you connect to external
systems like APIs.
5) PERFORMANCE HOOKS (useMemo() and useCallback()) - improves
performance by preventing unnecessary work.
useState(), useEffect() and useRef() are the 3 main hooks.
- PURITY is a term used to describe how components should work.
In a pure component, the same input always returns the same
output. To keep a component pure, it should only return JSX
and not change any objects or variables that existed before
rendering. Example of an impure component:
let count = 0
function Cup() {
count = count + 1 (*changed variable outside component*)
return (
Cup {count}
);
};
- STRIC MODE is used to prevent errors. It's a special component
that tells us about mistakes as we develop a React app. It's
usually wraped around the component:
import('./Component')
);
- ERROR BOUNDARIES are components that let you catch app
breaking errors and show a fallback component to tell the user
what happened. This is useful because React apps are all
Javascript and errors that happen during rendering can break
the app. Ex:
function App({ user }) {
if (!user) {
throw new Error("No user data")
};
return {user.name};
};
This code will break the app when ran because it throws an
error when there's no user.
import { ErrorBoundary } from 'react-error-boundary'
function Fallback({ error }) {
return (
No user provided:
{error.message}
);
};
To prevent the app from crashing, we add an ErrorBoundary to
display a Fallback component in App.jsx with a more helpful
message to be displayed to the user.
The best video on React! Extremely clear and concise
This is the most interesting comment section that I have come across on UA-cam!!!
This guy is underrated. Thank you man
Very simple and neat explanation.
did an interview where they asked for an angular developer, repeated angular concepts, they instead asked me react and next js, i will not let them find me unprepared the next time
"It's much easier to reference the actual Dom element istead of attempting to do it the fuckn React way" I really apreciate this suggestion
well that was interesting a nice way to brush up some concept faster
Great video! I love how you added a bit of Foley as well. 💯
Thanks for clearing this... i really loved how you explained it
Very clean i use react for almost a year, if only you did this with nextjs aswell
Clear explanation! Excellent work here. Thank you 👏👏
Using react again after 4 years and this was an awesome refresher!
This video is awesome 👍
By the way i guess there is a small typo at 5:48
Setlike(likes+1)
Never in my wildest dreams would I have thought of seeing Dom from Broscience in a React video 😂😂
This feels like a great argument for why you should just use HTMX
Now I can write react as skill in my resume
We need more videos like this one
The Dom meme reference was really funny :D
Todo continue from 5:30 already know prev concepts
Best explanation just looking for something like that to clear concept🎉
that is the best explanation of react's stuffs
can you do this for nextjs aswell or would it be the same
Really happy to have you back , looking forward for more content , love from india
transition to Controlled Component bit abrupt - anyway thank you for your work
Minor suggestion, in 10:07 I think you could have combined 2 and 3, as they are very close together, in addition they have different examples where the next step overrides the step behind it, which is always confusing for first timers to a new framework like me
I'd optimize it like this next time,
1. Create your context
```jsx
const MyAppContext = createContext()
```
2. Put data on value prop and Wrap the component
```jsx
```
3. Access the data from the child
```jsx
function Title(){
const text = useContext(MyAppContext)
return {text}
}
```
just here to say you...i comment really occasionaly.... and this video..as a react developer..i understand...you realy a great great developer.
Thanks for really wonderful representation in simple terms would defiantly recommend your channel :)
Love the animation. Great work👍👍
Since the introduction of hooks, React components are no longer pure. You cannot determine the outcome of a component solely based on the input properties, hooks bring internal state, an inherent property of OOP.
I’m sure others have pointed it out but using the provided index as the key on react is not recommended, it can cause errors or holes if your array of values ever changes.