Use this text to do a html tutorial.  in this section we're gonna explore

three Core Concepts of building react

apps components props and jsx

so we'll learn how components are the

building blocks of react applications

and how to create and reuse them using

the powerful jsx syntax

we're also going to share data between

components using props and learn about

rendering lists conditional rendering

and more all while building this first

beautiful project

along the way you will start practicing

react on your own by building a

developer profile card using these

fundamental skills now okay so let's go

start this react Journey right now

[Music]

welcome to the pizza menu project that

we're going to build throughout this

section and in this lecture I actually

want to start to build this project from

complete scratch

and with complete scratch I mean that we

are going to delete all of these files

that we have here that we don't really

need and start a project from scratch as

I just said

so let's close this one and this one and

even the index.html which we will not

delete and recreate but all of these

feel free to ignore them and to delete

them so delete

and let's start from scratch

so here we have our first error and

notice that I placed the browser here on

one side and our code editor on the left

side so that we can always see the

output at the same time so you see that

our application is kind of looking for

this file right here but of course it

doesn't exist anymore because we just

deleted it

so let's start from scratch

and we're going to create our first file

inside of this folder and it's going to

be called

index.js and it really needs to be

called index.js because webpack which is

the module bundler in this project

expects the entry points to be called

index.js

all right but anyway let's now start by

from react and again this is just simple

JavaScript here so importing modules is

part of JavaScript and specifically

since es6

then let's also import

react Dom

from

react Dash Dom

slash client

all right and as I keep saving somehow

it keeps moving the file here but never

mind

so we just imported these two libraries

and again remember how we imported

basically this exact two same libraries

in the pure react lecture and in fact I

want to open up that file here so that

we can compare it so open

and then on the desktop pure react then

index.html

and so remember here we import it also

react and react Dom using these script

tags but again here these were installed

using npm and here we are now importing

them into our project using the import

syntax which is coming directly from

JavaScript next up let's actually create

our app component again

so function app and it wouldn't have to

be called app this is just a convention

right what is necessary is that this

component starts with an uppercase here

so now let's return here

again the same thing that we returned

before which is just

hello react

and now all we need to do is to render

this to the Dom and so once again this

is going to be similar to what we did

here

so we could even copy paste all of this

here into our app that we already have

but let's write it by hand so of course

in the future we will not be writing all

of this by hand but at least once I want

you to write all of this by hand so that

you actually know what is going on here

all right

so let's now create a so-called root

and for that we use the react Dom

library on which there is a create root

method and so now we select

this root element or well not here of

course but in our public folder

so here we have all this stuff like this

strange URL here and again webpack will

take care of all of this like it will

replace this URL right there

but what we're looking for here is this

div with this ID so ID root so we are

going to select this element so that

react can render our application inside

of this div

okay and then let's do root dot render

and we could also have written it all in

one line so without storing this here as

an intermediary variable but like this

it's a bit cleaner

okay and then here we place our app give

it a save and there it is

hello react which is or a nice app

component right here

so this is how we write react from

scratch basically

now I just want to draw your attention

that this is the way that we render the

root so that we basically render our app

in the Dom in react version 18.

so react version 18 but if you're seeing

an older code base that is before react

18 this worked in a different way so it

looked a little bit different so let's

just exemplify that here and you don't

need to write

a Discord here I just want to quickly

show it to you so before react 18 we

would simply do

react

dot render and then place the app in

there

all right and another change that we

would have to do is to get rid of this

so this would be a react 17 app but with

these changes so with having react Dom

slash client and with rendering this way

we made our app ready for react 18. so

we can now comment this one out and I

will just leave it here as a reference

now just one final thing that I want to

talk about here is strict mode

so we can simply activate strict mode by

instead of directly rendering the app

component as a root component wrapping

this here into a strict mode component

so let's write

dot strict mode and so this spec mode is

basically a component that is part of

react and that we can take from react

and so you see that automatically vs

code then closes this component

so let's copy or cut this from here and

place it here give it a save and so the

app is now wrapped inside of this strict

mode and strict mode is really not a big

deal the only thing that it does is that

during development it will render or

component twice in order to find certain

bugs and also react will check if we're

using outdated parts of the react API so

strict mode is nothing groundbreaking

but it's still a good idea to always

activate it when we develop react

applications

from now on you will start coding on

your own computer and it's pretty much

guaranteed that errors will happen and

that some things simply won't work and

so right off the bat I want to show you

a few techniques for dealing with these

errors and problems so this is a really

important lecture so please don't skip

it

so let's say that you're doing some

change here in your code and save it and

then you want to see the output but

imagine that for some reason your page

didn't update here

so what do you do so when that happens

don't panic but instead try out a few

Solutions which I will tell you now and

the first one is to make sure that the

application is actually running and

believe me or not this has actually

happened to me before so I thought the

app should be running and I was doing

some updates to the code changing

something and I was wondering why the

app was not reloading then at some point

I noticed that while I actually hadn't

even started the app so this is actually

something that can happen so if you

don't have the app running of course so

if you didn't use npm start like I

showed you earlier then well of course

your app cannot reload in the browser

but if you're sure that it is actually

running but still not updating then one

solution can be to stop the app and

restart it

so here is the tab in the terminal where

I currently have the app running and so

in order to stop it we use Ctrl C

so on a Mac that's Ctrl C and on Windows

it's also just Ctrl C then on Windows I

think it might ask you if you actually

want to stop and then you can just type

Y and hit enter so with this you have it

stopped and then you can restart so

that's then again npm

start

which would then open up a new tab

and yeah there we go and so

and if I change something now then it

should be reflected immediately

so there it is and actually it's more

common than you might think that you

have to do these kinds of things and

that's why I really wanted to include

this lecture early on and what's also

pretty common is that sometimes all you

have to do is to do a hard reload here

in the browser so just click this

reloading button because this automatic

reload so the hot module replacement

actually breaks all the time for some

reason and so then one of the solutions

is to just hard reload the browser now

another good tip that I can give you is

to always keep the terminal open here at

all times and the same here for the dev

tools

in the browser well it's not

so inspecting

and then here that's a bit too big

yeah then here having the console open

also there's something called the react

Dev tools but we will talk about that a

little bit later

so it's good to keep these open because

then in case there are some unexpected

errors they will show up here in this

console and also down here and also if

your app is open you can always be sure

that the app is running

you can just maybe make it a little bit

smaller because well the window here is

so small already otherwise we almost

can't see our code

now I was talking about error messages

before and so sometimes these appear

when you do something wrong so create

react app actually has some internal

thing which will automatically display

errors right here on top so like on top

on the window and also all of here let

me show that to you

so I will just write something here

which will create an error and so indeed

we have the error here

well actually not here but sometimes

important errors do pop up here but we

have this overlay over the entire app

which gives us this error message and so

it's a good idea to then take a look at

this error message and maybe try to

understand what exactly went wrong

so usually this first part here is not

really important but then here it tells

us a Json jsx elements must be wrapped

in an enclosing tag did you want a jsx

fragment

and maybe if you don't really understand

this you can just take this copy open

your new tab and Google it and so this

is now the power of react huge Community

because hundreds if not thousands of

people before you have had the same

problem and have Googled it or have like

asked a question on stack Overflow and

so you will find your answer there

so this one is a little bit older I saw

earlier some 20

16 yeah so you should usually find

something a bit more recent like this

one here from 2020

but yeah so here we are not trying to

solve a specific problem I was just

mentioning that it's many times a good

idea to Google these error messages

right here

so in this case it's really not allowed

to return more than one element

so here we are returning the H1 and the

p and that's not allowed in react

so just delete that and then the error

will disappear

another important tip is to always work

with eslint so eslint is enabled by

default

for example if you do this like const x

equals

Jonas and give it a save then

immediately you get this warning here so

then you can hover and it will warn you

that X is declared but its value is

never red and this is just one of

countless examples and situations in

which yes Lind can warn you that you're

about to do something that you're not

supposed to because if you have a

variable that you're not using it means

that probably somewhere else you

declared the wrong variable that you

actually didn't want to

right

and by the way these problems they also

appear down here in this problems tab so

this is also very useful down here so

whenever you have some issue like this

so these yellow lines under some of your

code you should probably check out

what's going on there

now talking here about this tabs down

here sometimes the prettier extension

stops working for some reason and when

that happens it's a good idea to come

here to this output Tab and then here

you can select one of these processes

that is running inside your vs code

for example as I was saying prettier

so here it looks as if everything is

working fine but sometimes it will show

you an error here and then you can try

to fix that and the same is true for

eslint

so if you notice that eslint for some

reason stopped working you can come here

so this here even looks as though there

is some problem

there's an error here but well it still

works

so yeah we don't need to worry about

that in this case

okay but let's come back to our terminal

which is the one that we want open most

of the time

so if everything looks correct in your

code and if you did everything that I

told you but still your code is not

working it probably means that you have

some bug in your code because it is

different than the one that I'm showing

you in the video and so in that case the

best thing to do is to open up the final

code for each of the projects so the one

that we downloaded in the beginning and

then simply try to compare that with my

code and doing so should then enable you

to find the bug that you have in your

code

and speaking of bugs actually uh I

introduced a bug here in this render

part here

so the way that we rendered before react

18 remember is this react.render but

nowhere we are telling here where to

render the app component and so again we

need to select that root element and

actually place that here as a second

argument

so just to fix this here but again you

are not going to write this yourself but

maybe you will work on an older code

base at some point which uses an older

version of react and so then this is how

that project will render the root

element into your application

and by the way you can see which react

version you're using

right here in the dependencies array and

so in this case we are using react 18.2

or at least I am so if you're watching

this far in the future then probably

some other version has already come out

but all of this what we're talking about

here will of course apply to probably

most of the future versions

and that's actually it so that's the

list of tips that I have for you for

dealing with problems that will sooner

or later arrive as you start writing

your own react applications and even

while you follow this course

foreign

so as I have mentioned a few times

already react is all about components

but now let's formally learn what react

components are and why they are so

important

so components are the most fundamental

Concept in react simply because react

applications are in fact entirely made

out of components so when you look at

any react app there's nothing that is

not a component or at least not inside

of some component

therefore I like to say that components

are the building blocks of any user

interface in react

in fact basically all react does is to

take components and draw them onto a web

page so onto a user interface or UI for

short

now that sounds simple but it's actually

the main job of react

in more technical terms react renders a

view for each component and all these

views together make up the user

interface

so we can also think of a component as

being a piece of the user interface

now one key property of components is

that each component has its own data

JavaScript logic and appearance

so basically each component describes

how it works and what it looks like

which makes them such a great way of

building user interfaces and speaking of

building user interfaces based on what

we have just learned it makes sense that

in react we build complex uis like this

