Si le preguntas a un desarrollador profesional, ¿cuál es el camino para convertirse en desarrollador? Lo más probable es que le diga HTML, CSS, JavaScript, un marco Front-End (React, Angular, Vue lo que sea)

Al escucharlo, puede recibir esta pregunta: "¿Por qué necesito aprender un marco adicional cuando puedo hacer todo con Vanilla (nombre elegante de JavaScript "simple") en sí mismo?

¿Por qué tanto énfasis en los marcos de aprendizaje, ya sea React o Vue o lo que sea?

Muchos desarrolladores principiantes que están estresados en la batalla de React vs JavaScript tienen esta pregunta en mente.

Sin olvidar que los marcos como React también parecen contraproducentes inicialmente.

Entonces, como desarrollador de React, te diré por qué las aplicaciones web React (o cualquier otro marco por el bien de la conversación, pero sobre todo React 😉) son mejores que los sitios web simples de JavaScript.

Componentes reutilizables individuales

A diferencia de JavaScript puro, las aplicaciones en React no se crean como una extensión larga de un archivo, sino como pequeños bloques de construcción llamados Componentes.

Estos componentes son fundamentales para las aplicaciones React.

Todo su sitio web se divide en estos pequeños componentes que, cuando se juntan, completan la interfaz de usuario del sitio web.

Una de las principales ventajas de desarrollar sitios web de esta manera es que los componentes individuales se desarrollan armoniosamente sin obstaculizar otros componentes.

Velocidad más rápida

React usa Virtual DOM , que es una representación del DOM real guardado en la memoria y sincronizado con el DOM real.

Cada vez que ocurre un cambio en un componente, React compara el Virtual DOM actualizado con la versión preactualizada de Virtual DOM para determinar qué cambios se realizaron en los componentes.

React luego refleja esos cambios en el DOM real.

A diferencia del DOM real, el DOM virtual identifica los cambios mínimos que se deben realizar en el DOM y solo los actualiza.

Esto hace que su sitio web sea súper rápido en comparación con los sitios web JS puros donde todo el DOM se vuelve a representar junto con el nodo de destino.

Fácil de crear aplicaciones web complejas

Para sitios web estáticos (en su mayoría), Vanilla JavaScript no es un gran problema.

Pero para las aplicaciones web complejas que requieren grandes cambios en el DOM y una carga rápida, se convierte en una molestia hacer todo solo con JS.

El DOM virtual de React es el verdadero salvador aquí. Cambia solo los elementos necesarios del DOM real en lugar de volver a renderizar todo.

Aparte de eso, la arquitectura basada en componentes de React ayuda mucho, ya que puede reutilizar los componentes cuando sea necesario.

Más fácil de mantener

Una gran ventaja de crear sitios web basados en componentes es la facilidad de mantenimiento.

En los viejos tiempos, no estaba seguro de qué efecto tendría cambiar el margen de un elemento HTML en su sitio web (en general).

En React, cada componente es su propio héroe. Funciona y responde a la ventana gráfica por sí solo, no se preocupe por actualizarlos :-)

Puede actualizar cualquier componente en cualquier momento y realizar un seguimiento de su comportamiento en diferentes ventanas gráficas, y luego repetir el proceso con otros componentes.

Cuando haya terminado, júntelos para que suceda la magia.

Gran Organización

Cuando configura su proyecto React con la ayuda de create-react-app , React crea una nueva carpeta para su proyecto con una estructura de archivo específica similar a la imagen a continuación:

Aunque todos los archivos y carpetas de la estructura de archivos anterior son importantes, el que más usará es src .

La carpeta src contiene todos los componentes y activos de reacción en los que trabajará mientras crea su aplicación.

Además de esa carpeta pública , hay otra carpeta importante, viene con un archivo HTML predeterminado que no contiene nada más que un div en el cuerpo.

React utiliza este div para inyectar dinámicamente todo su código en el sitio web.

Esta estructura de archivos es excelente cuando se trabaja en sitios web grandes. A diferencia de la forma tradicional en la que puede crear archivos HTML, CSS y JS y almacenarlos aquí y allá, esta estructura agrega uniformidad a su proceso de creación de sitios web.

Maneja la interfaz de usuario y la lógica juntas

Tradicionalmente, la tarea de crear una interfaz de usuario se realiza mediante HTML y CSS, y JavaScript se encarga de la lógica. Pero esto no es cierto en el caso de React.

React reconstruye todo el proceso de creación de sitios web al proporcionarnos componentes independientes que pueden manejar la interfaz de usuario y la lógica juntas.

Cada componente de React se ocupa de su estructura y lógica (ya veces también del estilo) por sí mismo, ya pasaron los días en los que se mantenían archivos separados de HTML y JavaScript.

Actualizaciones sin recargar

Esto es lo que más me gusta de React. A diferencia de los sitios web tradicionales, no tiene que viajar de una página a otra.

React manipula el DOM para cambiar solo aquellos componentes que deben cambiarse y, con la ayuda de React Router , navega por el sitio web de una ruta a otra sin recargar.

Esta actualización dinámica de componentes brinda a los usuarios una experiencia de navegación fluida similar a una aplicación nativa.

Componentes reutilizables

Al crear sitios web grandes, descubrirá que casi todo el tiempo repite ciertos patrones,

En React, puede agrupar esos patrones en un componente y reutilizarlos una y otra vez.

Imagine que está creando un sitio web de blogs y necesita mostrar tarjetas de publicaciones de blog en su página.

Aquí, todo lo que necesita hacer es crear un componente para la tarjeta y reutilizar el mismo componente en todas partes y proporcionar un conjunto de datos diferente para mostrar información de diferentes publicaciones de blog.

React vs JavaScript: ¿Cuál es mejor?

Pregunta final: ¿Quién ganó en la batalla de React vs JavaScript?

Para aplicaciones web o sitios web más grandes, claramente React.

Sin embargo, también puede optar por usar JavaScript si su sitio web es pequeño y no desea diseñar en exceso las cosas básicas.

Como desarrollador, aprender React después de JavaScript seguramente será una gran inversión para tu futuro si realmente quieres mejorar tus habilidades de desarrollo.

Reaccione conmigo en Twitter , si tiene alguna confusión sobre React o JavaScript.