Renderizando elementos

Los elementos son los bloques mas pequeños de las aplicaciones de React.

Un elemento describe lo que se quiere ver en pantalla

const element = <h1>Hello, world</h1>;

A diferencia de los elementos del DOM del browser, los elementos de React son objetos planos, y su creacion es de bajo costo. React DOM se encarga de actualizar el DOM para igualar los elementos.?????

Renderizando un elemento en el DOM

<div id="root"></div>

Las aplicaciones construidas puramente con React, por lo general solo tienen un unico nodo raiz, por otro lado si estamos integrando React a un proyecto ya armado se suelen encontrar mas de un nodo raiz.

Para renderizar un elemento de React utilizamos el metodo render y sus parametros serian: 1. El elemento React y 2. El nodo en el que se cargaran los elementos.

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

Actualizando el elemento renderizado

Los elementos de React son inmutables. Una vez creados no se pueden cambiar ni sus hijos ni sus atributos.

Con el conocimiento adquirido hasta este punto (segundo titulo de conceptos principales de react), la unica manera de actualizar la interfaz de usuario es creando un nuevo elemento, y pasarlo a ReactDOM.render().

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

React solo actualiza lo que es necesario.

React DOM compara el elemento y sus hijos con el estado anterior del mismo elemento, y solo aplica las actualizaciones del DOM que son necesarias para que el DOM este en el estado deseado.

En nuestra experiencia, pensar en cómo la interfaz de usuario debería verse en un momento dado y no en cómo cambiarla en el tiempo, elimina toda una clase de errores.?????