Originally published here on YouTube.
(Please give me a thumbs up and subscribe if you found this useful 🙏).
Source code is here: https://github.com/codebubb/react-youtube-viewer-tutorial
React Project: YouTube Channel Viewer
00:00 Introduction
00:35 App overview
01:52 Project setup
03:14 Initialising the React app
06:40 Getting the YouTube Data
12:15 Templating the video data
17:45 Creating the search/lookup form
22:07 Getting channel title and error state
25:19 Styling the app
33:22 Breaking the app into components
40:11 Wrap up
— Follow Me —
Twitter: https://www.twitter.com/codebubb
Facebook: https://www.facebook.com/juniordevelopercentral/
Blog: https://www.juniordevelopercentral.com/
— Thanks! —
So in this tutorial we'll be creating a really simple React Project that shows you how some of the fundamentals of React work including React hooks, React state, React props, JSX and building React components.
Although are app is pretty simple in what it does there's quite a bit to go through with this tutorial and think of it more of as an overview of these topics rather than a deep dive into the basics of React.
We'll start off the tutorial by setting up our React project and i'll give you a quick overview of the tooling including the setup of the dependencies and the React Webpack configuration.
Once we're setup, we'll take a look at writing a bit of JSX to display some info to the user on the page and then we'll go about setting up our application state and the function that will run when the user enters a new channel ID. We'll do this using the useState React hook and the useEffect React hook.
Once we've got a bit of data being returned from our API endpoint with React, we'll loop through the data that is returned and update our template to show the video thumbnail and the video description in our front-end UI.
The next step will be to add the search capability and we'll work closely with the React state that we defined with the useState hook to update values inside our app. The result will be that the user can lookup other channel IDs other than the default one we provide.
When our app is setup and working we'll add some style with some SCSS to make our template look good before finally moving on to breaking down our overall template in to React components. This will be a good opportunity to look at React props and React state and how they can be passed to components to allow data to communicated between React components.
Top comments (0)