Lesson Notes on React Components

react-components.md

React Components

• Describe what a component is
• Identify componets of a website
• Functional vs Class Components
• Component composition
• Props
• JSX mapping over collection

Describe & Identify Components

Take a peek at the following website. Can you identify the different componets of the site? What parts of the site interact with other parts?

Function vs Class Components

The most basic components in react are called functional components

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

The same component writen as a class component

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

What are the main differences between functional and class components?

When should you choose a class component over a functional component?

Component Composition

Lets practice writing some simple components and composing them together.

Start by creating a new react projcet like so: create-react-app component-lesson

Replace the code in App.css with this snippit:

.App {
  margin: auto;
  text-align: center;
  max-width: 650px;
}

.box {
  display: inline-block;
  text-align: center;
  padding: 1em;
  margin: 0.5em;
  min-width: 80px;
  color: lightgrey;
}

.comment-list {
  text-align: left;
}

.comment {
  min-width: 100px;
}

.d-1 {
  margin-left: 0;
}

.d-2 {
  margin-left: 2em;
}

.d-3 {
  margin-left: 4em;
}

Once created, make a new Box component that renders the following html:

<div className="box" style="background: blue">Im a box</div>

Add the component to the main App components render method:

<Box />

Go nuts on those boxes!

Props

Take a minute to read about props in the react docs:

https://reactjs.org/docs/components-and-props.html

or the learn article:

https://learn.galvanize.com/cohorts/231/units/6021/content_files/45692

Turn to your neighbor and describe what component props are in react.

JSX mapping over collection

Lets modify our Box component to use props!

Add the following colors array to the top of App.js

const colors = [
  "#50514F",
  "#F25F5C",
  "#FFE066",
  "#247BA0",
  "#70C1B3"
]

Then create a new BoxList component. This component will recieve the colors array as a prop and render a Box component for each item in the array. Make sure to update the Box component to use a color prop it's inline style.

Challenge:

Using the comment data bellow, create Comment and CommentList components.

const commentData = [
  {
    name: 'Lucio',
    text: "wazzup",
    responses: [{
      name: 'Zarya',
      text: "Hello there",
      responses: [{
        name: 'Ana',
        text: "yahoo",
        responses: []
      }],
    }, {
      name: 'Mccree',
      text: "bingo",
      responses: []
    }]
  },
  {
    name: "Symmetra",
    text: "Yeah baby",
    responses: []
  }
]