A follow along React application from Stephen Grider's Modern React with Redux (2019) Udemy course, which can be found here
Videos app is mainly a YouTube Data API demonstration app, which provides a search interface for finding YouTube videos based on the entered search term, and returning these videos as a detailed list. When a video item in the list is clicked, a video player element will appear on the screen and the selected video can be played. It is very similar to the previous Pics. In general this was considered an optional learning section by Stephen Grider, just for those who want another chance to practice the basics of React before we move on.
- We looked further at application Component Design, including standard ways to create project folders and when to decide another component is required.
- Third look at how to use APIs in React in this course, in this case image data from the YouTube Data API which can be found here: YouTube Data API.
- Used the CSS Grid layout for a responsive image grid, and learned how to dynamically set some properties of the grid using React.
- Had chance to practice even more on the props system and the concepts of the component hierarchy, with parent and child components, and how data and methods are passed down and back up. In general from my understanding props are how we can pass data and functions down to child components, and callback functions give us a good way to pass data back from child components to parents.
- We used Semantic UI for the user interface and styling of the app.
- All my coding is done in the wonderful VS Code.
- If curious here is the Axios Package.
As this was very similar to the previous Pics application, there is little more to say in this reflection. One area of concern again is the idea of API's, and how to access them and use the data in an application. Even Stephen Grider was commenting on how unhelpful some API's can be in describing how to properly build their product into your application. In this case, we once again used Axios to access the YouTube Data API, and it was just a follow along coding session. How I would manage to figure out what had been done will require a lot of independent practice, maybe some mock websites and apps to practice against?