one by building multiple components and

then combining these components like

Lego pieces

so here we can identify components like

a video player a menu this questions

list and also this part where we can

refine the displayed questions

so those are like the big components but

we can identify many other smaller

components in this UI as well like for

example these filters right here and

what you can see is that this filter is

inside the refine questions component

right so actually one thing that we do

all the time is to place components

inside of other components or in other

words we Nest components inside each

other

so nesting components is a key aspect of

using components in react along with

component reusability

now notice how we have three similar

questions in the questions list and so

we can create one question component and

then reuse it three times here

now of course the data for each of them

is different but we can easily pass

different data into different question

components by using something called

props which we're going to talk about

later

so whenever we need some duplication in

our UI we create a new component and

reuse it as many times as necessary

so as you can see one crucial skill that

you will learn throughout this course is

how to break a design like this into its

components

now one thing that helps with that and

with analyzing the components that we

create is a component tree like this one

so this shows the hierarchy that exists

between the components that make up the

user interface and it makes it really

easy to understand how all of these

components are nested inside each other

and really how they relate to one

another we can also clearly see

relationships between components like

the refine questions being the parent

component of filters or the other way

around that filters is a child component

of refine questions

and we use these terms so parent and

child component all the time in react

and so it's important to understand what

they mean and so a component tree like

this is perfect to understand these

kinds of relationships between

and I think that this is all you need to

know about components for now we will go

really deep into some important Concepts

like reusability later but for now let's

start to put some of these Concepts into

practice

let's continue building or application

by creating a brand new component and by

taking a first look at reusability

but first let's get the starter files

for this project

from the files that we downloaded from

GitHub

so right here in the starter folder take

these three copy

and then go into your project folder and

I will copy them for now here into the

public folder

so we have this folder of pizza images

we have this starter data and this

index.css which we should probably move

into

this Source folder so make sure that you

have these two files here after

including the starter files

and now let's come back here

and let's create that brand new

component that I was talking about

so in react we write new components

using functions

so function and I'm calling this one

pizza because it will contain some data

about a pizza

and then here for now we have no

parameters to this function

and then the function body

now in react there are two important

rules when we write components as

functions first the function name needs

to start with an uppercase letter like

this and second the function needs to

return some markup

so usually in the form of jsx but we

can't even return nothing

like returning null but here let's just

return some H2 element for example

and then let's just write pizza so give

it a save but of course nothing will

appear here in the user interface and

that's because we're not including this

new component anywhere and even eslint

is warning us about that here so this

yellow line which says Pizza is defined

but never used so again we're not

including this pizza component into or

app component which is the component

that is currently being rendered on the

screen

so we can use our component here

just like this

so pizza and then we immediately close

the elements

like this

this however will give us an error

so right here which we already saw

before and the reason for this error is

that each component can only return

exactly one element not two elements as

we have here

so let's wrap this here into a div and

sometimes it can become a bit annoying

that vs code automatically closes these

elements for us

but

anyway now we get our pizza in the UI

and so that's because we now nested this

pizza component inside this app

component

and with nesting I mean that we

basically used or called this component

here inside app

what's very very important to notice is

that by nesting we do not mean that we

write the function inside this other

function

so what we should never do is to Nest

the component declaration itself

so like this this still works actually

but it's a very very bad idea for

reasons that we will learn about later

so never Nest the function declarations

but always declare all your components

in the top level

so just like this so again when we say

nesting components what we mean is that

we call so we include one component into

another like this

now okay so let's now make this pizza

component here just a little bit more

interesting and for that we are going to

use our starter data here so let's open

up data.js and all we need is for is to

select everything

then copy it and then let's just paste

it here

okay

so as you see right now we are doing all

the development of this application in

one big file while in the real world we

divide our code into modules and then

include these modules into one another

but here I just want to keep it simple

so we're not going to do that yet

so actually we can then delete this

data.js

and close this down

so for now we will simply use this here

as an example so I will now copy paste

let's say

this pizza here

and use that here

as the name and then let's also grab the

ingredients

so let's just copy and paste all of this

text

and notice that I'm really only

interested in the text we don't need of

course these quotes because again this

is just like writing HTML and there you

also don't need quotes right

so here let's create a paragraph

and then immediately you see we get this

red underline here which is because

again we are trying to return two

elements here which is not allowed

okay so here what I like to do

is to then move up this line here using

a shortcut so let's see what that is for

you so it's this move line up so you

should probably get used to this

shortcut and this one so where we move

lines up and down

so like this for example so that's very

very helpful and we're going to do that

all the time we just need to get rid of

this semicolon that we have here which

was right there

okay so we have some text now let's also

actually use this image that we have in

the public folder

so

yeah this one right here

so remember I mentioned in the beginning

that all the assets of the app will go

into this public folder because webpack

so the module bundler will then

basically automatically get them from

and so we can now write an image here so

again just like HTML

and then if we write a path to the image

spinachi Dot jpeg

then webpack will automatically get that

here from this folder and let's see if

that works and indeed there goes our

image

now we get these yellow underline here

and that's because an eslin rule which

says that images always should have an

ALT prop

so let's just add that here

so to make it a little bit more

accessible

let's just

put the name of the pizza here and then

eslint is happy

so we have this component here and now

let's talk about the idea of reusing

this component

and for now all we're going to do to

reuse this component is to basically use

it several times

so let's do three times

just so you can see that now this piece

of UI which is the pizza component will

be included three times

so three times this delicious spinach

pizza

nice now of course the data here in all

of them is now the same because we

didn't customize that data yet but we

will do that later of course when we

talk about props for now I just want you

to get this really important concept

that we can call each piece of the UI or

in other words each component multiple

times here in order to reuse it and

that's a fundamental concept of writing

react applications

now just one final thing here and this

has nothing to do with code is that

maybe you have noticed that we get all

these colored lines here in the sidebar

and even down here now the reason for

this is that when we create a new

project with create react app it will

actually automatically set up this

project as a GitHub repo

that's why you also get all these

different colors here

and also here you see all the changes

that we have made to the different files

so here we deleted some stuff we

modified some stuff and here these

images are still untracked

now since we're not really going to use

GitHub as we build these small projects

I actually just want to remove these

colored lines here from the gutter so

from this place and for that we can

go to our settings and then just search

decorations

so here the default is all so let's set

it to none

and so then or editor will look just a

little bit cleaner here

and we can close down the sidebar and

with this we finish this lecture and are

we have written some pieces of jsx in

this course already but what actually is

jsx and why is it such a big deal in

well when we first talked about

components we talked about how a

component contains its own data logic

and appearance and that makes sense

right because if a component is a piece

of the user interface it means that we

must be able to describe exactly what

that component looks like and so that's

where jsx comes into play

so jsx is a declarative syntax that we

use to describe what components look

like and how they work based on their

data and logic so it's all about the

component's appearance

in practice this means that each

component must return one block of jsx

which react will then use to render the

component on the UI

now looking at this code this jsx looks

a lot like HTML right but in fact jsx is

an extension of JavaScript which allows

us to combine parts of HTML CSS and

JavaScript all into one block of code

so basically we can write HTML and embed

some pieces of JavaScript where

necessary for example to reference some

JavaScript variables and we can even

reference other react components so that

we can then combine nest and reuse

multiple components but now you might be

thinking if react is a JavaScript

framework then how will it understand

this HTML looking code

well remember that jsx is just an

extension of JavaScript which means that

there is a simple way of converting jsx

to JavaScript

this is done by a tool called Babel

which was automatically included in our

application by create react app

and the result of this conversion looks

something like this code on the right

where each jsx element was converted to

a react dot create element function call

and does this look familiar

well I hope it does because this is

exactly what we returned from the app

component in the pure react lecture so

in that lecture where we couldn't use

jsx because we didn't have that Babel

tool

but anyway this conversion is necessary

because browsers of course do not

understand jsx they only understand HTML

so behind the scenes all the jsx that we

write is converted into many

nestedreact.createelement function calls

and these function calls are what in the

end create the HTML elements that we see

on the screen

now what this means is that we could

actually use react without jsx at all so

we could just manually write these

create element functions instead of jsx

but that doesn't look like a lot of fun

it also makes the code really hard to

read and to understand and so actually

everyone just uses jsx

all right so now that we know what jsx

is all about let's go back to that first

paragraph where I say that jsx is a

declarative syntax so what does it

actually mean that jsx is declarative

well before we can understand what

declarative means we first have to

review what imperative means

so when we try to build uis using

vanilla JavaScript we will by default

use an imperative approach

this means that we manually select

elements Traverse the Dom and attach

event handlers to elements then each

time something happens in the app like a

click on a button we give the browser a

step-by-step instructions on how to

mutate those Dom elements until we read

the desired updated UI

so in the imperative approach we

basically tell the browser exactly how

to do things however doing this in a

complex app is completely unfeasible for

all the reasons that we have learned

about before

and remember that that's the reason why

Frameworks like react exist in the first

place and it's why react chose to use a

declarative approach to building user

interfaces

so a declarative approach is to Simply

describe what the UI should look like at

all times always based on the current

data that's in the component and we will

soon learn that this data is props and

State

and so again basically we use jsx to

describe the UI based on props and state

so the data that's currently in the

and all that happens without any Dom

manipulation at all so there are no

query selectors no ad event listeners no

class list no text content properties

anywhere to be seen here because in fact

react is basically a huge abstraction

away from the Dom so that we developers

never have to touch the Dom directly

instead we think of the UI as a

reflection of the current data and let

react automatically synchronize the UI

with that data

so in essence the difference between

imperative and declarative is that in

the declarative approach we use jsx to

tell react what we want to see on the

screen but not how to achieve it step by

step react can figure that out on its

own basically and this has many many

advantages as we will see throughout the

course

so with our new knowledge about jsx

let's now create a couple more

components to keep building or

application

but before we do that this is probably

the perfect time to show you the

application as it will look like after

we are finished with this section

so basically we have this header here

with the name of a pizzeria

then down here we have the menu and then

basically here we have some kind of

footer letting the user know that the

restaurant is currently open and this

button which of course doesn't do

anything once we click it

so here is like the heart of this

application which is the display of

these six pizzas and notice how we

already kind of displayed this pizza

here and so here you see that we are

going to reuse this pizza component

sixth time in order to print these six

pizzas

all right but now what I want to do in

this lecture is to basically focus more

on these bigger layout components

so let's create one component for each

so one for the header

so a component called header and we can

leave this empty for now

we are just building out here the

structure

and then one

for the footer

and here I'm always missing the

parenthesis

yeah nice

and just by the way we could of course

also write these functions as function

expressions and arrow functions so we

could also do const let's just call it

test equal

function like this or even simpler it

could be an arrow function

so if you prefer these types of

