It doesn’t seem possible or even realistic to think that our apps are only going to have one component at a time. We could build the entire UI in a single component, but it will be huge and hard to test. It is more realistic to have two or three if not more.
Let’s see how we would divide a site into components. Let’s take a look at the twitter message section. We will do a small section so it’s not too overwhelming, I only want to concentrate on the timeline for now.
The timeline consists of two main components, the nav bar and the content itself. If we look at the content we can see that it can be split up into separate components.
Inside each individual post we have 4 smaller components.
- The image
- Who and when it was written
- What they wrote
- Responses
We can go down further and split the responses into individual components of
- replies
- retweets
- likes
- data.
I don’t know about you but that seems a bit too much but I could be wrong. I guess it all depends on who is doing it , what the application is and how detailed they want to be. This will have to come with experience.
In this case the content component is what’s known as the parent component and this will be the component that does the changing of the data.
The image, name, content and responses are what are called children components. There is no limitation as to how many children a parent can have.
Tomorrow we will build out an app with more than one component.
Claudia Maciel 