Creamos el mismo proyecto en VanillaJS y ReactJS para que veas las diferencias
HTML-код
- Опубликовано: 18 мар 2024
- 👉 Conoce nuestras vacantes actuales de tecnología en bit.ly/talento-tech-GDI
En este vídeo te contamos las diferencias entre Vanilla JS y React JS creando el mismo proyecto
Aquí tienes el repositorio: github.com/carlosazaustre/gar...
Si quieres aprender más de programación, te dejamos por aquí otros Garaje Code Pills que seguro que te gustarán:
- Cómo integrar Storybook en tus proyectos de React: • Cómo integrar Storyboo...
Este vídeo ha sido hecho en colaboración con @CarlosAzaustre profesor y creador de contenido dev:
/ @carlosazaustre
Si quieres estar al tanto de todo lo que hacemos, puedes inscribirte aquí 👇
garajedeideas.com/livecoding/...
----------
Garaje de Ideas es un estudio de Diseño, Tecnología y Data. En este canal encontrarás tutoriales, cursos y ejemplos prácticos paso a paso de desarrollo web y programación.
Podrás encontrar desde cursos de JavaScript, Node.js, D3.js, Vue3, Typescript, HTML, CSS, React... hasta cómo optimizar tu proceso de trabajo. 
Наука
![Cordae - Saturday Mornings (feat. Lil Wayne) [Official Music Video]](http://i.ytimg.com/vi/z2GYJua09F0/mqdefault.jpg)
👉 ¡En Garaje, seguimos creciendo! Conoce nuestras vacantes actuales de tecnología: bit.ly/talento-tech-GDI
Cuando le pasas la función en el minuto 6:44, no la estas pasando por referencia, la estas ejecutando. Cada vez que se escribe una función con sus paréntesis, ésta se ejecuta, o sea, no se pasa por referencia.
Para pasarla por referencia se escribe sin sus paréntesis. Pero para el ejemplo, no sirve con solo pasarla sin sus paréntesis. Hay que pasarla como retorno de una arrow function (función flecha). Que es lo correcto como finalmente se explica.
En definitiva:
- función seguida de sus paréntesis: función que se ejecuta.
- función sin sus paréntesis: referencia a la función.
Justo estaba pensando lo mismo y me estaba explotando la cabeza porque en el video se dice justo al contrario. Gracias @marcelp4825 por confirmarlo.
En JavaScript, cuando pasas una función como argumento a otra función, como es el caso de main que se pasa a document.addEventListener en la última línea de tu código, lo que se pasa es una referencia a la función (no se está invocando). Esto significa que no se está ejecutando la función main en ese momento; en su lugar, se está pasando su referencia para que pueda ser llamada posteriormente (en este caso, cuando el evento DOMContentLoaded ocurra).
Si se quiere evitar lo del arrow función creo que se puede usar .bind con los argumentos de la función
Me leyeron la mente, justo hace un momento pensé en que sería bueno hacer ese comparativo. Gracias.
Gracias por tu comentario y nos alegramos de que nuestro contenido te sirva de ayuda :)
Wow nunca había visto a alguien que explicara esto también, y lo digo enserio, la forma en como lo explica y lo detalla de tal forma en que entiendes el porque de los que estas haciendo es increíble, le entendí a la perfección y el porque de cada cosa, incluso cosas que no sabía como funcionaban por detrás me dejo loco, sin duda un buen profesor, voy a echarle una ojeada a su canal para ver que más puedo aprender.
¡Muchas gracias por tu comentario! Nos alegramos mucho de que nuestro contenido te sirva de ayuda :). Es que Carlos Azaustre es muy top explicando. Exacto, echa un ojo a lo que tiene en su canal y también lo puedes encontrar por IG y TikTok, que también sube contenido que te puede ayudar.
Buen video, se ve muy claro las bondades de react!
Gracias por tu comentario y nos alegramos de que nuestro contenido te sirva de ayuda :)
Excelente, gracias !
Gracias a ti por tu comentario! Nos alegramos de que nuestro contenido te sirva de ayuda :)
mas comparativas si puedes con astro estaria genial
Este es un profe genial su libro aprendiendo react es super genial
^_^
Gracias por tu comentario y nos alegramos de que nuestro contenido te sirva de ayuda :)
Buen video, ahora si se que es react. Aun me pregunto como hacer en el caso de elementos repetitivos como por ejemplo una tabla de productos, me gustaria mucho si hicieras una parte 2 de esto 👍👍
Con una tabla de productos, simplemente tendrías que tener un array de objetos con los datos, y vas recorriendo con el método .map el array, y renderizando cada item
Excelente !!
Gracias por tu comentario y nos alegramos mucho de que nuestro contenido te sirva de ayuda! :)
si JSX fuera Javascript no necesitarias un compilador a JavaScript, no necesitarías poner el código JS entre llaves y lo podrías usar en el navegador, tu podrás pensar que es sólo un detalle pero si no tuvieras compilador simplemente todo el tiempo que nos ahorraríamos de desarrollo al no compilar, porqué crees que se inventó Go. Ese pequeño detalle tiene un costo. Y tampoco es HTML, igual si lo fuera podríamos usarlo en el navegador sin problemas, así que es XML.
Ahora, para la gran mayoría de las aplicaciones React en sí mismo es matar moscas con cañonazos, por eso es que server rendering volvió porque, SPAs no son la abstracción correcta para la web. En los últimos 10 años es como si a los desarrolladores se les hubiera olvidado (o núnca aprendieron) las lecciones previas a React.
JSX es una manera de representar objetos de react de manera declarativa. Técnicamente puedes escribir una aplicación de react sin la necesidad de usar JSX, puro javascript, pero es un poco complicado. Cuando dice que JSX es javascript, se refiere a que JSX es una representación de los objetos de react. Básicamente JSX es una abstracción declarativa de javascript
Gracias @@danyael031 !
Hola, muy buen video 💯👍
Gracias! 😊
Cuando pones una linea de codigo y de muestra el autocomplementar en gris es una extension? me gustaria saber como lo puedo descargar?
copilot
Cual es el tema que ocupas en vs, gracias por el video muy pero muy informativo... Saludos
Se llama "Oh Lucy"
Qué tema de Visual Studio usas en el vídeo?
Se llama "Oh Lucy"
@@CarlosAzaustre Gracias
Cuando decrementas en la app hecha en react, el counter no pasó por el valor 4. Por que pasó esto?
fue un brinco en la edición, si observas su cara hace un corte directo.
nuevo suscriptor
Gracias y bienvenido a nuestro canal! Esperamos que nuestro contenido te sirva de ayuda :)
Muyy buen video, para cuando ReactJS vs Typescript?
Interesante propuesta, nos apuntamos a ver si lo podemos llevar a cabo ;). Thanks!
Cual es la font que usa para vscode?? porfavorr
Se llama "Cascadia Code"
El ejemplo de un Todo list con peticiones al backend era mejor.
En ese caso se notaría más la posibilidad de que todo se vuelva un desastre con Vanilla JS, si no se implementan diseños "opinionados"
Cuál es el tema y la fuente que usas en ese video?
Se llama "Oh Lucy", y la fuente es "Cascadia Code"
Perdona me puedes decir tu fuente y tu tema de vscode?
Se llama "Oh Lucy" y la fuente es "Cascadia Code"
Maestro! cuando una parecida entre vue 3 con react?
Estoy un poco desactualizado de Vue… habrá que hacer una VUElada con @pablosirera 😅
Sigo usando JS de hace 3 años para la web, pero sin duda alguna la velocidad en desarrollo de react y lo sencillo que es, termina haciendo que prefiera programar en React.
Solo en un proyecto medio/grande se nota realmente la diferencia y el poder de react
Mi pregunta es ¿a nivel de optimización cuál es más eficiente y como saberlo?
En este caso vanilla, y es simple, no estás cargando una librería y estás usando las propias apis a interfaces del navegador. Todo depende de lo que necesites, si solo es una web y no una web app pues casi siempre es mejor vainilla
@@miauwuau La eficiencia a nivel de memoria es bastante obvia, mi pregunta real es a nivel de codigo como javascript interactúa con el motor V8, a simple vista puede parecer que javascript es mas rapido, pero puede que react genere uno codigo javascript que interactúe de forma mas eficiente con el motor V8.
@@HappyLicker he entrado a muchas paginas con react y son pesadas como he entrado a otras con Jquery y son velocez y vanilla mucho mas, react solo da facilidad al programador pero detras hay mucho codigo que hacen de la app pesada y lenta sin mencionar el patrocinio que tiene sabemos que la cocacola mata gente pero es la mas vendida por la publicidad pagada... tengo 10 años programando y he probado de todo, me quedo con vanilla y mi propia mini libreria...
este ejemplo quizás no muestra muy bien la diferencia, esta puede tener un comportamiento exponencial a medida de que la aplicación sube su complejidad.
5:49 aquí no comprendo porqué refactorizar el código si ya funciona como se supone, sorry soy nuevo en progra y solo es una duda
Cuando tienes un proyecto grande, buscás optimizar lo más posible. Por SEO entre otras cosas.
En síntesis, entre menos lineas necesitéis para hacer algo mucho mejor.
@@marcomendez4586 gracias master
En proyectos con baja proyección de crecer en tamaño prefiero Vanilla JS.
Un proyecto nunca será así de simple.
En proyectos reales, donde los devs de frameworks (no solo react) importan 100 librerias nuevas por commit, ahí si la diferencia de rendimiento es bestial.
Una de las diferencias más notables es que en el vanilla si le das a inspeccionar código fuente, se ven los botones y todo, en react no ves nada.
Claro, porque es JavaScript en cliente quien renderiza el contenido y la estructura.
Excelente comparación. Para los que usan React (o cualquier otro framework) y nunca han tenido experiencia de trabajo con javascript desde antes de que salga BackboneJS (algunos ni saben lo que fué), jamás entenderán la sencillez de Vanilla JS. Es más, Vanilla JS como tal no existe, sino que fué una broma para aquellos que se encantaron con los pseudo códigos de interpretación / frameworks sobre javascript. A mí no me ha quedado otra que aprender React, Angular o Vue para poder trabajar, pero para mis propios proyectos solo utilizo Javascript ya que es suficiente y 75% más rápido para levantar proyectos. Después de todo, incluso con Typescript, es todo una sobre-ingeniería para justificar sacar dinero a las empresas y gobiernos.
Soy el único que ve que es menos trabajo con Js vanilla?
Es subjetivo.
Ya que en Vanilla JS se escribe mas, pero si ya trabajaste en otros poryectos en si usuas tus propias funciones o librerias.
Yo igual lo pensaba pero conforme fui haciendo proyectos sobre el, ya no volví a vanilla
Es un ejemplo para comprender las diferencias. Para aplicaciones más grandes, Vanilla quizá se te haga pesado.
@@CarlosAzaustreLo de pesado es subjetivo.
@@leonardocurbelobetancort430Hola Leo, dices que has hecho librerías equivalentes a React y por eso prefieres usar Vanilla en vez de React?
pues un contador T-T
Un contador te lo hace Vite, sin hacer nada xd
¿Y te lo explica?