All language subtitles for 094 Reviews - Basic Setup.en_US

Not bad, not bad ones, we've got overreact I comes out of the way, of course.

Let's focus on our project.

We won't need it next year because all the styles are already there.

And then, of course, I don't need also this particular icon.

This was just to showcase all the actual library works.

So let me save it and then let's start with a general return where instead of the chair, we're going

to go with mine.

Then inside of the main, I would want to set up my container and title.

So let's go here with Container Dave and then also with a dare with a classic of title.

And then we're going to go with having to an hour or five years like so and then let's add the nice

underline as well.

So underline, underline.

And then once we've got that, then still within the section, by the way, you know what the container

should have been section like.

So so let's set this up as a section.

So still within a section, but not inside this title div.

I'm going to go with my review component, so I render my review component and at the moment it should

just say review component.

And of course now I can navigate to the component and get busy building our functionality.

As far as the imports.

We're looking for people coming from the data file and we'll take a look at it in a second.

And then, like I said, the font awesome icons coming from the React Icons Library.

So we have the Chevrons as well as the quote.

Right.

And then before we start working on our return, let me just show you what is in the data.

Again, we have the array.

I am named it.

It reviews.

I export it as default.

So of course when I import, I can call it however I would want.

And then again, I have multiple people.

Each person is represented by the object where I have the idea.

I have the name, job, image and text.

And of course we'll need to figure out well, how we can display them one by one where we're not rendering

the list in this case.

So I would want to access them and then figure out some kind of way where I can go back and forth as

far as my right is concerned.

So in the app we have the review that is rendered.

Of course, now we need to go back to the review and I think I can close the app because at the moment

it is just confusing all but so we have to review.

Beautiful.

And then in here, let's start by setting up some kind of state value.

So that is going to be my index over here.

And this is exactly what I'm going to call a second index is equal to a set index now as far as the

default value.

I'm going to go with zero.

Why?

Well, because arrays are zero indexes based on by default, I would want to showcase the first person

in my.

Hopefully that makes sense.

And now let's think about it.

So we have this people right now, if you want, you can control it and you'll see exactly what I'm

talking about.

Now, I'm going to do that on a bigger screen and there it is.

So this is my right now, like I said, each person is an object.

So what I would want to do when I'm setting up the return, I right away would want to access these

properties.

But in this case, I need to be very specific.

Where, again, I'm not rendering the whole list, I would just want to render one person so what I

could do is access these properties using the structuring from the people array.

But then I need to be more specific which item I'm looking for.

And since I would want to display the first item and arrays are zero in next base, I could use this

state value.

Correct.

So what we could do is say const and then I'm looking for name, I'm looking for a job, I'm looking

for the image as well as the text.

And that is coming from people.

Right.

And then I'll use my index.

I'll say not zero, not one, not two.

Even though technically I could have done that.

But the thing is, I don't want to have this hardcoded.

I want to set us up as index so that we as this value changes also, I don't see a different person.

Hopefully that makes sense.

So I'm going to all these properties out of the first item in the people.

Right.

And as this is going to be changing, as my index value will be changing, so will be the person that

I'm accessing in the array.

And with that in place, of course, now we can set up our return zone here, I'm going to go with the

article and line inside of the article.

We're going to go with review.

So there's going to be there eventually.

But for now, we'll just add a class name of a review show.

And then inside of this article, we're going to go there with the class of image container and let's

just showcase that image.

So image for the source.

I'm going to use the image that I'm actually seeing here.

So I'm going to say here, image now for the alternative was just display the name.

So that is going to be name.

And also, I would want to add a little bit of styling here where I'm going to go with class name and

person and then hyphen HMG.

So let's save it.

And then we should see our container and we should also see our first person.

And I'm going to do this multiple times.

But just so we all are on the same page notice as I'm changing its value, which eventually we'll do,

of course, dynamically.

Also, the person changes because of course, in this case, index is number two.

So now I'm accessing the third person.

Hopefully that makes sense.

And then right next to the image, we're going to go down here.

We're going to add a class name of quote unquote and then hyphen icon.

And then instead of the span, let's go with one of our icons and we're looking for, quote, right

icon, what's displayed.

And there it is.

Now we have the icon.

Then there's just going to be some info.

So we're right next to this there.

We're going to go with heading for and we would want to add a class name and class name will be Arthur

again.

Usually I try to avoid adding too many classes, but in this case there was no other way.

And I'm looking for the name here, so I'm going to go with a name like so and once we've got that.

Then we can work on job and info, so let's go with the paragraph, let's out right away, class name

of job and then of course, I would want to access that property that is coming from my object.

And then one more paragraph, and this one will have a class of info.

And then we're looking here for the text.

So these are the values.

And of course, let's set up our buttons.

Now, at the moment, there's going to be no functionality, but at least those buttons will be there.

So we go with them with a class of button container like and then inside of this container we go with

button and then instead of this button, we just go with Shivram.

So F.A.A. and Chevron on the left.

Now, I also would want to have a little bit of styling here, and I'm going to go here with the class

name of priv button.

So prev hyphen b10 let's say it, we should see this button over here and now it's copy and paste and

we're just going to have to change this around a little bit.

So we want to.

Now, the second button, of course, is going to be the next button than as far as the icon is going

to be Chevron.

Right.

And the last one will be a random button soon here.

Let's go with a random and then hyphen B10 and we're not going to display the icon here.

We'll just say surprised me.

And latish, once we save it.

This is the look that we're shooting for.

Now, the one thing that I would want to do is place it outside of the div.

So the button container and then of course the button, the last one, the random one will be on a separate

line.

So that's our basic return.

So now, of course, we just need the functionality where as we're changing the index, also we display

a different person.