Title: 10 - Implementando React Route
Course: 2025 - LISI - Sistemas de Informacion Geografica 4-1 > Section: Introduccion a React / Github

🧠 Actividad: Creación de una Homepage usando React Router

🎯 Objetivo de la actividad:

Que el alumno comprenda y utilice React Router DOM para crear una navegación funcional entre distintas secciones de una aplicación web, culminando con una página de inicio (homepage) correctamente configurada.

📚 Fase 1: Investigación previa (teórica)

Investigar y tomar notas sobre los siguientes conceptos:

1. ¿Qué es React Router y para qué se utiliza?

2. ¿Cuál es la diferencia entre <BrowserRouter>, <Routes>, <Route> y <Link>?

3. ¿Qué es un componente de ruta?

4. ¿Cómo se configuran rutas dinámicas?

5. ¿Qué es useNavigate y cómo se usa para redirigir?

📘 Fuentes recomendadas:

• Documentación oficial de React Router

• React Router en W3Schools

• Artículo en freeCodeCamp sobre React Router

🧪 Fase 2: Desarrollo práctico (técnico)

✅ Requisitos técnicos:

1. Crear un proyecto con create-react-app o Vite.

2. Instalar react-router-dom:

- npm install react-router-dom

📂 Estructura mínima del proyecto:

• /src

• App.jsx

• components/

• Home.jsx

• About.jsx

• Contact.jsx

• main.jsx o index.jsx

💻 Tareas del alumno:

1. Configurar el enrutamiento:

• Usar <BrowserRouter> para envolver la aplicación.

• Crear rutas básicas para /, /about y /contact.

• Cada ruta debe mostrar un componente diferente.

2. Crear una barra de navegación con enlaces (<Link>):

• Agregar navegación en la parte superior o lateral.

• Cada enlace debe dirigir a una página distinta.

3. Diseñar la homepage (/):

• Debe ser visualmente clara, contener un título y un texto de bienvenida.

• Puede incluir una imagen o íconos (opcional).

• Incluir un botón que redirija a otra sección usando useNavigate.

🧩 Fase 3: Entrega y reflexión

• Subir en la tarea el URL de su repositorio donde se aplicaron los cambios

• Incluir un archivo README.md explicando:

• Qué aprendieron.

• Qué dificultades encontraron.

• Cómo resolvieron el enrutamiento.

✅ Resultado esperado

Una aplicación React con navegación funcional entre páginas, teniendo como página principal (homepage) el componente raíz accesible desde la ruta /.