‫So let's now split one huge components
‫into many small ones using the framework
‫that we just learned about.
‫Now, as always, to start
‫we need to get our starter files here from this folder.
‫So let's wrap these two
‫and then let's move back to our project folder.
‫And as always, I'm renaming it.
‫And then let's paste the new files right in here
‫into the source folder.
‫And then we need to replace these
‫and just get rid of some of this garbage that we have here.
‫All right, so as always
‫we just end up with index.js
‫index.CSS, and app.js.
‫Then we just grab all this and open it in VS code as always.
‫Close down this one.
‫And yeah, then we need to clean up this file here.
‫And so this is always a little bit of tedious work
‫but we just have to do it.
‫And actually that's already done.
‫You can take a look here at the CSS if you'd like
‫because there's actually a lot
‫of it to make this application here work
‫so to style that application.
‫But what matters most to us is of course this app.js.
‫So here we have this array of objects
‫that I talked about in the previous lecture here.
‫Then we have another array of objects
‫which is for this watch list.
‫And then here we have that huge component
‫that I was talking about.
‫So it has all this JSX inside.
‫So basically all of this
‫the entire application is now inside
‫of one component.
‫To prove that to you,
‫let's actually start this application here
‫because this one here is of course still the demo.
‫So let's open up our integrated terminal
‫that's slightly too big, and then NPM start.
‫So that should then open up a new tab in here.
‫And there it is.
‫So make this even smaller.
‫And yeah, so there is step up
‫and as I was saying in the first lecture
‫it does work here in terms of collecting these two lists
‫also writing something in here.
‫So all of that is working
‫and it's all working within this one huge component.
‫And so I thought that it was a nice exercise to
‫basically pretend that we're working on some team
‫and that one of our team members created this huge component
‫and now it's our task to take it and split it up
‫into small components that make it easy to work
‫with and well, which isn't this huge mess.
‫So let's use the framework that we learned
‫about in the previous lecture to do that.
‫So let's take a look at our JSX here,
‫and if you want,
‫you can of course pause the video and do that on your own
‫because there is a lot to unpack here.
‫So we have this nav bar here.
‫So this entire thing here is this nav element
‫and then we have this main part,
‫which is all of this.
‫Then inside the nav we have this box here
‫for this left side, which contains this list.
‫And then we have another box
‫on the right side which contains all of this
‫but we will take care of that later.
‫So for now, let's basically split up all
‫of this here into the NEF bar and into this main part.
‫So I think to start,
‫that's the best logical separation of the content
‫which is remember the first criteria that we talked about.
‫So those were logical, separation of content.
‫Second, reusability.
‫Third, responsibilities in complexity.
‫And fourth, the personal coding style.
‫So this here and the main content here
‫they really don't belong together.
‫And so that's a good idea then to create a component
‫for each of them.
‫So I'm cutting this code here
‫and I will actually now create these components here on top
‫otherwise I have to scroll too much.
‫So let's write function, NAF bar
‫and then return simply this, give it a safe.
‫And now it's complaining here.
‫So we now need to also move the state here
‫into this other component.
‫So this one here is depending on query and set query.
‫And so therefore we need to move that state right there.
‫And so actually having all the state here
‫was another great indicator
‫that this component here had way too many responsibilities.
‫So we have five pieces of state
‫and then these three derived states.
‫So that's way too much.
‫So let's just cut this here,
‫paste that here,
‫and here we also need the movies,
‫but I'll for now just replace this here with an X.
‫Okay, so now the nav bar is gone
‫because of course we haven't yet included it here.
‫And so let's do that.
‫And now, or up looks just like before.
‫And so now let's then grab all this other code,
‫all of this.
‫Cut it and put it into yet another component.
‫And this one, let's actually call it main.
‫And as we save it, it'll now complain
‫that it needs all of these states here.
‫So for now, let's just grab everything
‫and paste that here now, right?
‫And then well,
‫we just have to include of course,
‫that main right here.
‫And then after doing that,
‫the app should look just like before.
‫Well, for some reason it isn't
‫but let's see that in a minute.
‫For now, I will just take this component here.
‫Actually back to the top.
‫So just here.
‫Now let's open up our console.
‫Maybe we have some errors here that we're not catching
‫but well actually no.
‫Ah, but I think I know.
‫And the reason is that here we are not returning
‫so we were not returning any JSX.
‫And so then of course,
‫we couldn't have any JSX here in the UI.
‫Great, so let's keep going
‫and let's look again at our NAF bar.
‫So our NAF bar is now a lot simpler than before
‫but it's still doing a lot
‫of different things here, I would say.
‫So we are displaying a logo.
‫We have this input field
‫and we have the number of results here.
‫Now, in a way, all of this does actually belong together
‫because well together they form this nav bar.
‫So we could definitely argue
‫that this is okay like this.
‫But on the other hand,
‫it still takes some work to actually figure out
‫what this component here is doing
‫and maybe we even might want to reuse some parts of it.
‫So for example, this search bar,
‫which is basically this.
‫We might want to reuse it all over the place
‫in the application
‫At least if the app grew a bit bigger in the future.
‫And so let's at least grab this part here
‫and extract it into its own component.
‫So I'm cutting that.
‫And then let's create a function simply called search
‫then return that JSX.
‫And of course, we will then need this state
‫and we will want to include that here,
‫give it a save,
‫and then it looks exactly like before.
‫Okay?
‫But now something happened here that I personally
‫really don't like, which is to have one piece of JSX
‫which mixes like these native HTML elements
‫with our custom components.
‫So we have this div,
‫we have this P,
‫but then in the middle we have like our own search.
‫So that I think looks really ugly
‫and I really don't like that.
‫I think it's quite confusing.
‫And so let's actually also extract the logo
‫and the number results.
‫And so then we make this component here really nice
‫and clean and end up with these three components here
‫where each of them has its own responsibility.
‫So let's create the logo.
‫So we will end up here with a few small
‫and reusable components if we'd like.
‫So we have our logo and then let's say num results
‫function, num results.
‫Not right.
‫This doesn't look quite correct.
‫And yeah, now all we have to do is to include them here
‫And then num results.
‫And this looks a lot nicer.
‫So as soon as we look at on nav bar component,
‫we can immediately see ah
‫it contains a logo,
‫a search, and the num results.
‫And from there, if we were interested
‫we could then really drill down
‫into each of these components if we needed to.
‫And of course if we wanted,
‫we could even keep going.
‫So we could now create like one component here
‫for the icon and one for the title so to say.
‫But that would then be that situation
‫in which we would end up
‫with like hundreds of many components
‫which really isn't worth it.
‫So this is more than enough.
‫This logo is doing just one thing
‫so it has one responsibility already
‫which is basically to display this logo,
‫which is all this.
‫So there's absolutely no need to break it down even further.
‫So this is perfect like this.
‫So the nav bar is now finished
‫and we are ready to break up the main component,
‫of course a lot more as well.
‫So looking at our first criterion
‫which is the logical separation of content
‫we clearly have no clear separation right now.
‫So we have one component that has all of this.
‫And so the first visual division
‫that I would make here is to create one component
‫for this box and one for the right one here.
‫And so let's do just that.
‫Take this box and then let's move down here
‫and create the list box.
‫All right, and I'm calling it the list box.
‫And now we can see, so again
‫I'm calling this component here, "The list box".
‫Because in there is where we will have
‫this list of movies here.
‫So let's now grab the state that is missing here.
‫So set open one and the movies.
‫So cutting that from here and placing it here.
‫Alright?
‫Now, of course when you build your own apps in the future
‫then you will not build one huge component like this.
‫This is just an exercise so that we can apply
‫what we learned before,
‫but again, never build such a huge component like this
‫because there's really no need to then have all the work
‫of splitting that huge component up
‫like we are doing right now.
‫But I think that, yeah, for learning
‫this is fun and absolutely no problem.
‫So let's grab this other box as well
‫and place it into the watched box.
‫So function watched box.
‫Alright, let's grab all the states that we need here.
‫And let's also already include both the boxes here.
‫So that's the list box and the watched box.
‫So basically exactly the code that we had here
‫before now split up into these two components
‫placing the state there and it's not appearing
‫but that's because once again I forgot to return here.
‫Nice, so let's keep going
‫because I still think that this is way too big.
‫So just looking at this code, it looks quite confusing.
‫You cannot immediately understand what this
‫component here is doing.
‫It has like this button here,
‫which does something.
‫And then we have all of this code down here.
‫And so now what I want to do is to extract this
‫code here into its own list component
‫which will then have only one responsibility
‫which is to simply display well the list of movies.
‫So let's grab this, cut it from here,
‫and place it right here.
‫So movie list and I keep forgetting to return.
‫And then here we also need that movies state
‫and yeah, here all we need to do
‫is to include that movie list.
‫Nice, and this is still working.
‫Yes, and so we're doing a great job here.
‫So this component is now a lot easier to understand here
‫if you ask me.
‫So we have one button
‫and then if that button is open,
‫we show the movie list.
‫Nice, so getting better and better.
‫And I just want to mention that
‫in the real world we would probably have one file
‫for each of these components.
‫So something I said already many times ago
‫or many times before
‫but I still wanted to just mention that here.
‫So we now have this movie list component right here
‫and for many people this would now be enough.
‫But if it comes down to my personal coding style
‫or my personal preference,
‫I would actually like to still extract
‫this list element here into its own movie.
‫And we have actually done that many times before already
‫in this application where we had one component for the list
‫which would then simply loop over some array
‫and then display one component for each element.
‫And so now I will do exactly the same here.
‫So again, this is now a bit more of my personal preference
‫but I think that it's actually quite a sensible thing to do
‫because then here we have the mapping over the array here
‫isolated in this one component and have then one component
‫which is really only about the movie and nothing else.
‫And again, I keep forgetting to return here.
‫And yeah, let's then use that movie here.
‫And what will happen is that we will pass the current movie.
‫So this one here that's coming
‫from the map as a prop into that component.
‫We will also need this key no longer here,
‫but now here.
‫And finally accept that prop right here.
‫We give it a safe, we have no error.
‫And so let's keep going.
‫So I think we are quite finished here with this left part.
‫And so let's go over here.
‫Now here we can already see that it's a bit more complex
‫because here we have not only the list
‫but also like this summary of the list.
‫But let's see what we actually have there.
‫So it's inside this watch box.
‫And of course we can also start seeing our components
‫tree right here, which is always nice.
‫So I always like to do that actually.
‫And so it's coming together here quite nicely.
‫Maybe it doesn't even have to be this big
‫then we can see a bit better.
‫And so yeah, this is exactly what we have been building.
‫And now all we have to do is to also break up
‫this watched box a bit better.
‫So let's take care of that.
‫And first up I will do that division
‫that I just mentioned earlier.
‫So we have this list here and also this summary.
‫So let's grab that summary here.
‫And so that's basically this div
‫with the class name of summary.
‫So I'm cutting that.
‫And then let's just create function,
‫watched summary
‫And then returning this.
‫So now this code here actually depends on a few things.
‫So all of these variables,
‫so let's see what they are.
‫So that's these variables right here,
‫plus the watched.
‫Now we could pass all of these three here individually
‫or actually the four of them.
‫So watched plus these three here.
‫So we could pass them in
‫into the watched box component that we just created.
‫But actually if we take a look at them,
‫all of them simply depends on the watched state.
‫And so what we're going to do is to grab this
‫and pass this watched list.
‫So that array right here as a prop
‫Okay, moving there, pasting that here.
‫Ah, and of course we need to accept that prompt in here
‫and now React is happy again.
‫So again, what we did is that these three pieces here
‫are derived state and they are derived
‫from this watched array right here.
‫And so we simply passed the watched array
‫into this component and then yeah,
‫just moved these three here
‫of course, also into this component.
‫And so we did that instead of leaving this year
‫in the parent component and passing all of them one by one.
‫But this code here clearly belongs in this component.
‫So it's clearly part of the responsibility
‫of watched summary to calculate its own statistics.
‫And if all it needs to do that,
‫is this watched array.
‫Well then we are happy to provide it
‫with exactly that array.
‫But moving on, let's now create another list
‫which is here for this watched.
‫So this watched movies list,
‫so cut that as well.
‫So let's call this one here,
‫"The watch list".
‫And of course we could have also called it
‫"The watched movie list".
‫And let's actually do that.
‫So remember how I said that we should not be afraid
‫of long component names?
‫And so I think that this is a bit better actually.
‫Now here we will need that watched array.
‫So that piece of state that we have up here, right?
‫But let's first give it a safe and then see that error
‫And well, nothing really happened here.
‫Well first of all,
‫we have a bug here and it's a big one,
‫which is that we are here including
‫the same component inside itself.
‫So we are including watch box inside watch box.
‫So this was by mistake,
‫probably you have noticed this as I was typing.
‫So here of course it needs to be the watched summary
‫which is a component that we were talking about before
‫but still nothing is happening.
‫So let's try to reload here.
‫But now we have like this infinite loop
‫so maybe we have some errors, but yeah
‫I think the best thing to do is to actually
‫quit the application altogether
‫and then just try to restart.
‫So let's wait for it and yeah,
‫let's close the old one.
‫And now we get that error that we had before.
‫So before I fix that,
‫or actually let's pass it in already here,
‫but I still wanted to say that it's really,
‫really important
‫that you do not call the component inside of itself.
‫So again, I was calling watch box in here.
‫And so the problem was
‫that this then created an infinite loop
‫of the component calling itself.
‫And so that's why when I was reloading the application
‫React here wasn't really reacting.
‫So the application wasn't really able to then render itself.
‫And again, because of that infinite loop.
‫So never do what I just did here by mistake.
‫But anyway, we now passed the watched array here
‫into this watched movies list.
‫And so here we just need to receive that,
‫give it a save,
‫and then we are back to normal.
‫Let's quickly get our console back.
‫And yeah, so this is the list that we have.
‫And now just one more component where just like before
‫I will extract the list item into its own component.
‫So grabbing all of this,
‫let's create the watched movie here.
‫We already know that we need to accept the movie.
‫And here, remember, it's very important
‫that we place the corrupt name
‫into these curly braces because we are in fact
‫just distracting the props object, right?
‫And so then here
‫all we have to do is to write watched movie pass
‫in the movie prop.
‫And yeah, we also need this key right here.
‫And with this we should be done and we are indeed.
‫So the app works and looks just like before
‫but we now divided this application
‫into its logical components.
‫So components that have a logical separation
‫of the content that might be reusable
‫and that have the right number
‫of responsibilities and of complexity.