functions feel free to use those but I

always like to use the regular function

keywords

as I have been using but anyway let's

now return something from here

and so here is where we write that name

of the restaurant which is

fast react

Pizza

company

all right and here we can now use this

component instead of this H1

and again we include it here

as if it was just any other HTML element

and so that's the beauty of jsx

so it changed to fast react Pizza code

right here now and let's next up create

a footer

and here let's actually play around a

little bit with jsx and with create

element so using the knowledge that we

gained in the previous lecture let's

instead of immediately returning the jsx

return a create element call

dot create element

just so you can see how bad it would be

to write components this way without jsx

so we want to return an HTML node so an

HTML element named footer then here the

second argument is null because it is

for props that in here is the child

element

so here we just want some text

Interiors must actually be a string now

were

currently

open

and now of course we need to then use

so that's footer close it immediately

and

and let's check it out down here

yeah there is our footer we can see that

also here

at least if we had some space

yeah so inner body we have of course or

root where the entire application is

rendered then we have this div right

here which is this one

so coming from the app component and

then we have here the H1 which is this

one here

and then these three divs each for one

pizza and finally the footer that we

just created

so of course here in the actual HTML we

will no longer see the name of our

components right because once react

renders everything into the Dom it only

renders the H1 element itself so the Dom

doesn't know that this H1 is actually

coming from this header component and

that these divs for example are actually

coming from a pizza component this

webpage that is now being rendered here

has no idea about any of that

okay but anyway going back here to our

footer let's now just comment this out

and then return what we actually want to

return

which is for now actually the same but

so we're currently open

and now let's actually enter JavaScript

mode here

why not just to do some JavaScript in

here and let's just display the current

time we actually did that before so just

create a new date and then dot to local

and so down here

we see that right now it's this time

we're currently open

nice so this is the power of being able

to combine JavaScript basically right

into the HTML so just as we learned in

the previous lecture

now finally we have the menu here and

what do we want in a menu

well let's start by adding an H2 here

just saying our menu and then let's

actually place our pizzas here

so these pizzas should actually be part

of the menu

you can just write pizza but then of

course react is not going to be happy

about that because remember

each time that we write one piece of jsx

that jsx can only have

so let's remove all the pizzas

so I'm cutting them

and place them here

and now they are gone from here because

so let's quickly do that

and there we go

so we have the same result as before but

now our components are even more nested

so all of this here is the app component

and then inside the app we have the menu

component nested into it and then inside

the menu we have these four Peta

components and so now you really start

to see this idea that we built complex

user interfaces by combining small

components into bigger ones so we have

these really small pizza components then

we combine a couple of them into one

slightly bigger component which is the

menu which we then combine with header

and footer to create the overall big app

let's now take a quick first look at

writing logic inside of react components

now we have already written some

JavaScript logic before but we always

did it just inside the jsx that is

returned

so just like here right but since

components are just JavaScript functions

we can of course do any JavaScript in

them that we want and that code is then

simply executed as soon as the function

is called so as soon as the component is

initialized

so for example here

we can create any new variable that we

want

and here I will again create a new date

and then let's say

get

hours and then we can lock that to the

console and now we're going to use that

snippet for the first time that we set

up earlier

so here we can just write CL

ick enter and then

our

so let's check out our console and so

here yeah we have the number nine so

that's currently the hour

and now what I want to do here is to

basically display an alert in the app

whether the restaurant is currently open

so let's define a few more variables for

that

so open our so let's say that the

pizzeria actually opens at 12 pm and

closes at 10 pm

so that's a 12 and 22. for the close

hour

So Close Our equals 22.

and so now again we can use any

JavaScript in here so let's just write a

simple if else statement

saying

that if the hour is greater or equal

the open hour and

the hour is less or equal

work currently

so alert is just a built-in JavaScript

so that you should be familiar with

maybe we'll just use this here as a

demonstration that we can write some

simple JavaScript in here

so alert

sorry

closed

and here we need some double quotes

and here we have some bug so probably

JavaScript wants us to include the semi

colon here

and there it is

so sorry we are closed and that's

because right now it is nine in the

morning

and you saw that it happened here twice

and that's because of the strict mode

that I was telling you before so in

strict mode our components are usually

rendered twice and so that's why we got

that alert twice as well

now if we change the open hour here

let's say to 8 and re-render

then it says we are currently open

all right now this alert function is

actually blocking JavaScript and so

that's why it runs in the beginning but

nothing else happens

and so of course this is really not

ideal and we wouldn't use this in a real

app but this was just a short demo here

anyway

so let's just comment all of this out

and just to use this code here because

it will actually become useful later

let's create a variable here called is

and so that will then simply become a

true or false value depending on whether

this condition is true or false

yeah that's better and you see that

right now it's open

set that back to to wealth

at this point we have used jsx to

describe the appearance of some

components and we have also used some

JavaScript inside of them and so now

that we have a tiny bit of experience in

writing components I want to take a

minute and go back to the fact that jsx

combines HTML CSS and JavaScript into

one single block of code because you

might be wondering why did react come up

with this idea in the first place

so why not just keep HTML CSS and

JavaScript in separate places like we

have always done before

and this might sound like a trivial

question something you think is not

really relevant at all but it's actually

deeply relevant to understand why react

was completely designed around

and let's understand this topic from the

very beginning so from the rise of

interactive single page applications

so before single page apps we always had

one file for HTML one for JavaScript and

one for CSS so basically one technology

per file that was our traditional

separation of concerns and I'm pretty

sure that just like me this is how you

first learned web development however as

Pages got more and more interactive they

became single page applications where

the JavaScript started to determine the

user interface and the content in

general

or in other words JavaScript became more

and more in charge of the HTML and we

can see that here in this really small

code example where the content and the

presentation of these HTML elements are

really completely determined by the

JavaScript code they are in fact tightly

coupled together

so the HTML doesn't even make sense

without the JavaScript here

now the details of this code are really

not important so if you can't read this

code that's no problem at all my point

here is that if the JavaScript is in

charge of the HTML anyway so if the

logic and the UI are so tightly coupled

together then why should we keep them

separated in these different files and

in different code blocks

well the answer to that question is what

gave us react components and jsx

so the fact that logic and UI are so

coupled in modern web applications is

really the reason why a react component

contains the data the logic and the

appearance of one piece of the UI

in fact it's the fundamental reason why

react is all about components and the

same is actually also true for most

other modern front-end Frameworks

now returning to some code in this react

example we can see how JavaScript and

HTML markup live very happily together

in this one single component

so this component has some JavaScript

logic it has jsx and then inside that

jsx there is yet another block of

JavaScript which in turns has even more

jsx inside of it

so everything is mixed together but it

all still works really well so content

and logic are tightly coupled together

and so it makes sense that they are

co-located here and co-located simply

means that things that change together

should be located as close as possible

together

and in the case of react apps that means

that instead of one technology per file

we have one component profile so one

component that contains data logic and

appearance all mixed together

now when react and jsx first came out a

long time ago many many people just

hated the way that jsx looks like and

they hated that we are throwing

separations of concerns out of the

window

but actually are we really is there

really no separation of concerns in

well I think that the people who say

that react has no separation of concerns

got it all wrong because react does

actually have separation of concerns

it's just not one concern per file as we

had traditionally but one concern per

so each component is in fact only

concerned with one piece of the UI

then within each of these components of

course we still have the three concerns

of HTML CSS in JavaScript all mixed up

as we have been discussing

so compared to the traditional

separation of concerns this is a

completely new paradigm that many people

were really not used to in the beginning

but now many years later we all got used

to this and it works just great so

having all the information about a

certain component in one single place

really does work in an amazing way

all right so this was a long lecture

longer than I had expected just to

arrive at this conclusion that react

does actually have separation of

concerns just a different separation of

concerns but I still hope that you liked

the way how we arrived at that

conclusion over the course of this video

because hopefully this gave you a lot of

so at this point we know that react

components can also contain CSS Styles

and so let's now learn about some simple

ways of applying CSS to react

so in react we have many different ways

of styling our components and react

doesn't really care about how we do that

it doesn't have an opinion about styling

and the reason for that is that just as

we learned in the very beginning react

is actually more of a library than a

framework so it doesn't have a preferred

way of how we should style or components

and in the end or applications therefore

we can choose between many different

options for example we can use inline

styling we can use external CSS or even

SAS files we can use CSS modules styled

components or even Tailwind CSS is an

option to style our components now in

this lecture we will not go into all of

these of course but we will talk about

many of them later for now I just want

to use inline CSS and then also later

include an external CSS file

so as you might know in HTML we can

actually Style Elements using the style

attribute

so just

like this and then in HTML we write

those Styles in a string like this

however in jsx that's not how it works

so in jsx we actually need to Define

inline styles using a JavaScript object

so if we need to write a JavaScript

object we first need to enter JavaScript

mode

so that's what the curly braces are for

but then we need another set of curly

braces and so that is again to now

create an object and so here we can now

Define some properties

so let's say we want to style

this text so this H1 text

with a red color

and so now as I give it a save

there it is there it changed

and so with this you have the easiest

way so the most straightforward way to

style components in jsx so simply using

the style attribute that is also

available in HTML now in HTML we

basically never ever use this and that's

because of the separation of concerns

that we talked about in the previous

lecture so where we always had the CSS

in a separate file and never mix

together with the markup but here in

react as we just discovered doing that

is completely fine and natural

so now font size which in CSS you would

write like this right so font Dash size

but in JavaScript that's not a valid

property name and therefore all the CSS

property names have been converted

basically in jsx to this camel case

notation so you need to write font size

let's say 32 pixels and so since we're

writing an object then also this value

now well that didn't change anything

maybe that's already the size let's see

what happens with 48

yeah so now it's a bigger

and let's try another one

text transform and you see that as

always vs code already shows you here

so make sure to always write these

property values then basically here s

strings because again this is in the end

just a JavaScript object and you could

even extract this out here

so just cutting this

let's create a variable here

const Style

and it could be any variable name of

then let's place that here

and it all still looks the same great so

this is the easiest way of adding some

styling to individual components however

when the application gets just a little

bit bigger it can get out of hand and

can be a lot of work to write our Styles

like this so like creating an object for

each of these components it's perfectly

doable but you don't see many people

doing that in the real world

now one thing that we can do is to

actually include an external CSS files

just like we have been doing all the

time in our applications and so that is

the easiest way I would say to style

react applications which is basically

the same as styling any other web page

now in that case we're not really mixing

dcss concern with the JavaScript and

HTML concerns in the way that we learned

in the last lecture but that's of course

not a problem and also we will learn how

to do that a little bit later again

using something called styled components

but for now let's

take a look at the CSS file that we

included here in the very beginning of

this lecture and so this is

