Componentes con React

Los componentes de React son la unidad básica de cualquier aplicación hecha con esta librería, aprende como crear y usar componentes de React

Ya renderizaste tu primer Hola Mundo! en React,
es hora de crear tu primer componente de React como tal.

Un componente se puede crear de hasta tres formas diferentes, esta vez vamos a
ver la primera de estas.

La idea de los componentes es que sean reusables, no solo en diferentes partes
de una aplicación, un objeto de una lista que se repite se puede guardar en un
componente para re usarlo por cada elemento de la lista.

Entonces, ¿cómo se crea un componente? La forma más simples es con una función.

function Hello() {
  return React.createElement("h1", null, "Hola Mundo!");
}

Los nombres de los componentes siempre deben empezar con mayúscula,
normalmente en PascalCase (la primera letra de cada palabra en mayúscula,
incluyendo la primera a diferencia de camelCase).

Además de eso debe devolver como resultado un elemento creado con
React.createElement, un string de texto, un número (va a ser tratado como un
string de texto), null (para no renderizar nada) o un array de todos los
anteriores.

Nota: Estos mismos son los valores válidos como hijos al usar
React.createElement.

Ahora que tenemos nuestro componente definido necesitamos renderizarlo. La
primera forma de hacerlo es ejecutar Hello como una función normal y pasar el
resultado a ReactDOM.render, aunque esto funciona no es la forma correcta ya
que no serviría con las otras formas de definir un componente que vamos a ver
más adelante y evita que React tenga control de nuestro componente para poder
usar ciertas funcionalidades de React más adelante.

La forma correcta es pasar el componente como el primer argumento de
React.createElement.

React.createElement(Hello, null);

Ahora podemos reemplazar nuestro Hola Mundo! por el componente Hello.

function Hello() {
  return React.createElement("h1", null, "Hola Mundo!");
}

const element = React.createElement(Hello, null);
const node = document.getElementById("app");

ReactDOM.render(element, node);

¡Y con esto acabas de crear y renderizar tu primer componente de React!