Il y a principalement deux composants dans React:

• Composants fonctionnels
• Composants de classe

Composants fonctionnels

• Les composants fonctionnels sont des fonctions JavaScript de base. Ce sont généralement des fonctions fléchées mais peuvent également être créées avec le functionmot-clé normal .
• Parfois appelés composants «stupides» ou «sans état», car ils acceptent simplement des données et les affichent sous une forme ou une autre; c'est-à-dire qu'ils sont principalement responsables du rendu de l'interface utilisateur.
• Les méthodes de cycle de vie React (par exemple componentDidMount) ne peuvent pas être utilisées dans les composants fonctionnels.
• Aucune méthode de rendu n'est utilisée dans les composants fonctionnels.
• Ceux-ci sont principalement responsables de l'interface utilisateur et sont généralement uniquement de présentation (par exemple, un composant Button).
• Les composants fonctionnels peuvent accepter et utiliser des accessoires.
• Les composants fonctionnels doivent être privilégiés si vous n'avez pas besoin d'utiliser l'état React.

import React from "react"; const Person = props => ( 
Hello, {props.name}
 ); export default Person;

Composants de classe

• Les composants de classe utilisent la classe ES6 et étendent la Componentclasse dans React.
• Parfois appelés composants «intelligents» ou «avec état», car ils ont tendance à implémenter la logique et l'état.
• Les méthodes de cycle de vie React peuvent être utilisées dans les composants de classe (par exemple, componentDidMount).
• Vous transmettez les accessoires aux composants de classe et y accédez avec this.props

import React, { Component } from "react"; class Person extends Component { constructor(props){ super(props); this.state = { myState: true; } } render() { return ( 
Hello Person
 ); } } export default Person;

Plus d'information

• Composants React
• Composants fonctionnels ou de classe
• Composants fonctionnels avec état ou sans état dans React
• État et cycle de vie