React es una de las bibliotecas de JavaScript más populares para construir interfaces de usuario. En este blog, aprenderás a instalar y configurar un proyecto en React desde cero, comprender la estructura de archivos y ver ejemplos iniciales.
1. Instalación de React con Vite
Vite es una herramienta de construcción moderna que proporciona un entorno de desarrollo rápido y optimizado para React.
Requisitos Previos:
- Tener Node.js y npm instalados, puedes descargarlo directamente de la página oficial dando clic aquí
Verifica su instalación escribiendo los siguientes dos comandos en CMD:
- node -v
- npm -v
Pasos para Crear un Proyecto en React:
- Abre la terminal y ejecuta:
cambia mi-proyecto-react por el nombre de tu proyecto
- Accede al directorio del proyecto:
- Instala las dependencias:
- Inicia el servidor de desarrollo:
- Abre la terminal y ejecuta:
cambia mi-proyecto-react por el nombre de tu proyecto
- Accede al directorio del proyecto:
- Instala las dependencias:
- Inicia el servidor de desarrollo:
- Abre la dirección http://localhost:5173 en tu navegador para ver la aplicación en funcionamiento.
2. Estructura de Archivos de un Proyecto React
Archivos Clave:
- index.html (ubicado en public/)
Estructura básica de la página HTML, contiene el <div id="root"> donde React inyecta la aplicación.
- main.jsx
Renderiza el componente principal (<App />) en el div#root del index.html.
- App.jsx
Aquí defines la interfaz de usuario principal.
- index.css Estilos globales que afectan a toda la aplicación:
🎨 3. Ejemplo Práctico: Agregando Interactividad
Código en App.jsx:
Estilos en App.css:
Resultado Esperado:
- Un mensaje de bienvenida.
- Un contador interactivo que aumenta al hacer clic en el botón.
React es muy flexible, y este es solo el comienzo. A medida que avances, aprenderás a manejar rutas, estados globales, APIs y mucho más.
No hay comentarios.:
Publicar un comentario