well a very pretty standard CSS file

with some classes here and so now we

need to add these class names to the jsx

elements so that these classes then get

applied

so let's go back and before we do any of

that so before we add the classes we

need to First import this CSS file so

right now our application has no way of

knowing that the CSS file exists in the

project

so what we need to do here

is to Simply import that file and so

once again it is actually webpack that

will take care of then taking the Styles

out of the CSS file and injecting them

into our application

so index Dot

CSS

and you see already things changed here

so the background color is different the

font family has changed

yeah for now I think that's all and we

also get this nice yellow border at the

bottom of the page

so you see that immediately webpack

included these Styles now in our

okay but now let's add the classes

so you see that we have one container we

we have menu and we probably have footer

so here let's add the class of container

and let me first do it in the wrong way

so I will just write class as we would

but then react will actually warn us

so you see here invalid Dom property

class did you mean class name and so

this is one of the important rules of

jsx

so in jsx we cannot use class but

instead class name

okay so this is a common beginner

mistake but now you have been warned it

still does work here somehow but we are

really not supposed to use class in jsx

now that's probably because class is

already a reserved keyword in JavaScript

okay but let's keep going here

so again let's add class name here

of header

all right and now this didn't really

change a lot and that's because we still

have this style here applied so we

probably don't want that and so just to

keep this here I will duplicate this one

comment it out and then I will just make

this an empty object

well and that didn't really change a lot

nah and I know why that is it is because

here we are actually supposed to have a

all right and so that class should go

so this is a little bit just of semantic

HTML right here

or let's say a semantic markup where the

header element is a bit better suited

here than Simply Having the H1

and here we have some problem

let's Maybe

so here we have this 12 a rim of width

so that's a bit better even though it's

not perfect yet because of course this

page is very narrow

but never mind we will fix that in a

moment

next up here let's add the class of menu

and again

that's class name and then just a simple

string

so menu and here since we were talking

about semantic markup let's actually use

the main

tag so the main HTML element and then of

course we need to close

it correctly as well

ah beautiful so you see that now we get

next up we have this class name here

so let's see what we get

uh here we have this weird styling

applied to these titles which is not

supposed to be happening

and so let's just make them H3

yep and so here we have the footer

nice

so with this we actually have some

styling applied to our application right

now and as I mentioned we are getting

these Styles now from this external CSS

style sheet which remember we simply

imported here using this import syntax

which will make webpack import the

Styles into our application

then here remember that we used Class

name and not class because class is a

reserved keyword in JavaScript already

and by the way there are a few more jsx

rules like this which we will talk about

a little bit later in this section for

now just notice that these styles that

we included here are Global Styles so

they are not scoped to each particular

component and that's very easy to show

for example we could

add the

header class also here and while that

looks kind of the same let's try

something else

let's add maybe the footer class also to

the header

yeah and again it doesn't change a lot

then of course both of these classes

here so all of these Styles will be

applied to this same element and in the

end to the same component and so again

each component does not really contain

its own Styles but simply uses the

global styles that are in index.css and

this works fine for small apps but we

will also use something called styled

components later in another project and

so then we will have CSS that really

it's time to introduce yet another

fundamental react concept which is props

and props is essentially how we pass

data between components and in

particular from parent components to

child components so we can imagine props

as being like a communication Channel

between a parent and a child component

so in practice what we're going to do is

to now customize each of these pizza

components that we have right here

so remember how we created the pizza

component which has this image the pizza

name and the ingredients but right now

all of the pizzas are the same because

well we didn't have a way of passing

different data into them to make each of

them customized but now as we learn

about props we will be able to do that

so first of all let's

grab or pizza component and cut it from

here and place it right after the menu

just so we can see what's happening

and then let's get rid of this

repetition here for now

so we only want this one pizza component

here for now

okay and so now it's time to pass the

data from this parent component here

which is the menu in this case to the

pizza component so what we want to pass

is basically this string right here

so the link to the image then the name

of the pizza and the ingredients so to

Define props we do it in two steps first

we pass the props into the component and

then second we receive the props in the

component that we pass them into

so here is where we pass those props in

and we write them just like this so just

as if they were normal attributes

Pizza spinachi

that's the first one then

let's also Define a prop for the

ingredient

and by the way prop simply stands for

property it's just a short for

uh yeah property

okay and then finally

let's say the photo or photo name

all right and maybe let's also pass in a

price

and for now I will also pass it as a

string but I will show you something in

a minute

so for now just write it like this give

it a save

and then pretty will format everything

nicely like this and now we need to go

to the Second Step which is to actually

receive the props here inside the child

so right now of course the component has

no way of knowing that these four props

have been passed in

so the way we do that is to accept a

props parameter here in this component

and then for starters let's just lock

this props to the console and take a

look

at what's happening and we already can

see something here

so this props is basically this object

right here in a test name then Pizza

spinachi which is exactly this

so what happened as react included this

pizza component it basically called this

function and passed and this props

object and this props object is made out

of these four props that we passed into

the component

and so now we can use this props object

to replace all of these values here

now we need to take these values out of

the object and therefore we need

JavaScript

right so here this is no longer a string

but we need to enter JavaScript node

again

so Props dot photo name is this one

then here it is the name of the pizza

and again we need JavaScript mode

so Props dot name

so props.name

and finally down here we want props dot

or actually it's ingredient let's fix

that here ingredients and ingredients

down here

okay and of course now everything still

looks the same because the data that we

had here before is exactly the data that

but now let's actually make some magic

happen

so let's create another Pizza component

and then this is where we will see why

props are so useful

so let's create a

let's give it

so tomato let's say also mushrooms and

this is not important here this is just

to show you that we can now fully

customize our components

next we can Define the price

and notice that I'm doing it now in a

different order so here I had first a

photo name then the price and this is

just to show you that the order in which

we pass in the props is completely

irrelevant

so photo name is pizzas slash

fungi dot J Pack

okay and now we need to immediately

close this component just like before

and as I save it

what what happened here and there is our

second pizza component now with

completely different data and so now for

the first time we have reused a

component and configured it in a way

that makes each component unique and

display their own data okay and now

let's just improve this pizza component

here a little bit

so for starters

in or css we actually have a class name

so a class name called

okay and then let's also place these two

here inside their own div so that this

data can be displayed at the site of the

image so just like here in our original

so this is what we're going for

so here we have

a div

and then again I'm using that trick

and this is already looking a lot nicer

let's just finally also add the price

so Props

dot price

but now let's say that we wanted for

some reason to add a number here so we

wanted to increase all the prices by

three let's say but what what happens

when we try this

so all the prices plus three

so what happens is that react or

JavaScript basically simply added the

three here to the end of this number and

the reason for that is that here we pass

these numbers actually in as a string

and we can see that also here in this

output

so we do not want a string here instead

we want a number and so the way we can

achieve that is by entering again

JavaScript mode and so in JavaScript

this is now an actual number

and so Watch What Happens

indeed now we have 13 which is the 10 we

had before Plus 3.

okay then let's do the same thing here

and that fixes this so this is very

important to notice that whenever you

want to pass in something that is not a

string you just use again this

JavaScript mode basically because in

fact you can pass in anything as a prop

so it doesn't have to be a string or a

number you can pass an arrays or objects

or even other react components so Props

is really really powerful and really one

of the most fundamental things in react

and now to review this concept and to go

even a bit further let's move on to the

so now that we already know what props

are and how we use them in practice

let's quickly review them and even learn

some important additional things about

props

so as we just learned we use props in

react to past data from parent

components to child components so

essentially to pass information down the

component tree this means that

essentially we use props to communicate

between parent and child components

therefore props are an essential react

tool to configure and also to customize

so we can imagine props as settings that

we can use to make a parent component

control how its child component should

look like and how it should work

so in that regard props are just like

arguments passed to regular JavaScript

functions

also we can pass anything into

JavaScript functions right and so the

same is actually true for props so we

can pass any type of value as a prop so

we can pass single values arrays objects

functions and even other react

components which is a really powerful

technique that we will explore a bit

so those are the fundamentals of props

in react but now let's go dig a little

bit deeper

but before we do that we need to first

take a step back

so at this point of the course we have

already learned about the component's

appearance and its logic so by writing

both jsx and JavaScript logic inside

now I've also been saying since the

beginning of the course that react

renders a component based on its current

data and that the UI will always be kept

in sync with that data right but now

it's time to get a bit more specific

about what that data actually is

so this data that react uses to render a

component is made out of props and State

and actually there are even more types

of data but what matters for now are

props and State

now state is basically internal

component data that can be updated by

the component's logic so by the

component itself

while props on the other hand is data

that is coming from the parent component

so from the outside basically

so it's the parent component who owns

that data and so therefore it cannot be

modified by the child component instead

props can only be updated by the parent

component itself and this brings us to

one of the few strict rules that react

gives us which is that props are

immutable so they cannot be changed they

are read only and if at any point you

feel like you need to mutate props

actually what you need is State because

state is for data that changes over time

as we will learn soon

but why is that actually why are props

immutable in react

well to start props are just an object

therefore if you change the props object

in your component you would also affect

the parent component because that's just

how objects work in JavaScript so when

you copy an object and mutate the copy

the original object will also be mutated

now if you change an object that is

located outside of the component

function that function has then created

a so-called side effect

so in general a side effect happens

whenever you change some data that's

located outside of the current function

react however is all about pure

functions so functions without side

effects at least when it's about a

component's data

so components have to be pure in terms

of their props and state because this

allows react to optimize your

application and it avoids some strange

bugs that can appear when you manipulate

external data and in fact we can extend

this idea of immutability to react

development in general so a component

should never mutate any data that we

write outside of its function scope like

in this example here

and now to finish it's important to

understand that react uses a so-called

one-way data flow now what does that

have to do with props

well in simple terms one-way data flow

means that in react applications data

can only be passed from parent to child

components which happens by using props

so in other words data can flow from

parents to children but never the

opposite way and therefore we have a

one-way data flow so only from top to

bottom of the component tree

now this may sound obvious to you but

other Frameworks such as angular

actually employ a two-way data flow so

if you know one of those Frameworks

already this might be quite a change for

you

but there is actually a reason or

multiple reasons why react uses a

one-way data flow like this the first is

that it makes applications way more

predictable and way easier to understand

for developers because it is just a lot

easier to understand where the data is

coming from if it only Flows In One

Direction

in a similar vein it makes applications

way easier to debug again because we

have way more control over the data and

we understand exactly how that data

flows around

and finally two-way data binding is

usually less efficient so it's less

performant to implement

okay so that sounds great but you might

be wondering what if I actually wanted

to pass some data for example some State

up to a parent component

well there is actually a very clever way

to do that but as so often we will learn

about that a bit later and actually in

