Day 6: React

Tuesday, July 3, 2018

Lecture Videos

Morning:

Afternoon:

Topics

Examples

Using map with Components

Person.js



class Person extends React.Component {
  render() {
    return (
      <li>Hello, {this.props.person.name}!</li>
    )
  }
}

export default Person

PersonList.js



import Person from './Person'

class PersonList extends React.Component {
  render() {
    const people = [
      { name: 'Dana', hair: 'blonde' },
      { name: 'Nichole', hair: 'long' },
      { name: 'Davey', hair: 'long gone' }
    ]
    return (
      <div>
        <h2>People</h2>
        {
          people.map((person => <Person person={person} />))
        }
      </div>
    )
  }
}

export default PersonList

Projects

Chatarang

Homework

  • Create and style more components, based on the chat-static content. There should be approximately one CSS file per component.

Super Mega Bonus Credit Hyper Fighting

  • Make a SignIn component with a form that takes a user name or email.
  • When the form is submitted, save that user in the state of the App component.
  • When state.user is not set, show the SignIn component.
  • When state.user is set, show the Main component.

Hint: You need to figure out how to do conditional rendering.