‫So let's now split up our App.js file
‫into multiple component files.
‫And this will just be a very simple exercise
‫of taking each of these components
‫and placing them into their own file.
‫So you can even do that on your own if you want.
‫But anyway, let's just grab this code here,
‫cut it,
‫and then create a new file inside source.
‫So inside the source folder, create Logo.js
‫which is the name of this component, right?
‫All right, but now of course,
‫we also have to export this function from here.
‫And remember that in JavaScript,
‫we can export in two ways.
‫So we can have named exports,
‫which would simply be this.
‫So with this, we would create an export called logo
‫which we would then have to import
‫with exactly that name
‫into the other file,
‫so into the file where we need it.
‫But usually, in React apps,
‫what we do is to use a default export.
‫So export default, just like this.
‫And then of course, now if we try to reload this,
‫we will get an error that, well, not this one.
‫Yeah, right here.
‫So we see that the logo is not defined.
‫And so of course,
‫that's because now we have to import it right here.
‫So import.
‫And here, actually we can use any name that we want.
‫So because we used a default export.
‫But of course, we will still call it logo here.
‫So import logo from,
‫and then simply the path to that file.
‫And yes.
‫And again, we could indeed change the name here to X,
‫for example, and then here as well,
‫give it a save
‫and you see that it still works.
‫But again, this is of course not advisable.
‫This is just to show you how named
‫and how default exports work.
‫All right, now let's take the next one.
‫And by the way, the first one here
‫will of course, stay in this file
‫because it is called app.
‫And this file is also already called App.js.
‫So let's grab the next one here.
‫Okay, cut it,
‫new file, Form.js,
‫paste it here,
‫and then again, export default.
‫Coming back here,
‫then we need to import form from
‫just like this.
‫Now here we will still get an error
‫because we haven't imported useState
‫in that other component.
‫So let's quickly grab this line of code here,
‫move into the form
‫which is where we are using useState,
‫and then we also need to import that hook.
‫So this useState function here into this file.
‫Of course because this file here does use that function.
‫So it's not enough
‫to just include it one time anywhere in the code.
‫You really have to include the parts of React
‫that you need in each single component file.
‫So let's close this one and this one.
‫And now that we have done it two times manually,
‫it's actually time to do it automatically.
‫So let's again select all of this.
‫We can even click this triangle here
‫to collapse the function.
‫And so then we can select all of it
‫and then right click here,
‫and then click on refactor.
‫And so now here, this gives us the option
‫to move this function into a new file.
‫So let's click that.
‫And you see that a brand new file
‫with the name of packing list was created.
‫So VS Code automatically took this function here
‫and then created a new file
‫with this exact same name.
‫And it also automatically imported
‫all the parts that we need inside this function.
‫So we have useState and we also have item.
‫Well, this actually doesn't make a lot of sense
‫at this point
‫because the item is still here.
‫So that's actually not ideal,
‫but we will fix that in a moment.
‫So what matters here for now
‫is that VS Code automatically created this new file,
‫placed this new component here
‫and also exported it.
‫Now it's actually using a named export.
‫So you can see here
‫that it's importing it in this other way.
‫So this is how you do a named import.
‫But again, we usually in React development,
‫do default exports.
‫But of course, the other way is also perfectly fine.
‫I will just change it here.
‫Export default.
‫And then here, I need to change the way I import it.
‫So getting rid of these curly braces.
‫And now let's also create a new component
‫for this item here.
‫So let's just remove this export.
‫Select everything, refactor,
‫and move to a new file.
‫So again, item was created
‫and here we need to actually write export default,
‫give it a save,
‫and now we need to change that
‫in the packing list
‫because now this component is no longer in app,
‫but inside,
‫well, inside of Item.js.
‫And it's again, a default export.
‫So we need to import it,
‫basically as a default import.
‫All right, so this small thing here happened
‫because we first exported the packing list
‫which depended on the item.
‫But yeah, in any case,
‫usually we do this immediately.
‫So usually when we build some app,
‫we do immediately create a new file
‫for when we need a new component.
‫So let's do that one final time.
‫So stats, let's change it again to export default
‫just to stay consistent,
‫and then fix it here as well.
‫And with this,
‫we now have one component per file
‫which makes our component here
‫a little bit easier to manage.
‫So then there's not so much scrolling up and down,
‫but instead,
‫well, we can develop basically each component
‫in isolation in its separate file.
‫Now taking it one step further,
‫we can also move each of the components
‫into a new components folder.
‫So components,
‫and then let's select all of them actually.
‫So everything except for index.js
‫which is not a component
‫and our CSS file.
‫Grab them here.
‫And now we only have one problem
‫which is the app file cannot be found here in index.js.
‫So here we need to now fix this path
‫to components/App.
‫And with this, we are finished.
‫So all the other files still work the same,
‫or actually this one here.
‫So here the imports still work
‫because all the components are still
‫in the same folder as App.js.
‫And with this,
‫we actually finished this project.
‫So once again, congratulations
‫for finishing your first, a bit more real React project.
‫So a project that actually does something.
‫So I think this was a really great practice project,
‫quite straightforward,
‫but it had all the most important fundamentals
‫that you needed to know at this stage.
‫Now, of course,
‫this is not a real world application,
‫but in large scale apps,
‫you actually have many smaller parts
‫in which you will need exactly these skills.
‫And so everything
‫that you are learning here is really, really important.
‫It will lay the foundation
‫so that later you can build those large
‫and real world applications.
‫Now next up in this section,
‫we have a nice exercise
‫where together we're going to build an accordion component.
‫And then I just want to show you
‫one other very important part of React.
‫So that's gonna be the children prop.
‫And so yeah, stay tuned for that.