exercise-1.md

Create stateless Trello components

• Add a main <div> to index.html.
• In the js/components repository, create the four stateless components described below.
• As you complete each component, render them into the <div> by adding a ReactDOM.render line to js/index.js.

Components

<Card />

A Trello card.

Props:

• id: number - Integer id of the card
• text: string - The text of the card

Example:

<Card id={0} text="Example card" />

<AddForm />

A form for adding a new card or list, consisting of a text input, and a button.

Props:

• onAdd: (text: string)=>void - Callback function, called when a valid form is submitted.

<List />

A Trello list, consisting of a title, a series of Cards, and an AddForm for cards.

Props:

• id: number - Integer id of the list.
• title: string - Title of the list.
• cards: Array - An array of cards.

  Example:

  <List id={1} cards={
      [{
          id: 0,
          text: 'Example card'
      }, {
          id: 1,
          text: 'Another card'
      }]
  } />

  <Board />

  A Trello board, consisting of a series of Lists, and an AddForm for lists.

  Props:

  • lists: Array An array of lists.

    Example:

    <Board lists={
        [{
            id: 0,
            title: 'First list',
            cards: [{
                id: 0,
                text: 'Example card'
            }, {
                id: 1,
                text: 'Another card'
            }]
        }, {
            id: 1,
            title: 'Second list',
            cards: [{
                id: 0,
                text: 'Example card'
            }, {
                id: 1,
                text: 'Another card'
            }]
        }]
    } />