Function Component

React dichiarazione di un componente

by

Le dichiarazioni di un componente in React possono essere fatte in diverse forme, ma le principali sono le seguenti:

  1. Dichiarazione di funzione (Function Component):React
function MyComponent(props) {
  // Il tuo codice JSX e logica qui...
  return <div>Contenuto del componente</div>;
}

// Oppure usando la sintassi delle frecce (Arrow Function Component):
const MyComponent = (props) => {
  // Il tuo codice JSX e logica qui...
  return <div>Contenuto del componente</div>;
};

// Quando vuoi esportare il componente:
export function MyComponent(props) {
  // ...
}

// Oppure con la sintassi delle frecce:
export const MyComponent = (props) => {
  // ...
};
  1. Class Component:
import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    // Il tuo codice JSX e logica qui...
    return <div>Contenuto del componente</div>;
  }
}

export default MyComponent;
  1. Componente con la sintassi di classe e hooks:
import React, { useState, useEffect } from 'react';

const MyComponent = (props) => {
  // Utilizzo degli hooks per lo stato e gli effetti
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Effetto eseguito dopo il render
    document.title = `Hai cliccato ${count} volte`;
  }, [count]);

  // Il tuo codice JSX e logica qui...
  return (
    <div>
      <p>Hai cliccato {count} volte</p>
      <button onClick={() => setCount(count + 1)}>Cliccami</button>
    </div>
  );
};

export default MyComponent;

In tutte queste forme, il componente renderizza l’output usando il codice JSX. Puoi utilizzare il tipo di dichiarazione che preferisci, ma i componenti con la sintassi delle funzioni sono più comuni grazie alla loro sintassi concisa e alla facilità di lettura. Con l’introduzione degli hooks, le classi stanno diventando sempre meno utilizzate per definire i componenti.