InDepthEngineering-REACT- ARTÍCULO — 2

Jan 08 2023

Solo como referencia, siga este enlace para ir al artículo anterior. Como siempre, es un placer ver que te interesas por leer mis artículos.

Antes de comenzar con el artículo número dos, recapitulemos lo que vimos en el artículo anterior de la siguiente manera:

Creamos una aplicación simple en JavaScript vainilla.
Pudimos agregar react.js a nuestra aplicación.
En el proceso de agregar react.js aprendimos que react.js es simplemente una colección de funciones.

Vamos a agregar Estilo a nuestra aplicación que creamos en el artículo anterior.
Vamos a conocer por qué react.js usa un DOM virtual y cómo funciona

let paragraph1 = React.createElement('p', {}, 'Hey there!');

let paragraph1 = React.createElement('p', {className: 'greetings'}, 'Hey there!');

const root = document.getElementById('root');

const reactProjectRoot = ReactDOM.createRoot(root);

const childParagraphOne = React.createElement('p',{},'Hello World!');
const childParagraphTwo = React.createElement('p',{},'Welcome to my website');

// property className is added to the second argument.
// I have removed the property id is now.
const container = React.createElement('div',{className: 'greetings'},[childParagraphOne,childParagraphTwo]);

reactProjectRoot.render(container);

.greetings {
    color: rgb(200, 159, 252);
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
    <script src="index.js" defer></script>
    <!-- link to css -->
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="root">
    </div>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
</body>
</html>

¿Está nuestra aplicación completamente libre de errores? ¡No! No lo es. Cuando abra la consola del navegador, debería poder ver el siguiente error:

La forma de eliminar este error es haciendo el siguiente cambio en index.js (verifique el comentario):

const root = document.getElementById('root');

const reactProjectRoot = ReactDOM.createRoot(root);

// I have added the property key to each of the child paragraph elements.
// I have given unique values to the property key for each child
const childParagraphOne = React.createElement('p',{key: 'para1'},'Hello World!');
const childParagraphTwo = React.createElement('p',{key: 'para2'},'Welcome to my website');

const container = React.createElement('div',{className: 'greetings'},[childParagraphOne,childParagraphTwo]);

reactProjectRoot.render(container);

Digamos que tiene un contenedor principal que tiene tres elementos secundarios con las mismas etiquetas HTML y ya están representados en el navegador. Ahora agrega un cuarto elemento secundario con la misma etiqueta HTML al contenedor principal en su código.

La biblioteca React al crear vistas usando la función React.createElement( ) creará un árbol DOM virtual que se actualizará directamente sin actualizar directamente el árbol DOM en el navegador. Dado que los elementos secundarios tienen propiedades clave únicas, la biblioteca ReactDOM, que es responsable de la representación en el navegador, no tiene que volver a representar a todos los elementos secundarios del contenedor principal en el navegador si se introduce un elemento secundario nuevo (aquí está el cuarto elemento secundario). La biblioteca ReactDOM sabe que el nuevo elemento secundario es el único que debe renderizarse y que otros elementos secundarios ya se renderizaron y están presentes en el árbol DOM del navegador al comparar los valores de propiedad clave de los elementos secundarios en el árbol DOM del navegador y el árbol DOM virtual. Por lo tanto, la biblioteca ReactDOM se asegura de generar solo los cambios necesarios en el navegador. Esto hace que React sea eficiente.