VueJS y ReactJS son dos de los frameworks de JavaScript más populares para el desarrollo de aplicaciones web. Ambos tienen sus propias ventajas y desventajas, y en este tutorial vamos a crear el mismo proyecto en ambas plataformas para que puedas ver las diferencias entre ellas.
Para empezar, necesitarás tener instalado Node.js en tu sistema. Puedes descargarlo desde su sitio web oficial e instalarlo siguiendo las instrucciones proporcionadas. Una vez que tengas Node.js instalado, estás listo para comenzar.
Creando el proyecto en VueJS
Para crear un nuevo proyecto en VueJS, puedes utilizar Vue CLI, que es una herramienta de línea de comandos oficial para la creación de proyectos Vue. Abre tu terminal y ejecuta el siguiente comando:
npm install -g @vue/cliUna vez que hayas instalado Vue CLI, puedes crear un nuevo proyecto ejecutando el siguiente comando:
vue create vue-projectSigue las instrucciones en la terminal para configurar tu proyecto. Una vez que se haya creado el proyecto, navega a la carpeta del proyecto y ejecuta el siguiente comando para iniciar el servidor de desarrollo:
npm run serveEsto iniciará un servidor local en tu máquina y podrás ver tu aplicación en tu navegador accediendo a http://localhost:8080.
Creando el proyecto en ReactJS
Para crear un nuevo proyecto en ReactJS, puedes utilizar Create React App, que es una herramienta oficial para la creación de proyectos React. Abre tu terminal y ejecuta el siguiente comando:
npx create-react-app react-projectUna vez que se haya creado el proyecto, navega a la carpeta del proyecto y ejecuta el siguiente comando para iniciar el servidor de desarrollo:
npm startEsto iniciará un servidor local en tu máquina y podrás ver tu aplicación en tu navegador accediendo a http://localhost:3000.
Comparando VueJS y ReactJS
Ahora que has creado el mismo proyecto en VueJS y ReactJS, puedes comparar las diferencias entre ambos frameworks. Algunas de las diferencias más notables son:
-
Sintaxis: VueJS utiliza un enfoque basado en plantillas HTML para definir la interfaz de usuario, mientras que ReactJS utiliza JSX, que es una extensión de JavaScript que permite escribir código HTML dentro de JavaScript.
-
Estado: En VueJS, el estado de los componentes se maneja de forma más intuitiva con la propiedad
data, mientras que en ReactJS se utiliza el concepto de estado y props para gestionar el estado de los componentes. -
Renderizado condicional: En VueJS, puedes utilizar directivas como
v-ifyv-showpara renderizar condicionalmente elementos en la interfaz de usuario, mientras que en ReactJS se utilizan expresiones lógicas dentro de JSX. - Reactividad: VueJS utiliza un sistema de reactividad bidireccional para mantener los datos y la interfaz de usuario sincronizados, mientras que ReactJS utiliza un enfoque de datos unidireccional con la función
setStatepara actualizar el estado.
Estas son solo algunas de las diferencias entre VueJS y ReactJS. Ambos frameworks son poderosos y populares en la comunidad de desarrollo web, y la elección entre uno u otro dependerá de tus preferencias personales y las necesidades de tu proyecto.
Espero que este tutorial te haya sido útil para comprender las diferencias entre VueJS y ReactJS y te haya ayudado a crear un proyecto en cada uno de ellos. ¡Buena suerte en tu camino de desarrollo web!
React no es el más feo, pero le gusta hacer un esfuerzo para serlo…
React esta sobrevalorado… no me meteria con el en la actualizado de cero, si ya tienes bases pues a por ello!! pero vue en la cabecera para 2024 2025
algo similar a redux toolkit para vue?
React mola más
Para mi React está sobrevalorado. Vue es más limpio y elegante. Hay cosas relacionadas con la reactividad que son mucho más sencillas con Vue y más fáciles de gestionar, mantener, y extender. El provide – inject, por ejemplo, es una maravilla, y funciona con reactividad sin tener que hacer nada raro.
Una duda, en Vue usan computed() porque sí? he visto que lo usan en funciones muy simples, porque en React el uso de useMemo() no es recomendable a menos que el calculo sea muy costoso.
Tengo 5 años desarrollando proyectos con Vue.js y tambien he trabajado con React.js y con diferencia Vue siempre mas elegante y sin tantos dolores de cabeza, ademas mucho mas rapido en aplicaciones con muchos elementos, buen video 👍🏾
Muchas gracias por este video . Para el ejercicio en react, el calculo del toPay no hace falta usar useMemo, lo que hace es complicar el codigo sin ningun beneficio. Tan sencillo como calcularlo directamente debajo de los estados y ya. useMemo para procesos super pesados y que afecten el rendimiento.
Que theme de visual studio code usas?
Para proyectos grandes, react no creo que valga la pena, demasiada complejidad innecesaria, ojo es opinion personal, yo no he usado vue aun pero seguro que es mas sencillo todo.
Se ve más que se tiene poco código con Vue, que no lo he usado, pero siento que para alguien que usa mucho JavaScript, React le debe parecer más familiar
Excelente video!
Yo trabajo con React y estoy aprendiendo vue debo decir que si bien es sierto que con los dos se puede hacer lo mismo con vue veo que es mas limpio se necesita menos lineas de codigo y es mas rapido y pesa menos, y si fuera poco veo que se viene vapor y con eso vue va hacer un mas rápido y mas ligero de lo que ya es por que ya no va a utilizar virtual dom
que feo que es React
vue simpre lo he visto mas simple para desarrollar
Son los mejores! hice la sugerencia de este video hace unos dias!
Yo trabaje con vue, pero al final me termine quedando con react y typescript