Component Hierarchy

React Component Hierarchy

Functional Component Hierarchy

• Root
  • App
    • Aside
    • Header
    • Main
    • Footer

Aside

• Aside
  • Components:
    • Search Input
      • State: local
    • AsideButtons
    • FriendsList
      • FriendsListItem

Header

• Header

  • Components:
    • HeaderButtons
    • Receiver
      • props: users[:username], users[:status]

• MessagesIndexContainer + MessagesIndex

  • State: messages, users
  • Components:
    • MessageIndexItem
      • State: messages[:id], ui

• ChirpShowContainer + ChirpShow

  • Route: /#/chirps/:chirpId
  • State: chirps[:id], users[:id], ui

• ChirpFormContainer + ChirpForm

  • Route: /#/chirps/new
  • State:errors.chirpForm

Session

• SessionFormContainer + SessionForm
  • Route: /#/login and /#/signup
  • State: errors.login

UsersSearch

• UserSearchIndexContainer + UserSearchIndex
  • Route: /#/
  • State: ui
  • Components:
    • UserSearchIndexItem
    • State: none (will be made with separate ajax)