In this React Project tutorial, we'll build a really simple React app that displays a list of YouTube videos for any particular channel on YouTube like https://www.youtube.com/channel/UCuvTObpdx__W966kbdIZ4_Q andhttps://www.youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ Source code is here: https://github.com/codebubb/react-youtube-viewer-tutorial React Project: YouTube Video 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. Channel Handle @codebubb