the next section to be specific so it's

not far away

there are just so many moving pieces in

learning a whole Library like react that

of course you can't learn it all at once

but trust me you will get there and then

everything will fall nicely into place

welcome to the very first coding

challenge of this course where you will

now for the first time practice all the

skills that you have already learned in

this course on your own

so the goal of this challenge is to

build a developer profile card just like

this one so we have like an avatar image

here then the name of the developer a

short bio and finally a list of skills

now to actually build this project you

have two options first you can simply

create a new create react app on your

own computer and then build the project

there just like we have been doing in

this section or second you can use the

code Sandbox app that we used for the

very first app that we built in the

course so this is basically an online

editor which makes it very easy to

quickly try out some new small projects

and so this is what I'm actually going

to use to build this challenge

now in case you want to do the same I

advise you to create a new account here

and then once you're done you can simply

create a new react app here so just

click up here to create and then react

and again maybe by the time you're

watching this code sandbox looks

completely different but just find a

button somewhere to create a new react

app or alternatively as I showed you

also before you can simply do react

dot new and this will then also scaffold

a new react app and actually it does use

under the hood also create react app

it's a bit different here in terms of

the file structure but yeah it also

allows us to very quickly build a small

react app now before you actually start

coding I have a few pieces of advice for

you because this probably seems a bit

daunting so building all of this here

from scratch as a complete beginner

might be a bit difficult so let me give

you a few hints

so here I already have basically the app

component and so let's together look at

the structure here

so in this app we return a div with the

class name of cart

and by the way you can get all of these

dials right here from this file which is

available at this URL

so at this starter for this challenge

which of course I will attach to the

lecture on udemy as always so make sure

to check out that link and from there

you can then get this CSS

but anyway going back here what I want

you to do is to create this div which is

the entire card

so basically the container for all this

with this black border

and then in there we have an avatar

component which will be for the image

and then we have this div for the data

then in the data we have the intro which

is for this heading here and for this

bio and then we have here a list of

skills so a component called skill list

and in this skill list you should have

one skill component for each web

development skill that you have and in

order to customize each of these skills

you will use props so just as we learned

previously

so going back here for example I created

one skill for each of these six web dev

skills that I have and so into each of

them I passed the skill itself then the

Emoji here and then also the background

color and this background color is

probably the most challenging part here

so maybe don't worry too much about that

part what matters to me here is that you

pass in the Emoji and the skill name

itself and so basically with that you

can already customize the scale

component pretty nicely now as for the

image you can actually upload the image

so your avatar image or any other image

that you wish right here into code

sandbox so you can just open this public

folder and then drag and drop an image

right into this so this will then upload

the image right into the sandbox and you

can then reference that image just like

we have been doing in our app throughout

this section

okay and I think these instructions

should get you going and in case you

need some more then you can just start

watching my solution that is of course

no problem at all it's really really no

problem if you're not able to do all of

this on your own on your first try so if

you need to watch my solution that's 100

final

now make sure also to read here through

this styles.css because this will then

give you the hints for which class names

you should use for example for the

Avatar image this is the class that you

need

here for the skills list and so on

so please go ahead pause the video now

and then do as much as you can and once

you're done with that I will meet you

back here with my solution and probably

I should leave this one here up on the

screen so you can see what you actually

need to build

so good luck with that and I see you in

okay so how did you do well let's try to

tackle this one together

so I'm creating here a brand new react

app so the one that I actually created

before with react.new and then let's get

rid

of this file here as we will once again

so let's create

the app component right here

and actually just to make it a bit

quicker I will already

copy in the code that I already had

before

so this way we're speeding up the video

so just like this and I will also of

okay and so now let's just create these

additional components

oh

and finally also the

skill list and the skill itself

so again we're going to have one skill

component for each of our web

development skills

and now let's start with the easiest one

so the Avatar is basically just an image

with a source let's leave this one empty

for now

and let's add the altag

with

my name

okay and now let's grab the image and

drag and drop it here so I have it in my

so this will quickly upload the file and

then I can just write here in the source

Jonas Dot J

pack

so if I save this now then let's see if

something happens

well

we have some errors here so let's just

reload this internal browser

that should just fix it and there we go

so this is way too large and that's

simply because I forgot the appropriate

class name here so that's just class

name

Avatar

yeah beautiful

so that's already our first part right

let's just close down yeah just like

which is just some diff here and then

and then here with a paragraph for the

bio

and here I will just

grab it from here

and of course you are hopefully going to

write your own one

give it a save

so that's the next part and now here

comes the hardest part which is the

skill list

so before we tackle the skill list let's

it's a div with the class name of

skill and hopefully you got this one

let's close it and for now let's just

let's here also create a div

and if I'm going a bit too fast for you

it's simply because I don't want this

video to take forever

and I will also explain the important

parts of course

after the code is written

but anyway we see that we already

included our very first skill right here

however if I now copy and paste this

then we have the same problem as we had

before with our pizzas which is that

they are all the same and so now we need

to again reach for props in order to

customize these skills

so into the skills component let's pass

in a prop called skill

so this one

okay and now here just like before we

receive the props object so as an

argument or as a parameter to this

skills component function and so here we

so let's maybe actually create one span

so one element for the skill itself and

then one for the Emoji so here all we

have to do is to now write props

so Props again is that object that react

will automatically pass into the

component when we Define some props on

and so now we have on props prop.skill

and prop dot Emoji because these are the

two props that we passed in right here

so again think of a prop as a

communication Channel between

this skill list component which is

calling so which is including this skill

component and the child component so the

so these two can now basically

communicate by passing in some data

but anyway let's now use this prop so

and then let's use

another span here

four props

so we have the skill but here

of course that cannot work

beautiful

so let's keep going

so let's say skill

HTML

plus CSS

and the Emoji let's say is the same

so also some strong skills right there

and so now indeed we got two different

components here so two skill components

with different data and now let's add

just another skill

what do we have here so we have let's

say svelte then with this baby Emoji

because well I'm not very good at swelt

I just tried it out once for a few hours

all right here we actually need to add

the class name of

skill

list I believe

yeah just then place them nicely side by

side and let's actually just add one

more

just so they wrap onto the next line

all right so we are already almost done

here so the only thing that is missing

and which I told you is not really

mandatory because it is quite confusing

is the background color here

so how do we do the background color

well first of all I will pass in a

string with the name of the color

so let's call that prop color and then

for react the color that I want

while I'm not really sure let's just use

blue

so I could of course also do some

hexadecimal value right here

so HTML CSS let's do

and whilst weld is also kind of Orange

so let's do that

okay so we passed in a color now it's

time to use it here

so what we want to do is to edit here as

a background color

so basically we want to add an

individual style to each of these skill

components and do you remember how we

can do that

well we can just use the style property

or actually the style prop as we now

know it is called

so each of these is called a prop even

here so like even this class name in jsx

and also this style is called a prop

so we enter JavaScript mode and then we

create an object with the property of

background

color

and then here all we do is to use that

prop that we passed in

so that's props Dot

color give it a save and beautiful

so that worked

so maybe you also got this and if you

did then really congratulations this

year was the trickiest part but my main

concern here was actually to get you

riding these components here on your own

and have all of them return some jsx and

then of course apply your new knowledge

about props

so having these two components here

basically communicate with one another

so this is really really important that

you understood what is happening here

just make this a little bit prettier

than to actually this one orange and

this other one orange red and even

though these colors are not perfect

there are at least a bit better than

they were before

all right so hopefully you found this

challenge useful and hopefully it helped

you really to understand this concept of

props here even better and again if for

some reason you weren't able to do all

of this on your own then please really

really don't worry there's plenty of

time to learn all of this stuff

throughout the course and I'm 100 that

by the end of it or even after a few

sections already you will start to get

really good at react

but now let's keep going and keep

learning about some more fundamental

many beginners get quite confused when

they start using jsx in their own code

and in fact jsx can be a bit tricky to

understand and to master but that's why

I am here by your site helping you along

the way and so let's quickly check out

the rules of how jsx works

now there's some general jsx rules and

there are some rules about how jsx is

different from HTML and starting with

the general rules you should know that

jsx works essentially just like HTML so

it has a very similar syntax

however we can enter a JavaScript mode

by using curly braces anywhere in the

markup where a value like text or an

attribute is expected now into this

JavaScript mode we can place any

JavaScript expression so anything that

produces a value so we can reference

variables create arrays or objects we

can Loop over arrays using the map

method or we can use operators like the

ternary operator

what's not allowed are statements so in

jsx you cannot use things like an if

else statement for Loops a switch or any

other statement

now what's super important to understand

is that a piece of jsx produces a

JavaScript expression or in other words

a piece of jsx is just like any other

JavaScript expression and this makes

sense because we already learned that

jsx is simply converted to a create

element function call which is in fact

also an expression

now this fact has two important

implications

first it means that we can place other

pieces of jsx inside the curly braces so

inside the JavaScript node and again

this is only possible because we can put

any JavaScript expression inside those

curly braces and that includes the

Expressions produced by jsx the second

implication of the fact that jsx

produces an expression is that we can

write jsx anywhere inside a component

for example we can assign a piece of jsx

to a variable like in this code snippet

we can also use it inside an if else

statement pass it into functions and

many other things

finally a piece of jsx can only have one

root element so basically one parent

element if you need more than that for

example when you need to return two

elements from a component you can use

something called a react fragment which

we will talk about later

OK and now let's see the differences

between jsx and regular HTML

now I will actually not go through this

entire list here at this point because

these are just some very simple

straightforward rules which are best

explored by using Code but I still want

to include this list in this slide here

so that you can keep it as a reference

when you download these slides

so again we will encounter these rules

as we keep writing codes which is

rendering lists is one of the most

common things that we do in basically

all react applications you will probably

do it like a hundred times throughout

this course and so let's now learn how

to render lists in react

but first of all what do we actually

mean by rendering lists well basically

rendering a list is when we have an

array and we want to create one

component for each element of the array

so for example here we have our starter

data remember so here we have an array

of these objects where each object is

one pizza and so as you can imagine now

we want to basically render this list so

basically we want to take this array and

for each of these pizza object we want

to automatically create one Peter

component here in our user interface

so instead of calling

or of using here the pizza component

manually one by one we want to do it all

at once dynamically so if we have like

four pizzas in the array then we want

four components to be rendered but if we

have like 6 or 10 then we want 10

components to show up here in our app

okay so let's now learn how to do this

now the beauty of react is that for many

things all we need really is the

JavaScript knowledge that we already

have so for example for rendering lists

there's nothing new about react that we

need to learn so it doesn't give us like

a list element that we can use or

something like this all we need is the

have and in this case all we need is the

map method

so let me show you how

after all this talk

so let's create a new div here and later

