Hay principalmente dos componentes en React:

• Componentes funcionales
• Componentes de clase

Componentes funcionales

• Los componentes funcionales son funciones básicas de JavaScript. Suelen ser funciones de flecha, pero también se pueden crear con la functionpalabra clave normal .
• A veces se los denomina componentes "tontos" o "sin estado", ya que simplemente aceptan datos y los muestran de alguna forma; es decir, son los principales responsables de renderizar la interfaz de usuario.
• Los métodos del ciclo de vida de React (por ejemplo, componentDidMount) no se pueden utilizar en componentes funcionales.
• No se utiliza ningún método de renderizado en componentes funcionales.
• Estos son principalmente responsables de la interfaz de usuario y, por lo general, son solo de presentación (por ejemplo, un componente de botón).
• Los componentes funcionales pueden aceptar y utilizar accesorios.
• Se deben favorecer los componentes funcionales si no necesita hacer uso del estado React.

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

Componentes de clase

• Los componentes de clase hacen uso de la clase ES6 y amplían la Componentclase en React.
• A veces se denominan componentes "inteligentes" o "con estado", ya que tienden a implementar lógica y estado.
• Los métodos del ciclo de vida de React se pueden usar dentro de los componentes de la clase (por ejemplo, componentDidMount).
• Pasas los accesorios a los componentes de la clase y accedes a ellos con 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;

Más información

• Reaccionar componentes
• Componentes funcionales frente a componentes de clase
• Componentes funcionales con estado y sin estado en React
• Estado y ciclo de vida