Urian Viera

Full Stack Developer

Cómo crear un proyecto de React con Vite

Correcto

Vite, es una herramienta de construcción moderna y rápida diseñada para proyectos de JavaScript y TypeScript. Es especialmente popular entre los desarrolladores de Vue.js, React y otros marcos de JavaScript. La singularidad de Vite radica en su enfoque en la carga de módulos (ESM) nativa del navegador durante el desarrollo, lo que permite tiempos de compilación ultrarrápidos y una experiencia de desarrollo instantánea.

Crear un proyecto de React con Vite es una tarea sencilla y rápida. Con solo unos pocos comandos en la terminal, puedes tener un entorno de desarrollo React configurado y listo para empezar a codificar.

En el vertiginoso mundo del desarrollo web moderno, la eficiencia y la velocidad son fundamentales. Es aquí donde Vite destaca, siendo una herramienta de construcción de proyectos web que desafía las convenciones establecidas y ofrece una experiencia de desarrollo rápida y ágil.

Resumen Rápido: Cómo Crear un Proyecto de React con Vite

Verificación de la Instalación de Node.js - Paso Previo para Utilizar NPM y Vite.js: antes de comenzar, asegúrate de tener Node.js instalado para usar NPM (Node Package Manager) y Vite.js para crear un nuevo proyecto. Puedes ejecutar node -v para verificar si esta instalado.
Crear un nuevo proyecto de React con Vite: Una vez instalado, ejecuta los siguientes comandos:
npm create vite@latest mi-app
Selecciona una Opción: En este punto, elige la variante de React, que es el proyecto que deseamos crear.
Decidir entre JavaScript o TypeScript: Esta elección determinará el lenguaje que se utilizará en el proyecto.
Proyecto ya creado: Solo es necesario ejecutar los siguientes comandos:
1. $ cd mi-app
2. $ npm install
3. $ npm run dev
Ejecutar el proyecto de React y visitar la URL: Para ejecutar el proyecto de React y visualizarlo, simplemente sigue estos pasos. Este es el punto final donde podrás ver tu aplicación de React con Vite totalmente configurada y funcional.
1. $ npm run dev
2. http://localhost:5173
¡Listo! ¡Wow! Hemos creado un proyecto de React con Vite de forma fácil y en pocos pasos, ¡totalmente funcional!

👋 Soy Urian Viera, Ingeniero de Sistemas y Fullstack Developer autodidacta con más de 10 años de experiencia construyendo soluciones sólidas, escalables y de alto rendimiento.

Habilidades:

Frontend: HTML, CSS, React, Next.js, Astro, Svelte, JavaScript, TypeScript, HTMX, Tailwind, Bootstrap, Vite, Redux, Zustand, Context API, Axios, EJS, optimización SEO y lazy loading.

Backend: PHP (Laravel), Node.js (Express), Python (Django, Flask, FastAPI) y Flutter (Dart) para desarrollo fullstack.

Bases de datos: SQL, MySQL, PostgreSQL, MongoDB, SQL Server, Firebase, Supabase y SQLite.

Experiencia en optimización de consultas, diseño relacional, migraciones, backups, y gestión de datos en la nube.

Servidores y DevOps: Nginx, Apache, Docker, VPS, Cloudflare, PythonAnywhere, Cloudinary, Railway, integración CI/CD, despliegues automatizados, Git, GitHub, Bitbucket y GitLab.

Otras habilidades: desarrollo de sistemas empresariales, plataformas e-commerce personalizadas, dashboards administrativos, sistemas de reservas, gestión de usuarios y roles, blogs dinámicos, foros, chats en tiempo real, autenticación JWT/OAuth, WebSockets y microservicios etc.

Desarrollo móvil: apps híbridas para Android e iOS con Flutter y React Native.

Apasionado por el código limpio, la automatización y la creación de experiencias fluidas.

🚀 Librerías NPM

También soy autor de varias librerías publicadas en NPM, creadas con el propósito de aportar herramientas útiles, modernas y ligeras a la comunidad de desarrolladores.

📦

nextjs-toast-notify

Una librería que transforma la forma en que gestionas las notificaciones en tus aplicaciones Next.js, ofreciendo una experiencia de usuario fluida y sin interrupciones.

⚡

loading-request

La librería más potente y sencilla para mostrar indicadores de carga modernos en aplicaciones web. Perfecta para mejorar la interacción visual durante las peticiones HTTP o procesos asíncronos.

🧩

react-use-form-lite

Una librería moderna, liviana y sin dependencias externas, diseñada para manejar formularios en React de forma rápida, escalable y flexible.

🔥

toastjs-notifications

Una librería de notificaciones toast elegante y minimalista, con animaciones suaves, diseño moderno y una UX impecable para cualquier proyecto web.

Ciudad: Bogotá - Colombia
Sexo: Masculino
Email: urianwebdeveloper@gmail.com

Experiencias

Edumedia Tech

Coordinador de Desarrollo

Dugotex S.A

Desarrollador full stack

AECSA

Desarrollador Sénior

Bull Marketing S.A.S

Programador Web

Permutasalcuadrado

Desarrollador de aplicaciones Web

Apure Tv (Canal de televisión)

Coordinador de Sistemas

Posts Recientes

🔥 Crear un proyecto de React con Vite

🚀 ¿Qué es JSX y por qué es fundamental en React?

😱 Renderizado condicional en React

🔥 Domina por completo el Hook useState en ReactJS: Guía Definitiva

😱 Métodos más usandos en JavaScript

Proyectos Recientes en GitHub

🥇 Mi Primer Paquete npm (loading-request)

👉 CRUD Full Stack con React.js, PHP y MySQL

😱 Full Stack CRUD con PHP MySQL API Rest y ReactJS

🥇 Full Stack: CRUD con ReactJS, Laravel 10, MySQL y Bootstrap 5

🤯 Full Stack: CRUD con Node.js, Express, MySQL, API REST y ReactJS

Cotizador de Préstamos en React

🔥 CRUD completo con Laravel 10, MySQL y Bootstrap 5

🚀 Sistema CRUD de Empleados en PHP utilizando PDO y MySQL

👉 Subir múltiples imágenes desde un formulario de React hacia PHP

👨‍💻 CRUD Completo con Python - Django y MySQL

🔥 CRUD completo con PHP, MySQL y Bootstrap 5 usando Ventanas Modales para todo.

🥇 CRUD Full Stack con ReactJS - TypeScript(TS) - PHP - MySQL

👉 Lista de Tareas con Reactjs y TypeScript

🔥 CRUD (Create, Read, Update y Delete) completo Firebase y JavaScript

Todo queda lejo para una persona que no quiere. 💪

😲 Mi Primer Paquete NPM

Loading Request es un paquete npm diseñado para ofrecer un indicador de carga visual durante cualquier solicitud o proceso asíncrono en JavaScript. Su objetivo es mejorar la experiencia del usuario al proporcionar una integración sencilla y una personalización completa.

Échale un vistazo a este paquete npm ¡sin duda te encantará!

🔥 Mi Segundo Paquete NPM

Nextjs Toast Notify es un paquete npm imprescindible para agregar notificaciones emergentes (toasts) a tus aplicaciones web con Next.js. Ideal para proporcionar retroalimentación visual clara y efectiva sin interrumpir la experiencia del usuario.

Échale un vistazo a este paquete npm ¡sin duda te encantará!

Fotos