CONTATTACI

Guide per aspiranti programmatori

Programmatore che esamina react al microscopio
Lezione 9 / 41

Gestione dello stile (CSS) in React

Tornando alla nostra applicazione:

// File: src/App.jsx

import "./App.css";

export default function App() {
  const message = "Hello React!";

  return (
    <div className="App">
      <p>{message}</p>
    </div>
  );
}

Nota: abbiamo spostato export default insieme alla dichiarazione della funzione App. Perché? Non c’è una reale motivazione alla base, è una questione di preferenza nella scrittura del codice.

/* File: src/App.css  */

.App p {
  background-color: #ddd;
  border-radius: 8px;
  margin-left: auto;
  margin-right: auto;
  max-width: 45em;
  padding: 1em;
  width: 90vw;
}

Immaginiamo di voler mantenere una parte dello style legata a tutti i paragrafi di App, ma isolarne un’altra e legarla solo allo stile del paragrafo che abbiamo inserito in App.jsx.

Così come per il linguaggio HTML, anche in React abbiamo l’attributo style, con cui possiamo assegnare una tantum parti di stile a specifici elementi (nonostante, ricordiamolo, non sia considerata una best practice). A differenza di HTML – in cui style si aspetta una stringa – in React abbiamo un oggetto. E, come ormai d’abitudine con React, tutte le proprietà sono in formato camelCase:

 

/* File: src/App.css  */

.App p {
  margin-left: auto;
  margin-right: auto;
  max-width: 45em;
  width: 90vw;
}
// File: src/App.jsx

import "./App.css";

export default function App() {
  const message = "Hello React!";

  return (
    <div className="App">
      <p
        style={{
          backgroundColor: "#ddd",
          borderRadius: "8px",
          padding: "1em",
        }}
      >
        {message}
      </p>
    </div>
  );
}

Notiamo due particolarità:

  1. Dopo style c’è una doppia coppia di parentesi graffe. Quella esterna indica che stiamo passando da codice HTML a JavaScript; la seconda indica che il valore dell’attributo style è un oggetto. Per capire meglio cosa sta succedendo, possiamo isolare style in una costante e passare quella all’attributo:

    // File: src/App.jsx
    
    export default function App() {
      const message = "Hello React!";
    
      const style = {
        backgroundColor: "#ddd",
        borderRadius: "8px",
        padding: "1em",
      };
    
      return (
        <div className="App">
          <p style={style}>{message}</p>
        </div>
      );
    }

    Nota: abbiamo chiamato la costante style perché è buona norma dare nomi uguali a cose diverse che rappresentano le stesse informazioni, per collegarle concettualmente tra loro. Tuttavia, avremmo potuto chiamare la costante chewingGum invece di style e avrebbe funzionato comunque (ma, ci raccomandiamo, non farlo!)

     

  2. Le proprietà sono state convertite in camelCase: background-color è diventata backgroundColor e border-radius è diventata borderRadius.

Questo è uno dei pochi casi particolari in cui passiamo valori che non sono stringhe agli elementi HTML. Più avanti, quando cominceremo a costruire i nostri elementi personalizzati, scopriremo che è assolutamente normale passare di tutto e di più ai valori degli attributi.

CSS-in-JS

Quando è nata la programmazione web, il codice che definisce la struttura delle pagine (il linguaggio di markup, tipicamente HTML), quello che ne definisce l’aspetto visivo (stile, quindi tipicamente il linguaggio CSS) e quello che ne definisce la logica di funzionamento (spesse volte il linguaggio JavaScript) erano raccolti tutti insieme nello stesso file.

Con il passare del tempo, la comunità dei programmatori web ha separato il codice rispetto alla sua funzione, dando vita ai file .html, .css e .js separati e collegati tra loro.

L’avvento dei framework e delle librerie per la programmazione front-end come React ha segnato un terzo passaggio in cui, da una parte, abbiamo un’inversione di rotta, con i tre “tipi di codice” che tornano a essere raccolti negli stessi file, dall’altra abbiamo una nuova suddivisione, questa volta per “componenti”.

React ha fatto un passo in questa direzione per cui i componenti, come abbiamo visto, raccolgono l’equivalente delle parti HTML e JavaScript relative allo stesso “argomento” (per esempio un bottone, un menù, un form) lasciando da parte il codice CSS.

La comunità ha, però, messo insieme pacchetti e librerie per chi vuole integrare anche la parte di CSS nei file JSX, sotto un grande cappello con il nome di CSS-in-JS. Ci sono più di 50 librerie online che permettono questa cosa, molte delle quali sono state scritte specificamente per React.

Non affronteremo questo argomento all’interno di questa guida, ma se sei interessato, ti invitiamo a esplorare l’argomento. Basta cercare “CSS-in-JS” su Google.

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.