we will convert this to an actual list

element but let's just start out with

any element here it doesn't really

matter which one

and for starters let's also comment out

this code right here

and maybe you noticed here by the way

that a comment in jsx is simply again

entering JavaScript mode so with these

curly braces and then this is just a

JavaScript comment so this is one of the

rules of jsx that was actually in one of

the slides

or actually in the only slide in the

previous lecture

so if you read that then you're already

familiar with this

but anyway let's now render our pizza

list

let's remember yeah it's called Pizza

data

so let's enter JavaScript mode here and

then let's take our pizza data which

remember is just an array and then

let's map over it

so with map we basically Loop over this

array and create a brand new array

so in this pizza data each element is a

so let's do this and what we want in

this new array so in the new array that

will be the result of map is for each

Pizza a pizza component

and now we can simply pass all of these

props in dynamically here

let's first close it like this

so we can now say pizza dots and I think

it is name but let's check

yeah so we have name ingredients price

photo data and even this other property

so if I give it a save right now we

should already see the six components

over there and indeed

there they are they're missing here the

image and the prices I guess but in

principle it's already working

so you see here that we now get these

console.logs here for each of the pizzas

exactly what the names we have here

and so now we are effectively already

rendering a list so a list based on this

pizza data now we could keep going here

and basically add another property now

for the photo name for example

so we can do pizza

dot photo name and so on and so forth

but usually this is not how we do it

usually what we do is to pass in the

entire object into the more specific

component so that's Pizza in this case

and then inside of that component we

would then take the information that we

want out of the object

so let's now change the way we pass

props into this pizza and simply pass

pizza and let's maybe say pizza object

just to make it slightly less confusing

a den or JavaScript mode

all right and now it all breaks here

because we need to adapt of course our

so now here we have props

dot Pizza object dot photo name

paste this here everywhere

and here and here and here and a bit

later we will make our lives a bit

easier with some additional techniques

but for now let's roll with this

and there you have it there you have a

list of all the pizzas based on our

pizza data array let's just get rid of

this and of course if we now remove

something from here

then that last pizza over there is going

to disappear

you see

but let's put it back

and yeah there it is

now you notice how we have like an error

here in the console so let's scroll up a

little bit and see what we get so we

have this warning saying that each child

in a list should have a unique key

property so basically what this means is

that each time we render a list like

this

where is it

yeah so each time we render a list with

the map method each of the items that

gets rendered needs a unique key

property so key is basically a prop that

is internal to react which it needs in

order for some performance optimizations

and for now it's not really important

what that means as we will learn later

what exactly this K property is and what

it does for now what matters is that we

pass something here that is unique to

each element

so to eat pizza in this case and that is

the name so the name in this example is

always unique so we can use that one as

the unique key and so then the warning

here is gone

now next what I want to do is to convert

this here from a simple div to a UL so

and then each of these

uh pizzas themselves should be a list

element or List item so on Li so it's

very important that we write semantic

markup like this which many courses

somehow Overlook but I believe it's

quite important

and here we are also missing an

important class name to finally apply

some more styling here

which is just pizzas and so this then

puts the pizzas like nicely in this grid

it makes this look even nicer

so I'm really happy here with this

design

and it's already starting to look like

very familiar to what we have here

right we have just missing this button

the text here is a bit different and we

have some special styling here when the

pizza is sold out and so we will

actually talk about this year pretty

soon

but for now let's quickly review what we

did in this lecture and so that is

fundamentally this part right here

so the goal was to render one pizza

element for each of the objects that are

inside the pizza data array and the way

we do that in react is by simply using

the map method on this array and in case

you're not entirely sure what the map

method does please go back to the

previous section where I will introduce

you to all the most important array

methods that we use all the time and

this one here is probably the most

so it will create a new array and in

this array in each position there will

be a new Peta component and into each of

these pizza components we pass as a prop

the current Pizza object

right so we then received that here as a

prop and from there we read all the data

that we are interested in

all right now of course we could also

not even have this component let me

quickly show that to you as well

so let's copy this

and well then you can simply replace it

paste that there and then of course we

need to get rid

of all this

so I'm just replacing all of them at the

same time and please don't follow this

code here so you don't need to do this I

just want to show you that we could have

done it also without like the

intermediary component

so all that matters here is that we

return some jsx

so we can directly write the jsx here

but usually what we do is to place that

so let's go back

now you might have thought maybe that

here we used a for each because it

sounds a bit more logical like maybe we

want it to render one pizza for each of

let's try that

and you see that then nothing happened

and so that's because here inside this

UL we actually need some jsx and the

only way we get that jsx is by creating

a new array and so that's what map does

so it creates a new array which will in

this case contain these six pizzas and

so then here we will have this array

with all these pizzas and then react

okay so a very very important technique

make sure that you memorize this or if

you don't want to memorize don't worry

because you will do this dozens of time

another very important technique that we

use all the time in react development is

conditional rendering so in this video

and the next two we will talk about

three ways of rendering some jsx or even

an entire component based on a condition

and starting in this lecture with the

end operator

so remember how way back we created this

is open variable right here in the

footer

so basically this variable tells us if

currently the restaurant is open which

happens when the current hour is between

12 and 22 and so now what we want to do

is to basically only render something

here inside of the footer if the

restaurant is currently open and so

that's what conditional rendering is all

about so it's basically rendering some

piece of the UI no matter if that's a

piece of jsx or if it's an entire

component based on a certain condition

and again in this case the condition is

simply whether the restaurant is

currently open or not

so let's actually get rid of all of this

and then here since we are going to use

JavaScript let's enter JavaScript mode

using this curly braces once more

so as I mentioned initially in this

lecture we're going to do conditional

rendering with the end operator and that

works because all short circuiting now

in case you're not sure what short

circuiting means and how it works with

the end operator then please go back to

the previous section where I have one

entire lecture about that but in a

nutshell if we have some true or some

truthy value such as is open

and if we then use the end operator then

the second part of the end operator so

whatever comes here will be returned in

case that the condition is true

so let's just write something very

simple here

just open

so just like this and let's check it out

and indeed it says open and so again the

reason for that is the way the end

operator works so is open is currently

true as we can see from this console.log

here and so then since this is true the

second part of the end operator will be

now let's just change this here to say

that the restaurant open at 20 hours

then here we get false and then down

here well we basically get nothing and

so that is the short circuiting in

action so short circuiting means that if

this condition so if this value here is

false or faulty then the second part of

the operation will not even be executed

so JavaScript will not even look at this

and then nothing is rendered

so the result here is then true which is

the result of this but react doesn't

actually render true or false into the

Dom and so that's why this works so let

me show that to you actually here very

quick so if we write faults here so a

Boolean value then you see

it's not showing up here and the same is

true for true

so that's not there

okay let's just write something a bit

we're open

until

and then here let's read

the close hour

come visit us or order

online and since we're already here

let's

also create this small button that we

have down here

all right now here we cannot see

anything so let's put the open hour back

so that our restaurant is actually open

nice and now let's wrap this entire

so div

with the class name

of order

then let's wrap this here

and then create a button with the class

name of BTN

order and then we get all the styles

from the style sheet that we included at

the beginning

now just notice here that we're doing

exactly what we learned in a lecture

about the rules of jsx and in particular

we are inside this JavaScript mode here

returning some more jsx which is

perfectly fine as we learned in the end

this is just a JavaScript expression as

well and so this is why this thing works

nice so this is a good use case of

conditional rendering let's check out

another one

so let's say that we only want to render

this menu here in case that we actually

have some pizzas

so first of all let's actually get a

yeah actually it's here so basically we

only want to render this list in case

that we have some pizzas

so to start let's

actually create a new variable here

quickly

which I will call pizzas and I will set

it equal to

Pizza data

and then let's

repeat SAS and then let's do conditional

rendering again

so I will first start in a way that's

not really going to work but let's roll

with it for now

so we can again do pizzas

and and then well then this

so let's cut that

paste it here

and there we go and so our pizzas are

still here because pizzas is a truthy

value and so this behavior of the end

operator does not only work for true and

false values but also for truthy and

falsy values

now the problem with this is that let's

say that

actually we have no pizzas so pizzas

equals an empty array

well then it actually appears as though

this is empty here but if we inspect we

see that the list itself

should still be there

so you see we have here the empty list

so it's empty because of course we have

no pizzas to Loop over but dual is still

here so this here is still being

rendered that's because an empty array

is still a truthy value

so what we need to do here is to

basically check for the length of this

array

so let's do

numb pizzas equal

pizzas dot length

all right and so now when there are no

pizzas then this will become zero and so

then this is now a faulty value and so

if it's false then this here will not

get rendered

so let's see what happens then

and now we get this weird zero

why is that

well it's because of short circuiting

again so when the end operator short

circuits it will simply not evaluate

this part but instead the result of the

operation will become this one

so this is 0 and so therefore that's

what we get in the UI

that didn't happen down here

because as I mentioned react will not

render true or false value

but it will happily render a0 and so

that's why we get a zero

so as a conclusion we should never ever

have this year as a number

so we should always try to have a true

or false condition here

so let's do this if there are more than

zero pizzas do this and if not while

then don't render anything and so this

here is the result that we were looking

for

let's put it back

just to see and then our pizzas are

actually back

now because of this Behavior here that I

just showed you so that sometimes a0 can

show up in the UI many people say that

we should actually never use the end

operator to do conditional rendering

now I don't really agree with that

because sometimes it's nice to very

quickly do some conditional rendering

with this but also usually I do prefer

the ternary operator to do conditional

rendering and so that operator is up

so let's check out how we can do the

same thing with the ternary operator

so instead of the end operator here

let's now use the ternary operator to do

conditional rendering and again in case

you are not familiar with this ternary

operator please go check out the

previous section with the review of

JavaScript needed for react

so the ternary operator has three parts

and the first part is a condition and if

this condition is true then the result

of the operation will be this second

part of the operator which right now is

all of this

but then the ternary operator also needs

a third part which is basically like the

else branch and so if we want to

reproduce the same thing we had before

here we can just write null

so give it a save and you see we get

exactly the same result as before

so again the ternary operator has three

parts

so first a condition and if this is true

then this first Branch here will become

the result of the operation so of using

the operator but if it's false then this

last part here so this third part will

become the result and so that's what is

rendered then in this case

let's check that out and indeed that's

what happens

now the advantage of using the ternary

operator is that then we can display

some alternative

so let's write some more jsx here

and let's say we're still

working on our menu

please come

back later

for example so then we get this so this

is in some situations a bit nicer than

simply displaying nothing

but let's go back

and here we go

so you might be wondering why we cannot

simply use an if else statement right

here well the reason is once again

because of what we learned in the

lecture on the rules of jsx which is

