El Virtual DOM es una representación en forma de objetos nativos de JavaScript de los elementos y componentes usados en nuestra UI con un formato muy similar al DOM nativo del navegador
const VDOM = {
type: Hola,
props: {
text: 'Platzi',
children: [
{
type: 'h1',
props: {
className: 'Title',
children: 'Hola Platzi',
},
},
],
},
};
Todos los componentes creados con React tienen la primera letra en mayúscula
Todos los elementos nativos de HTML en minúsculas
<div>
<h1>hola</h1>
</div>
<section>
<h1>hola</h1>
</section>
Actual
Nuevo
<div
id="actual"
/>
<div
id="nuevo"
/>
Actual
Nuevo
Los componentes tienen un método para saber si tienen que actualizarse o no
<ul id="nombres">
<li>
Platzi
</li>
<li>
MLW.io
</li>
</ul>
Actual
Nuevo
<ul id="nombres">
<li>
Platzi
</li>
<li>
Mejorando.la
</li>
<li>
MLW.io
</li>
</ul>
<ul id="nombres">
<li key="platzi">
Platzi
</li>
<li key="mlw.io">
MLW.io
</li>
</ul>
Actual
Nuevo
<ul id="nombres">
<li key="platzi">
Platzi
</li>
<li key="mejorando.la">
Mejorando.la
</li>
<li key="mlw.io">
MLW.io
</li>
</ul>