All right.
It's now time to put all of your knowledge that you've learned so far into practice.
So in this lesson, you're going to be completing a number of challenges in order to create a contact
list app.
Now as you can see from the preview, it's not looking quite right.
So there's a couple of things that you have to do first in order to fix the CSS styles.
This will involve going into the App.jsx and applying the necessary class names.
Be sure to look through the styles.css file and looking at the class names that are available, and
then you can compare your current app against the completed one at this address here. And through that
comparison, hopefully, you can figure out the right CSS styles to apply in order to get them to look the
same.
The next step is to extract the contact card as a reusable Card component.
The contact card currently lives inside the App.jsx
file and that's basically everything that's inside this card div.
And once you've gotten it as a reusable Card component, you're going to be using what you learned about
props in order to render the default Beyonce card.
So deleting all of these hard-coded bits of information and instead passing it over from the App.jsx
as the properties to that custom Card component. Finally, you're going to use the contacts.js
file that we've got here, which has all of these details pre-populated for you including some images
of these people that I found on Google.
So feel free to switch it up with your own information if you wish,
and by the end, you should have a contact app that looks like this, with three cards, each with a different
contact, but effectively repeating the same element which we're going to create using React. Pause the
video now, fork sandbox or download it as a zip file to use your local editor and give this challenge
a go now.
All right.
How did you get on.
Let's walk through the solution together.
The first step was to apply the CSS styles to the App.jsx component, so it starts looking a bit
more like this. As you can see we've got a little way to go,
and the first thing you'll notice is that the name of Beyonce looks very different even in terms
of color, and also location.
So let's take a look inside
our CSS file to see if there's something that might help us with that.
So you'll find a class called name, which changes the font-size and changes the color, and gives it some
margin away from other components.
So let's try applying this to our App.jsx, and we're going to add it as a class name to this h2.
So it was called name.
So there we go, it's now much bigger the different color and it's now no longer touching the edge of
the card.
The next thing we want to fix is probably this image, right?
This is circular.
It's got a nice border around it.
The component that will probably want to add that class to, is our image component here.
And the class name we want to add is going to be something related to an image,
so it could either be this one, or it could be this one.
But notice how this one is actually just targeting all the child images that are associated with a card
class.
So this is actually already applied by default because we have our card div that contains an img element,
and so it's already getting those margins applied which is why it's being positioned where it is.
But this circle image however seems to change the border-radius, making it round which is 50 percent
adding a whiteboard, et cetera. So that seems like the one that we should apply to this img element.
So let's add a circle-img, hit Save and Refresh.
And now we've got this nice circular avatar image.
The final thing we want to do is probably to update these two lines because as you can see over here
they have a different color and they're positioned a little bit differently. Again,
let's go on our journey of discovery through our
style.css
and we've got this class called, info, which changes the color and adds a little bit of margin.
So that is probably what we want to add to these two paragraph elements.
So I'm going to hold down Option and click on these two places and let's add the className of info.
And once that refreshes, you'll see that our Card component now looks exactly the same as the completed
version. So that's step 1 out of the way.
Now step 2 is to extract the contact card as a reusable Card component.
So this is what React is all about, extracting components and simplifying them into smaller and smaller
blocks. Everything that's inside this div with a class name of card, corresponds to the card that's being
rendered.
The only thing that's left is this parent div and the h1 which is our heading over here.
So let's go ahead and extract this div and let's create a new file inside our components folder which
I'll call card.jsx. Inside here we'll have to do all the usual things, create a new Card component
and return the thing that we copied over just now.
And finally, let's go ahead and export this as the default export, and it was called Card.
So now let's hit Save and go back into our App.jsx and import our card component from "./card".
And now we can add it in here as a custom React component with the Pascal casing and a self-closing
tag.
And we've now got Beyonce tag back in here just as before. Now we're on to step 3 which is to
use what we learned about props in order to render the default Beyonce contact card,
and this will allow us to make our card component reusable, so it doesn't always create a Beyonce card.
So I'm going to go ahead and review this Card component looking for the parts which are custom to each
contact,
for example, the name or the img src, or the telephone number and email, and I'm going to create them
as properties on my Card component.
So I have a name and it's going to be equal to what we have here which is Beyonce. So let's paste
that in there. And then I'll probably have an image which is going to be the img src that I've got
over here, and then we've got a telephone number which will just copy over,
and finally we've got an email.
And remember that even though it seems like we're creating a new object, and it does function as if we're
passing this object over to create this Card component as the input, the syntax is more like the HTML
attributes where you have the key, equals sign and then a value. So let's copy over that last piece of
information.
And now we can delete all the parts of our Card component which are custom to each contact.
So this way this Card component can be completely reusable.
But in order for it to actually work, instead of giving us lots of syntax errors, we'll need to get a
hold of all of these inputs being sent over to our Card component. And we of course do that through the
input called props.
Now remember that you can name this whatever it is you want and it will still work because it's just
going to be assigned as if it was a variable to this object, that it contains all of these properties,
but by convention in all of the React apps, you'll see that people use the word props. So the places
where we want to use those props or properties is firstly the name of the contact,
so that's going to be a props.name. And you can refer back to over here where you created the Card
and passed over all of these properties
if you forget what each of these names are. And you of course have to enclose these inside a set of curly
braces
so it actually recognizes this as JavaScript instead of you just trying to create an h2 that says props
.name.
So the next one is our img src,
so this is going to be props.img. And then we've got our first "info" paragraph and this is going
to be props.tel, and as well as props.email.
Now, we are entirely using our properties that are passed over, properties which can contain custom values
for name, image, tel, and email and it just so happens that we are creating a Beyonce contact
card from our App.jsx. That's step 3 out of the way.
And the final step is to use this file contacts.js to create the card components instead of typing
it out by hand. In order to save you time from finding imgURL's and tel and emails, whichever
you want when making up a tel and email,
we created this contacts.js file.
Now let's first take a look at the structure of this.
Notice how it's inside a set of square brackets.
So this is an array and it's an array of JavaScript objects.
Each of these objects have a number of properties such as name, imgURL, phone, email, and these correspond
to all the things that we need to fill each contact card. If we want to use this contacts const inside
our App.jsx,
you might have remembered our previous lessons on importing and exporting.
So let's go ahead and export our contacts const as the default from this file and inside our App.jsx,
we can go ahead and import that const contacts, and we can specify the location.
So it was "../contacts". And now we actually have access to that contacts const, and you can
even log it if you want to.
And you'll see it printed in here as an array with three objects each with all of these properties.
So now we can go ahead and use these contacts to create each of our cards.
So the first one will be contacts[0].name,
and of course this is JavaScript code
so it needs to go inside a set of curly braces. And we can do the same with the rest of our contacts.
And then we can simply just copy these cards and change the index of the item that we want.
And now if you take a look at our app you'll see that we've got all of our contacts added in, each in
their own individual little cards,
and we've got all of the details filled in for each of the cards.
Now we've saved ourselves a lot of effort by creating these custom components using React,
but it does get a little bit tedious adding in contacts[0].name, contacts[0].imgURL
and then going on through that array.
Don't worry we have lots of fancy ways of dealing with this, and you'll be discovering that in the coming
lessons where we learn about map, filter and reduce.
But for now, I want you to be really comfortable with this idea of props and passing them over when you
create your custom components, and then receiving them through the input called props, and accessing each
of those properties inside in order to render a completely customized version of your component. In the
next lesson,
we're going to be looking at some React development tools that will help you see the structure of your
app a little bit better as well as being able to see the current values of each of these properties.
So for all of that and more, I'll see you on the next lesson.