Bro you're a life saver, I am a bootcamp student who almost quit because I can't keep up with react, now here, I am getting hope to continue, I press like and watch all the ad to show my support to your channel, please stay awesome sir, God bless!
Thank you so much for this course! Your way of explaining is extremely clear - I have used React for a while now, but at times things still get confusing. You make everything extremely clear :)
Man thanks so much! You won't believe how many days I've been searching how to do this, finally I got to your playlist and I'm gonna watch it from the beginning to properly learn React again.
Great solution to deal with the null! After the data is fetched and the setBlogs is invoked, React re-renders the whole component, and this is why when the blogs value changes the (blogs && ) part runs again.
THIS. Was working on an Update/Edit function to finish off this series and was stuck for a few hours wondering why my data properties were returning null... Thank you for this fantastic course!
Thank You so much for your such hard work on all of your tutorial videos, you are very polite and honest teacher !! too the point tutorials all of them are very well explained....!!
Set blogs initial state to an empty array if you don't want to have to conditionally render with the double ampersand. Since an empty array is still a valid map object.
I was just gonna say that good job buddy as I made a real blog with an API here and made a search box on the navbar that can search and filter the blogs so was confused with this null issue so I find out that using empty array fix the issue :D
I would absolutely love it if you did a brief tutorial on how to externalise an async await code block. I've managed something close, but I still want to abstract away.. Thanks for the awesome content! Really enjoy your videos, by far the most helpful I've come across :P
I know this comment is the most irrelevant comment ever, but I couldn't help myself! I was watching your Vue udemy course and I reached the section that you were teaching how to emit events. I am familiar with this concept, because I learnt it when I was studying game development with godot engine. I got so excited for this "flash of enlightenment!" that I needed to show my gratitude somehow! This incident proves that it's important to expand your knowledge and how knowing some stuff in other areas helps to solidify your skills and knowledge as a whole. And I suggest everybody does it, I mean to try various stuff, it's good for your health!
Thank yoy Shaun for this tutorial, I have learned a valuabke lesson which is conditional template, now I finally understand why and how { blogs && } works, it feels so good to comprehend the reason behind this !!!
single most useful react video in whole youtube......do you have any idea how long it took me to find all these different pieces of information condensed in this video ??? Especially the 2x .then part....jezus the things I tryed to achieve that. I wish I had this 6 months ago.....
You solved a problem for me that has been very discouraging. I forgot to set initial stage to null and also forgot about the conditional rendering. I was getting the error about mapping over an undefined array. Thank you again and again!
In regards to the 6:00 minute mark. So the idea with the {blogs && ... } code here is that because we have initially set the state of blogs to be null we will initially get blogs to evaluate as false, so the logical && won't fire since both conditions must be true. However, we 'react' to the new render by updating the state of blogs in the useEffect() hook, which then makes blogs evaluate to true and our component evaluate to true. I think I am following, but if anybody can spot a gap in my understanding please jump in.
You are correct, but the conditional rendering wouldn’t be so important if it wasn’t for the map method being called on the data in the other component. Mapping over undefined data will throw an error and the app will fail to load anything at all. Basically, we are waiting until the data has arrived before we start trying to pass it around or render it.
Dude your tutorials are excellent, seriously enjoying the content. Could you please make a course where you show how to make CRUD apps using the MERN stack.
It should be noted that with react version >= 18 in strict mode, useEffect will be called once for mounting, and immediately again to simulate an unmounting and remounting of the component. So that fetch request will be sent twice. If you want to disable that, comment out the tags
Thanks for the series. Question here: Why the blogs didn't get set to the value being returned from the fetch? Shouldn't the return statement wait until the fetch function finishes since it uses promises and everything should wait till it finish its work? And like that the value of blogs wouldn't be null. I want explanation to what happened :)
Can't wait for more :D Also will you explain why we ended up using hooks instead of class components? I suppose it's because of things like mentioned before useEffect hook and more. Though I'm neither familliar with react class components so I don't know if I'm not wrong here
@@maskman4821 but the thing is that most companies still use things that were written before hooks update and that's often the case that you have to deal with legacy-ish code. That's why learning class components is relevant for me, since I'm aiming to transfer from just being frontend dev to react dev*. *from what I've noticed there's a lot more of corpo work as frontend dev than actual programming as react dev if that makes sense.
Hey! I found this video very late after i stepped into development . I wish i found about this channel earlier. Thank you so much for providing this great information. Also, we set the initial state for the blog data as 'null' . Could we use an empty array for that as well ? That way , i didn't get the error 'cannot read map of null'
Excuse me if I'm asking too much, please do a 'react native 2021' tutorial in 'net ninja' style, it will help us a lot. I know there are a lot of react native courses out there but we like it in net ninja style - simple, sharp and comprehensive. PLEASE...
Thanks for the explanation, but I have a simple question why we did not use asynchrounous function so we won't render anything till the blogs are returned from the fetch ?
could you show how do we implement fetching data in backend and passing the data via Express routes to frontend? This would be very helpful simple full stack implementation
Shaun, just curious how you prepare, compile and present videos. your workflow. you seemed to well prepared, I wonder how the hell he does it, maybe a time traveler??. a video on behind the seens?
Haha, I wish I could time travel. I spend just as much time planning (if not more) as I do recording... Course notes, course files, slides etc are all made prior to recording anything :). Maybe one day I'll do a 'day in the life' video and show my methods :)
Thanks a bunch for these tutorials! Do you think you could show how to properly implement google OAuth 2.0 in a reactjs app? I have done an implementation but it looks very incorrect especially my redirect part.
I got CORS errors trying to follow this. You might think about adding a note, or maybe even a short tutorial video, about dealing with this. I had success after adding a --middlewares flag to the json-server run, pointing to a json file with the following contents: module.exports = (req, res, next) => { res.header('Access-Control-Allow-Origin','*'); next(); }
I did the same thing you did but it keeps giving me errors ('blogs.map is not a function') and (Failed to execute 'json' on 'Response': Illegal invocation) can you explain the problem and how to solve it please
I now know how to only display something when the useFetch has the data from the json server. But how would I go about only doing a certain action if the json object is loaded? For example I only want to fill an array once the data is loaded but I dont know how to do it
When will this playlist get uploaded with all the videos? I want to watch it fully at one go over the weekend.. rather than wait a single day for each video.. please upload it all.. soon
Shouldn't the component update after blogs is updated without the conditional rendering? I thought the state variables were reactive... I'm a bit confused sorry
As you said it takes some time for the data to be fetched, that is why it is not available initially. But how using && is making the data available ? or is it taking some time until the the data gets fetched? Can somebody explain?
Bro you're a life saver, I am a bootcamp student who almost quit because I can't keep up with react, now here, I am getting hope to continue, I press like and watch all the ad to show my support to your channel, please stay awesome sir, God bless!
The best part of tutorials is you have them backed by the course files.
Very well managed.
I can't believe someone can explain this well in such a short video. Ninjas were always my favs since childhood.
Thank you so much for this course! Your way of explaining is extremely clear - I have used React for a while now, but at times things still get confusing. You make everything extremely clear :)
i love you :)
@@once-upon-a-time-7 no simping please
@@equim7363 I love you 💓
Man thanks so much! You won't believe how many days I've been searching how to do this, finally I got to your playlist and I'm gonna watch it from the beginning to properly learn React again.
This course is my first introduction to React and i'm enjoying the lessons so much
Tip for those struggling, make sure that you have two terminals running, one for react the other for db. and make sure you .db file is saved.
I love all your tutorials, you explain it all so clear!
Thank you so much! :)
yep i agree:), and I'm still up to date with this awesome n1 tutorial :)
Great solution to deal with the null!
After the data is fetched and the setBlogs is invoked, React re-renders the whole component, and this is why when the blogs value changes the (blogs && ) part runs again.
Thank you, king behavior
5:40 You could have easily corrected the error by using an empty array rather than null as an initial state: const [blogs, setBlogs] = useState( [] );
thanks for this tip! glad I took a glance at the comments and found yours as number 1
He could but his point was to teach us a new concept. Glad he didn't use []
thanks!
damn, u da mvp. but i also like how he explained it (in case u run to his exact problem)
yeah bro. but why it is not preventing the rendering of blog list. when theoritcally it should?
I can't believe you explain so clear and easily to understand, I'm so glad you exist =). Thank you man
Aha, thanks for the lovely comment :) and for watching!!
Man you deserve a prize or something as the best youtube code teacher.
THIS.
Was working on an Update/Edit function to finish off this series and was stuck for a few hours wondering why my data properties were returning null...
Thank you for this fantastic course!
Async version:
useEffect(() => {
async function fetchBlogs() {
let response = await fetch('localhost:8000/blogs');
response = await response.json();
setBlogs(response);
}
fetchBlogs();
}, []);
Thank You so much for your such hard work on all of your tutorial videos, you are very polite and honest teacher !! too the point tutorials all of them are very well explained....!!
Thank you so much! 😃
Thanks alot !
I was using axios while getting data!!
It was for my hackathon,
used same way as you shown!!
it worked!!
THANKS ALOT MAN !!!!!!
axios is way better and simplier than using fetch() function for me
Set blogs initial state to an empty array if you don't want to have to conditionally render with the double ampersand. Since an empty array is still a valid map object.
True,
But I think he did this purposefully to make us understand about conditional rendering.
I was just gonna say that good job buddy as I made a real blog with an API here and made a search box on the navbar that can search and filter the blogs so was confused with this null issue so I find out that using empty array fix the issue :D
Need to be careful that no .length method is evaluated.
problem with this approach is the title will display even if the array is empty. This looks ugly in real world application
@@reactdev7871 please can I see the code on how you made the search bar?
I would absolutely love it if you did a brief tutorial on how to externalise an async await code block. I've managed something close, but I still want to abstract away.. Thanks for the awesome content! Really enjoy your videos, by far the most helpful I've come across :P
at this point, you could probably ask chatgpt
The most useful account ever
I know this comment is the most irrelevant comment ever, but I couldn't help myself! I was watching your Vue udemy course and I reached the section that you were teaching how to emit events. I am familiar with this concept, because I learnt it when I was studying game development with godot engine. I got so excited for this "flash of enlightenment!" that I needed to show my gratitude somehow! This incident proves that it's important to expand your knowledge and how knowing some stuff in other areas helps to solidify your skills and knowledge as a whole. And I suggest everybody does it, I mean to try various stuff, it's good for your health!
Thanks so much Rameen :)
@@NetNinja Anytime my master ninja!
Thank yoy Shaun for this tutorial, I have learned a valuabke lesson which is conditional template, now I finally understand why and how { blogs && } works, it feels so good to comprehend the reason behind this !!!
OMG! Glad i saw this video. The logical && solved my problem i had for days as im learning react and hooks. Thanks Shaun ❤
You are really very awesome teacher very nicely explained all the concepts of reacts.
single most useful react video in whole youtube......do you have any idea how long it took me to find all these different pieces of information condensed in this video ??? Especially the 2x .then part....jezus the things I tryed to achieve that. I wish I had this 6 months ago.....
ur simply excellent ... explanation is outstanding... thanks a lot for this excellent content
I must say that you are a superb teacher.
Well done Shaun!
You solved a problem for me that has been very discouraging. I forgot to set initial stage to null and also forgot about the conditional rendering. I was getting the error about mapping over an undefined array. Thank you again and again!
Wow you are great at explanations i have tried several tutorials but this tops it.
Great to hear :) thanks Prince!
Great tutorial!! After a few minutes watching it I found
out a solution for a bug! Brilliant!
Best teacher
Thank you so much this helped me alot ngl I was stuck in that error for long time I wasn't able display my fetch data
great summary at 6:39
Thank you for the clear and concise video. Definitely helped unblock some brain cells.
BEST json server tutorial. THANK YOU!
The use of && was pretty smart.
I learned a million things from this lesson
Thank you The Net Ninja!!
You're very welcome Azeez! :)
The goat. (period)
Your Videos are right on Time
So are we , Thank You :)
In regards to the 6:00 minute mark. So the idea with the {blogs && ... } code here is that because we have initially set the state of blogs to be null we will initially get blogs to evaluate as false, so the logical && won't fire since both conditions must be true. However, we 'react' to the new render by updating the state of blogs in the useEffect() hook, which then makes blogs evaluate to true and our component evaluate to true. I think I am following, but if anybody can spot a gap in my understanding please jump in.
You are correct, but the conditional rendering wouldn’t be so important if it wasn’t for the map method being called on the data in the other component. Mapping over undefined data will throw an error and the app will fail to load anything at all. Basically, we are waiting until the data has arrived before we start trying to pass it around or render it.
You are life saver mate!!
Very consise tutorials, great for picking up the concepts. Thank you!
Great Video. Helped me a lot. Thanks!
Glad to hear it! :)
Love the way you teach 🙏
Your videos are amazing!
Thank you so much! :)
What a god explanation and teach!!!!! Adtonishing buddy!! Ty
Thank you fo such a clear explanation :)
thank you sir! You helped me a lot.
If you take the initial value as Empty array instead of null, it works too
cool !
I used both approach but was unable to see any blog displayed.
Pure and sweeet knowledge.
Dude your tutorials are excellent, seriously enjoying the content. Could you please make a course where you show how to make CRUD apps using the MERN stack.
It should be noted that with react version >= 18 in strict mode, useEffect will be called once for mounting, and immediately again to simulate an unmounting and remounting of the component. So that fetch request will be sent twice. If you want to disable that, comment out the tags
Excellent Explanation❤
many thanks for this , it is very clear
Thanks Roge. Glad to hear that!
clear explanation as always! :)
Amazing content! Love your explanations!
it has been a superb journey so for
Awesome to hear that Amjad!
Thank you, its so clear with your explain !
Thanks for the series.
Question here: Why the blogs didn't get set to the value being returned from the fetch? Shouldn't the return statement wait until the fetch function finishes since it uses promises and everything should wait till it finish its work? And like that the value of blogs wouldn't be null. I want explanation to what happened :)
It keeps calling get request with useState. I just did it with fetch inside useEffect. By the way Shaun's way of teaching is the best for me.
Hello please I used the “empty array” approach and “null” approach but none worked. No blog was displayed on screen. Any hint with this
Wow amazing Tutorial Thank You ❤️
Amazing explanation. thanks
Can't wait for more :D
Also will you explain why we ended up using hooks instead of class components? I suppose it's because of things like mentioned before useEffect hook and more. Though I'm neither familliar with react class components so I don't know if I'm not wrong here
If you are new to react, just learn hooks, always go with the latest technologies !
@@maskman4821 but the thing is that most companies still use things that were written before hooks update and that's often the case that you have to deal with legacy-ish code. That's why learning class components is relevant for me, since I'm aiming to transfer from just being frontend dev to react dev*.
*from what I've noticed there's a lot more of corpo work as frontend dev than actual programming as react dev if that makes sense.
Hey! I found this video very late after i stepped into development . I wish i found about this channel earlier. Thank you so much for providing this great information. Also, we set the initial state for the blog data as 'null' . Could we use an empty array for that as well ? That way , i didn't get the error 'cannot read map of null'
Great tutorial, thanks. I have just one question, how do you fetch it and map it inside the same component?
I think you can do so by using props to access blogs and then mapping the props in the BlogList component
Thank you so much!! you save my web app
Excuse me if I'm asking too much, please do a 'react native 2021' tutorial in 'net ninja' style, it will help us a lot. I know there are a lot of react native courses out there but we like it in net ninja style - simple, sharp and comprehensive. PLEASE...
great video man
Thanks for the explanation, but I have a simple question why we did not use asynchrounous function so we won't render anything till the blogs are returned from the fetch ?
could you show how do we implement fetching data in backend and passing the data via Express routes to frontend? This would be very helpful simple full stack implementation
did you get the answer??
Thanks a lot, you helped me to solve a problem
Shaun, just curious how you prepare, compile and present videos. your workflow. you seemed to well prepared, I wonder how the hell he does it, maybe a time traveler??. a video on behind the seens?
Haha, I wish I could time travel. I spend just as much time planning (if not more) as I do recording... Course notes, course files, slides etc are all made prior to recording anything :). Maybe one day I'll do a 'day in the life' video and show my methods :)
@@NetNinja yes please. It will be an inspiration
@@NetNinja yes that would help a lot
@@NetNinja Will highly appreciate that😅
Amazing content. Thank you so much.
Perfect my friend!
Very good Playlist! Thanks.
Is there a way, I can read and manipulate the blogs state in multiple components?
Thank you!
I would have loved it if you would have used async/await instead of then.
Almost nobody uses .then anymore.
Hi, great job, thank you for your work! In this course, in a feature we see Redux?
Just what I needed
"Maann, you are Metacmucil" 🔥🔥🔥
So clean
is this the last video on react? cause I need to learn it asap
I think it's not the end, btw you can read react document while waiting for his new videos
Hey, there will be 32 videos in total :)
@@NetNinja thank you for teaching! *bows to sensei*
5:15 Couldn't we just initialize `blogs` to an empty array?
const [blogs, setBlogs] = useState([]);
excellent video
You are the God
thanks for the tutoriel
life saver 😭
Thanks a bunch for these tutorials! Do you think you could show how to properly implement google OAuth 2.0 in a reactjs app? I have done an implementation but it looks very incorrect especially my redirect part.
I got CORS errors trying to follow this. You might think about adding a note, or maybe even a short tutorial video, about dealing with this. I had success after adding a --middlewares flag to the json-server run, pointing to a json file with the following contents:
module.exports = (req, res, next) => {
res.header('Access-Control-Allow-Origin','*');
next();
}
I did the same thing you did but it keeps giving me errors ('blogs.map is not a function') and (Failed to execute 'json' on 'Response': Illegal invocation) can you explain the problem and how to solve it please
setBlogs method? Where did you initiate that method?
In stead of initializing the blogs state with null value, is it ok to use an empty array?
thanks for this video
I now know how to only display something when the useFetch has the data from the json server. But how would I go about only doing a certain action if the json object is loaded? For example I only want to fill an array once the data is loaded but I dont know how to do it
!!!!!!!!!!!!!!!!!!!THANK YOU!!!!!!!!!!!!!!!!!
When will this playlist get uploaded with all the videos? I want to watch it fully at one go over the weekend.. rather than wait a single day for each video.. please upload it all.. soon
Just come back in two weeks and you have them all. :-)
thanks so much!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Please do a NextJS full tutorial
I'll be doing a next.js tutorial after this one :)
@@NetNinja you must be a mind reader
that woul be awesome, I have been looking forward to nextjs tutorial !!!
@@NetNinja woahhhhhhhh.
thanks a lot!
:)
6:35
in there what if I used tTernary operation?
Shouldn't the component update after blogs is updated without the conditional rendering? I thought the state variables were reactive... I'm a bit confused sorry
As you said it takes some time for the data to be fetched, that is why it is not available initially. But how using && is making the data available ? or is it taking some time until the the data gets fetched? Can somebody explain?