CONTATTACI

Guide per aspiranti programmatori

Programmatore che esamina react al microscopio
Lezione 16 / 41

Come react gestisce props stati ed eventi

È arrivato il momento di dare un’occhiata dietro le quinte e capire come React gestisce i concetti di prop, stati ed eventi.

Sappiamo che i componenti React sono funzioni che restituiscono JSX. In che modo React li utilizza per mostrare la pagina web della nostra applicazione?

React esegue le funzioni che compongono i nostri componenti, trasforma JSX in JavaScript ed esegue il codice JavaScript risultante, che è tipicamente un ammasso di istruzioni document.createElement. In questo modo, il nostro codice JSX diventa codice HTML.

Per dimostrarlo, possiamo inserire un console.log all’interno di App e Counter:

 

// File: src/App.jsx

// ...

export default function App() {
  console.log("App function was called!");

  // ...
}
// File: src/components/Counter.jsx

// ...

export default function Counter({ value, onValueChange }) {
  console.log("Counter function was called!");

  // ...
}
Log della console

 

Ricaricando la pagina, possiamo vedere i log in console.

Nota: durante lo sviluppo, React chiama le funzioni-componente due volte. Questa cosa è normale e non succede quando l’applicazione viene pubblicata. Se noti che alcune cose succedono due volte (soprattutto le chiamate di rete, tipicamente, preoccupano) non ti preoccupare!

La catena di chiamate alle funzioni-componenti, in React, si chiama rendering. Quando un’applicazione React viene visualizzata, React effettua il primo rendering, trasformando JSX in JavaScript e poi in HTML e inserisce il codice HTML risultante nel <div id=”app” /> che trovi nel file index.html. Le istruzioni per fare questa cosa sono nel file index.js (o index.jsx), che troverai in posti diversi a seconda della scelta che hai fatto tra Create React App e Vite. Ci sono, comunque, solo un file index.html e uno index.js (o index.jsx) in tutta l’applicazione, per cui non dovrebbe essere difficile trovarli:

 

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

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.