In this lecture, we are going to talk about redesigning the model we have created to understand why
I have two tabs opened with pages from the static template on one page.
We have the authentication model on the other page.
We have another model for editing a video.
We are going to need to recreate the model for another section of our app.
This leads us to an interesting topic of component design.
It's not uncommon to face a scenario like this.
Generally, we have two types of components.
We have single use components.
They are components.
We use one time.
Our navigation component is an example of a single use component.
We won't need to create multiple navigation menus.
One will suffice.
The other type of component we will need to create is a reusable component.
Our modal component is an example of a reusable component.
At the moment.
It will always render the same content.
Our goal is to create a model that can render different content whenever we're designing a reusable
component.
We need to ask ourselves What are the components responsibilities?
What does the component need?
What does the component provide?
In other words, we need to determine the input and output of a component.
Answering these questions will give us direction during the development of the components.
In the case of the modal component, it should handle toggling the visibility of the model.
Other component shouldn't be responsible for this task.
It should fall solely on the modal components.
Managing the model is the responsibility of the model components.
The model component should not render content.
Instead, it should allow for parent components to provide content.
We have an idea of how we can accomplish this task.
We can add content projection to send content from the parent component to the child component.
Lastly, the modal component should provide a location for rendering content.
There are additional details I'm not mentioning.
However, we'll get into those details throughout the section.
Currently, we're trying to get a high level overview of the development process.
Let's start designing a model in the next lecture.