CONTATTACI

Guide per aspiranti programmatori

Programmatore che esamina react al microscopio
Lezione 10 / 41

Che cos’è un componente in React

Un componente in React è un blocco autonomo e riutilizzabile di codice che rappresenta una parte dell’interfaccia utente. I componenti possono essere semplici, come un pulsante o un’icona, o complessi, come un’intera pagina web.

Ogni componente in React è una funzione o una classe JavaScript che può accettare input arbitrari (chiamati “props”, vale a dire “proprietà”) e restituire un elemento React che definisce cosa deve essere visualizzato sullo schermo.

 

L’importanza dei componenti in React

I componenti sono fondamentali in React per diverse ragioni:

  1. Riutilizzabilità: I componenti permettono di riutilizzare codice in diverse parti dell’applicazione. Ad esempio, un pulsante stilizzato può essere definito come un componente e utilizzato ovunque sia necessario, riducendo la duplicazione del codice e facilitando la manutenzione.
  2. Composizione: I componenti possono essere combinati tra loro per costruire interfacce complesse. Un componente padre può includere uno o più componenti figli, creando una gerarchia di componenti che rappresenta la struttura dell’interfaccia utente.
  3. Isolamento: Ogni componente ha il proprio stato e le proprie proprietà, il che significa che è possibile sviluppare e testare ogni componente in isolamento, senza preoccuparsi dell’intero sistema. Questo facilita il debug e l’aggiornamento del codice.
  4. Gestione dello Stato: I componenti possono gestire il proprio stato interno, permettendo di creare interfacce utente interattive e dinamiche. Lo stato di un componente può essere modificato in risposta agli eventi dell’utente, aggiornando automaticamente l’interfaccia utente per riflettere i cambiamenti.

 

I componenti React possono avere degli argomenti?

Abbiamo detto che i componenti React sono funzioni che restituiscono JSX, un linguaggio di markup paragonabile a HTML che viene convertito in JavaScript da React.
In JavaScript, le funzioni non hanno solo un valore di ritorno, hanno anche degli argomenti, il loro input. 

Ma, quindi, i componenti React possono avere degli argomenti? La risposta è sì, ma i componenti React possono ricevere un solo argomento, che è un oggetto JavaScript e rappresenta l’insieme delle loro proprietà

Le proprietà dei componenti React corrispondono agli attributi degli elementi HTML.

Immaginiamo di voler creare un componente, Message.
Message è la nostra versione personalizzata di un paragrafo, che potremo “aumentare” con nuove funzionalità più avanti.

Possiamo utilizzare la nostra app, creando una cartella components dentro src. Nella cartella components, creiamo un nuovo file Message.jsx:

 

// File: src/components/Message.jsx

export default function Message() {
  return <p className="Message">Look, a message!</p>;

Nota: non è necessario creare la cartella components per far funzionare React in questo modo, qualsiasi file all’interno di src può essere importato. Creare una cartella per raccogliere i componenti rende solo più ordinato il progetto.

Ora modifichiamo App per utilizzare il nuovo componente: lo importiamo tramite il percorso relativo “./components/Message“.

 

// File: src/App.jsx

import "./App.css";
import Message from "./components/Message";

export default function App() {
  return (
    <div className="App">
      <Message />
    </div>
  );
}

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.