# 2) Creando elementos HTML con React.createElement API

## Creando un elemento HTML sin React

Antes de empezar con react repasemos como haríamos el clásico Hello Word sin react, con vanilla JavaScript.

{% code title="" %}

```markup
<html>
    <body>
        <div id="app"></div>
        <script>
        const rootElement = document.getElementById('app');
        const element = document.createElement('div');
        element.textContent = 'Hello word';
        element.className = 'container';
        rootElement.appendChild(element)
        </script>
    </body>
</html>
```

{% endcode %}

## Creando un elemento HTML con React

Los elementos con react se escriben de forma similar. El cambio principal está en el document.createElement y en las propiedades de este elemento.

Lo primero que necesitamos es importar los scripts de [React y React-Dom](https://reactjs.org/docs/cdn-links.html), con ellos tenemos acceso a la API de react.

{% code title="" %}

```markup
<html>
    <body>
        <div id="app"></div>
        <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
        <script>
        const rootElement = document.getElementById('app');
        // const element = document.createElement('div');
        // element.textContent = 'Hello word';
        // element.className = 'container';
        // rootElement.appendChild(element)
        const element = React.createElement(
            'div',
            {className: 'container'},
            'Hello word'
        );
        ReactDOM.render(element, rootElement);
        </script>
    </body>
</html>
```

{% endcode %}

React.createElement recibe 3 parámetros básicos:

1. El tipo de elemento html
2. Las propiedades del elemento
3. El contenido del elemento

Un elemento creado con react es un object con propiedades, que luego ReactDOM sabe renderizar en el DOM. Para el ejemplo, este sería el object que se crea:

```javascript
{
  type: 'div',
  props: {
    className: 'container',
    children: 'Hello world'
  }
};
```

Para saber más sobre como funciona React por debajo puedes ingresar aquí:

{% embed url="<https://reactjs.org/docs/react-without-jsx.html>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://workshops-js-montevideo.gitbook.io/react/creando-elementos-html-con-react.createelement-api.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
