CONTATTACI

Guide per aspiranti programmatori

Programmatore che esamina react al microscopio
Lezione 24 / 41

Economia dei componenti in React

In questo momento, la nostra applicazione ha due problemi:

  1. Troppo codice nel componente App.
  2. È davvero bruttina da vedere; non che il nostro CSS sia da premio, ci stiamo concentrando sui concetti di React, ma così siamo proprio in preda all’aspetto di default del browser.

Come possiamo risolvere? 

Ci sono due elementi div, rispettivamente con classe TodoList e TodoItem, che sembrano proprio chiedere di essere isolati in componenti! Facciamolo: creiamo due nuovi componenti, in src/components/TodoList e src/components/TodoItem, con i loro file CSS relativi.

 

/* File: src/components/TodoItem.css */

.TodoItem {
  display: flex;
  align-items: baseline;
}

.TodoItem input[type="checkbox"] {
  margin: 0 0.5em 0 0;
}
// File: src/components/TodoItem.jsx

import "./TodoItem.css";

export default function TodoItem({ todoItem }) {
  return (
    <div className="TodoItem">
      <input type="checkbox" checked={todoItem.isDone} disabled />
      <span>{todoItem.description}</span>
    </div>
  );
}
/* File: src/components/TodoList.css */

.TodoList {
  width: 90vw;
  max-width: 45em;
  margin: 1.5em auto;
}
// File: src/components/TodoList.jsx

import TodoItem from "./TodoItem";
import "./TodoList.css";

export default function TodoList({ todoList }) {
  return (
    <div className="TodoList">
      {todoList.map((todoItem, index, todoList) => {
        return <TodoItem key={todoList.length - index} todoItem={todoItem} />;
      })}
    </div>
  );
}
// File: src/App.jsx

import { useState } from "react";
import "./App.css";
import Panel from "./components/Panel";
import TodoItemForm from "./components/TodoItemForm";
import TodoList from "./components/TodoList";

export default function App() {
  const [todoList, setTodoList] = useState([]);

  const onTodoItemFormSubmit = (todoItem) => {
    return setTodoList((todoList) => [todoItem, ...todoList]);
  };

  return (
    <div className="App">
      <TodoList todoList={todoList} />
      <Panel>
        <TodoItemForm onSubmit={onTodoItemFormSubmit} />
      </Panel>
    </div>
  );
}

Molto meglio! Adesso abbiamo un minimo di allineamento.

Notiamo come l’attributo key non è stato portato dentro il componente TodoItem ma è rimasto in TodoList. Come abbiamo detto precedentemente, key non ha a che fare con la configurazione degli elementi o componenti, ma con la gestione di liste di elementi o componenti sullo stesso livello. Inoltre, dato che key è sempre valido sia come attributo che come proprietà, potevamo assegnarlo all’elemento div come possiamo assegnarlo ora al componente TodoItem e, anche se non è considerato all’interno del nostro componente, viene gestito direttamente da React.

In ottica di componenti controller/view, abbiamo creato dei nuovi componenti view, lasciando lo stato nel componente App, che controlla il nuovo componente TodoList e, di conseguenza, (visto che TodoList non è un componente controller) anche TodoItem.

 

Quando isolare un componente?

Approfittiamo di questo momento per ragionare sulla domanda: quando ha senso isolare un componente?

La risposta, forse un po’ vaga, è “ogni volta che cambiamo argomento”. Con questo intendiamo che, quando ci troviamo per le mani un nuovo “pezzo” di struttura dati, possiamo decidere di assegnarne la responsabilità a un nuovo componente. La distinzione tra un argomento e un altro è chiaramente soggetta alla sensibilità di chi sta scrivendo il codice: ecco perché la risposta è così vaga!

In questo caso, a nostro parere, gli argomenti sono: l’intera applicazione, la lista delle cose da fare e il singolo elemento della lista. 

Il fatto di avere ottenuto sintassi come <TodoList todoList={todoList} /> e <TodoItem todoItem={todoItem} /> dovrebbe rassicurarci sul fatto che stiamo andando nella direzione giusta.

Quello di cui abbiamo appena parlato si applica sia da un punto di vista di dati, che da un punto di vista grafico: ogni elemento dell’interfaccia grafica dovrebbe sempre riflettere un pezzo di informazione, come i tag visualizzati come etichette, o le operazioni possibili visualizzate come bottoni. Questo dipende, però, anche da chi progetta le interfacce grafiche e non sempre la relazione è così univoca.

Un’attenta progettazione degli stati, delle prop e degli eventi, così come l’attenzione all’equilibrio tra componenti controller e componenti view, dovrebbero fare la maggior parte del lavoro. La quantità di componenti che ne risulta dovrebbe essere già equilibrata. Se dovessi trovarti a lavorare con componenti molto grandi (i.e.: che contengono molto codice) i casi sono due: o staresti effettivamente descrivendo cose molto complesse, oppure parte della logica potrebbe essere spostata in componenti figli o dentro funzioni hook.

Cos’è una funzione hook? Scopriamolo nella prossima sezione!

Contattaci senza impegno per informazioni sul corso

Pagamento rateale

Valore della rata: A PARTIRE DA 115 €/mese.

Esempio di finanziamento 

Importo finanziato: € 2440 in 24 rate da € 115 – TAN fisso 9,55% TAEG 12,57% – importo totale del credito € 2841.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

*In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Pagamento rateale

Valore della rata: A PARTIRE DA 210 €/mese.

Esempio di finanziamento  

Importo finanziato: € 4500 in 24 rate da € 210,03 – TAN fisso 9,68% TAEG 11,97% – importo totale del credito € 5146,55.

Il costo totale del credito comprende: interessi calcolati al TAN indicato, oneri fiscali (imposta di bollo sul contratto 16,00 euro*) addebitati sulla prima rata, costo mensile di gestione pratica € 3,90, spesa di istruttoria € 0,00, spesa per invio rendicontazione periodica cartacea € 0,98 (o spesa per invio rendicontazione periodica cartacea € 0,00), imposta di bollo su rendicontazione periodica € 0,00. Modalità di rimborso obbligatoria: addebito diretto su c/c. La scadenza delle rate è determinata dal giorno della liquidazione del contratto; la data di scadenza delle rate è prevista il giorno 15 del mese. L’importo di ciascuna rata comprende una quota di capitale crescente e interessi decrescente secondo un piano di ammortamento “alla francese”. Offerta valida dal 01/01/2024 al 31/12/2024.

Messaggio pubblicitario con finalità promozionale. Per le informazioni precontrattuali richiedere sul punto vendita il documento “Informazioni europee di base sul credito ai consumatori” (SECCI) e copia del testo contrattuale. Salvo approvazione di Sella Personal Credit S.p.A. Aulab S.r.l. opera quale intermediario del credito NON in esclusiva.

* In fase di richiesta del finanziamento verrà proposta la facoltà di selezionare, in alternativa all’imposta di bollo sul contratto di 16,00 euro, l’imposta sostitutiva, pari allo 0,25% dell’importo finanziato.

Contattaci senza impegno per informazioni sul corso

Scopriamo insieme se i nostri corsi fanno per te. Compila il form e aspetta la chiamata di uno dei nostri consulenti.