Come creare un componente in React

In un'applicazione React è possibile creare un componente usando sia la sintassi delle classi che quella delle funzioni, in particolare il nome di un componente deve iniziare con la lettera maiuscola (notazione detta Pascal Case), e lo stesso nome del file in cui viene salvato il componente stesso deve essere associato al nome della classe o della funzione che definisce il componente.

In React i componenti hanno l'estensione .tsx ad indicare che usano la sintassi JSX.

Un componente creato tramite la sintassi delle classi è detto anche "Componente con Stato", di seguito è riportato un esempio

Navbar.tsx

import * as React from "react";

class Navbar extends React.Component<any, any> {
  render() {
    return (
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    );
  }
}

export default Navbar;

in questo caso il componente Navbar estende la classe React.Component, per questo motivo deve avere almeno il metodo render(), che a sua volta ritorna un "elemento React JSX" mediante l'istruzione return, quest'ultima racchiude il tutto all'interno delle parentesi tonde, in particolare è possibile omettere le parentesi tonde qualora si decida di mettere tutto in un'unica riga, e infine usare l'istruzione export default <nome componente> per poter esportare il componente e poterlo importare in altri componenti, in particolare è possibile usare una sintassi diversa per esportare un componente React

..............
..............


export default class <Nome Componente> extends React.Component<any, any> {

..............
..............

}

in questo caso ometteremo l'istruzione "export default Navbar;" nell'esempio precedente.

Un componente creato con la sintassi delle funzioni (detto anche componente senza stato) è la forma più semplice, si seguito è riportato un esempio

Func.tsx

import * as React from "react";

function Func() {
  return <h2>Hello World.</h2>;
}

export default Func;

oppure si può usare la sintassi funzione freccia introdotta in ES6

import * as React from "react";

const Func = () => {
  return <h2>Hello World.</h2>;
};

export default Func;

in entrambi i casi usare sempre l'istruzione export default <nome componente> per esportare il componente.

Leggi anche:

• React JS, impostare l'ambiente di lavoro