React Components (Italiano)

I componenti sono come funzioni che restituiscono elementi HTML.

React Components

I componenti sono pezzi di codice indipendenti e riutilizzabili, hanno lo stesso scopo delle funzioni JavaScript, ma lavorano in isolamento e restituiscono HTML tramite una funzione render().

I componenti sono di due tipi, componenti di classe e componenti di funzione, in questo tutorial ci concentreremo sui componenti di classe.

Creare un componente di classe

Quando si crea un componente React, il nome del componente deve iniziare con una lettera maiuscola.

Il componente deve includere la dichiarazione extends React.Component, questa dichiarazione crea un’eredità a React.Component, e dà al tuo componente accesso alle funzioni di React.Component.

Il componente richiede anche un metodo render(), questo metodo ritorna HTML.

class Car extends React.Component { render() { return <h2>Hi, I am a Car!</h2>; }}

Ora la tua applicazione React ha un componente chiamato Car, che ritorna un elemento <h2>.

Per usare questo componente nella vostra applicazione, usate una sintassi simile al normale HTML:<Car />

ReactDOM.render(<Car />, document.getElementById('root'));

Crea un componente Function

Ecco lo stesso esempio di cui sopra, ma creato usando invece un componente Function.

Un componente Function restituisce anche HTML, e si comporta più o meno come un componente Class, ma i componenti Class hanno alcune aggiunte, e saranno preferiti in questo tutorial.

function Car() { return <h2>Hi, I am also a Car!</h2>;}

Ancora una volta la tua applicazione React ha un componente Car.

Riferimento al componente Car come normale HTML (tranne che in React, i componenti devono iniziare con una lettera maiuscola):

ReactDOM.render(<Car />, document.getElementById('root'));

Costruttore del componente

Se c’è una funzione constructor() nel tuo componente, questa funzione sarà chiamata quando il componente viene avviato.

La funzione costruttore è dove si inizializzano le proprietà del componente.

In React, le proprietà del componente dovrebbero essere tenute in un oggetto chiamatostate.

Apprenderemo di più su state più avanti in questo tutorial.

La funzione costruttore è anche dove si onora l’ereditarietà del componente genitore includendo la dichiarazione super(), che esegue la funzione costruttore del componente genitore, e il vostro componente ha accesso a tutte le funzioni del componente genitore (React.Component).

class Car extends React.Component { constructor() { super(); this.state = {color: "red"}; } render() { return <h2>I am a Car!</h2>; }}

Usa la proprietà colore nella funzione render():

class Car extends React.Component { constructor() { super(); this.state = {color: "red"}; } render() { return <h2>I am a {this.state.color} Car!</h2>; }}

Props

Un altro modo di gestire le proprietà dei componenti è usando props.

Le proprietà sono come gli argomenti di una funzione, e si inviano al componente come attributi.

Imparerete di più su props nel prossimo capitolo.

class Car extends React.Component { render() { return <h2>I am a {this.props.color} Car!</h2>; }}ReactDOM.render(<Car color="red"/>, document.getElementById('root'));

Componenti in componenti

Possiamo fare riferimento a componenti dentro altri componenti:

class Car extends React.Component { render() { return <h2>I am a Car!</h2>; }}class Garage extends React.Component { render() { return ( <div> <h1>Who lives in my Garage?</h1> <Car /> </div> ); }}ReactDOM.render(<Garage />, document.getElementById('root'));

Componenti in file

React è tutto basato sul riutilizzo del codice, e può essere intelligente inserire alcuni dei tuoi componenti in file separati.

Per farlo, create un nuovo file con estensione .js e mettete il codice al suo interno:

Nota che il file deve iniziare importando React (come prima), e deve finire con la frase export default Car;.

import React from 'react';import ReactDOM from 'react-dom';class Car extends React.Component { render() { return <h2>Hi, I am a Car!</h2>; }}export default Car;

Per poter utilizzare il componente Car, devi importare il file nella tua applicazione.

import React from 'react';import ReactDOM from 'react-dom';import Car from './App.js';ReactDOM.render(<Car />, document.getElementById('root'));