2) Creando elementos HTML con React.createElement API

Previous1) ¿Por qué aprender React?Next3) Reemplazando createElement por JSX

Last updated 6 years ago

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.

<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>

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 , con ellos tenemos acceso a la API de react.

<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>

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

El tipo de elemento html

Las propiedades del elemento

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:

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

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