02: Ajax Requests With React

An ongoing series on my journey from mobile into the world of web development.

This is part two of the series on my journey into the world of web development. If you’re new, check out part 1 here.

Continuing on with my course, I am going to fetch videos using YouTube’s API following the one-way data flow pattern, where the parent component in the application is responsible for fetching data.

viola!

Next I created a component for the video list and an component for each video item to be populated in the list. The list of videos returned by the API will then be passed to the video list component. This process is known as passing props in React.

Using bootstrap, I went onto populating each video item component with a thumbnail and snippet description.

I then created a video detail component with more bootstrap boilerplate for actually playing a video from the list. Pretty cool.

Last but not least, implementing the search functionality. This piece nicely reiterates using event handlers and setting states. I then installed a library called Lodash to throttle the search results to improve the overall UX (not that it matters right now anyway :P)

Pretty cool… 🤓

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.