🚀 Proyecto React Info - Valeria Paz Arana

React | React Router | JavaScript | CSS3 | HTML5

📚 Proyecto educativo - Valeria Paz Arana (SENA 2025)

Aplicación React con sistema de navegación y páginas educativas sobre conceptos fundamentales de React.

---

📋 Descripción

Este proyecto es una aplicación web desarrollada con React que presenta un sistema de navegación completo con múltiples páginas educativas. Cada página está diseñada para enseñar conceptos específicos de React, algunas con ejemplos prácticos y otras con ilustraciones o demostraciones.

---

✨ Características Principales

🧭 Navegación fluida con React Router DOM
🔧 Componentes reutilizables: Header, Footer, Navbar, Layout, Carrusel
📖 Páginas educativas:

• 🏠 Inicio: Página principal de bienvenida
• 📦 Props: Demostración práctica de propiedades en React (interactiva)
• 🔄 Estados: Manejo dinámico del estado en componentes (interactiva)
• 🪝 Hooks: Ejemplo de reloj con hooks
• ♻️ Ciclo de Vida: Ejemplos gráficos del ciclo de vida de componentes
• 🌐 Virtual DOM: Conceptos y ejemplos visuales
• 🛠️ Redux: Ilustraciones y conceptos sobre Redux

---

🌐 Tecnologías Utilizadas

Tecnología	Versión	Propósito
React	19.1.0	Framework principal
React Router DOM	7.7.0	Navegación entre páginas
JavaScript	ES6+	Lógica de la aplicación
CSS3	-	Estilos y diseño
HTML5	-	Estructura base
Swiper	Última	Implementación del carrusel

---

📁 Estructura del Proyecto

src/
├── 🧩 assets/
├── 🧩 Components/
│ ├── Carrusel.jsx
│ ├── Footer.jsx
│ ├── Header.jsx
│ ├── Layout.jsx
│ └── Navbar.jsx
├── 📚 Pages/
│ ├── 🎨 Css/
│ │  ├── Inicio.css
│ │  ├── Props.css
│ │  ├── Estados.css
│ │  └── CicloDeVida.css
│ ├── Inicio.jsx
│ ├── Props.jsx
│ ├── Estados.jsx
│ ├── Hooks.jsx
│ ├── CicloDeVida.jsx
│ ├── VirtualDOM.jsx
│ └── Redux.jsx
├── App.jsx
├── App.css
└── main.jsx

---

🚀 Instalación y Uso

📋 Prerrequisitos

• 📦 Node.js (v14 o superior)
• 📦 npm o yarn
• 💻 Git

🔧 Pasos de Instalación

1. Clonar el repositorio

  git clone <URL_DEL_REPOSITORIO>

2. Instalar dependencias

npm install
# o
yarn install

3. Iniciar el servidor de desarrollo

npm run dev
# o
yarn dev

4. Abre tu navegador

Abre tu navegador en http://localhost:5173/project_three/ para ver la aplicación funcionando.

📜 Scripts Disponibles

Comando	Descripción
npm run dev	🚀 Inicia el servidor de desarrollo
npm run build	📦 Construye la aplicación para producción
npm run preview	👀 Previsualiza la build de producción
npm run lint	🔍 Ejecuta el linter

---

🎯 Objetivos de Aprendizaje

✅ Fundamentos de React y JSX
✅ Manejo de componentes y props
✅ Gestión del estado con useState
✅ Implementación de hooks
✅ Navegación con React Router
✅ Ciclo de vida de componentes
✅ Conceptos del Virtual DOM
✅ Introducción a Redux
✅ Mejores prácticas en React

---

👨‍💻 Autor

Proyecto educativo - Valeria Paz Arana

---

📄 Licencia

Este proyecto es de uso educativo y está disponible bajo la licencia MIT.

---

✨ Espero que te haya gustado este proyecto y te sea útil para aprender React ✨