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: github.com/codebubb/react-soc...
Check out some more React tutorials here: • React Project: TH-cam...
- Follow Me -
Twitter: / codebubb
Facebook: / juniordevelopercentral
Blog: 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

[@codewithbubb]

Check out some more React project tutorials here: th-cam.com/video/X6GpRxu4q_s/w-d-xo.html

[@tokiitchi]

Thank you for this video! i'm a newbie..this really helped me with my final project!

[@TheMarten12345]

Great tutorial, will be following your channel from now on!

[@codewithbubb]

Thanks very much!

[@Fatima-ie5kj]

oh common youtube really? why this video has 1 dislike, m going to watch all these videos this weekend 💪💪

[@codewithbubb]

I seem to be getting one random dislike per new video at the moment!? Probably a bot or someone with too much time on their hands...

[@hiruniliyanage98]

Finally found what I needed, hope it works

[@Elator11777]

Wow, React at last! I will do this project!

[@codewithbubb]

Thanks Andrey, yep planning on doing several tutorials making React apps over the next few weeks.

[@shahjalalrafi4732]

thanks man..
as a new react learner this project is matching with me.i can understand every individual concept. hope you make more complex project.

[@codewithbubb]

Thanks very much - yeah that's the idea. Someone suggested going through all the different types of React hooks etc. so I'm aiming to do something a little different with each project over the next few weeks 😀

[@shahjalalrafi4732]

@@codewithbubb thats splendid.i will wait for your next project

[@noonna8309]

You saved my life, tnx

[@codewithbubb]

Ooh, feels a bit dramatic but glad this helped you out!

[@saravananmohandas9960]

superb sir

[@ackieu3277]

Thank you

[@codewithbubb]

You're welcome - hope you enjoyed the tutorial!

[@rangabharath4253]

awesome

[@codewithbubb]

Thank you 😀

[@nice_man932]

can you do advanced react projects
just like chat app or blog app etc...

[@codewithbubb]

Sure, i'm kinda building up to some more complex stuff - just starting with some beginner projects.

[@nice_man932]

@@codewithbubb thanks for you very much

[@alanhf]

Thanks for the tutorial, James.
Can someone help me with similar APP?
Let's assume that CARDS has a transition that loads perfectly on APP load.
How can I get the same transition to RELOAD after onChange in filteredUsers?!
I'm not using any CSS lib, only CSS.modules.
Thanks anyways.

[@deepakwebdev]

Hey thanks for this i am new to react Can you please tell me how i can achieve this functionality- when i click on particular card it should show on the top with more details? Please help

[@codewithbubb]

You could setup on onClick event for the cards which could toggle a bit of state to show hide extra information. Then in your template, just check if the state if enabled (i.e. true) or not to display the extra content.

[@Kira.i.]

@@codewithbubb Could you please show us how to do it?

[@lednet2010]

Good

[@codewithbubb]

Thanks for your support 😀

[@bronwynpotgieter7405]

Let's say I have a form where I add user details, and once I click submit, that data is outputted to a user card. How would I achieve this without using an API or without pushing that data to a database? I have to create just a simple project for varsity and I'm not sure how to do this. I know how to push the data to a database(mySQL) and output it, but this project is simple and does not require that. We're also doing unit testing on these functions so I don't want to over complicate things by using mySQL.. (I'm still learning)

[@codewithbubb]

Just store it in the state of your app - either be in memory (like using the useState hooks in React) or you could store it temporarily in the browser's local storage if you need to have it hang around if the user refreshes the page.

[@bronwynpotgieter7405]

@@codewithbubb got it working thank you so much

[@BehindHealthyLife]

Bro, can you make a tutorial on api that uses the api keys and api secret, i was looking through the youtube but I couldn't find, can you please make one

[@codewithbubb]

Hey thanks for the suggestion, sure i'll do something like that in the future. You could try checking out another video I did where I 'proxied' requests to a back-end API as it required an API key and secret (see here: th-cam.com/video/v7cprTuAnlA/w-d-xo.html)

[@BehindHealthyLife]

@@codewithbubb awesome, I will check it out

[@MillinaM]

the data is not not displaying