02 Layout de la aplicación

Componente App

create-react-app nos generó un componente principal llamado App. Vamos a editar el mismo para definir el layout de nuestra aplicación.

Editamos el archivo src/App.js para que se vea de la siguiente manera:

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="App-container">
        <div className="App-header">
          <a className="App-header-logo">
            <span className="App-header-logo-default"></span>
          </a>
        </div>
        <div className="App-content">
        </div>
      </div>
    );
  }
}

export default App;

---

Agregamos estilos CSS

Vamos a ponerle un poco de color a nuestra aplicación agregando código CSS propio. Debemos reemplazar el código del archivo src/index.css con los estilos de nuestra aplicación. Los pueden encontrar aquí.

Si todo funciona según lo esperado, visitando nuevamente http://localhost:3000 deberíamos poder ver lo siguiente:

Commit en git

git add -A
git commit -m "Layout principal"

---

Siguiente: 3.a Listado de boards