React Project: User Cards

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&list=PLpc_YvcwbxaTqVUVgWQhISClv_mniIm2o

— 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