Categorías
Temporada 0

Log 0.1

Objetivos:

  • Custom Hooks
  • Webpack
  • Class components

Aunque este es el primer episodio de lo que he decidido llamar ‘temporada 0’, en realidad estaríamos casi terminando esta parte.

Llevo unas cuantas semanas siguiendo un curso (muy recomendado) de Full Stack: https://fullstackopen.com/en/ y los objetivos hacen referencia a la Parte 7.

Usando librerías de estilos

La parte de la UI se puede gestionar con distintas librerías. Este curso hace uso de Bootstrap, aunque son innumerables las que ahora mismo cohabitan en el mercado.

La forma de instalar la versión asociada con React es bastante sencilla:

npm install react-bootstrap

Me parece realmente interesante el mundo de los frameworks de estilo: ayudan enormemente en la labor de diseño proporcionando una plataforma estandarizada con la que gestionar la parte visual de tu sitio.

Una tabla pre-formateada usando Bootstrap y React

La gracia de esta unión Bootstrap – React es que hace uso de la metodología por componentes de la segunda para poder desarrollar la interfaz.

Este es un ejemplo de formulario de acceso:

<Form onSubmit={onSubmit}>
   <Form.Group>
      <Form.Label>username:</Form.Label>
      <Form.Control
         type='text'
         name='username'
       ></Form>
       <Form.Label>password:</Form.Label>
       <Form.Control
         type='password'
        ></Form>
        <Button variant='primary' type='submit'>
          login
         </Button>
   </Form.Group>
</Form>

Existen múltiples alternativas, como Material UI de Google o, incluso, lo que se conoce como Styled Components, que es la creación de componentes con un estilo asignado:

const Boton = styled.button`
  background: Bisque;
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid Black;
  border-radius: 8px;
`
return (
    <div>
      <h2>Login</h2>
      <form onSubmit={onSubmit}>
        <Boton type='submit' primary=''>login</Boton>
      </form>
)

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *