‫Okay, so let's begin by rendering the
‫list of friends.
‫And to start, let's again come here to our starter files
‫and then inside the eat-and-spit folder
‫let's get app dot JS and index
‫dot CSS.
‫So both of them, copy them
‫and I will just as always change the name here.
‫And then inside the source, let's paste them.
‫And so here we need to replace both
‫of them, because they already existed.
‫And then let's delete all the junk files.
‫So all of these,
‫so that we end up only with app dot JS, index dot CSS
‫and
‫index dot JS.
‫And so now let's get started
‫by opening up this folder in VS code.
‫So index dot JS, here we need to as always clean up
‫a little bit,
‫and then
‫also remove these files that no longer exist.
‫Yeah, and that's it.
‫So we have our index dot CSS file, which as always
‫please feel free to explore it.
‫But our main work is going to happen in app dot JS.
‫And in fact, let's start by creating
‫the app component
‫which is as always our main parent component.
‫And here this one we need to export
‫default
‫because this is the component that index dot JS imports.
‫Okay, so let's just return some div here,
‫hello,
‫give it a safe.
‫And then let's open up the integrated terminal
‫so that we can start up this app.
‫Just make sure that you are in the correct folder here.
‫And then just type npm
‫start
‫which should then open a new tab over here.
‫So let's wait for that.
‫And indeed,
‫here it is.
‫And yeah, we got our hello
‫which is nicely centered and that is because
‫of the CSS that I provided and which is
‫as always
‫automatically included right here already.
‫So index dot JS is importing our index dot CSS.
‫And so that's why these styles are now automatically applied
‫Now back here in our code
‫we see that we have this initial friends array
‫which as always is simply an array of objects.
‫And in this case of some friends
‫where each of them has an ID, a name,
‫an image, which is coming from this URL here.
‫And then the balance that we saw before
‫and more about what these numbers here mean, uh,
‫in a minute.
‫But for now
‫let's then start building that list of friends component.
‫And here let's again build all the components right
‫into just one file so
‫that we don't have to jump around all the time.
‫So friends
‫list.
‫And then here, let's return a list
‫which for now will only contain list.
‫And so now we will then include this component right here
‫in the app.
‫So friends list and
‫no props.
‫And here we will now place this
‫into
‫this div with
‫a class name
‫of app
‫which has been provided in the CSS file.
‫But then also this should be inside a sidebar
‫so another div
‫class name
‫sidebar.
‫Okay, as always, it's a good idea to have the
‫terminal open.
‫And for now, all I'm doing here is to inspect the layout
‫basically.
‫So here is that div with the app
‫which you can see is a grid container.
‫And then we have the sidebar.
‫And in there we have the UL, which you can also
‫see is automatically a flex container.
‫So all this layout stuff, of course I already did it
‫in advance so that we can focus exclusively on React
‫but when you build your own applications in the future, then
‫of course you'll have to do all of that as well.
‫But since this is not a CSS course, well, I already
‫wrote it beforehand so that this is a lot faster.
‫But anyway, let's now here actually render these friends
‫that are in this array right here.
‫So let's for now create a variable called friends
‫which we will simply set to the initial friends.
‫And later on we will then change this here.
‫But for now, this is the array that we want to render.
‫So,
‫let's say
‫friends
‫dot
‫map.
‫And by now you should be pretty familiar with this syntax.
‫So each of the objects
‫is a friend.
‫And then for now, let's just render a list element.
‫And then simply here
‫with friend
‫dot name.
‫And indeed, immediately we get Clark, Sarah, and
‫Anthony.
‫So those are our
‫three friends,
‫at least the ones that we want to
‫share a meal with here in this example.
‫Now, we could
‫of course write the JSX right here inside this loop,
‫but since we will have a lot of code for each of the friends
‫we should actually move that into a separate component.
‫And so let's do that,
‫and simply call it friend.
‫Well, not like this.
‫And so this friend should then probably
‫receive the current friend object, right?
‫And so therefore we accept that here as a prop,
‫okay?
‫And now basically we can move that
‫here.
‫And then here what we want to render is that friend and
‫into that friend we pass the
‫friend prop
‫with the value
‫of friend,
‫close it down.
‫And then we should also of course specify the key prop.
‫So this unique value that each of the elements
‫in a list needs to have.
‫And so for that, we actually have
‫friend
‫dot
‫ID.
‫And so as we reload, it looks exactly the same as before
‫but we have each friend, inside its own component.
‫And so then we start seeing here our component tree.
‫Here we still have the error from before, but now it's gone.
‫So we already have a small component tree
‫with app friends list, and then in there each friend
‫with their unique key.
‫But now let's keep moving here and let's actually build
‫this list item here.
‫So to make it a bit more complete.
‫So first we have the image of the friend,
‫which is
‫at
‫friend dot
‫image.
‫And then we should also not forget the alt tech.
‫So here, let's just use the name of the friend,
‫okay.
‫Then we're using an H three element for the name
‫of the friend.
‫And so that's looking already close to the demo right here.
‫The only thing that's missing is this button.
‫And then this text here, let me actually just reload this so
‫that you can see that we have basically these three
‫colors here.
‫So whenever you owe your friend, then the text will be red.
‫If they owe you, it will be green,
‫and if you are even then there is no styling applied.
‫So, let's implement it here.
‫And so let's see what these numbers here actually mean.
‫So here we have this balanced property.
‫And if that's a negative value
‫that means that you owe your friend.
‫So in this case, you owe Clark seven.
‫But if the balance between the two friends is positive
‫like here, then that means that the friend owes you.
‫And so let's now use that knowledge here to
‫do this conditional styling and also this conditional text
‫because they are in fact different.
‫So let's do
‫friend
‫dot
‫balance.
‫So if that is negative,
‫then let's render a paragraph
‫with the class name of
‫red
‫saying
‫you
‫owe, and then the name
‫of the friend,
‫dot
‫name
‫and then
‫friend dot
‫balance,
‫and then Euro
‫which I don't really know how to type
‫on the US keyboard that I'm using.
‫And so let's just copy it from here.
‫Or of course you can also use the dollar sign
‫like this
‫so that doesn't really matter.
‫But what matters is that now we have this text here.
‫Here, we just want to remove that negative sign.
‫So let's actually do
‫math
‫dot apps,
‫which stands for
‫absolute
‫and that's a bit nicer.
‫Okay? And now let's copy this three times.
‫And so here I decided to basically use three
‫times the end operator
‫for conditional rendering instead of a nested ternary.
‫So we could also have done this condition right here
‫with a ternary operator.
‫And then in the ELs branch
‫we could have another ternary operator
‫for these two cases here.
‫So friend's balance greater than zero
‫or
‫equal zero.
‫But since these three cases are mutually exclusive
‫it's easier to simply have three times this end.
‫And so then only one of these will apply.
‫But anyway, here,
‫it is green
‫and here we have no class at all.
‫So no special styling.
‫And here, let's say you and
‫your friend
‫are
‫even,
‫okay.
‫And now here we need to also change the text
‫to your friend,
‫owes you
‫twenty Euros.
‫And so that's in fact exactly what we have here.
‫Now all we are missing is the button here
‫on the right side, and that's easy enough.
‫Just button with the class name
‫of button
‫and then
‫select.
‫And there we go.
‫That's our list of friends.