Sé que esta puede ser una pregunta clásica, pero realmente no pude obtener una respuesta real de nadie, busco un ejemplo detallado o una situación que demuestre que React resolvió un problema real. entiendo la parte de la reutilización, el estilo declarativo, pero aún me pierdo en esas palabras El sitio web de React siempre habla sobre React "Creamos React para resolver un problema: crear aplicaciones grandes con datos que cambian con el tiempo".
Una discusión en React Podcast4 menciona que el creador de React, Jordan Walke, estaba resolviendo un problema en Facebook: hacer que múltiples fuentes de datos actualizaran un campo de autocompletar. Los datos procedían de forma asincrónica desde un back-end. Cada vez era más complicado determinar dónde insertar nuevas filas para reutilizar elementos DOM. Walke decidió generar la representación de campo (elementos DOM) de nuevo cada vez. Esta solución era elegante en su simplicidad: IU como funciones. Llámelos con datos y obtendrá vistas renderizadas de manera predecible.
Esto es bueno, pero aún no puedo digerirlo por completo, ¿cuál es el problema real que creó React en su mente creadora?
qué significa esto exactamente ?
"Cada vez era más complicado determinar dónde insertar nuevas filas para reutilizar elementos DOM"
No pude entender completamente esa situación, ¿alguien puede explicarme en detalle esta situación con o sin código? ¿Cuál es el problema para obtener esos datos de forma asíncrona de múltiples fuentes y simplemente agregarlos a un elemento determinado en el DOM?
No pude entender completamente esa situación, ¿alguien puede explicarme en detalle esta situación con o sin código? ¿Cuál es el problema para obtener esos datos de forma asíncrona de múltiples fuentes y simplemente agregarlos a un elemento determinado en el DOM?
Digamos que tenemos un carrito de compras:
<span class="total">1</span> <ul class="products"> <li class="product"> Product 1 <span class="quantity">2</span> <span class="price">10 EUR</span> </li> </ul>Cuando agregamos algo a nuestro carrito, se envía una solicitud al servidor. El servidor realiza alguna validación y lógica comercial, luego envía el nuevo carrito de vuelta al cliente.
const addToCart = async (product) => { try ( // send data and waits for a response // returns a array with objects // eg: [{}, {}, ...] ) catch ( ... ) } // on some event: cart = addToCart({ product: 1, quantity: 5 })En Vanilla JavaScript, ahora necesitamos actualizar muchos elementos DOM.
Podría verse algo como:
const productsElm = document.querySelector(".products"); productsElm.innerHTML = ''; cart.forEach( (product) => { const product = document.createElement('li') const quanity = document.createElement('span') const price = document.createElement('span') product.innerHtml = product.name product.append(quanity) product.append(price) productsElm.append(pro) } document.querySelector(".quantity").innerHtml = cart.lengthEn este ejemplo, vaciamos el carrito y lo reconstruimos con los datos que recibimos del servidor.
Esto ya es difícil de escalar y mantener.
Digamos ahora que obtenemos nuestras respuestas de un socket web que constantemente envía cambios desde el servidor al cliente, tal vez tengamos un par de tiendas web con un carrito vinculado.
Primero vienen los productos de la Tienda A, 3 segundos después vienen los productos de la Tienda B
Ahora corremos en los varios problemas, por ejemplo:
Entonces ahora necesitamos escribir un código complejo solo para actualizar el carrito.
El ecosistema REACT resuelve este problema mediante la introducción de Reactividad en JavaScript, por lo que nosotros, como desarrolladores, ya no tenemos que preocuparnos por actualizar los elementos DOM.