Gilbert Ardila
Esos cursos de React.js de JuanDc son la locura
Rubén Ernesto Aragón Gil
En unas semanas más, llego a ese curso.
Wilmer Garzon Cabezas
Team PlatziSon los mejores!
Vite nos permite usar frameworks como por ejemplo react.js, vue.js y algunos otros como lit o svelte, a la vez que tenemos todas las ventajas de Vite. En este caso vamos a crear un proyecto con React y ver lo sencillo que es.
Creando un proyecto con React
Primero tendríamos que utilizar el comando npm create vite@latest o yarn create vite, el cual nos da una serie inputs que ya hemos visto anteriormente. A continuación te mostraré como lo configure yo:
? Project name: » vite-react? Select a framework: » react? Select a variant: » reactEs importante que si quieres crear un proyecto de React cuando te pregunten el framework escojas react.
Una vez acabes de dar los inputs verás que se generó un proyecto de React muy parecido con los que estamos acostumbrados a trabajar, solo faltaría instalar dependencias y con eso ya podrías ejecutarlo.
plugin-react
En los archivos que nos generó Vite destaca el vite.config.js, en el cual podemos encontrar un plugin para react que viene de @vitejs/plugin-react y lo estamos empleando en una configuración que se llama plugin, esta simple configuración es lo que nos permite trabajar con react.
Contribución creada por: Jofay Zhan Segura
Gilbert Ardila
Esos cursos de React.js de JuanDc son la locura
Rubén Ernesto Aragón Gil
En unas semanas más, llego a ese curso.
Wilmer Garzon Cabezas
Team PlatziSon los mejores!
Ricardo Andrés Nakanishi
Básicamente vite tiene soporte entero para React y Vue, estaría bueno que agregaran para Svelte también
Diana Martinez
Si tiene soporte para Svelte :D
Diana Martinez
De hecho puedes ver en la misma documentación de SvelteKit, que un proyecto generado con su herramienta, en realidad es un proyecto de Vite con el plugin como el de esta clase, pero para Svelte.
Sergio Andrés Majé Franco
En Vite.js también se puede configurar los auto-import para react mediante la siguiente configuración
import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; /** @type {import('vite').UserConfig} */ export default defineConfig({ esbuild: { jsx: 'automatic' }, plugins: [react()] })
Juan David Reyes
Vite nos exige que donde usemos JSX siempre los archivos tienen que terminar en
.jsx
Miguel Angel Hernandez Colombo
aqui seguimos! confiando en la ruta de platzi! excelente curso y profe! <3
Kenneth Angulo L
¿Por qué usar Vite en lugar de CRA?
Vite es inmensamente superior a Create React App (CRA) porque no empaqueta todo tu código durante el desarrollo, sino que sirve los archivos bajo demanda usando ES Modules nativos. Esto significa que el servidor arranca en milisegundos, sin importar el tamaño de tu aplicación. Además, las actualizaciones en pantalla son instantáneas, eliminando los largos tiempos de espera de Webpack.
Javier Vargas
¿Cómo podría agregar fuentes en React con Vite?
Diana Martinez
¿Fuentes tipográficas?, como en cualquier proyecto, importas tu fuente desde una URL dónde el CSS la pueda encontrar y la configuras con Font Face.
https://developer.mozilla.org/es/docs/Web/CSS/@font-face
Si por otro lado lo que necesitas son por ejemplo las fuentes de google, hay un plugin para eso. https://github.com/stafyniaksacha/vite-plugin-fonts
Javier Vargas
¡GRACIAAAAAAS!, por alguna razón no me capturaba las fuentes que importaba y creí que era porque recién comenzaba con Vite, pero fue por un error mío. Muchas gracias :')
JUAN JOSE HERNANDEZ MUÑOZ
En los cursos de React actuales vi que se creaban archivos .js, aqui en vite me pone todos los archivos en .jsx, como es mas correcto utilizarlo, como js o como jsx?
Diana Martinez
JS es cuando utilizas JavaScript, jsx es cuándo utilizas ese intérprete llamado JSX, que generalmente lo usa React.
Alejandro Daniel Calderón Prin
En el momento que realizo cambios en el archivo App.jsx, no me los toma, tengo que cerrar el proceso y volver a enviar el npm run dev para que pueda tomar los cambios... . El prompt se queda pegado con: timing config:load:flatten
Diana Martinez
Es posible que haya algún problema con tu instalación, tal vez una versión con un bug, o un problema con el caché, te recomiendo eliminar el package lock y la carpeta node_modules, luego reinstalar y repetir el comando, tal vez eso funcione.
Alejandro Daniel Calderón Prin
Gracias por contestar Diana. Pude solucionarlo modificando unos valores en el archivo .npmrc
Camilo Alexander Velandia Velandia
como podria poner un nombre custom a los archivos generados en el build?
Diana Martinez
Puedes utilizar el archivo de configuración de vite para evitar que genere nombres con caracteres aleatorios (no lo recomiendo, porque es para evitar problemas de cache y por eso lo hace por tí). Incluso puedes definir tu propia función para que los nombres se generen con cierta forma.
Puedes encontrar más sobre esto en la documentación oficial de vite.
Andre Huaman Yovera
En el contexto de Vite y JavaScript, SWC se refiere a "Super-fast Web Compiler" (Compilador web súper rápido, en español). SWC es un proyecto de código abierto que proporciona un compilador JavaScript/TypeScript extremadamente rápido y eficiente. . Vite es un marco de construcción de aplicaciones web y bundler (empaquetador) que utiliza tecnologías modernas como JavaScript modular (ES module) y carga rápida (Fast Refresh) para mejorar el rendimiento y la productividad del desarrollo web. Vite utiliza SWC como uno de sus compiladores para transformar el código JavaScript/TypeScript durante el proceso de construcción. . SWC está diseñado para ser un reemplazo rápido y eficiente del compilador Babel. Ofrece una velocidad de compilación significativamente más rápida, lo que resulta en un tiempo de construcción más rápido para las aplicaciones web desarrolladas con Vite. . En resumen, en el contexto de Vite y JavaScript, SWC se refiere a un compilador JavaScript/TypeScript súper rápido que se utiliza en el proceso de construcción de aplicaciones web con Vite para mejorar el rendimiento y acelerar el tiempo de construcción de la aplicación.
Julian David Alzate Cuervo
Este curso me está motivando a aprender react, ya que yo me he enfocado mas que todo en backend