All language subtitles for 004 Outputting Key Concepts Data_en

So let's now solve these tasks.

And for that, of course, we're going to start

with the first task where we output the key concepts data.

Now, the data is already here

in app js in this concepts array.

And now, the goal is to output that data down there.

And if you take a look at this unordered list here

where the concept data should be output,

you can see that I already got one list item there,

but at the moment, it only contains dummy content here,

only dummy data.

That now needs to be replaced

with the actual data from these objects.

And as I mentioned,

the goal is now not to copy and paste that data,

but instead to dynamically access the data

in that concepts array.

And in React, you can do that

by using single curly braces,

as you learned opening and closing single curly braces.

Between those curly braces,

you can put any JavaScript expression that yields a value.

You could, for example, put one plus one in here.

But, of course, that's not the goal here.

Instead, here for the image, I want to refer

to this image or precisely to the value stored

under the image key in this first object in this array.

So, this value stored under this image key

in the first object of this array.

To output that image here, we can go to this source here.

So, between those curly braces,

reference this Concepts array by its name.

And then, since it's an array,

and I want to access the first element in there,

I can use square brackets zero

which does access the first element in that array.

And that first element will be this object here.

And then, this object I now want to get access

to that value that's stored under the key image.

So therefore, we can use the dot notation here

and access image like this.

And this will output the image here.

Now, I also want to set the alt text dynamically,

and I wanna set this to the title of this concept.

And therefore, here we again need curly braces

to dynamically output some content here.

And then, we use concepts again,

square bracket zero,

because we're still working on the same Concepts object.

And then, dot title gives us access to the title.

And that's actually also exactly the code

I need down here to output the title as text.

So, between those H2 tags.

And then, here, for the paragraph

where I want to output the description

I want to access Concepts, zero description.

With that, we should be outputting data

about the first key concept in that Concepts array.

Now, to see this in action here on my local machine,

I need to start this development server,

which in Visual Studio Code can be done

by opening a new terminal and running NPM start.

Though, for this to succeed, I first must run NPM install

to install all those extra dependencies

including that build process that's used behind the scenes.

And you only need to do this once

as you learned when you initially set up a project.

And thereafter, we can run NPM start,

and this will now start that development server.

And then, once I visit local host 3000

I can indeed see this key concept here on the screen.

It's quite big for me here,

because I zoomed in quite a bit,

so that you can see it really well as well.

And I got a light hover effect here,

but clicking doesn't actually do anything here.

It's just a visual effect.

But, this is now the first key concept being output here.

It's not the only key concept we got though.

Instead, if we take a look here at this Concepts array,

we of course got two more objects in there.

And the goal, of course, is to also output those concepts.

And therefore, what we can do for now,

and what will change later is

that we copy and paste this list item.

And now, access Concepts one image,

Concepts one title also here

and also Concepts one description.

And this will access the second element

in this Concepts array.

And then, access image, title

and description for that second element.

And, of course,

we can then also repeat this one last time here

for the third element

where we dare for access Concepts two image,

Concepts two title also here

and Concepts two description.

And with that, we'll be outputting all three concepts

for the moment simply by copy and pasting this code.

But, that of course will change soon.

If you save that though,

and you got that development server up and running,

you will now see these three key concepts on the screen.

And that, theoretically is of course

already the final solution.

It's the final website we want to build here,

but it's not the final solution for those tasks I gave you.

It's only the solution for the first task,

because whilst we got a working solution

we don't have the best possible working solution.

Instead, the next task is to identify possible components

before we then also build and use those components.