Hello World con React

Vamos a aprender cómo mostrar un "Hello World" con React.

// 1. Importamos dependencias
import React from 'react';
import { createRoot } from 'react-dom/client';

// 2. Creamos un elemento de React
const element = React.createElement(
  'p',
  { id: 'hello' },
  'Hello World!'
);

// 3. Renderizamos la aplicación
const container = document.querySelector('#root');
const root = createRoot(container);
root.render(element);

En primer lugar importamos las dependencias, que son tanto React mismo como el renderer react-dom.

En segundo lugar creamos el elemento de React, donde usamos la función React.createElement, la cual acepta estos 3 o más argumentos:

1. El tipo de elemento a crear.

2. Las propiedades que queremos que tenga este elemento.

3. El contenido del elemento.

Esta función nos devolverá un elemento de React, el cual es un objeto de JavaScript, y luce tal que así:

{
  type: "p",
  key: null,
  ref: null,
  props: {
    id: 'hello',
    children: 'Hello World!',
  },
  _owner: null,
  _store: { validated: false }
}

En tercer lugar renderizamos la aplicación. Esto lo hacemos seleccionando el contenedor, luego creando el root en ese contenedor y por último renderizando en elemento en el root.

Inspirado en la explicación de Josh Comeau en su curso The Joy of React.