Random Quote Generator - React Fetch API Data | Build and Deploy a Real Advice App Project

❗ IMPORTANT:

Use the special promo code "JSM_YT_SQUAD" on checkout to save $50!

In this video, we will create an interesting ReactJS API data fetching project from scratch - A React Advice App. We're going to use React on the front end and we'll make get requests to Advice Slip JSON API.

By the end of this video, you will have a strong understanding of basic React workflow as well as how to make API requests in React Apps. Learn how to fetch API data with React js.

📚 Materials/References:

🌎 Find Me Here:

[thee_yelwah]

Spent some time messing around with this API after completing the video, and learned a couple things about the API you all should know:
1. The Random api endpoint only updates about once every 5 seconds or so, so spamming clicks won't get you new advice instantly
2. If you wanted to be able to spam new advice as I did, you can use the API's call by ID API, and implement the randomness yourself with a Math.random() call
3. NOTE ON ADVICE BY ID API: Their API returns invalid JSON, it doesn't have the closing "}" at the end, so you have to append it yourself, then re-parse the JSON
example:
var data = JSON.parse(response.data + "}");
const { advice } = data.slip;
Hope this saves someone some frustration as that stupid "}" took me a while to figure out

[ioanlungutranole]

19:34 that's a boss move right there. I used to create separate divs as an overlay, but your solution is so much more flexible. Thank you !

[illusionsofgrandur]

I just started using React to build web apps on the side for fun. I understood very little because of my lack of experience, but it still looks fascinting. Awesome Project 10/10.

[sarthakgupta]

Any amount of words are less for your helpful, to the point and informative videos. Mentors like you make youtube hub worthy of educational content. Implemented this in my portfolio. Subscribed!!

[DannyCrazyPanda]

Awesome tutorial! Definitely one of the best on youtube about fetch with React. Keep it up mate!

[karlallanicsky]

This is beautiful. I love how you explained it. I understand what was happening, even if I am new to React.


Thank you!

[mohdshahzaib]

Great brother
I am very happy to see this
This made my day.

[priyanshubhardwajyt]

Thanks for taking the time to explain a lot of the little things. Nobody does that. Really helpful! Subscribed!

[MrZiyak]

You make things so easy. I'm trying to learn redux. If you could make a video about that it'll be great. Keep up the good work!

[CavalloGuido]

7:15 - First the class execute the "constructor" method, then the render method and continues with others lifecicles methods. It is important declare state inside the constructor method.

[rhazelett]

You are excellent. I think you do the best job of explaining React that I've seen.

[devdev]

Cant wait for the next react.js tutorial senpai. 😁😁😁 You are a very good teacher. Explaining things so clearly.

[JerrysTechCorner]

I love the way how you teach! Its so interesting!

[dataisbeauty]

Please make a video on MERN Project With Login, Logout, JWT, Mongo, with Add Post like post delete post comments

[slayern]

man ur teaching style is just phenomenal. I understood a lot of things by just watching these videos.
Can you also make videos on React portals and on React Pagination?
Keep it up :)

[MrOmnidextrous]

Suggest all to change that 'h1' tag to 'h2' or write your own custom CSS. Some advices are pretty lengthy and distorts the whole card UI.

[RVKAWAAA]

really teach very good....you are a master in React js...it's so easy...

[Suryaprakashchaturvedi]

Can You please tell me which extension you use for code complete?
2- code suggestion?
3- bracket matching Indicator.
4- Git brach color in the terminal ?

I like the VS Code you configured, this looks awesome.
You told me your theme name that is *ONE DARK PRO* but still I want environment as yours.

Thank you.

[pramatech]

I am learning so much from you man, thank you for the great content!

[muhammadamer]

Great content on Reactjs Bro👍!!
Please make a video on Routing and React hooks.