Hola Mundo

Veamos como crearíamos un Hola Mundo usando Javascript vanilla y utilizando React.

Crear un elemento HTML sin React

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

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

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

El tipo de elemento html (div, h1, p, span, etc)
Las propiedades del elemento (clase de CSS, eventos, etc)
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:

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

PreviousVirtual DOM NextUtilizando JSX

Last updated 7 years ago

Was this helpful?

hashtagCrear un elemento HTML sin React

hashtagCrear un elemento HTML con React

Crear un elemento HTML sin React

Crear un elemento HTML con React