search

🤓2) Creando elementos HTML con React.createElement API

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

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

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:

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

LogoReact Without JSX – Reactreactjs.orgchevron-right

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

Last updated