Creare un Component in React.js

Per component (componente) normalmente si fa riferimento a qualcosa che può essere utilizzato/riutilizzato in diversi contesti normalmente in associazionne con altri componenti. Nel contesto di React.js i component sono oggetti che ritornano sostanzialmente del HTML e sono codificati in files .js. Sono normalmente messi in una cartella “components” nel folder src. Nel caso che vedete sotto andiamo a creare un component Employee e lo posizionamo in quel folder. Se vi interessa approfondire la modalità con cui si linkano le funzionalità tra diversi file js vi rimando a questo post [1].

A questo punto “disegnamo” html direttamente nel componente. Si, in soldoni l’idea è che il componente ritorni il frammento dell’HTML che poi verrà renderizzato da chi il componente lo richiama.

function Employee(){
    return <h3>Here is an employe</h3>;
}

export default Employee;

Nell’esempio disegneremo un titolo h3 e lo incorporeremo nella App.js

import './App.css';
import Employee from './components/Employee'

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Employee/>
        ...
      </header>
    </div>
  );
}

export default App;

Con questo esito:

Come potete notare è fondamentale che la function nel return ritorni un frammento di HTML che sia totalmente contenuto in un unico tag. Questo deve succedere sempre a partire da App.js. All’interno della function e prima del return si possono utilizzare tutti i comandi classici javascript ed implementare logiche, anche complesse. Immaginiamo che per qualche ragione si debbano visualizzare dei tag o delle info piuttosto che altre, in base a delle logiche definite. Una possibilità potrebbe essere quella di creare una variabile ed in base al suo valore decidere cosa renderizzare a schermo.

E’ possibile infatti utilizzare delle variabili all’interno del jsx che viene ritornato dal componente stesso e per farlo basta utilizzare le parentesi graffe {}.

      <header className="App-header">
        { returnEmployees ?
          <>
            <Employee/>
            <Employee/>
            <Employee/>
          </>
          :
          <></>
        }
      </header>

Nell’esempio riportato sopra si usa un’operatore ternario per verificare la variabile e ritornare il frammento che serve in base all’esito di quella verifica. Importante è che l’output sia sempre contentuto in un tag (anche quello vuoto) come nell’esempio. Si possono aggiungere più frammenti {} anche uno di seguito all’altro ma non vanno innestati. Importante: all’interno di questi frammenti si utilizza la sintassi javascript.

E’ bene infine ribadire che un component non è necessario che sappia nulla del contesto in cui è utilizzato perchè deve potenzialmente essere in grado di esistere così com’è. E’ solo chi utilizza che deve conoscere come funziona e come utilizzarlo correttamente.

[1] https://www.beren.it/2024/02/02/import-export-and-export-default-in-javascript/