other tutorials: "So you use this and this and that, and there you go" This one: "Carefully explain each elements in multiple different way, shows exemple of what doesn't work, before explaining why" Thank you very much for this playlist, i was in a bit of a down due to general confusion linked to react, but you have explained everything very well and i finally feel like i'm learning a lot!
It's been 4 months since I've not used react because I'm focussing more on Data structures at the moment. These updated React videos are what I needed to brush up my concepts. Thanks Shaun, you are great. Also, Happy New year to you and your family.
Your tutorials are the best dude! Although I just discovered your channel my motivation in finally learning React has skyrocketed. Thanks man, keep them going!
I was a bit confused about choosing a react course on youtube and udemy. Then was just searching around your channel and I got a notification of this course and I loved thank you so much for this course. You are a great teacher Also,Happy New year to you and your family 🎉.
Shaun, my man, this is the cleverest and smartest knowledge I've found! My biggest gratitude and I wish you best. Gonna continue watch your tutorials and I'm hoping that it'll help on the way to me becoming jun. Warm welcome from Russia.
Right here!! Love your accent, thank you you're the best one out there, I been watching you're node js tut back when you had way less subs. I like the fact that the channel is way bigger now, keep up the excellent work!
any reason why the .map() function is wrapped in () instead of {}? is it because it is already wrapped in curly braces from the beginning? for example: i originally wrote blogs.map((blog) => {}) instead of blogs.map((blog) => ()) which caused an error and I had to look closely to see what I was doing wrong. Also curious why forEach doesnt work with this example?
@@EnesKab So forEach() doesn’t work because map() returns new array of modified elements and forEach just iterates through the array and doesn't return anything at all. As far as the curly braces go it seems to just be the syntax that react uses and likes!
Hmmm! It would really be great if net ninja could be answering questions from us. This silence of his is just not it at all. I also got the same two questions bugging me. Not to sure of the answers you gave though, cause I too, I am confused.
Very informative series. I know little bit stuff but this series clear all my doubts like useState and more to come. I'm learning React to get a React developer job. Thanks Shaun, you are superman.
Great question! When we use arrow functions, we can either use () or {} based on what the function must do. Here he has used () as it returns a single JSX element without having to explicitly mention the keyword `return`. If you used curly braces {}, you would need to explicitly include return, making the code longer and less concise. If you did want to use the {}, you would have to do, as you guessed it, something like this return ( {blogs.map((blog) => { return ( {blog.title} By {blog.author} {blog.body} ); })} );
Have been waiting for this awesome course for a long time! Can't wait to see the next episode :D And happy new year to the entire ninja gang! Hope you guys will be doing great this year!
Why we use parantheses instead of curly brackets in 3:23? We normally used curly brackets in that case but im a little bit confused now Is it because we are returning jsx templates inside parantheses?
In ES6, if you have a single statement, you don't need the return keyword. If you surrounded it with braces, you'd need to specify what you're returning inside the map function, so: blogs.map( blog => { return ( /* stuff you want to render here */ ) } ) blogs.map( blog => ( /* stuff you want to render here */ ) ) Using parentheses turns that whole thing into a single statement. Both are fine. One is arguably more readable.
As usual you are extremely clear when you explain concepts... Why, I'm asking, why, React docs are not written by you. I left that hell-page and I run here to learn.
I just got to know that in the map key word, within call back if we use {} then inside it we have to use the return keyword to get our result displayed...otherwise we can directly use ()
why we have to use useState,could this one be solved without useState? Because i dont get it how we change the state in here we havent updated or changed the value in the array object list
A forEach function doesn't actually "return" anything to render. Whatever you use, it has to "return" something to React. map, modifies an existing array and "maps" it to a something different... which in this case is an array of html elements, effectively.
plsssssssssss the net ninja im try many ways to display images using useState & map(methode) in json file local image : public/images/image.jpg but its not working can you help pls
if you use parentheses after the arrow instead of curly braces, you don't need to have return. PS : I know that your comment is old, just wanted to note this if anyone is having an issue about that.
For the id I used the uuid package from npm. First I created an array with the data outside the Home component so that the id won't be regenerated every time the component is rerendered, and assigned id to uuid4v(). That creates a string of randomly generated uuid. Then use this array to initialize the setState for the blog. Edit: Note that crypto.randomUUID won't work on client-side.
One tutorial after breakfast, another one before going to bed. This is how I am going to make my way to my dream insallah :) Hope to be a ninja with a sharp sword soon.
I'm a little bit confused. I have 2 questions. 1:13 So, the blog is an array filled with bunch of objects? Just curious, why did you not just create the objects directly without creating the array? Does this have something to do with the hooks? 3:21 If the arrow function returns a JS code, it should be () => {}; But if the arrow function returns a JSX code, it should be () => ();? Why? Has this been explained before?
1) No, it is purely for to be able use map method (which is in-built vanilla javascript method for arrays) If he didn't use array filled with objects he couldn't use map later on. 2) In JS when you return multiple lines of something you use: return ( // code // some more ) And since he used arrow function he didn't need to write return keyword. Check this: stackoverflow.com/a/34643199/14203461 For example, if he used old way to write functions it would be like this: {blogs.map(function (blog) { return ( {blog.title} Written by {blog.author} ); })} Notice since return statement returns multiple lines we wrap the thing we return with - (). Does this answer your question?
Hey Shaun, sorry OT but could you please add Net Ninja Tanktops to your merch website (preferably black with a BIG NN logo on front awa back, the tshirt logo is too tiny)? Would love to wear it on my runs and show off your brand! Wishing you a very Happy New Year!
For the "key" property, if let's say in Home.js there's an element with id="test1", and my Navbar.js also has an element with id="test1", will it have any errors?
Hi, the tuts are a major major key to my intro to react wouldn't be on this level of understanding if it was not for the tuts. Big respect for you man, how do I get the ex files I followed the link on gitpod keeps showing me an empty folder.
Why does the callback function at 3:14 use normal parentheses and not curly brackets? So why does it look like this () => () and not like this () => {}?
Because it returns stuff straight away like a single line version. But in this it returns more stuff which does not fit into single line. In this case () are used
Hi, I've been watching your videos since I started coding in Laravel and I saw you made some about CRUD operations, but can you make another one to show how to update records too?
Hi Shaun, the videos are great and they have a great resource to me. I tried to use for loop instead of the map but I couldn't get it to work. kindly help
For loops won't work. In a for loop, you're performing an action, but not returning anything to output to the page. You're just telling it to *DO* something x times,.. but by itself, a for loop doesn't "return" anything. If you think about it logically, that code is in a "return" statement. So, everything has to "return" something. The map, filter, and reduce methods take a array and RETURN a modified value. map and filter return an array, reduce returns a single value... In turn all that gets returned to React which renders stuff. Ask yourself... What does a for loop return? You could console.log out in the for loop, but it's not going to 'return' anything. map is the closest you'll get to a regular for loop. You take an array, and you MAP each value to something else. I know the syntax is strange and harder to get your head around compared to for loops, but it gets easier with practice.
Can someone tell why normally, when using map function in Javascript, we use callback function with *{}* something like: arr.map((value) => *{* //do something *}* ) but why in react we are using *()* in the callback function: arr.map((value) => *(* //do something *)* )
@@pratamamp170 I learned about it. it is actually a JSX syntax. so react uses JSX to render dom elements so whenever we want to render something in the browser (any html tag) we have to write jsx and whenever we return something in JSX we have to use ( ) braces. so in short, use { } when writing regular Javascript and use ( ) when writing JSX
@@codewithfarhad8594 Thanks for the explanation....Also I'm just curious to know why forEach doesn't work in this code...would be great if you brief me about it..:)
what's an upside to react or any other js framework compared to vanilla js? it may be useful on gigantic projects, maybe, but for a while now i am unable to find a single job posting where react isn't a must-know skill which makes me pretty much unemployable. doesn't matter that i was working as a frontend developer for 5 years. my impression is that react just makes a mess of html and css. all ui made in react stays in react. i was able to pop my styles folder with all the scss needed for the ui into any project and it worked. now i have to start from scratch again. react changes all the time which means older projects are quite different from newer ones. every tutorial/project i watched on youtube was coded in a completely different way because the features of the framework keep changing over time.
Great courses. I did your Modern JS course on Udemy and your React and Redux course recently on this channel. Will the rest of this course be released on RUclips as I've followed this course up to here to learn the new practices?
if someone get the error "React Hook “useState” is called in function “app” which is neither a React function component or a custom React Hook function" just change the function/ class name it is in starting from a capital letter and it will be solved. ex- previous name= app, new name = App.
I assume you've been asked this question many times but I would like to know your PC specs. I want some inspiration to build a rig that is more centered towards application development rather than just normal everyday work. Like a proper concise development environment.
I don't know what others say but VUE js is easier and faster. React has large community behind it and that is it. I feel like even @The Net Ninja loves vue more because in the first lessons of react he accidentally confused npm run start with npm run serve ( so did I, because I got used with vue too )
I didn't want to say that react is bad but vue is definitely better. So let me give you an example. In vue cycling through an array is easier to understand ( clean ). In react it is easy too but in vue you need to just create a div and put v-for="item in items" :key="item.id" as an attributes ( items is our array ). When you use v-for you exactly know why you are using it. There are no other ways of using v-for.
curly braces and the "return" keyword are optional if you're returning one statement. He makes it one big statement by surrounding it with parentheses. You COULD use curly braces, and then just "return" what you want if you want: blog.maps( (blog) => { return ( {blog.title} // more code ) } OR: blogs.map( blog => ( {blog.title} ) ) You might want to do it with braces + return if you're doing some data manipulation on a larger method... but for simple things, you can omit a lot
Lemme get the "key" property straight. It's like an ID so React will know where the changed element is when re-rendering the page, and thus saving performance?
For people who still think keys are garbage, you should read this: reactjs.org/docs/reconciliation.html#recursing-on-children tl;dr: Basically, if you don't do keys, react cannot do some comparison and do dumb shit instead of doing smart moves (will affect performance).
This is because forEach() affects and changes our original Array, whereas map() returns an entirely new Array - thus leaving the original array unchanged.
[
{ title: 'My new website', body: 'lorem ipsum...', author: 'mario', id: 1 },
{ title: 'Welcome party!', body: 'lorem ipsum...', author: 'yoshi', id: 2 },
{ title: 'Web dev top tips', body: 'lorem ipsum...', author: 'mario', id: 3 }
]
/* blog previews / list */
.blog-preview {
padding: 10px 16px;
margin: 20px 0;
border-bottom: 1px solid #fafafa;
}
.blog-preview:hover {
box-shadow: 1px 3px 5px rgba(0,0,0,0.1);
}
.blog-preview h2 {
font-size: 20px;
color: #f1356d;
margin-bottom: 8px;
}
@@JollyAZ @drunk frog Thank you
ur a hero
Thank you for this!
Const comment = function(helpful=true){
Return helpful ? “Thank you very much!” : setStatus(500);
}
other tutorials: "So you use this and this and that, and there you go"
This one: "Carefully explain each elements in multiple different way, shows exemple of what doesn't work, before explaining why"
Thank you very much for this playlist, i was in a bit of a down due to general confusion linked to react, but you have explained everything very well and i finally feel like i'm learning a lot!
exactly, me too
It's been 4 months since I've not used react because I'm focussing more on Data structures at the moment. These updated React videos are what I needed to brush up my concepts. Thanks Shaun, you are great.
Also, Happy New year to you and your family.
Thank you :). Happy new year to you too!
@@NetNinja I am back here again.
back again
@@unknownman1 return of the king
@@Zephyr-tg9hu thanks
this dude deserves a medal for giving us quality knowledge
Your tutorials are the best dude! Although I just discovered your channel my motivation in finally learning React has skyrocketed. Thanks man, keep them going!
I was a bit confused about choosing a react course on youtube and udemy. Then was just searching around your channel and I got a notification of this course and I loved thank you so much for this course. You are a great teacher
Also,Happy New year to you and your family 🎉.
Thanks so much, Happy New Year to you and your family too 😃
.blogs-preview{
padding:10px 16px;
margin:20px 0;
border-bottom:1px solid #fafafa;
}
.blogs-preview:hover{
box-shadow:1px 3px 5px rgba(0,0,0,0.1);
}
.blogs-preview h2{
font-size:20px;
color:#f1356d;
margin-bottom:8px;
}
You, sir, are a PHENOMINAL tutor! Thank you!
Wow, thanks Andries! :)
Shaun, my man, this is the cleverest and smartest knowledge I've found! My biggest gratitude and I wish you best. Gonna continue watch your tutorials and I'm hoping that it'll help on the way to me becoming jun.
Warm welcome from Russia.
Right here!! Love your accent, thank you you're the best one out there, I been watching you're node js tut back when you had way less subs. I like the fact that the channel is way bigger now, keep up the excellent work!
Dude, thank you! I finally understood how this thing works in React!!!
happy new year, Shaun!!👐
And to you too!
Can't wait to see more about hooks and how you go about using/explaining it. Much thanks for sharing your knowledge.
I love learning React and practicing your accent!
any reason why the .map() function is wrapped in () instead of {}? is it because it is already wrapped in curly braces from the beginning? for example: i originally wrote blogs.map((blog) => {}) instead of blogs.map((blog) => ()) which caused an error and I had to look closely to see what I was doing wrong. Also curious why forEach doesnt work with this example?
I am also curious about that. Do you have any thoughts on that after 5 months? :)
@@EnesKab So forEach() doesn’t work because map() returns new array of modified elements and forEach just iterates through the array and doesn't return anything at all. As far as the curly braces go it seems to just be the syntax that react uses and likes!
@@jsnelson_ thanks for the help man. Really appreciated
Hmmm! It would really be great if net ninja could be answering questions from us. This silence of his is just not it at all. I also got the same two questions bugging me. Not to sure of the answers you gave though, cause I too, I am confused.
@@duztv5370 I agree!
Why are we using parentheses in map function instead of curly braces?
Did you got any help regarding this?
I already know this stuff but I;m following this course anyways :)
Very informative series. I know little bit stuff but this series clear all my doubts like useState and more to come. I'm learning React to get a React developer job. Thanks Shaun, you are superman.
Thank you ❤️ from 🇳🇬
At 3:22 why do we use parenthesis( ) instead of curly brackets{ }
Great question! When we use arrow functions, we can either use () or {} based on what the function must do.
Here he has used () as it returns a single JSX element without having to explicitly mention the keyword `return`.
If you used curly braces {}, you would need to explicitly include return, making the code longer and less concise.
If you did want to use the {}, you would have to do, as you guessed it, something like this
return (
{blogs.map((blog) => {
return (
{blog.title}
By {blog.author}
{blog.body}
);
})}
);
I finally realized how to use this output with your output from node js tutorial. Thank you so much
Is the state is mandatory in this case? I think we can assign the array of object directly in the const.
hello and thank you for these unique videos of coding,
we use parenthesis after callback function because we want to write some jsx ?
Have been waiting for this awesome course for a long time! Can't wait to see the next episode :D
And happy new year to the entire ninja gang! Hope you guys will be doing great this year!
Thanks Shaun. Maybe you'll get to it, but I'm curious to know why .map() and not .forEach(), I guess because we need all the JSX in an array
I got the same question bugging me too. Why go with map() instead of forEach()?
Me too man. Anyways, I got the concept.
Why we use parantheses instead of curly brackets in 3:23? We normally used curly brackets in that case but im a little bit confused now
Is it because we are returning jsx templates inside parantheses?
I am also curious about that. Do you have any thoughts on that after a month? :)
holy crap, i wrote curly brackets, instead of using parenthesis, so i didn't work. glad to see this comment, lol.
In ES6, if you have a single statement, you don't need the return keyword. If you surrounded it with braces, you'd need to specify what you're returning inside the map function, so:
blogs.map( blog => { return ( /* stuff you want to render here */ ) } )
blogs.map( blog => ( /* stuff you want to render here */ ) )
Using parentheses turns that whole thing into a single statement. Both are fine. One is arguably more readable.
I'm already up to date with this tut:), thx Shaun:)
Reall a great series, thanks for making this
As usual you are extremely clear when you explain concepts... Why, I'm asking, why, React docs are not written by you. I left that hell-page and I run here to learn.
man i fucking love you thought react would be hard for me but you made it so easy for me thank you for existing!
I wish you would do one for angular cause honestly your videos are the most comprehensive videos i have seen
Quick tip: you can just type .preview and VSCode will automatically make a div with className="preview"
This is a pretty good review, thank you Shaun for this tutorial !!!
Dude should be at 10M subs now now.
Here at 994K subs.😤
You are an excellent instructor.
These tutorial are great! Really well done.
Hello, what about Redux can I watch the other playlist to learn it right after watching this, or this one is enough ?
Merci from France, et bonne année !
.blog-preview {
padding: 10px 16px;
margin: 20px 0;
border-bottom: 1px solid #fafafa;
}
.blog-preview:hover {
box-shadow: 1px 3px 5px rgba(0,0,0,.1);
}
.blog-preview h2 {
font-size: 20px;
color: #f1356d;
margin-bottom: 8px;
}
you know it's important when he says ...Now then! 😳
happy new year shaun, hope you posting more and more tuts ☺️
Happy new year to you too!! 😃
Cant thank you enough for this tutorial
I just got to know that in the map key word, within call back if we use {} then inside it we have to use the return keyword to get our result displayed...otherwise we can directly use ()
why we have to use useState,could this one be solved without useState? Because i dont get it how we change the state in here we havent updated or changed the value in the array object list
I was wondering why you chose the Map function to iterate over the blogs array instead of a forEach function?
A forEach function doesn't actually "return" anything to render. Whatever you use, it has to "return" something to React. map, modifies an existing array and "maps" it to a something different... which in this case is an array of html elements, effectively.
suppose you want to edit a specific blog individually - how do you achieve that? Doesn't 'setBlogs' change the entire array?
plsssssssssss the net ninja im try many ways to display images using useState & map(methode) in json file
local image : public/images/image.jpg
but its not working
can you help pls
You need to use return inside blogs.map arrow function. Else it won't work.
if you use parentheses after the arrow instead of curly braces, you don't need to have return.
PS : I know that your comment is old, just wanted to note this if anyone is having an issue about that.
For the id I used the uuid package from npm. First I created an array with the data outside the Home component so that the id won't be regenerated every time the component is rerendered, and assigned id to uuid4v(). That creates a string of randomly generated uuid. Then use this array to initialize the setState for the blog.
Edit: Note that crypto.randomUUID won't work on client-side.
Can we consider map method the "loop" alternative? thanks.
One tutorial after breakfast, another one before going to bed. This is how I am going to make my way to my dream insallah :) Hope to be a ninja with a sharp sword soon.
You CAN do it! :) #ninjaskillz
@@NetNinja that means a lot Sir. 🙏
I'm a little bit confused. I have 2 questions.
1:13 So, the blog is an array filled with bunch of objects? Just curious, why did you not just create the objects directly without creating the array? Does this have something to do with the hooks?
3:21 If the arrow function returns a JS code, it should be () => {};
But if the arrow function returns a JSX code, it should be () => ();?
Why? Has this been explained before?
1) No, it is purely for to be able use map method (which is in-built vanilla javascript method for arrays) If he didn't use array filled with objects he couldn't use map later on.
2) In JS when you return multiple lines of something you use:
return (
// code
// some more
)
And since he used arrow function he didn't need to write return keyword. Check this: stackoverflow.com/a/34643199/14203461
For example, if he used old way to write functions it would be like this:
{blogs.map(function (blog) {
return (
{blog.title}
Written by {blog.author}
);
})}
Notice since return statement returns multiple lines we wrap the thing we return with - ().
Does this answer your question?
Hey Shaun, sorry OT but could you please add Net Ninja Tanktops to your merch website (preferably black with a BIG NN logo on front awa back, the tshirt logo is too tiny)? Would love to wear it on my runs and show off your brand!
Wishing you a very Happy New Year!
CSS
/* blog previews / list */
.blog-preview {
padding: 10px 16px;
margin: 20px 0;
border-bottom: 1px solid #fafafa;
}
.blog-preview:hover {
box-shadow: 1px 3px 5px rgba(0,0,0,0.1);
}
.blog-preview h2 {
font-size: 20px;
color: #f1356d;
margin-bottom: 8px;
}
Does these videos series cover all the core concept in react a bit confused with the title of the videos
Superbbb
Great Work!
King ninja to the rescue !
For the "key" property, if let's say in Home.js there's an element with id="test1", and my Navbar.js also has an element with id="test1", will it have any errors?
great video man
So every list you make must contain an 'id' attribute? What happens if we don't keep an id attribute?
Hi, the tuts are a major major key to my intro to react wouldn't be on this level of understanding if it was not for the tuts. Big respect for you man, how do I get the ex files I followed the link on gitpod keeps showing me an empty folder.
Nice and clever. Thank you ✌️
you my man. are awesome.
Are you making a react course or just doing this through RUclips ?
Hello and thank you for this tutorials. Are you planning to make a video about context? Thanks again and best regards.
Happy new year Net ninja
Happy New Year 😃
happy new year Great Ninja.. I am a big fan of you. Thank you for the contents. I can now build an application because of your tutorials
Thank you - Happy new year to you too 😃
Why does the callback function at 3:14 use normal parentheses and not curly brackets? So why does it look like this () => () and not like this () => {}?
Because it returns stuff straight away like a single line version. But in this it returns more stuff which does not fit into single line. In this case () are used
Hi, I've been watching your videos since I started coding in Laravel and I saw you made some about CRUD operations, but can you make another one to show how to update records too?
Love from india
Hi Shaun, the videos are great and they have a great resource to me.
I tried to use for loop instead of the map but I couldn't get it to work. kindly help
For loops won't work. In a for loop, you're performing an action, but not returning anything to output to the page. You're just telling it to *DO* something x times,.. but by itself, a for loop doesn't "return" anything.
If you think about it logically, that code is in a "return" statement. So, everything has to "return" something. The map, filter, and reduce methods take a array and RETURN a modified value. map and filter return an array, reduce returns a single value... In turn all that gets returned to React which renders stuff.
Ask yourself... What does a for loop return? You could console.log out in the for loop, but it's not going to 'return' anything.
map is the closest you'll get to a regular for loop. You take an array, and you MAP each value to something else.
I know the syntax is strange and harder to get your head around compared to for loops, but it gets easier with practice.
Can someone tell why normally, when using map function in Javascript, we use callback function with *{}* something like:
arr.map((value) => *{*
//do something
*}* )
but why in react we are using *()* in the callback function:
arr.map((value) => *(*
//do something
*)* )
same question, i just want to ask that, please someone explained
@@pratamamp170 I learned about it. it is actually a JSX syntax. so react uses JSX to render dom elements so whenever we want to render something in the browser (any html tag) we have to write jsx and whenever we return something in JSX we have to use ( ) braces. so in short, use { } when writing regular Javascript and use ( ) when writing JSX
@@codewithfarhad8594 Thankyou for the explanation.
@@elmomahupil you are welcome!
@@codewithfarhad8594 Thanks for the explanation....Also I'm just curious to know why forEach doesn't work in this code...would be great if you brief me about it..:)
Shaun can you please let us know, how long this video series is?
And what we will end up building in this course
There's 32 lessons on his GH repo. I guess you could download and run it to check out the final product
Thank you.
please discuss the map method in js
what's an upside to react or any other js framework compared to vanilla js? it may be useful on gigantic projects, maybe, but for a while now i am unable to find a single job posting where react isn't a must-know skill which makes me pretty much unemployable. doesn't matter that i was working as a frontend developer for 5 years. my impression is that react just makes a mess of html and css. all ui made in react stays in react. i was able to pop my styles folder with all the scss needed for the ui into any project and it worked. now i have to start from scratch again. react changes all the time which means older projects are quite different from newer ones. every tutorial/project i watched on youtube was coded in a completely different way because the features of the framework keep changing over time.
What if we do not add unique if to object elements?
Great courses. I did your Modern JS course on Udemy and your React and Redux course recently on this channel.
Will the rest of this course be released on RUclips as I've followed this course up to here to learn the new practices?
Hey thanks so much, and yeah, 32 lessons in total, all will be on RUclips, will upload more soon 😃
@@NetNinja Thanks for the reply. Looking forward to it!
hmm
You are da BEST
if someone get the error "React Hook “useState” is called in function “app” which is neither a React function component or a custom React Hook function" just change the function/ class name it is in starting from a capital letter and it will be solved. ex- previous name= app, new name = App.
I assume you've been asked this question many times but I would like to know your PC specs. I want some inspiration to build a rig that is more centered towards application development rather than just normal everyday work. Like a proper concise development environment.
well-done===>nice Work
and best video editing low have low space.
you are to expert
I don't know what others say but VUE js is easier and faster. React has large community behind it and that is it. I feel like even @The Net Ninja loves vue more because in the first lessons of react he accidentally confused npm run start with npm run serve ( so did I, because I got used with vue too )
I didn't want to say that react is bad but vue is definitely better. So let me give you an example. In vue cycling through an array is easier to understand ( clean ). In react it is easy too but in vue you need to just create a div and put v-for="item in items" :key="item.id" as an attributes ( items is our array ). When you use v-for you exactly know why you are using it. There are no other ways of using v-for.
why you didn't use the curly brackets {} while using map function??
curly braces and the "return" keyword are optional if you're returning one statement. He makes it one big statement by surrounding it with parentheses. You COULD use curly braces, and then just "return" what you want if you want:
blog.maps( (blog) => {
return (
{blog.title}
// more code
)
}
OR:
blogs.map( blog => (
{blog.title}
) )
You might want to do it with braces + return if you're doing some data manipulation on a larger method... but for simple things, you can omit a lot
@@TheNewGreenIsBlue THANKYOU so much dude
@@g_69westside51 no worries
here i see one warning 'setBlogs' is assigned a value but never used . how can i solve this .
Thannk You
Can you make you make a vid to zustand or jotai alternative to redux thanks great tutorial sir :)
thanks
at 3:48 how is ur emmet working mine doesnt work
Could you make a data structure and algorithms course 😞
Thank you for the series Shaun. anyone has this error?"Error: Invalid hook call. Hooks can only be called inside of the body of a function component"
Lemme get the "key" property straight. It's like an ID so React will know where the changed element is when re-rendering the page, and thus saving performance?
It also tells react which part of a component or state it should point/reference when something is dependent on a specific hook
When are the next videos coming
Itadakimasu👏
thank youuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu
ty.
For people who still think keys are garbage, you should read this: reactjs.org/docs/reconciliation.html#recursing-on-children
tl;dr: Basically, if you don't do keys, react cannot do some comparison and do dumb shit instead of doing smart moves (will affect performance).
Why will you use map instead of forEach
This is because forEach() affects and changes our original Array, whereas map() returns an entirely new Array - thus leaving the original array unchanged.
if your code doesn't work check in map try use bracket