All language subtitles for 109 Slider - Setup.en_US

All right, and we already know the drill, we navigate back to our we're looking for the slider.

I'll open up my integrated terminal.

I'll make sure that I'm on the road.

And once I'm here, I just go with KDDI and then set up for my Schlyter.

There it is.

Once I'm here, I'm going to go with NPM Install online.

Right away.

We can run and be stuck.

And while we're getting all our dependencies as far as our project.

In the sauce, you'll have the data, so we have a list of people that are going to be displayed in

our Schlyter course, we have success in this project.

We'll also use react accounts.

Of course, they already installed as a dependency and our package.

Jessan and two more things that I would like to mention in a read me EOC project in action.

So let me navigate right now to the URL and you'll see that that is one more Gadsby project.

Now, this is Gadsby course specific where we work with editable or if we navigate to a homepage, you'll

notice a reviews app as well.

So, again, a little bit of different setup because we are getting data from the table.

But the idea is exactly the same where we have the slider.

And I also would like to mention that in this project, as far as the app component, I purposely jammed

all the functionality in there.

So you'll notice that we have only one component.

And I can tell you right away that it is going to get quite big.

Now, my reasons for that waterfall were first I would want you to get comfortable with working and

bigger components because it's not always going to be the case where everything is nice and cute and

everything is separated into separate components as your projects get bigger or as you start working

on projects created by other people, you might run into situations where, yes, your component files

will get quite big and you have to be comfortable navigating around that file.

It's not like you can just ask for a different file where the component will be smaller.

That's number one.

And the second reason is because I have a challenge for you.

Once you're done with a project, I would want you to decide how you would separate into single components.

So our app component will be quite big.

And then I would want you to take a look at the file and be like, you know, I'll move my buttons to

a separate component and then, of course, set up the functionality where you pass in the props or

you would want to move something else into a separate component.

And I'm not going to tell you which parts you need to place it in separate components, because that

is up to you.

But I think it would be a great challenge for you where you can take a look at the file and you can

decide, hey, listen, maybe it makes more sense if this particular piece of component is in its own

component.

Again, I would suggest doing that at the very end of the project because that way you can avoid some

unnecessary bugs.

And with all that said, I would want to work in my slider component.

And at the moment, the only thing you should see is the slider project set up.

And as always, I'm just going to start with mindstate values where there's going to be a value for

my list and I'll name these people and then set people.

And that is equal to a year's state.

Of course not.

Use a factory, use state and then I'll pass in the data.

So the era that is coming from my data address, again, in that address, we just have the array of

people.

Each person is represented by the object and we have the properties, we have the images, name title

quotes and all that good stuff.

So in here we just pass in the data once that is out of the way.

I also want to set up the index because in order to set up that slider, there will be an index that,

of course, will change as we click on a button.

OK, so we're going to go here with CONSED and then index and then set index.

And that is equal to a user state.

Again, initial value will be zero.

Then there's going to be some use effect where of course we're going to have our functionality and right

after our user fact, the ones that we currently don't have, we are going to have our return now.

We'll start with the very, very basics where there's going to be initial setup.

Now, there's purposely some success commented out in access so we can go over step by step.

And then once we understand the success, then, of course, we're going to add functionality in our

return as well.

So for the time being, let's just go with the return on here.

I would want to have a section, a lot of class name here.

And that class name will be S. Let me go with the title here.

And by the way, this would be a perfect example for separate component.

So I'm already suggesting something that I would move into a separate component, and that is the title.

But again, it is up to you.

Just a friendly suggestion.

And I have a spine Vanport slash and then I'm looking for the name, which is going to be reversed.

So once we set it up there is we have our title and then we're going to have a section center.

So right next to the div I'm going to go with another one and I'm going to call this section center.

And inside here I would want to iterate over my list.

So the data that is coming from my data just so essentially miring and for the time being, we'll just

iterate.

And again, there's going to be some cases that eventually will add dynamically.

But first, I would want to get that list and then I would want to display at least something on the

screen.

So we're going to go with people map.

So we're iterating over my people already online.

I would want access to things.

I'll call the object person.

And then also I'd want to have a person index which is coming with my method.

And then of course, I would want the structure properties from the person gyne.

If you want to double check the properties, just navigate to that address.

In my case, I already know that I'm looking for any looking for image, name and then title as well

as the quote that is equal to my person.

Now, as far as your turn, yes, there's going to be more functionality.

You'll hear more more stuff coming up, more here.

But for now, I would want to go with our turn and then we're going to go with article like so and we

might as well add a key here.

So I'm going to go with key is equal to my party.

And instead of this article, I would want to go with IMG.

Now, that, of course, will be equal to the property that I've structured in my case.

Here's an image than for the alternative.

I'm going to go with name and we should see a massive image on the screen.

So the problem here is that I did not add person IMG class once we do that and of course our image is

more beautiful, so at least we have something on screen and then right next to the image when I guess

right after the image, I'm going to go with Nimir here.

I want to say that inside of the hearing for I would want to display the name and on what is happening

right now, we have a bunch of names.

And the reason is because with this, we are at the moment placing them one on top of other.

And that is something that we're going to cover in the next video.

So don't freak out.

That is on purpose because I have commented out some success just because I would want you to understand

the general idea.

Just keep on writing the return with me and you'll understand everything.

And a second.

So in here where we have the paragraph, I'm going to go with class name and that will be equal to my

title like.

So, um, inside of the paragraph I will look for my title properly, of course.

And then what else I would want is of course the quote.

So let's go here with another paragraph in this case, the class will be taxed and we're looking for

the, quote, property instead.

Now, lastly, let's add that massive icon and the name is, quote, right out of class name here as

well.

And it's going to be an icon and then still within a section center, but not inside of the article

or the iteration over the people.

I would want to set up my buttons and it's not going to be a container.

There's just going to be two buttons, one for Priv and one for next.

I'm going to go with button on a class name.

So for the first one is going to be priv and eventually there will be unclick.

Not for now.

And we're just going to go with the icon name.

We're here and it should end with left.

So that is, of course, her button and now would want to copy and paste and there's going to be a next

button as well, so class name will be next.

Now, I also want to change the icon that have left.

It is going to be all right.

So once we save, this is what we should see.

Now, like I already previously mentioned, because of the success, we have this jibberish look, because

we are placing one item on top of the other one.

OK, so we have first try the next one.

Next one.

Next one.

But we can technically see only one.

And the reason for that is because of the success.

And I did that because in the next video, we are going to cover step by step what success we would

need to add in first place.

And only then we're going to take a look at how we can do that dynamically using the Riak.