In this tutorial we’ll be creating a simple React app, demonstrating how to use components, the useState and useEffect hooks, retrieving data from an API and also handling events from user input. Code for the project is here: https://github.com/codebubb/react-social-cards-tutorial Check out some more React tutorials here: https://www.youtube.com/watch?v=X6GpRxu4q_s — Follow Me — Twitter: https://www.twitter.com/codebubb Facebook: https://www.facebook.com/juniordevelopercentral/ Blog: https://www.juniordevelopercentral.com/ — Thanks! — React Project: User Cards ----------------------------------------------------------------------- 00:00 Introduction 00:30 Overview 02:52 Getting the user data 08:44 Creating the component 14:20 Inner components 21:17 Adding filtering 29:12 Wrap-up So in this web development tutorial, we’ll be walking through creating a beginner React project, how to create some components that can be reused and also how to get data from an external API. The app is pretty simple really and will display some user data and we’ll have a look at how you can get this data using the useEffect React hook. Once the data is retrieved, we’ll store this data in the app’s state using the useState hook. When the app has the data we’ll create a few components that can be reused and pass data to these via their props so that they can work independently at different parts of the simple React app. As a little bonus to the app we’ll implement a very simple filtering function which will only display user cards that have names that match the input text provided by the users. We’ll take a look at how events are handled for this. Of course we’ll add styling along the way so that the app lays out nicely. Any questions, just pop a comment below! Thanks as always for watching #javascript #react Channel Handle @codebubb