03.a Listado de boards

Ahora que tenemos la estructura principal de nuestra aplicación, es hora de agregar un componente para listar todos los boards.

Agregamos el componente Boards

Creamos una carpeta components dentro de la carpeta src. Ésta carpeta va a contener todos los componentes react que crearemos de aquí en más.

Agregamos entonces nuestro primer componente Boards mediante la creación del archivo src/components/Boards.js. El contenido del archivo debería ser el siguiente:

import React, { Component } from 'react';

class Boards extends Component {
  render() {
    return (
      <div className="Boards">
        <div className="Boards-container">
          <div className="Boards-header">
            <div className="Boards-header-icon">
              <span className="Boards-header-icon-member"></span>
            </div>
            <h3 className="Boards-header-name">Personal Boards</h3>
          </div>

          <ul className="Boards-list-container">
            <li className="BoardTile">
              <a className="BoardTile-link">
                <span className="BoardTile-fade"></span>
                <span className="BoardTile-details">
                  <span className="BoardTile-details-name">
                    Workshop
                  </span>
                </span>
              </a>
            </li>
            <li className="BoardTile">
              <a className="BoardTile-link">
                <span className="BoardTile-fade"></span>
                <span className="BoardTile-details">
                  <span className="BoardTile-details-name">
                    Team
                  </span>
                </span>
              </a>
            </li>
            <li className="NewBoardLink">
              <a className="NewBoardLink-link">
                Create new board…
              </a>
            </li>
          </ul>
        </div>
      </div>
    );
  }
}

export default Boards;

Invocamos el componente Boards

Tenemos el nuevo componente Boards, ahora lo invocamos desde el componente principal App.

Editamos el archivo src/App.js importando el componente Boards de la siguiente manera:

   import React, { Component } from 'react';
+  import Boards from './components/Boards';

Luego agregamos la invocación al componente:

render() {
  return (
    <div className="App-container">
      <div className="App-header">
        <a className="App-header-logo" to="/">
          <span className="App-header-logo-default"></span>
        </a>
      </div>

      <div className="App-content">
+        <Boards/>
      </div>
    </div>
  );
}

Visitamos nuestra aplicación:

Commit en git

git add -A
git commit -m "Listado de boards estatico"

Siguiente: 3.b. Obtener datos reales desde nuestra API

---

Check Point

Si se necesita "ponerse al día" con los pasos hasta este punto ejecutar los siguientes comandos:

# Agregar el remote si no se hizo antes
git remote add origin https://github.com/wyeworks/react-workshop-2018.git
git fetch origin
# Fin paso opcional

git reset --hard fdecfea