‫Let's now take a break
‫from building our project and build a small reusable,
‫and flexible, star rating component.
‫So what we want to build is a component like this one.
‫So it displays multiple stars
‫and then as we hover over them
‫it displays the currently selected rating
‫here, on the right side.
‫So as you see, as we hover over the stars,
‫it always shows the currently selected number of stars.
‫And if we click here, then that number stays fixed.
‫And if we then click again,
‫because this movie is definitely a 10,
‫then of course we can also change that rating.
‫Now, okay, now we will develop this component here
‫in complete isolation.
‫So outside of this current application,
‫so that we could reuse it anywhere we wanted,
‫and also make it really flexible
‫by allowing for different props.
‫For example,
‫here we can rate between zero and 10 right now,
‫but we will make it so that the user of the component
‫can choose what number of stars they want to display.
‫And that's just one of the things that we will do.
‫But anyway, let's now come here to our project
‫and then let's create a brand new component file here.
‫So, star rating and then export default function
‫and then the name of the component.
‫So star rating, and for now, we won't accept any props here.
‫We will leave that for later.
‫And now let's just return something here.
‫And now what I want to do,
‫is to actually come to the index, the js file,
‫and then no longer import the app here, for now,
‫and also not the CSS file,
‫because, again, this component should be completely reusable
‫and so it shouldn't depend on any external CSS files.
‫So instead, what I want to do now
‫is to import that star rating
‫and you see that VS code
‫automatically wrote our import statement here.
‫And if for some reason your VS code didn't help you
‫with this auto complete
‫then just make sure to type exactly this.
‫Then finally,
‫we also need to remove this one here, temporarily,
‫and, instead, include our star rating here.
‫And I'm doing it like this
‫just so that we don't have to create a brand new project
‫just for building this one component.
‫So for now we will just use this project
‫that we already have
‫instead of creating a new Create-React-App.
‫But anyway, let's give it a save now.
‫And now here you see that, hello, that's coming from here.
‫So from the star rating.
‫So let's close the app, and the sidebar,
‫and then let's get started.
‫So starting with the JSX here.
‫So just with the structure,
‫we see that we have basically two main elements.
‫So we have one container for all these stars
‫and we have then, like this message here,
‫so the current rating on the right side.
‫So inside our diff,
‫let's place another diff for those stars,
‫and then one paragraph for that message.
‫So for now, let me just place a number here and here.
‫For the stars,
‫we want to dynamically generate these star elements.
‫So instead of writing them by hand, one by one
‫because that's the only way
‫in which we could sometimes have five stars
‫in other situations, 10 stars or really any other number.
‫So let's use the technique that we used before
‫in the faraway app.
‫So entering JavaScript mode
‫and then we can write, array.from.
‫And here we can then specify an object
‫with the length property
‫and let's set it here to five, initially.
‫And so this then creates an empty array
‫with five elements
‫that we can then immediately loop over
‫by passing in a function.
‫So like a map function, here as the second argument.
‫So in this function
‫we are not interested in the elements themselves.
‫Let's just use a placeholder variable.
‫But we are interested here in the number.
‫All right,
‫and now here we can just render anything.
‫Let's just do a span element for now,
‫but later we will place the stars in here.
‫So let's just write S for star.
‫And then here the number,
‫and actually this should be S plus one
‫because I, of course, is zero based here.
‫Okay, and this should already be something.
‫And indeed we see star 1, 2, 3, 4, and 5.
‫Which of course, again, are just placeholders for now.
‫Here we have some error, which probably, yeah,
‫it's because of that key prop.
‫So let's add that key here.
‫Well, actually we don't
‫because this is just temporary anyway.
‫Now, okay, so now let's define some styles here.
‫And remember how I said initially
‫that we cannot depend on any external CSS file
‫or CSS classes
‫and, therefore, we need to define all our styles in line.
‫So, let's do that starting here with the parent element.
‫And so here we now need to specify an object,
‫and why not actually do that here
‫as a separate object outside.
‫So let's write containerStyle.
‫Then let's set the display property to flex.
‫So to place the two elements side by side, then align items.
‫Let's set that one to center,
‫which will align the items vertically.
‫And then let's also specify a gap of 16 pixels.
‫Okay, and now here we can just specify that,
‫give it a save,
‫and that looks already a bit better.
‫And now we can do even better
‫which is to take this entire object
‫which will never change.
‫And it doesn't depend on anything
‫that is here in the component.
‫And we can place it completely outside of the component.
‫And by doing so,
‫this object here will not have to be regenerated
‫by JavaScript each time that this component here rerenders
‫because, otherwise, each time that a component does rerender
‫dysfunction will get called again.
‫And so then this object would also get regenerated again.
‫And so that's not necessary.
‫And so we can just place it outside here.
‫Now, next, let's also create some styles
‫for the other container.
‫So this container here with the stars.
‫So let's say starContainerStyle.
‫So let's also do display flex
‫and then give it a gap here of just four pixels for now.
‫All right.
‫And finally, just some styling here for the text.
‫So text style, let's say lineHeight.
‫Yeah, I was trying to write some actual CSS,
‫but in JSX, remember we need to write our property names
‫camel cased.
‫So not a line-height, but lineHeight like this.
‫Let's also specify a margin of zero.
‫And here, let's actually say one.
‫So this probably won't change a lot yet,
‫but it's going to be important later.
‫So style,
‫okay, and now to finish,
‫let's do what I said right in the very beginning,
‫which is to basically allow the user of this component
‫to set the maximum amount of stars.
‫So the maximum rating.
‫So coming back here, let's say,
‫that as the user of this component
‫I wanted to pass in the max rating, for example, as five.
‫Now, then maybe I wanted to use this component
‫at some other place in my application,
‫but here I wanted 10 stars.
‫But now as we reload, of course,
‫both of these components will only have five stars.
‫Cause we hard coded that value here in our rating.
‫So what we need to do
‫is to now accept that prop here,
‫max rating, and then use that right here.
‫And so this is why we had to use this trick here
‫instead of manually writing the number of stars.
‫So instead of writing one element here per star,
‫and so if I save this now,
‫you see that indeed we get now 10 stars here, great.
‫But now what if someone used this component
‫without specifying the max rating property?
‫So since we're building a highly reusable component,
‫we need to account for all these situations
‫because we will never know
‫who is actually going to use this component
‫and what props they will specify.
‫So we need to account that this might happen.
‫So in this case, we have a problem
‫because then, well we have exactly no stars.
‫So what we need to do is to set a default value
‫for the rating.
‫So how do we do that?
‫Well, we can actually leverage the power of destructuring
‫in JavaScript because whenever we destructure an object,
‫we can actually set a default value as we do so.
‫So here we are actually destructuring the props object.
‫And so if max rating doesn't exist,
‫we can set a default simply by writing this.
‫And so if we save this now,
‫then we are back to having our five stars by default.
‫And so this is a very common way of setting default props
‫in React applications.
‫We will do this all the time as we go through the course.