To answer these questions, let's zoom out from the implementation details and explore our application's architecture:
The
app.js
file renders ourApplication
componentThe
Application
component manages a collection of tweets and renders ourStream
andCollection
componentsThe
Stream
component receives the new tweets from theSnapkiteStreamClient
library and renders theStreamTweet
andHeader
componentsThe
Collection
component renders theCollectionControls
andTweetList
components
Stop right there. Can you tell how data flows inside our application? Do you know where it enters our application? How does a new tweet end up in our collection? Let's examine our data flow more closely:
We use the
SnapkiteStreamClient
library to receive a new tweet inside aStream
component.This new tweet is then passed from
Stream
to theStreamTweet
component.The
StreamTweet
component passes it to theTweet
component, which renders the tweet image.A user clicks on that...