All language subtitles for 002 The Starting Project & Your Tasks_en

So as mentioned, this is the project,

the website we're going to build in this section.

And when I say we are going to build it,

I basically mean you are going to build it,

or at least you should try building it first,

because I got a couple of tasks for you

that allow you to practice what you learned.

Though of course, throughout the rest of this section here,

I'm going to build this website here together with you

and you can follow along with me

to see how I'm tackling those tasks

and how I am building this project.

But that being said, let's now take a look at

this starting project I prepared for you

and the tasks you should complete with this project.

So here's the starting project

and you of course find it attached.

You also find a link to Code Sandbox attached

which you can use alternatively

if you don't want to install anything locally.

But I'm of course going to use a local environment

as I always do in this course.

And in this starting project I am providing to you,

you'll find a source folder

with a couple of JavaScript files

and an assets folder with a nested images folder.

Now the only really relevant file for us is the App.js file.

In that file here, you'll already find some code

and you'll also already find a react component in there.

Now this component

and this overall app is not finished though.

Instead here in this component I got a header,

where I output an image and the image is actually imported

like this from the assets folder.

This is an import syntax you can use in React projects.

It is supported by the underlying development server

and build process,

and this is how you can use images which are stored

in this assets images folder here in your component files.

You simply import them, assign any name of your choice

to them, and then you use them as a dynamic source value.

But that's already in this file of course.

What's not in this file or what's at least not finished

right now is information about some of those

React key concepts you should be aware of.

Though I will say that this is just a demo website,

just an exercise.

And this is not an exhaustive list

of all key React concepts.

Instead, you're going to learn about more React concepts

throughout this course.

But anyways here we got an array full of objects

and down here the goal is to output the information

that's contained in those objects in this array.

But at the moment that's not happening.

And that's where your tasks start.

The first task is to output those key concepts,

so that key concepts data.

This data which you find in this area should be output here

on the screen.

And of course with that, I don't mean that you should copy

and paste the text.

Instead, you should find a different way

of outputting that data, but that's only the first task.

The second task then is to identify possible components

you could create, possible JSX code snippets

you could outsource into a separate component.

For that you should analyze this JSX code

in the app component and come up with possible components

this code could be split up into.

Now of course identifying possible components

isn't everything though.

Instead then as a last task in this section here,

you should then also create and use those custom components.

So you should create new components.

Also use props if you need to use them.

And of course once you went through all these steps

and once you have a working solution,

definitely also take a look at the remaining lectures

in this section because there I will walk you through

my solution, repeat some core component

and React concepts you must know,

and of course also let you know why I chose this solution

and why I perform certain steps.

Now in case you're getting stuck whilst trying this

on your own, also take a look at the next lecture,

so the lecture after this one here,

because that will be a hints lecture where

I give you some hints on how to tackle this

and where idea four can hopefully help you

come up with a solution.

And with that, good luck and I'll see you in my solution.