Introduction

Welcome to this week's lab! @

This lab is an introduction to props and how we can pass props from one component to another in order to render the correct information in the place we want it. Today, we'll be creating a Tweet Card component with many of the same properties on an actual Twitter tweet.

Like Lab 2, this assignment is split into a lab and a homework. We encourage you to complete as much as you can during class — the finished assignment will be due next Tuesday, March 12.

Checkoff Submission

Complete this by Tuesday, March 6 at 11:59 PM. You don't need to finish lab to submit this.

Lab 4 - Lab 4 Checkoff

Homework 3 Submission

Complete this (the full assignment) by Tuesday, March 12 at 11:59 PM.

HW 3 - Homework 3 Submission

Getting ready for this week's lecture

In preparation for this week's lecture, please install the Chrome extension "React Developer Tools" on the Chrome Web Store:

React Developer Tools

We'll talk more about how to use this in class! Feel free to ask a TA if you have any trouble getting it installed.

🐦 Tweeting Time

Twitter is an American online news and social networking service on which users post and interact with messages known as 'tweets'.

With just 140 280 characters, a Tweet represents one of the most basic components we can create, made up of:

Today, we will be building this TweetCard component similar to the one shown below.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e8e64ba9-f9a1-4e18-aa00-c5ce2cc00477/EllenTweet.png

Although simple in structure, we can actually break a tweet into many separate sections. Let's take a look at an example:

Before creating any component, a good start will be separating our design into smaller sections. A popular method is drawing rectangles around each sections and possibly drawing more if we want smaller components inside our current component.