Journey, React

Day 4: More Components

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.

Components

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.

content

Inside each individual post we have 4 smaller components.

  1. The image
  2. Who and when it was written
  3. What they wrote
  4. Responses

We can go down further and split the responses into individual components of

  1. replies
  2. retweets
  3. likes
  4. 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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s