Esta vez veremos Vite, la cual es, según la documentación oficial: una herramienta de compilación que tiene como objetivo proporcionar una experiencia de desarrollo más rápida y ágil para proyectos web modernos.
Consta de dos partes principales:
- Un servidor de desarrollo que proporciona mejoras enriquecidas de funcionalidades sobre módulos ES nativos, por ejemplo Hot Module Replacement (HMR) extremadamente rápido.
- Un comando de compilación que empaqueta tu código con Rollup, preconfigurado para generar recursos estáticos altamente optimizados para producción.
Como primer requisito es tener Node Js instalado y después instalar Vite. Podemos instalarlo de esta forma:
$ npm install -g vite
Una vez instalado creamos un directorio y nos ubicamos en el:
$ mkdir holamundo $ cd holamundo
Creamos un archivo ``index.html``
<h1> Bienvenidos a Vite <h1>
Ejecutamos con este comando:
$ npx vite
Abrimos el navegador en la ruta: http://localhost:5173
Con esto hemos creado una sencilla aplicación con Vite.
Creando una aplicación React con Vite
Ejecutemos estos comandos:
$ mkdir proyecto-react $ cd proyecto-react $ npm create vite@latest # Seguir el modo interactivo
Se iniciará un modo interactivo para crear nuestro proyecto React. Nosotros le dejamos el nombre de ``proyecto-react`` como el directorio raíz. En cuanto termine se generará el proyecto. Nos ubicamos en el directorio y abrimos el subdirectorio ``src`` y editamos el archivo ``App.tsx`` (elegimos Typescript como lenguaje base previamente).
function App() { const [count, setCount] = useState(0) return ( <> <div> <a href="https://vite.dev" target="_blank"> <img src={viteLogo} className="logo" alt="Vite logo" /> </a> <a href="https://react.dev" target="_blank"> <img src={reactLogo} className="logo react" alt="React logo" /> </a> </div> <h1>Vite + React</h1> <div className="card"> <button onClick={() => setCount((count) => count + 1)}> count is {count} </button> <p> Edit <code>src/App.tsx</code> and save to test HMR </p> </div> <p className="read-the-docs"> Click on the Vite and React logos to learn more </p> </> ) } export default App
Regresamos al directorio raíz y ejecutamos la aplicación:
$ npm run dev
Abrimos el navegador en la ruta: http://localhost:5173/
Se mostrará la aplicación.
¡Hemos creado nuestra primera aplicación React con Vite!
Enlaces:
https://vite.dev/https://alquimistadecodigo.blogspot.com/2021/10/react-js-en-un-vistazo.html
https://react.dev/
https://create-react-app.dev/
Comentarios
Publicar un comentario