‫In the second part of this section,
‫let's now build our first project
‫that has some real interactivity.
‫And so let's get straight to it.
‫And by now you know the drill.
‫So if you're on Windows, open up your command prompt.
‫If you're on a Mac, open your terminal, please.
‫And then as always, navigate to the folder
‫where you want to create your project.
‫So that's my desktop.
‫And then in there, run NPX, create-react-app.
‫And then please specify version number five here.
‫And then finally the name of the project,
‫which is going to be travel-list.
‫Then hit enter, and then let create-react-app do its thing.
‫And in the meantime, I will give you a quick tour
‫of the app that we're going to build.
‫So this is the Far Away app
‫which is a simple travel list where we can add
‫all the items that we need for our next trip.
‫So for example, let's say we need two boarding passes
‫that we really cannot forget,
‫and then we can hit enter or click here.
‫And then that item gets added here to the list.
‫And also you see that down here we have these statistics
‫that just got updated.
‫So that's already some interactivity right there
‫but of course we can do more.
‫So for example, let's say we don't need
‫the charger anymore for some reason,
‫so we can just click there and it's gone.
‫We also can mark these items as completed,
‫so basically as packed.
‫So let's say we already packed that one and that one,
‫and then down here it says we already packed two
‫which is 50%, but there is even more.
‫So we can also sort by these three things here.
‫So input order or by description or by the packed status.
‫And so then the packed items here, they appear at the end.
‫And finally, maybe once we are back from our trip
‫and want to prepare our next one,
‫we can just clear the entire list at once.
‫So it then asks us if we are sure, and yes, we are.
‫And indeed then our list becomes completely empty
‫and that's it.
‫So I think this is a really nice little project
‫for us to learn some more interactivity,
‫and it has all these nice but simple features
‫that we are going to build.
‫And on top of that,
‫I also really like this nice design here.
‫It's a bit retro, which I think really fits
‫the vibe of this application.
‫And now before we start writing any code,
‫let's actually take a look at how
‫we can break up this entire design into components.
‫So this first big yellow part,
‫I think we can call this the logo of the application.
‫And so we're going to create one component
‫called logo just for this part.
‫Then next up, we clearly have some form here
‫and so that's where we are going to put these elements.
‫So yet another component.
‫Next, then we have this entire list
‫which I think can be called the PackingList.
‫And then in there each of these items
‫is well just called an item.
‫We could call it a Packing item maybe,
‫but we'll see once we get to the code.
‫Finally, down here we have this other area
‫which I think we can just call Stats or statistics.
‫So this is how we are going to break up
‫this user interface into components.
‫And we will talk a lot more about how we actually do this
‫so how we arrive at these different components.
‫But that's not the focus of this application.
‫Here, we just want to work a little bit more with state,
‫with events, and also learn
‫about how we can handle form submissions.
‫So if that sounds fun, then let's quickly move on
‫to the next lecture and start implementing this layout.