# Hola Mundo

## Crear un elemento HTML sin React

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

Esto seria simplemente para crear un div nuevo, con el contenido "Hola Mundo", la clase de CSS  "container" y agregarlo dentro del div con id "app".&#x20;

## Crear 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.

```jsx
<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'},
                'Hola Mundo'
            );
            ReactDOM.render(element, rootElement);
        </script>
    </body>
</html>
```

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

1. El tipo de elemento html (div, h1, p, span, etc)
2. Las propiedades del elemento (clase de CSS, eventos, etc)
3. El contenido del elemento (los hijos o 'children' del elemento.

Un elemento creado con React es simplemente un objeto Javascript con propiedades, que luego ReactDOM sabe renderizar (dibujar) en el DOM. Para el ejemplo, este sería el object que se crea:

```javascript
{
  type: 'div',
  props: {
    className: 'container',
    children: 'Hola Mundo'
  }
};
```
