5. Example: Tweet Component

1/ Sketch

Spending a few seconds putting pen (or pencil) to paper can save you time later.

2/ Carve into Components

Imagine if you wanted to display 3 tweets, each with a different message and user. What would change, and what would stay the same?

3/ Name the Components

4/ Build

Option 1: Start at the top. Build the Tweet component first, then build its children. Build Avatar, then Author, and so on.

Option 2: Start at the bottom (the “leaves” of the tree). Build Avatar, then Author, then the rest of the child components. Verify that they work in isolation. Once they’re all done, assemble them into the Tweet component.


import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'

function Tweet() {
  return(
    <div className="tweet">
      Tweet
    </div>
  );
}

ReactDOM.render(
  <Tweet/>,
  document.querySelector('#root')
);

We’ll learn more about props in the next section, but for now, just think of them like HTML attributes.

One other new thing you might’ve noticed is the import './index.css' which is importing… a CSS file into a JavaScript file? Weird?

What’s happening is that behind the scenes, when Webpack builds our app, it sees this CSS import and learns that index.js depends on index.css. Webpack reads the CSS file and includes it in the bundled JavaScript (as a string) to be sent to the browser.

You can actually see this, too – open the browser console, look at the Elements tab, and notice under there’s a