Creamos el mismo proyecto en VanillaJS y ReactJS para que veas las diferencias
āļāļąāļ
- āđāļāļĒāđāļāļĢāđāđāļĄāļ·āđāļ 6 āļ.āļĒ. 2024
- ð Conoce nuestras vacantes actuales de tecnologÃa en bit.ly/talento...
En este vÃdeo te contamos las diferencias entre Vanilla JS y React JS creando el mismo proyecto
Aquà tienes el repositorio: github.com/car...
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....
----------
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. - āļ§āļīāļāļĒāļēāļĻāļēāļŠāļāļĢāđāđāļĨāļ°āđāļāļāđāļāđāļĨāļĒāļĩ
![POLYCAT - āļāđāļāļāļ§āļēāļĄāļĢāļđāļāļĒāļīāđāļĄ [Music Video]](http://i.ytimg.com/vi/lBhIgPGCgbI/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.
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, se ve muy claro las bondades de react!
Gracias por tu comentario y nos alegramos de que nuestro contenido te sirva de ayuda :)
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.
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 !
mas comparativas si puedes con astro estaria genial
Excelente, gracias !
Gracias a ti por tu comentario! Nos alegramos de que nuestro contenido te sirva de ayuda :)
Cual es el tema que ocupas en vs, gracias por el video muy pero muy informativo... Saludos
Se llama "Oh Lucy"
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
QuÃĐ tema de Visual Studio usas en el vÃdeo?
Se llama "Oh Lucy"
@@CarlosAzaustre Gracias
Muyy buen video, para cuando ReactJS vs Typescript?
Interesante propuesta, nos apuntamos a ver si lo podemos llevar a cabo ;). Thanks!
Maestro! cuando una parecida entre vue 3 con react?
Estoy un poco desactualizado de VueâĶ habrÃĄ que hacer una VUElada con @pablosirera ð
Excelente !!
Gracias por tu comentario y nos alegramos mucho de que nuestro contenido te sirva de ayuda! :)
Buen video!!, una consulta ÂŋQue fuente de texto usas en tu editor?
Gracias! Se llama "Oh Lucy" ð
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.
nuevo suscriptor
Gracias y bienvenido a nuestro canal! Esperamos que nuestro contenido te sirva de ayuda :)
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
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"
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.
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.
Solo en un proyecto medio/grande se nota realmente la diferencia y el poder de react
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
CuÃĄl es el tema y la fuente que usas en ese video?
Se llama "Oh Lucy", y la fuente es "Cascadia Code"
En proyectos con baja proyecciÃģn de crecer en tamaÃąo prefiero Vanilla JS.
Cual es la font que usa para vscode?? porfavorr
Se llama "Cascadia Code"
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.
Perdona me puedes decir tu fuente y tu tema de vscode?
Se llama "Oh Lucy" y la fuente es "Cascadia Code"
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.
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?