# Hello World con React

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

```javascript
// 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í:

```javascript
{
  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](https://www.joyofreact.com/).