You begin building interesting apps with dynamically updated data when your frontend app interacts with a REST API. In this tutorial, you will learn how to use the React hooks useState and useEffect along with the fetch and async / await to retrieve data from a REST API. You will also learn how to handle errors including errors received in API responses, and you will learn how to respond with a loading message if data retrieval is slow. Just starting out with React? Start at the beginning of this Learn React playlist here: th-cam.com/play/PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp.html
It's really unfortunate that I discovered your channel just recently. I have been following a 40-hour React course on Udemy, your content is vastly superior than that course. I really like how you teach real life scenarios rather than just writing the bare minimum code. Really appreciate all the efforts 👍
I'm following the whole react playlist now I'm on video 13 I'm seeing alot of progress I hope i can finish this playlist as fast as possible to sharpen my skills Thank you man your tutorials are 100% effecient no waste of time no confusion straigh to the point you're the best man
Hey Dave , I am from India . I have learned a lot from your channel and I always follow your methods to solve my problems, really you are great. Thank you very much .
Excellent tutorial as always. Slowly catching up. I have a question in regards to using && operator @ 18:00. Is there any particular reason in this case we are not using a ternary operator? { fetchError ? displayError : }
Thank you. 🙏 You are correct and good question! A ternary will work in the spot you linked to, and I do use them at times as this series continues to progress.
Great video, thanks for this. Q) Do you later on go into moving the fetch items into a separate module - A data access layer so to speak? as you might want to call the fetchItems from several different components if it was a larger app, and also make the isLoading / fetchError more generic. All great for a small app like this.
Dave in a rush of finding jobs . After completing react can i start learning node directly without learning redux. I had planned to learn it later. Does your node series uses redux anywhere?
Yes, Node.js does not require Redux at all. Node.js runs on the server and is for your backend code. Redux is optional with React and runs in the frontend.
I do have more tutorials on hooks coming soon. You will also find some tutorials on hooks already in this playlist, too: th-cam.com/play/PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp.html
@@vikaschauhan6442 I believe there is another older discussion in the comments on that too. It is really unnecessary and if I remember right I remove it later. If I don't remove it, it doesn't really harm anything.
Instead of (async () => await fetchItems())(); can we directly call the function as fetchItems() ?? If so, then what is the difference between above two invoking methods. Can you please explain.
Yes, you can. I cannot remember if I added a comment to say this or not - but the first example you show is an IIFE ..but it is not really necessary here. It doesn't hurt anything - but not required :)
Hey Dave, when I use "npx json-server -p 3500 -w data/db.json" I get the error: TypeError [ERR_PARSE_ARGS_UNKNOWN_OPTION]: Unknown option '-w'. To specify a positional argument starting with a '-', place it at the end of the command after '--', as in '-- "-w". Has anything changed since this tutorial or am i simply missing a step? Thanks for all the great content!
While it's not exactly the same issue you describe, this could possibly help: I tried using the latest version of json-server, but wasn't receiving any responses. When I tried with the version in the video, I was able to get everything working. Try this in the console: npx json-server@0.16.3 -p 3500 -w data/db.json It'll ask to install the specified version of json-server. After allowing this, I was able to follow along with no issues.
great video Dave. Thank you. I do get a CORS error. my backend is running on 5000 and the frontend on 3000. I can see you are on 3500 and 3000 respectively with no issue?
Thank you! 🙏 You will receive a CORS (cross-origin resource sharing) error if the browser thinks you are sharing between different domains (origins). Insure your backend and frontend both use the localhost origin and you should be good. Example: localhost:3500 for backend and localhost:3000 for frontend
Hi, I noticed in this tutorial if we get an error in the fetch request after the list of items is loaded successfully initially our footer shows the number of list items from the items state as it is populated from the earlier successful fetch request so a simple fix that I did for this is that whenever we catch an error and set fetchError in the catch statement, I set state of items to an empty array setItems([ ]) so now if there's any error in the fetch request our footer element does not show the count of elements in it.
Hey Dave, Please help me @ how to fetch data from Elasticssearch and display it on React table. I have already Created React Table, and I have data on Elasticsearch. but I don't know how to call API on React
I guess, instead of using (async () => await fetchItems())() in setTimeOut, I can simply use fetchItems(). Is it right? setTimeout(() => { fetchItems() }, 2000)
Hello Dave, I am really learning alot from your playlist, but now I am stuck because of an error, in the useEffect hook when I try to update the setItem(listItem) , the items is not getting updated as a result I am not able to use any array functions and the browser is showing nothing, can you help me on this.
Keep going in the playlist. You may be at the part where you need to put an empty array in as the initial state: useState([]) ...and I show it in the following video.
hi Dave and everyone. thanks for the interesting react series. I actually ran into a problem when sending requests to the json server and the console just showed me the error "WebSocket connection to 'ws://localhost:3000/ws' failed: " when I log the listItems at 7:37. I've been looking up on google chrome just to fix it, but I'm still stuck on this error tho. could anyone help me out how to handle this problem? thanks
I don't have that error but can only guess what may be different in your code to cause it. I recommend going back over my source code (available at link in description). Look for any differences in your code.
I plan a few ahead, but I do not currently have a final count. Upcoming topics include React Router, the Context API / useContext, and custom hooks. Thanks for asking! 💯
You begin building interesting apps with dynamically updated data when your frontend app interacts with a REST API. In this tutorial, you will learn how to use the React hooks useState and useEffect along with the fetch and async / await to retrieve data from a REST API. You will also learn how to handle errors including errors received in API responses, and you will learn how to respond with a loading message if data retrieval is slow. Just starting out with React? Start at the beginning of this Learn React playlist here: th-cam.com/play/PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp.html
Thanks Dave, most other videos do not show how to track the loading state or error handling. Good to see you are a professional!
It's really unfortunate that I discovered your channel just recently. I have been following a 40-hour React course on Udemy, your content is vastly superior than that course. I really like how you teach real life scenarios rather than just writing the bare minimum code.
Really appreciate all the efforts 👍
Welcome aboard!
I'm following the whole react playlist now I'm on video 13 I'm seeing alot of progress I hope i can finish this playlist as fast as possible to sharpen my skills Thank you man your tutorials are 100% effecient no waste of time no confusion straigh to the point you're the best man
A very thorough illustration of the use of the fetch API in react. Thanks, Dave
{2022-10-19}
You are welcome!
Hey Dave , I am from India . I have learned a lot from your channel and I always follow your methods to solve my problems, really you are great. Thank you very much .
Great to hear!
Excellent tutorial as always.
Slowly catching up.
I have a question in regards to using && operator @ 18:00. Is there any particular reason in this case we are not using a ternary operator? { fetchError ? displayError : }
Thank you. 🙏 You are correct and good question! A ternary will work in the spot you linked to, and I do use them at times as this series continues to progress.
Great video, thanks for this. Q) Do you later on go into moving the fetch items into a separate module - A data access layer so to speak? as you might want to call the fetchItems from several different components if it was a larger app, and also make the isLoading / fetchError more generic. All great for a small app like this.
thanks Dave for this amazing tutorial, just a question is there a difference between new bash and new power shell terminal for this tutorial
You can use either terminal.
everyday I gain more experience by virtue of you , great thanks.
Glad to hear that!
Dave in a rush of finding jobs . After completing react can i start learning node directly without learning redux. I had planned to learn it later. Does your node series uses redux anywhere?
Yes, Node.js does not require Redux at all. Node.js runs on the server and is for your backend code. Redux is optional with React and runs in the frontend.
Excellent tutorial, please make a series of hook
I do have more tutorials on hooks coming soon. You will also find some tutorials on hooks already in this playlist, too: th-cam.com/play/PL0Zuz27SZ-6PrE9srvEn8nbhOOyxnWXfp.html
Hi Dave, can you explain why you call fetchitems in IIFE?(8.35)
And thanks for hooks series
@@vikaschauhan6442 I believe there is another older discussion in the comments on that too. It is really unnecessary and if I remember right I remove it later. If I don't remove it, it doesn't really harm anything.
Great React journey!!
Instead of (async () => await fetchItems())();
can we directly call the function as fetchItems() ??
If so, then what is the difference between above two invoking methods.
Can you please explain.
Yes, you can. I cannot remember if I added a comment to say this or not - but the first example you show is an IIFE ..but it is not really necessary here. It doesn't hurt anything - but not required :)
@@DaveGrayTeachesCode Thank you for your response.
Superb Dev you are doing a great job Love from India ❤
Thank you!
Amaizing tutorial how to handle erros in useEffect😊
A try / catch block is a good place to start.
Hey Dave, when I use "npx json-server -p 3500 -w data/db.json" I get the error: TypeError [ERR_PARSE_ARGS_UNKNOWN_OPTION]: Unknown option '-w'. To specify a positional argument starting with a '-', place it at the end of the command after '--', as in '-- "-w". Has anything changed since this tutorial or am i simply missing a step? Thanks for all the great content!
While it's not exactly the same issue you describe, this could possibly help:
I tried using the latest version of json-server, but wasn't receiving any responses. When I tried with the version in the video, I was able to get everything working. Try this in the console:
npx json-server@0.16.3 -p 3500 -w data/db.json
It'll ask to install the specified version of json-server. After allowing this, I was able to follow along with no issues.
great video Dave. Thank you. I do get a CORS error. my backend is running on 5000 and the frontend on 3000. I can see you are on 3500 and 3000 respectively with no issue?
Thank you! 🙏 You will receive a CORS (cross-origin resource sharing) error if the browser thinks you are sharing between different domains (origins). Insure your backend and frontend both use the localhost origin and you should be good. Example: localhost:3500 for backend and localhost:3000 for frontend
@@DaveGrayTeachesCodeaw thanks for that. Much appreciated😊 however, i still fail to fetch items so i will need to look in to that as well.
Hi, I noticed in this tutorial if we get an error in the fetch request after the list of items is loaded successfully initially our footer shows the number of list items from the items state as it is populated from the earlier successful fetch request so a simple fix that I did for this is that whenever we catch an error and set fetchError in the catch statement, I set state of items to an empty array setItems([ ]) so now if there's any error in the fetch request our footer element does not show the count of elements in it.
Thank You
Welcome!
Hey Dave, Please help me @ how to fetch data from Elasticssearch and display it on React table. I have already Created React Table, and I have data on Elasticsearch. but I don't know how to call API on React
thank you sir
Somehow useEffect({}, []) with an empty array was always runs twice when I reload the page. Only fixed this after removing the react strict mode..
That is correct. This is due to how React v18 handles strict mode. Docs reference: reactjs.org/docs/strict-mode.html#ensuring-reusable-state
I guess, instead of using (async () => await fetchItems())() in setTimeOut, I can simply use fetchItems(). Is it right? setTimeout(() => {
fetchItems()
}, 2000)
That's right. I think I note it somewhere or change it it in the next lesson.
Hello Dave, I am really learning alot from your playlist, but now I am stuck because of an error, in the useEffect hook when I try to update the setItem(listItem) , the items is not getting updated as a result I am not able to use any array functions and the browser is showing nothing, can you help me on this.
Keep going in the playlist. You may be at the part where you need to put an empty array in as the initial state: useState([]) ...and I show it in the following video.
hi Dave and everyone. thanks for the interesting react series. I actually ran into a problem when sending requests to the json server and the console just showed me the error "WebSocket connection to 'ws://localhost:3000/ws' failed: " when I log the listItems at 7:37. I've been looking up on google chrome just to fix it, but I'm still stuck on this error tho. could anyone help me out how to handle this problem? thanks
I don't have that error but can only guess what may be different in your code to cause it. I recommend going back over my source code (available at link in description). Look for any differences in your code.
great. thanks
You are welcome!
How many episodes remain for the series ? :)
I plan a few ahead, but I do not currently have a final count. Upcoming topics include React Router, the Context API / useContext, and custom hooks. Thanks for asking! 💯
@@DaveGrayTeachesCode Appreciate it, thx
Top
react made simple.