that inside this JavaScript mode we

cannot write any JavaScript what we need

to do here is to write something that

actually produces a value and an if else

statement does not produce a value

so let's just experiment something

fictional so let's say we wrote If

num pizzas

greater than zero

so let's try that

but yeah that's not really going to

and we even get this big error here and

it simply says unexpected token

well that's that's all it says and yeah

the reason here is that doing this does

not produce a value

and so it's the same as just having this

in the end

all right so the ternary operator when

used like this is really nice and I do

greatly prefer it over just the end

operator that we were using and so let's

go back down here and also replace it in

this situation here

let's replace that here and then also

let's print an alternative here

so another piece of jsx

let's change it again to 20.

and yeah

so the turnery operator is a really

important tool in your react toolbox and

once again we are just using JavaScript

here there's nothing react specific that

you need to learn or to memorize in

order to do conditional rendering it's

all already part of the JavaScript

language you just need to know that this

is how you use it so basically inside

these curly braces to enter JavaScript

mode and then well then you just use the

operator just like you would do in

the third way in which we can

conditionally render some jsx or some

component is by using multiple returns

so up until this point all our

components only ever had exactly one

return keyword right but there is

nothing stopping us from adding another

return keyword based on some condition

so of course each component still can

only return one block of jsx but that

return can depend on a condition

so in other words we can do for example

so right here we are outside of jsx

so we are simply inside the component

and so here we can write any JavaScript

we want so we can now easily use the if

so we can say if

is not open

then return

for example this message right here

so this jsx

so paste that here

and that's actually it

so if the restaurant is not open then

this will be returned but if it is

opened then all of this here is not

executed and then our normal return will

simply be executed

what's important here is that these two

returns cannot happen at the same time

but that's right now in short here

until now we get this

exactly this message right here so it's

not coming from here

so we could replace this but I will

leave it here and I will explain in a

second why

but anyway now this is actually coming

from here and we could of course do

anything here

just to make sure it is really coming

from there

now the problem in this case is that we

are now no longer rendering the footer

element around this p

so if we wanted to do the exact same

thing we would also have to copy the

footer here right otherwise the footer

would only be rendered in case the

restaurant is open but if not then no

footer would exist

so this is actually in this case not

what we want all right

so usually this early return like we did

here is more useful when we want to

render entire components conditionally

but not just some pieces of jsx

so let's try something else here maybe

and what I'm looking for is actually

this pizza component

so remember how the pizza has a property

of sold out

so we can see that here in the props

so each Pizza receives

this pizza object now as a prop and then

we have sold out

so what we can do here as an early

return is to say

if

props dot Pizza object

dot sold out

then return nothing

and so with this then the pizza that is

sold out will not appear

on the user interface

so that's this one here pizza salamino

and that's no longer here now and so

that's because here we have this early

return so that's sometimes a pretty

common technique that we can use which

is to Simply return null so nothing in

case there is a certain condition that's

true and so in this case this can be

quite useful so for now let's leave this

here even though later we will do

something even nicer with this property

so as a conclusion of these three

lectures on conditional rendering my

recommendation is to use the ternary

operator whenever you need to return

some piece of jsx based on a condition

so just for example like this here so

this we are going to use all the time

but also sometimes you just want to do

something like this so you want to

return something entirely different no

matter if that's nothing or if that's

just some other component so for example

we could also say here something that

doesn't make any sense

but let's just try this

so we could do this so in case it's sold

out we return the header in this place

so again here that makes no sense at all

but that would be a possibility

although not a very good one so

throughout this course you will learn

which of these options is the best

simply by practicing and using them in

now to practice the concepts of

components and using props just a little

bit more let's extract parts of the

footer into a new component

so the jsx here inside the footer

component is getting a little bit too

long and so I got the idea of taking

this part here and extracting it into

its own component so let's grab all of

this and cut it and then we're simply

going to create a new component

so we write function

let's call it order

and then all we have to do is to just

return that jsx that we just created

all right now prettier did not format

this because actually our code is wrong

now because here we don't have anything

as the first value in the ternary

operator and so let's immediately fix

so instead of that jsx that we had here

before now what we want is to Simply

so order

now react is still not happy with us and

that's because down here close hour is

of course no longer defined and it makes

sense because closed hour is only

defined here inside the photo component

but now the jsx that we had here before

is gone and it is in the order component

so how do we give this order component

access to this value right here

and I hope that you guessed that the

answer is by using props so as we see

here props is actually also quite

similar to passing arguments into

so all we have to do here is to create a

prop

so let's say

open hour so we can just give it exactly

the same name as the variable

so it doesn't have to be like this but

it can

and so then here let's receive props as

a parameter

and then we can simply read close our

and again this works because we made the

prop here exactly the same name as the

variable

so if it was prop hours then here of

course we would also have to use that

right but what matters is that it's

working just fine

well actually we are not seeing the

result there

so let's set it back to 12.

and so now yeah we're getting the order

component rendered there however we see

that here is a problem and I notice that

because I actually created a bug

so here we have close hours

but what we passed in is actually open

hours so we're not interested in open

but in close

so this should be close our

entire close our end here also close

hour as we had before and so now that's

fixed

and so that's actually it so this is how

we take a piece of jsx when the jsx in a

big and simply extract it into its own

component and then if that jsx depends

on some value that was in the parent

component so like this closed hour then

we simply pass it in as a prop and so

this is something that we're going to do

all the time when we build or react

applications so not always do we have

all the components figured out in the

beginning but instead we start building

them and then when they get to Big we

can decide to extract part of them into

just another component

and now since this was the last

component that we're going to create in

this project I invite you to take a pen

and a paper and to draw out the entire

component tree that we just built here

so I think that's going to be a nice

small exercise for you to get a better

hold of how all the components in this

application work together and yeah

really understand the structure that we

built here for this small project and

then once you're done with that you can

so now that we know what props are let's

make our lives a little bit easier when

working with props in practice

so as we already know each time that we

pass some props into a component that

component will then automatically

receive this object of props which will

contain all the props that we passed in

and actually all components receive this

props object

so even here in footer where we don't

pass any props in we can Define that and

we can log it to the console

so it will be empty then

so let's see

yeah so it is empty but it always exists

all right so that just as a side note

so what we want to do now is to avoid

having to write this props dot whatever

else all the time in our component

so wouldn't it be nice to directly

receive this pizza object here into the

component instead of just this props

well we can actually do that with

destructuring and again if the

structuring is a strange concept to you

then please go back to the previous

review section

but anyway now here instead of directly

receiving these props we can immediately

restructure them and so here we can

write Pizza object which needs to match

exactly the name of the prop that's

being passed in so this one here and

then from there on

all of these props here can go

so I will select them all here one after

the other which I'm doing using the

select next occurrence

so that's this shortcut right here so

you can just go ahead and use the

shortcut that you see right here for you

so let's get rid of that and this will

now create a small problem

which is that here we are still trying

to log to the console these props but

the props object now no longer exists

because well we immediately destructured

it right here

so now if we wanted to take a look at

what we receive we would have to do it

like this but the props object itself no

longer exists but this is really really

nice because right now all we have to do

is to look at this line right here in

order to know which props this component

will actually receive so before this all

we had was the generic props and then if

we wanted to know what kind of props we

will receive here eventually we would

have to go to the place where the props

are actually passed in

but now not anymore

so now right here in this component

definition we can immediately see that

we will receive a pizza object and so

that's the second really big advantage

of immediately destructoring props

so let's do the same down here

so again not props but exactly the name

of the prop that we pass in

so close hour and then here we can get

rid of that

and of course if we were passing in

multiple props

and then

here open hour

and so here all we have to do is to add

open our then

so here let's say we're open

to this

yep and that worked just fine

now we can actually really Define

anything we want here let's write test

let's add that here for example and this

will then simply be nothing

so if we try to destructure a property

here that doesn't exist it's simply

undefined

so let's get rid of that here

but this was just to show you so from

now on for the rest of the course we

will always receive props like this year

just make sure to never ever forget the

curly braces because then of course

everything will break so that's a common

beginner mistake

so yeah you have been warned never

forget that because only with the curly

let's now learn what a react fragment is

and when exactly we might need one

so let's actually come here to the final

version of the application so that I can

show you that we are actually still

missing something and that's this

sentence right here

so there's a paragraph of text right

here that I'm just going to copy now

and you can maybe pause the video and

type it or you can just type something

shorter

so let's for now place that paragraph

give it a save and

yeah then it looks exactly the same

but now what if we have no pizzas at all

so in this case

well then we actually don't want to show

this so this sentence right here we only

want this one

so the one that's coming here from our

conditional rendering

and what that means is that we only want

to render this paragraph here in this

situation

so let's grab that paragraph and place

that here

because again we want to render this

paragraph and this UL in this case but

immediately react starts yelling at us

so jsx Expressions must have one parent

element and so this is exactly what we

learned in the rules of jsx lecture so a

piece of jsx no matter where it is

defined can only have in fact one root

and this has happened to us before and

the way we always solved this was by

simply wrapping everything in a div

or some other component so let's try

you don't have to do this and this is

just to show you that this will then

actually mess up our formatting here so

this is actually not really what we want

we do not want to render one element

which contains these two but we really

want to render these two elements here

so these two elements in separate

without having one element as a parent

of these two

right and so this is the case in which

we need a react fragment so a react

fragment basically lets us group some

elements without leaving any Trace in

the HTML tree so in the Dom

so it looks like here we need a react

fragment and that's very easy all we

have to do is to basically delete

everything here

just like this and so this is now a

so let's save and then we are back to

what we had before so now let's then

inspect the Dom tree as I was saying

just to show you that

actually this didn't create any new

element at all so here we have the

header and I see we still have that

footer class there

so we have our container then we have

the menu then we have the H2 so this one

and then exactly we have the paragraph

and the UL but in separate so not

wrapped in anything

so this is completely invisible here and

it's exactly what we were looking for

and that's it that's all a react

fragment is and it's all that it does

now sometimes we need to add a key to a

react fragment so for example when we

are using it to render a list and so

then we need to actually write it in a

slightly different way

so first let's make sure that we have

react imported and we do so it's right

and so we can

dot fragment and then down here we need

to close

that react dot fragment and so then the

result is exactly the same but if we

need it then here we could add a key

of just anything

all right now we don't need a key so we

can just go for the short version

which is of course a lot nicer

all right let's try maybe something else

let's say that here we actually didn't

want this container

so maybe we just needed all our elements

right here directly in the root

so basically what we wanted in this case

is the app component to return three

components so these three elements made

out of these three components and so

then that would be very simple

now in our case it's of course going to

mess up the formatting because then we

are missing the container class

but just as an example this is what it

would look like in the end

so we would have our root with

immediately these three as direct

