Solución:
Esta es probablemente una explicación más simple de la que está buscando, pero para cualquier otra persona que pueda estar confundida …
AJAX y aviones
Piense en un Avión. La parte más importante de un avión es que vuela. Pero un avión también tiene ruedas. Y las ruedas tienen un propósito muy importante, porque sin ellas el avión nunca volaría ni aterrizaría, y a pesar de todas las cosas asombrosas que un avión puede hacer en el aire, no importaría sin ruedas.
Esta es la misma relación que Reaccionar tiene con AJAX. React es el avión y AJAX son las ruedas. Pero, ya sabes, otras cosas también tienen ruedas. Los tractores, los coches, incluso algunos barcos tienen ruedas, y todos son muy importantes y están dañados sin ruedas. También lo es AJAX para otras tecnologías web, pero cuando se habla de aviones, su ruedas suelen ser lo más alejado de tu mente.
Entonces Reaccionar Es para AJAX, que un Avión Es para Ruedas.
Pero hablemos de AJAX. ¿Qué es? por que es tan importante? Cómo se usa en los sitios web hoy. Luego, mostraré cómo lo usa React. Luego, mostrarte lo que React hace que es tan impresionante que te hace olvidarte de AJAX, como un avión con sus ruedas.
¿Recuerda los sitios web de los 90?
Cuando hacías clic en algo, se tendría que cargar una nueva página para mostrar el efecto de tu clic, incluso si no era nada. Aquí tienes un ejemplo asombroso. Vaya a esa página y haga clic … ¿Ve cómo los clics lo llevan a una página completamente diferente? Eso es Internet antes de AJAX.
Ahora, eche un vistazo a esta misma página: al lado de cada respuesta hay una flecha hacia arriba … Continúe y haga clic en una de ellas … Observe que la página no se vuelve a cargar, pero recibe comentarios: la flecha se vuelve naranja. Esto puede parecer insignificante, pero representa grandes avances en tecnología web: AJAX.
¡AJAX permite que eso suceda! Y esto no es gran cosa ahora, es tan intrínseco a la experiencia web ahora, es difícil imaginar una Internet sin ella.
AJAX y una esfera de reloj
Una buena analogía de AJAX, y cómo cambió la web es un simple reloj de pulsera o un reloj de pared … Imagínese las manecillas de los minutos, las horas y los segundos moviéndose alrededor de la esfera del reloj para mostrar la hora. Ahora, supongamos que cada movimiento de la manecilla de los segundos provocó que todo el reloj fuera destruido y reconstruido.
Todo ese esfuerzo de destruir y reconstruir solo para mostrar un pequeño cambio. Bueno, eso sería un desperdicio escandaloso de recursos, y eso fue el Internet de los 90. Afortunadamente, ahora tenemos AJAX. Así como un reloj muestra la hora sin problemas, AJAX permite que las páginas web muestren cambios en los datos inmediatamente, sin necesidad de actualizar la página; hace clic en una flecha hacia arriba y se vuelve naranja. ¡No se necesita recargar la página!
Hoy en día, todo usa AJAX, y como desarrollador es cada vez más fácil escribir una aplicación sin siquiera saber qué es AJAX. Esto se debe a que se ha asimilado a las tecnologías JavaScript que usamos, como React, que usa fetch, entre otros comandos, para hacer que AJAX sea más fácil y legible.
Y AJAX funciona como páginas web:
- Un cliente (un navegador web como Firefox) solicita datos de un servidor (como el servidor Stack Overflow (SO)).
- El servidor procesa la solicitud.
- El servidor envía una respuesta al cliente.
- y el código de la página web, basado en la respuesta, decide dónde irá (HTML) y cómo se verá (CSS).
Todo eso está oculto para el usuario, por lo que parece que la página web está reaccionando a sus acciones.
Aplicaciones de una sola página
Dado que no estamos reconstruyendo toda la página con cada clic, puede mantener las cosas almacenadas en el navegador. Esto se puede utilizar durante toda su visita y futuras visitas al sitio.
La primera vez que visita Stack Overflow, se carga todo el CSS, JS y HTML. Estos tres lenguajes definen el estilo (CSS), el comportamiento (JS) y la estructura (HTML) de los datos enviados y recibidos desde el servidor. ¡Y adivinen cómo se envían esos datos! AJAX.
Así es como funciona la mayor parte de la web ahora. Google, Facebook, Amazon, Youtube, Reddit, todos los sitios creados con WordPress y WIX, incluso Stack Overflow, todos usan este paradigma básico para entregar sus sitios a los usuarios de manera eficiente. La diferencia radica en cómo se crea y gestiona la aplicación de una sola página …
React.js
React es una biblioteca de JavaScript para crear y mantener aplicaciones de una sola página.
Pero eso no es tan importante. El gran problema de React es cómo te permite crear aplicaciones …
Básicamente, debe construir cosas por separado y luego juntarlas: los componentes se unen para formar una aplicación. Así que eche un vistazo a este código totalmente plausible pero falso para todas las respuestas en esta página:
answerArray.map(a => Esta es una línea que muestra la mayor parte de la información de esta página. Eso es un gran problema. Los desarrolladores de Stack Overflow crearon su propio componente, llamado “Respuesta” y su único trabajo es mostrar una Respuesta. Lo ejecutas en un bucle, y bam, todas las complejidades de todas las respuestas son abstraído, oculto en el Componente de respuesta, que está completamente separado de otros componentes.
Ahora eche un vistazo a esto:
answerArray.map(a =>
Este es el sitio completo de Stack Overflow.
Cada etiqueta (encabezado, pregunta, respuesta, etc.) es un componente. Estos componentes están completamente separados y tienen un código autónomo, pero aquí se usan juntos para construir la aplicación más compleja.
Composición
Un concepto importante de React es la composición, y lo acabamos de definir arriba. “La composición te permite construir funcionalidades más complejas combinando funciones pequeñas y enfocadas” (flaviocopios). Nuestra aplicación se compone de componentes más pequeños.
También es importante tener en cuenta que cada componente contiene su propia funcionalidad. Eso significa que si el usuario hace clic en un botón y aparece una advertencia, el botón y el código que hace que aparezca la advertencia están en el mismo componente.
Programación funcional
Sorpresa, esto ya lo definimos también. La programación funcional, para nuestros propósitos, significa 1. objetos; y 2. cómo se comportan; están en el mismo lugar. Como el ejemplo del botón anterior. Haga clic en un botón para recibir una advertencia. Y todo eso está en el mismo archivo.
Esto es diferente al desarrollo previo a React donde todos los botones estarían en un archivo y todos los efectos de los botones estarían en otro. Y esta no es necesariamente una forma incorrecta de hacer las cosas, pero para el desarrollo web, es más fácil pensar en términos de bloques de construcción autónomos, en lugar de herramientas muy dispersas que no funcionan por sí mismas.
Por qué no debería preocuparse por el bigote y el manillar
Estas dos tecnologías han sido canibalizadas por React. Similar a cómo React usa AJAX, pero lo hace más fácil, Moustache y Handlebars ya están dentro de React, y los usará todo el tiempo sin siquiera saberlo. Y para mí, eso está bien. Hay argumentos en contra, y el conocimiento nunca es algo malo, así que investiga más si quieres, pero esto ya es lo suficientemente largo, así que eso es todo lo que diré al respecto.
En su lugar, le contaré sobre 3 tecnologías que deberían interesarle.
Lo que debería preocuparte en su lugar …
Nodo
El punto principal de Node.js es que ejecuta JavaScript fuera de un navegador. Gran grito, ¿verdad? Bueno, resulta que este es uno de los avances más influyentes para los desarrolladores web. De hecho, la descarga de Node a menudo se realiza antes de descargar React.
El nodo es importante por dos grandes razones:
- Te permite descargar otras cosas
- Te permite procesar JavaScript antes de enviarlo a un navegador.
Podría escribir páginas y páginas sobre Node, pero la conclusión de esto debería ser “Node es importante, debería estar atento a más conocimientos sobre Node y cómo se relaciona con React y el desarrollo web”.
NPM
NPM no significa “Node Package Manager”, pero debería hacerlo, porque eso es exactamente lo que hace. React, SASS, Angular, Vue, prácticamente todo lo mencionado aquí, probablemente usará npm para instalar y mantenerse actualizado.
Webpack
Webpack es un “paquete de módulos”. Toma todos sus archivos js y css y los escribe en un archivo para que solo tenga que preocuparse por escribir uno