Ir al contenido principal

React Js con Vite

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:

  1. Un servidor de desarrollo que proporciona mejoras enriquecidas de funcionalidades sobre módulos ES nativos, por ejemplo Hot Module Replacement (HMR) extremadamente rápido. 
  2. 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

Entradas populares de este blog

Programación Windows Batch (CMD) parte 3

Crear ciclos para efectuar operaciones tediosas nos ahorrará tiempo para realizar otras tareas. En está ocasión veremos ciclos con FOR . ¿Cuál es la síntaxis de bucle FOR en Windows Batch? Si está dentro de un archivo *.bat : FOR %%variable IN (seq) DO operaciones Si lo ejecutamos en una terminal: FOR %variable IN (seq) DO operaciones Ejemplo 1 . Recorrer una secuencia de números del 0 al 5: recorrer.bat @ echo off FOR %%i in ( 0 1 2 3 4 5 ) DO echo Hola no. %%i pause Nos imprimirá en pantalla: Hola no. 0 Hola no. 1 Hola no. 2 Hola no. 3 Hola no. 4 Hola no. 5 ¿Puedo usar contadores? Si, se pueden usar. Ejemplo 2 . Uso de contadores: contador.bat @ echo off set numeros = 1 2 3 4 5 6 7 8 9 10 set cont = 0 for %%a in ( %numeros% ) do ( echo Hola no. %%a :: Contador set /a cont+ = 1 ) echo Total: %cont% Este código nos imprimirá, además de los mensajes Hola no. 0 ..., el total de valores conta...

TIOBE index 2024

El índice TIOBE (o índice de la comunidad de programación TIOBE) mide la popularidad de los lenguajes de programación. Su índice no se basa en qué lenguaje de programación es mejor, si tiene mejor perfomance, si posee escalabilidad, si es más sencillo de aprender, de usar, de implementar, etc. Sólo se basa en la popularidad. En el número de referencias ya sea en blogs, foros de consulta, etc. No necesariamente si las empresas lo están usando en alguno de sus desarrollos. Este índice es útil para darse una idea qué lenguaje está cobrando más popularidad y prestigio. Enseguida una tabla con los primeros 5 lenguajes más populares. Índice de Noviembre 2024   Nov 2024  Nov 2023  Change  Programming Language  Ratings  Change  1  1    Python  22.85%  +8.69%  2  3  +  C++  10.64%  +0.29%  3  4  +  Java  9.60%  +1.26%  4 ...

Programación Windows Batch (CMD) parte 4

Siguiendo con la serie de post sobre programación ( 1 , 2 , y 3 ) batch ahora veremos algunas cosas como operaciones aritméticas, operadores lógicos  y uso de ficheros. Cuando somos administradores de servidores o desarrolladores muchas veces tenemos que realizar tareas que nos quitan, relativamente, tiempo valioso que podríamos ocupar para otras cosas (como ver nuestro Facebook, jeje, broma).  Aprender a escribir scripts que nos faciliten algunas tareas siempre es útil. Por ejemplo, conocer todas las características técnicas de nuestro equipo de cómputo nos servirá cuando se realiza peritajes informáticos y soporte al equipo. Realizar respaldos automáticos a nuestras carpetas , archivos y directorios será más sencillo gracias a un script. Pero antes debemos aprender lo básico de la programación en batch. Ejemplo 1. Operaciones aritméticas básicas. aritmetica.bat @ echo off ::Nombre del archivo, imprimirá: aritmetica.bat echo %0 :: Set nos servirá para a...