Recreate a twitter timeline using react.
We will be building a twitter timeline using react components.
Here is what the original timeline looks like:
Let's look at the object for a single tweet in our file:
{
"created_at":"Tue May 01 05:49:13 +0000 2018",
"id":991192797435711500,
"id_str":"991192797435711488",
"text":"Making of ye vs the people https://t.co/1xvft3175J",
"truncated":false,
"entities":{
"hashtags":[
],
"symbols":[
],
"user_mentions":[
],
"urls":[
{
"url":"https://t.co/1xvft3175J",
"expanded_url":"http://www.kanyewest.com",
"display_url":"kanyewest.com",
"indices":[
34,
57
]
}
]
},
"source":"<a href=\"http://twitter.com/download/iphone\" rel=\"nofollow\">Twitter for iPhone</a>",
"in_reply_to_status_id":null,
"in_reply_to_status_id_str":null,
"in_reply_to_user_id":null,
"in_reply_to_user_id_str":null,
"in_reply_to_screen_name":null,
"user":{
"id":169686021,
"id_str":"169686021",
"name":"KANYE WEST",
"screen_name":"kanyewest",
"location":"",
"description":"",
"url":"http://t.co/ZdywsugSWD",
"entities":{
"url":{
"urls":[
{
"url":"http://t.co/ZdywsugSWD",
"expanded_url":"http://KANYEWEST.COM",
"display_url":"KANYEWEST.COM",
"indices":[
0,
22
]
}
]
},
"description":{
"urls":[
]
}
},
"protected":false,
"followers_count":28134561,
"friends_count":3,
"listed_count":49854,
"created_at":"Thu Jul 22 23:00:05 +0000 2010",
"favourites_count":2,
"utc_offset":-36000,
"time_zone":"Hawaii",
"geo_enabled":false,
"verified":true,
"statuses_count":330,
"lang":"en",
"contributors_enabled":false,
"is_translator":false,
"is_translation_enabled":false,
"profile_background_color":"C0DEED",
"profile_background_image_url":"http://pbs.twimg.com/profile_background_images/390200267/Screen_Shot_2011-12-27_at_11.53.35_PM.png",
"profile_background_image_url_https":"https://pbs.twimg.com/profile_background_images/390200267/Screen_Shot_2011-12-27_at_11.53.35_PM.png",
"profile_background_tile":true,
"profile_image_url":"http://pbs.twimg.com/profile_images/585565077207678977/N_eNSBXi_normal.jpg",
"profile_image_url_https":"https://pbs.twimg.com/profile_images/585565077207678977/N_eNSBXi_normal.jpg",
"profile_banner_url":"https://pbs.twimg.com/profile_banners/169686021/1428444619",
"profile_link_color":"0084B4",
"profile_sidebar_border_color":"C0DEED",
"profile_sidebar_fill_color":"DDEEF6",
"profile_text_color":"333333",
"profile_use_background_image":true,
"has_extended_profile":false,
"default_profile":false,
"default_profile_image":false,
"following":true,
"follow_request_sent":false,
"notifications":false,
"translator_type":"none"
},
"geo":null,
"coordinates":null,
"place":null,
"contributors":null,
"is_quote_status":false,
"retweet_count":5169,
"favorite_count":22874,
"favorited":false,
"retweeted":false,
"possibly_sensitive":false,
"lang":"en"
},
We will be making nested components out of the objects that are nested in this tweet object.
Specifically user
and entities
. Check the twitter docs here to see more about entities:
Your finished work doesn't need to look like the screenshot.
Each component should be passing down information to that nested component for it to render. You should never refer to the top-level json variable in your nested components.
A suggested structure might look something like this: (note this is not react code- it just illustrates which components are inside other components)
<Tweet>
<User/>
<Entities>
<UrlEntity/>
</Entities>
</Tweet>
npm install
Import the tweets.js
file.
npm run build
node index.js
Add css to your code. You can add it in the public folder, or put it in the head
of the HTML.
Check out the other levels of interaction there are on a twitter timeline in the website. https://twitter.com/kanyewest Build a component for each of these. (i.e., mousing over the user profile photo brings up the user profile)
Build out the styles to make each of these components work just like they do on the twitter website. Hint: You can do it completely in CSS.
.foobar:hover{
display:block;
}