‫So with our project now installed,
‫let's start by building the static layout
‫of the application.
‫And as always, let's start by getting
‫these starter files
‫which in this case is just this CSS file.
‫So of course that we don't have to write any styles
‫ourselves.
‫Then place that here into source.
‫Now there will already be one
‫so just replace that
‫and since we're already here
‫we can get rid of all
‫the junk that we don't need.
‫So all of these,
‫so in the end
‫we just have app.js, index.CSS, and index.js.
‫Okay. Then just renaming
‫this here once again.
‫And then let's drag and drop it
‫onto the VS code icon.
‫Okay, so here we already have our files.
‫As always, we need to clean this one here
‫because we are importing some files that
‫we no longer have basically.
‫But that's it.
‫And once again, if you feel like it
‫you can actually delete all of this
‫and write the code yourself
‫just to practice how we can set
‫up this React app
‫from complete scratch.
‫But I will just leave this here
‫because in the end
‫when you build your own applications
‫you will always just leave
‫this here as well.
‫You're not always gonna write everything from scratch
‫but here actually you want to delete everything
‫and start from scratch.
‫So export
‫default
‫function app.
‫So this is usually always
‫the same as well here.
‫So you always have your app parent component
‫which will include all the other components.
‫And let's actually start with these other components.
‫So just the components
‫that we talked about
‫in the previous lecture.
‫So that's function,
‫Logo.
‫And now I will just quickly duplicate
‫this code here
‫just to make this a little bit faster.
‫So packing list.
‫And we also have our stats.
‫So these are the four big components
‫that we identified
‫in the last lecture,
‫remember that?
‫And so let's now write a little bit
‫of JSX for each of them
‫starting with the Logo.
‫So the logo is many times an image,
‫but in this case
‫we will just have a primary heading
‫and we will say far away.
‫And then let's add some emoji here.
‫Now the way we write emojis
‫on the Mac is by hitting
‫control command space bar.
‫And on windows, the shortcut is Windows
‫plus period.
‫So like this,
‫so the windows key and then plus this dot.
‫Alright, then here, let's use a palm tree.
‫So this one here
‫and then a bag.
‫Just like this.
‫And in case you can't get
‫these emojis to work
‫you can always just copy them
‫from the final files of this project.
‫Or you can of course just ignore them as well.
‫So these are just to make the design
‫a little bit nicer.
‫Okay, that's enough for the logo.
‫So we will just write some very simple
‫starter JSX here
‫for each component
‫as we are scaffolding basically this layout.
‫So here, let's just return
‫a div with the class of add-form.
‫And again, you can of course
‫explore the CSS file
‫and see all the CSS that I wrote
‫for these class names
‫that we are going to import here.
‫So in here later we will have
‫these form elements
‫like the select box,
‫the input box, and that button.
‫But for now we will just write the text.
‫So what do you need
‫for your trip?
‫And here we also had some emoji,
‫let's add that as well.
‫And it's actually already down here.
‫Okay.
‫And notice how eslint is complaining
‫that we are not using these variables here.
‫But of course we will do that soon
‫by including all of them here
‫in the global parent component.
‫So here in this app.
‫But again, let's leave that for later.
‫So we do that in the end.
‫For now, we just write the static part
‫of all the components.
‫And this one is the list.
‫So again, just like a placeholder there.
‫And let's make this one here
‫a footer element.
‫So remember how the stats is really
‫at the bottom of the page,
‫and so a footer seems like a good fit here.
‫So let's write You have
‫and then here in the end we will have a number.
‫So let's just use an X for now
‫items on your list
‫and you already packed
‫and then again, an X,
‫which is X percent of the total.
‫Then here we also had
‫some emoji
‫Like this other bag here.
‫And yeah,
‫I think this one was also formatted.
‫So let's use emphasize here.
‫So em.
‫And now with that,
‫let's come here to our app component
‫and use all of them here in our layout.
‫And if you want,
‫you can actually pass the video here
‫and do that as a challenge.
‫So just create one div element
‫with the class of app
‫and then include the four components
‫in there if you'd like.
‫So this
‫is how you do that.
‫So with the class of app
‫and then one by one,
‫one after the other
‫we just include them here.
‫So first a logo,
‫then the form.
‫So actually exactly
‫in the way that we define them in our code.
‫And by the way, in more real apps,
‫and also a bit later in the course,
‫we will start placing
‫each of these components here
‫into one individual file.
‫So we will then have one file called app js
‫for this component, one called logo js for this one
‫and so on and so forth.
‫But here, since we are still learning
‫I think it's easier to build all of them here
‫in the same file
‫because otherwise we are jumping
‫around all the times
‫through these files.
‫And so that then makes everything
‫a lot more confusing
‫especially when we get
‫into topics such as child to parent communication.
‫But yeah, more about that very soon.
‫So to finish the stats
‫and that's it.
‫So no component
‫is yellow here anymore
‫and so that means that we didn't forget any.
‫And yeah, with this we are done.
‫So let's open up our integrated terminal
‫like this.
‫And we are already in the correct folder.
‫So npm start
‫and let's wait for it.
‫Beautiful.
‫Well here it seems
‫we missed some class.
‫Let's make this smaller again.
‫All right.
‫And so this footer here needs the
‫class of stats.
‫Yeah, wonderful.
‫So this is what it's supposed to look like
‫and it looks exactly like our demo.
‫Well, except of course for these details right here
‫which we will take care of
‫starting in the next lecture.
‫So next up, we will start rendering
‫some static items here.
‫So we will not yet dynamically
‫add new items to the list
‫but we will render some static items
‫from an array here in the UI.