children

but let's put everything back and yeah I

think that's all that you need to know

about react fragments it's a very simple

concept which basically allows us to

have more than just one element inside a

to finish this project let's learn how

to conditionally set some text inside

elements and also how to conditionally

set class names

so if we take one final look at our

final project the only difference is

that these pizza here that is sold out

has this text of sold out instead of the

price and the whole element here is kind

of grayed out so just to show that it's

not available and so let's now do that

so right now we have this line of code

here which makes it so that he sold out

pizza is not even displayed so let's

start by getting rid of that and so now

we are ready to conditionally display

some text and we are going to do it

so the difference between what we did

before is that before we did

conditionally render this entire element

here but now that's not what we want now

we already know that we want this span

element here but we don't want the

content yet and so let's now

conditionally set that and that's very

easy so once again we are going to use

so let's say Pizza object

then the text here should be and now

what do you think we need here

well it's just a string actually

so sold out

and if not then we want deep pizza's

yeah nice that worked let's just make it

uppercase

it should be handled by the CSS but we

can also just do it like this

so let's again appreciate the difference

here so we're not setting the element

conditionally which of course we could

let's just quickly do that because why

not

so we could say

if Pizza object

then display this band would sort out

and if not

then display the span with

so the result is going to be exactly the

same as we see down here but what we did

is fundamentally different

so here we already know that we want a

span element we just don't know yet the

content while here we apparently also

don't know yet what element we want

though in both cases we are then using a

span and so I think it's a lot better to

do it like this so to conditionally set

the text content of an element this is

way cleaner in my opinion

but just for reference I will leave this

one here as well

okay and now finally as for the class

whenever the pizza is sold out we can

add the sold out class to DLI which will

then make it a grayed out let me show

that to you

can simply add it to all of them

and so then you see this is the result

we are going for but of course we only

want this part here whenever the pizza

is actually sold out

so let's again use our ternary operator

for that

so this is how we're going to do it we

will now use instead of a regular string

a template literal so deleting the quote

and deleting this

but now this is actually JavaScript so a

template literal is Javascript therefore

let's enter JavaScript mode

to give it a save and so for now it is

exactly what we had before

but now inside this template literal we

can

well kind of enter the template literal

JavaScript mode as well in this way so

remember that it's actually quite

similar the idea then entering

JavaScript mode inside of jsx right the

difference here that in the template

literal to add some piece of code we

also need this one right so this dollar

sign

but then here we can once again make use

of our friend deternary operator

so we can say

Pizza object

sold out

if yes then here give us the string

but if not then just an empty string

and this should be enough and yeah

so this is exactly what we were going

so let's recap why this worked so we

have our template literal and then here

we simply write a JavaScript expression

and so then with the ternary operator we

check if this exists and if so so if

this is true then the result of this

operator will be sold out and so then

this entire thing here becomes sold out

and then the string is exactly what we

had before so Pizza space sold out but

if this is false then we will simply

return nothing here so then the string

is Just Pizza which is

well what we have here in all of these

cases

so you see here the class is Just Pizza

with the space of course that we have

here but that's no problem at all

and then here we have pizza sold out

great so this is how we conditionally

set some CSS classes onto elements so

all without using the class list

property that we would have to use in

vanilla JavaScript and for this down

here remember in vanilla JavaScript we

would have to do some Dom manipulation

with the text content property or inner

HTML or something like that but here

with the declarative nature of jsx and

react everything becomes just a little

bit easier and nicer to work with and

now just one final detail let's come

here to our public folder and in the

index.html we will want to set now the

title of the document

so here we have fast react Pizza code

but here it just says the default react

up which is a bit ugly so let's say fast

react Pizza Co

that's it

so with this we actually finished our

application and our very first project

so congratulations for making it all the

way here until the end of this long

section and now just to finish the

section we will have a lecture to review

everything that we just learned because

it was a lot and then finally there is

another coding challenge waiting for you

just so you can practice again what you

learned here over the last few lectures

but before going there I would invite

you to once again check out the entire

code that we wrote here together see how

all the components are related and

really check out again everything that

you learned even before checking out

that summary lecture that's going to

follow and then after that of course

watch that lecture to really drive the

let's now take a few minutes to look

back on all the concepts that we just

so first of all we learned that

components are the building blocks of

any user interface in react

now each component is a self-contained

piece of the user interface which

includes its own data its own JavaScript

logic and its own appearance now in

Practical terms we write this appearance

using a declarative syntax that's called

jsx and it's this block of jsx that

ultimately gets returned from each

component and this jsx is what's going

to describe exactly what the user will

see on the screen when they use the

and any piece of jsx can contain some

markup basically in the form of HTML

it can contain some CSS which in this

section we wrote using the style prop so

we use the style prop and then passed an

object in there which contained some CSS

and also usually the jsx contains some

JavaScript inside curly braces which I

like to call entering the JavaScript

mode so this one is basically like

writing JavaScript right inside of HTML

so this is basically everything that a

component contains or can contain and it

is how we write it so again using jsx

now a complete application is usually

composed out of many different

components which are then organized into

a component tree like this one

so in a component tree like this the

components that are at the top have

included or used the components that are

below them which makes them their parent

so the components at the top for example

here the app component is the parent

component of header menu and footer and

so these three so header menu and footer

are the child components of app and at

the same time of course the menu is the

parent component of all the pizza

components and the footer is the parent

component of order

so obviously a component can be a parent

and a child at the same time now in

order to share data between components

parent components can pass data into a

direct child component using props

so for each value that we want to pass

down we simply Define one prop which is

short for property

and so using props we can configure

components as we wish for example in

this application we rendered many

different pizzas by creating one pizza

component and then passing in different

Pizza objects into that component so

rendering it multiple times with a

different prop

now it's very important to understand

that props can only be passed down the

tree so only from parents to children

but never the other way around

now something that we do all the time in

react applications is to render multiple

components of the same type by looping

over an array and so this is what we

call creating a list

so in the app that we just built we

created a list of pizzas by looping over

the pizza array using the JavaScript map

method and so in react there's nothing

special to create lists all we need to

know is the map method that's available

on all JavaScript arrays so our

JavaScript knowledge is more than enough

to Loop over an array in order to create

lists of components of the same type

and finally we also learned about

conditional rendering so that's another

thing that we do all the time in order

to render components only when certain

conditions are met

and just like rendering lists we can

conditionally render components by using

common JavaScript tools that we already

know for example the end operator the

ternary operator and also using multiple

returns and that's it so these are the

more practical things that we just

learned and that we applied to the

project that we have been building

we also learned some more theoretical

stuff like the difference between

imperative and declarative approaches we

learned about separation of concerns we

learned exactly about why we cannot

mutate props which is another important

thing that we learned and yeah we also

learned a bunch more theoretical stuff

that I'm not going to go into right now

so you can always re-watch those

lectures if you're interested in here I

just wanted to summarize the Practical

aspects of everything that we just did

in this section

so I hope that this was helpful and now

to round off this section there is one

final coding challenge waiting for you

where we will just finish the developer

profile card that we started initially

so let's now finish the developer

profile card in this second coding

challenge of this section

so we are still building this developer

profile card here but now we will do it

in a slightly different and a little bit

better way

so let's come over here just so I can

show you what I want to do now

and so

first off we now have an array of skills

and so in this array we have one object

for each skill

so basically we will now create one of

these guilds here for each of these

objects or in other words we're going to

render a list of skills right so I want

you to create a similar array so with

all your skills then the level and also

a color for each of these skills

so that's your first task and then you

simply Loop over this list and display

one skill for each of them

now here the level can be one of three

different choices so either intermediate

Advanced or beginner and So based on

this level I then want you to display

one of these emojis

so going back here this is the emoji for

the advanced this is for the

intermediate and this is for the

so basically you will conditionally set

this Emoji right here and yeah that's

basically all I want you to do for this

challenge so please go ahead and pause

the video now and I see you back here in

now okay

so let's come here to our skill list

because that's where most of the

difference will be

so here what we did was to manually

create one skill component for each of

these skills right but now we will get

of all of this because now we will

create a list of skills

simply take our skills

and use the map method

so just like we did with the pizzas in

our previous project

so here in this map each element of the

array is one skill

of course it could be any other variable

but anyway so for each skill we want to

create one skill component and let's

first close it to avoid the error and

then we can pass in the props now in the

pizza project we actually passed in the

entire object as a prop right but here

just for this to be a little bit

different let's actually pass them in

so the skill is going to be

skill Dot

skill so that's a lot of skills right

there like four times in a row

then

next let's pass in the color

so that's skill dot color

and then finally we also have the level

so that's at skill

dot level

like uh

so you immediately see the difference

down here because now we have six skills

so all the ones that are in the array

but we don't have the Emojis yet because

previously we were actively passing in

an emoji prop but now we just pass in

the level which we then want to convert

to an emoji

right now before we move on here let's

actually destructure the props just like

we did also in the project so that's

and level and again this is so much

useful like this because now we

immediately know which data this

component here expects

and of course it also makes or code

in here a little bit nicer

so now we don't have the Emoji variable

here of course and so instead let's use

the level for now

yeah but now again we need to convert

so how are we going to do that are we

going to do conditional rendering or are

we simply going to conditionally set the

text here

well I think it's best to just actually

set the text conditionally

now we cannot use a ternary operator

because we don't have just two options

but three so it can be Advanced

intermediate or beginner and so we

actually are going to use now the end

operator

so here let's say level

if it equals

beginner

then well let's just copy the Emoji here

it's like this baby

then here the content

should be this

and so there it is for this one where

I'm still at an advanced or actually at

a beginner level

right and that's not a problem at all

because these three are going to be

mutally exclusive so only one of them

intermediate

and advanced and now let's just grab the

and there we go so here we conditionally

set some text this time not using the

ternary operator but this time using the

end operator and leveraging the property

of short circuiting that this operator

has

so for example in this first one here

level equals beginner is false and so

then here faults will be the result of

this which does not get rendered then

the same here and then level equals

Advanced is actually true and so then

the result of this operation will be

this one and so in the end this is the

content that we see here

all right now you could have done it

also in different ways that would have

been no problem at all what matters is

that somehow you got it to work it's not

important how you did it everyone can

have different solutions here that's

just completely normal

okay and so now that's actually a wrap

so we finished this section and so once

again congratulations for reaching the

end of this first fundamentals of react

section you already learned a lot and so

you can be proud of yourself

next up we are going to learn about the

concept of state and of handling events

so that we can finally build some apps

that are truly interactive so that's

going to be amazing as we will build or

really first useful project so a project

that will not just display some data in

the UI but with which we can also

interact so that will be again a lot of

fun and so don't waste any time and so

if you have some time left then let's

immediately move on there