Componenti di reazione
I componenti sono come funzioni che restituiscono elementi HTML.
Componenti di reazione
I componenti sono bit di codice indipendenti e riutilizzabili. Hanno lo stesso scopo delle funzioni JavaScript, ma funzionano in isolamento e restituiscono HTML.
I componenti sono di due tipi, componenti di classe e componenti di funzione, in questo tutorial ci concentreremo sui componenti di funzione.
Nelle basi di codice React precedenti, è possibile che i componenti di classe vengano utilizzati principalmente. Si suggerisce ora di utilizzare i componenti Function insieme agli Hook, che sono stati aggiunti in React 16.8. C'è una sezione facoltativa sui componenti della classe come riferimento.
Crea il tuo primo componente
Quando si crea un componente React, il nome del componente DEVE iniziare con una lettera maiuscola.
Componente di classe
Un componente di classe deve includere l' extends React.Componentistruzione. Questa istruzione crea un'eredità in React.Component e fornisce al tuo componente l'accesso alle funzioni di React.Component.
Il componente richiede anche un render()metodo, questo metodo restituisce HTML.
Esempio
Crea un componente di classe chiamatoCar
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}
Componente di funzione
Ecco lo stesso esempio di cui sopra, ma creato utilizzando invece un componente Function.
Un componente Function restituisce anche HTML e si comporta più o meno allo stesso modo di un componente Class, ma i componenti Function possono essere scritti utilizzando molto meno codice, sono più facili da capire e saranno preferiti in questo tutorial.
Esempio
Crea un componente Function chiamatoCar
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
Ottieni la certificazione!
ISCRIVITI A $95
Rendering di un componente
Ora la tua applicazione React ha un componente chiamato Car, che restituisce un
<h2>elemento.
Per utilizzare questo componente nella tua applicazione, usa una sintassi simile a quella del normale HTML:
<Car />
Esempio
Visualizza il Carcomponente nell'elemento "root":
ReactDOM.render(<Car />, document.getElementById('root'));
Puntelli
I componenti possono essere passati come props, che sta per proprietà.
Gli oggetti di scena sono come argomenti di funzione e li invii nel componente come attributi.
Imparerai di più propsnel prossimo capitolo.
Esempio
Usa un attributo per passare un colore al componente Car e usalo nella funzione render():
function Car(props) {
return <h2>I am a {props.color} Car!</h2>;
}
ReactDOM.render(<Car color="red"/>, document.getElementById('root'));
Componenti in Componenti
Possiamo fare riferimento a componenti all'interno di altri componenti:
Esempio
Usa il componente Auto all'interno del componente Garage:
function Car() {
return <h2>I am a Car!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my Garage?</h1>
<Car />
</>
);
}
ReactDOM.render(<Garage />, document.getElementById('root'));
Componenti nei file
React si basa sul riutilizzo del codice e si consiglia di dividere i componenti in file separati.
Per fare ciò, crea un nuovo file con .js
un'estensione di file e inserisci il codice al suo interno:
Si noti che il nome del file deve iniziare con un carattere maiuscolo.
Esempio
Questo è il nuovo file, lo abbiamo chiamato "Car.js":
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
export default Car;
Per poter utilizzare il componente Auto, devi importare il file nella tua applicazione.
Esempio
Ora importiamo il file "Car.js" nell'applicazione e possiamo utilizzare il
Car
componente come se fosse stato creato qui.
import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';
ReactDOM.render(<Car />, document.getElementById('root'));