El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència

HOME

En aquest tema, aprendrem a construir la interfície d'usuari (UI) de la nostra aplicació React. Ens centrarem en la creació de components reutilitzables, l'ús de biblioteques d'estil i la implementació de bones pràctiques per a una UI neta i eficient.

Objectius

Crear components reutilitzables.
Utilitzar biblioteques d'estil com Styled Components o CSS Modules.
Implementar bones pràctiques per a la construcció de la UI.

Crear components reutilitzables

1.1. Què són els components reutilitzables?

Els components reutilitzables són blocs de codi que poden ser utilitzats en diferents parts de la nostra aplicació sense necessitat de duplicar codi. Això facilita el manteniment i l'escalabilitat de l'aplicació.

1.2. Exemple pràctic: Botó reutilitzable

Pas 1: Crear el component del botó

// src/components/Button.js
import React from 'react';
import PropTypes from 'prop-types';
import './Button.css';

const Button = ({ label, onClick, type = 'button' }) => {
  return (
    <button className="custom-button" onClick={onClick} type={type}>
      {label}
    </button>
  );
};

Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
  type: PropTypes.oneOf(['button', 'submit', 'reset']),
};

export default Button;

Pas 2: Estilitzar el component del botó

/* src/components/Button.css */
.custom-button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.custom-button:hover {
  background-color: #0056b3;
}

Pas 3: Utilitzar el component del botó

// src/App.js
import React from 'react';
import Button from './components/Button';

const App = () => {
  const handleClick = () => {
    alert('Botó clicat!');
  };

  return (
    <div>
      <h1>Benvingut a la nostra aplicació</h1>
      <Button label="Clica'm" onClick={handleClick} />
    </div>
  );
};

export default App;

Utilitzar biblioteques d'estil

2.1. Styled Components

Styled Components és una biblioteca que permet escriure CSS dins dels components de React utilitzant tagged template literals.

Exemple pràctic: Botó amb Styled Components

// src/components/Button.js
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

const StyledButton = styled.button`
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;

  &:hover {
    background-color: #0056b3;
  }
`;

const Button = ({ label, onClick, type = 'button' }) => {
  return (
    <StyledButton onClick={onClick} type={type}>
      {label}
    </StyledButton>
  );
};

Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
  type: PropTypes.oneOf(['button', 'submit', 'reset']),
};

export default Button;

2.2. CSS Modules

CSS Modules permeten escriure CSS que és local per a cada component, evitant conflictes de noms.

Exemple pràctic: Botó amb CSS Modules

// src/components/Button.js
import React from 'react';
import PropTypes from 'prop-types';
import styles from './Button.module.css';

const Button = ({ label, onClick, type = 'button' }) => {
  return (
    <button className={styles.customButton} onClick={onClick} type={type}>
      {label}
    </button>
  );
};

Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
  type: PropTypes.oneOf(['button', 'submit', 'reset']),
};

export default Button;

/* src/components/Button.module.css */
.customButton {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
}

.customButton:hover {
  background-color: #0056b3;
}

Bones pràctiques per a la construcció de la UI

3.1. Separació de preocupacions

Mantingueu la lògica de la UI separada de la lògica de negoci. Utilitzeu components presentacionals per a la UI i components contenidors per a la lògica de negoci.

3.2. Nomenclatura clara

Utilitzeu noms clars i descriptius per als components i les classes CSS. Això facilita la comprensió i el manteniment del codi.

3.3. Reutilització de components

Creeu components reutilitzables sempre que sigui possible per evitar la duplicació de codi i facilitar el manteniment.

3.4. Estils modulars

Utilitzeu CSS Modules o Styled Components per evitar conflictes de noms i mantenir els estils locals als components.

Exercici pràctic

Objectiu

Crear un component de targeta reutilitzable que mostri informació d'un usuari.

Requisits

El component ha de rebre les següents props: name, email, avatar.
Ha de mostrar el nom, el correu electrònic i una imatge d'avatar.
Ha d'estar estilitzat utilitzant CSS Modules.

Solució

Pas 1: Crear el component de targeta

// src/components/UserCard.js
import React from 'react';
import PropTypes from 'prop-types';
import styles from './UserCard.module.css';

const UserCard = ({ name, email, avatar }) => {
  return (
    <div className={styles.card}>
      <img src={avatar} alt={`${name}'s avatar`} className={styles.avatar} />
      <div className={styles.info}>
        <h2 className={styles.name}>{name}</h2>
        <p className={styles.email}>{email}</p>
      </div>
    </div>
  );
};

UserCard.propTypes = {
  name: PropTypes.string.isRequired,
  email: PropTypes.string.isRequired,
  avatar: PropTypes.string.isRequired,
};

export default UserCard;

Pas 2: Estilitzar el component de targeta

/* src/components/UserCard.module.css */
.card {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 20px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.avatar {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin-right: 20px;
}

.info {
  display: flex;
  flex-direction: column;
}

.name {
  font-size: 18px;
  margin: 0;
}

.email {
  font-size: 14px;
  color: #555;
}

Pas 3: Utilitzar el component de targeta

// src/App.js
import React from 'react';
import UserCard from './components/UserCard';

const App = () => {
  const user = {
    name: 'John Doe',
    email: '[email protected]',
    avatar: 'https://via.placeholder.com/60',
  };

  return (
    <div>
      <h1>Llista d'usuaris</h1>
      <UserCard name={user.name} email={user.email} avatar={user.avatar} />
    </div>
  );
};

export default App;

Conclusió

En aquesta secció, hem après a construir la interfície d'usuari de la nostra aplicació React utilitzant components reutilitzables i biblioteques d'estil com Styled Components i CSS Modules. També hem implementat bones pràctiques per a la construcció de la UI. A la següent secció, ens centrarem en la gestió de l'estat i la integració de l'API.

Construir la interfície d'usuari

Objectius

Crear components reutilitzables

1.1. Què són els components reutilitzables?

1.2. Exemple pràctic: Botó reutilitzable

Pas 1: Crear el component del botó

Pas 2: Estilitzar el component del botó

Pas 3: Utilitzar el component del botó

Utilitzar biblioteques d'estil

2.1. Styled Components

Exemple pràctic: Botó amb Styled Components

2.2. CSS Modules

Exemple pràctic: Botó amb CSS Modules

Bones pràctiques per a la construcció de la UI

3.1. Separació de preocupacions

3.2. Nomenclatura clara

3.3. Reutilització de components

3.4. Estils modulars

Exercici pràctic

Objectiu

Requisits

Solució

Pas 1: Crear el component de targeta

Pas 2: Estilitzar el component de targeta

Pas 3: Utilitzar el component de targeta

Conclusió

Curs de React

Mòdul 1: Introducció a React

Mòdul 2: Components de React

Mòdul 3: Treballar amb esdeveniments

Mòdul 4: Conceptes avançats de components

Mòdul 5: Hooks de React

Mòdul 6: Enrutament en React

Mòdul 7: Gestió de l'estat

Mòdul 8: Optimització del rendiment

Mòdul 9: Proves en React

Mòdul 10: Temes avançats

Mòdul 11: Projecte: Construir una aplicació completa