There's one more change I want to make before we finish up with our LoginContainer
skeleton.
We talked earlier about making React components reusable, so you can implement the same code in multiple places in your application. We should try to split our UI into as many small and reusable pieces as possible to save us time, and I see a great candidate in our LoginContainer
.
LoginContainer
won't be our only container. In the next few chapters, we'll create new pages with different content, but we want them to have the same look, and we'll want to have the Chatastrophe logo and title at the top in the same place as it is now.
What I propose is that we make a new Header
component that we can save for future use.
Now, we made our LoginContainer
a class component because we needed to use state and methods. Our header, on the other hand, won't have any state or functionality; it's literally just a piece of UI. The best choice is to make it a functional component, because we can.