React JS – Entrega de Ejercicios

Proyecto de ejercicios prácticos desarrollado con React JS como parte del
Máster en Desarrollo Full Stack – Conquer Blocks.

El objetivo de este repositorio es reforzar los conceptos fundamentales de React mediante ejercicios progresivos, aplicando buenas prácticas, gestión de estado, efectos, rutas y persistencia de datos.

🌍 Demo

Proyecto desplegado en GitHub Pages:
👉 https://tonybesay.github.io/react-js-entrega-ejercicios-1/

---

🚀 Tecnologías utilizadas

• React JS
• Vite
• JavaScript (ES6+)
• React Router
• Tailwind CSS
• HTML5 / CSS3
• LocalStorage

---

📁 Estructura del proyecto

src/
├── components/        # Componentes reutilizables
├── pages/             # Ejercicios individuales
│   ├── Jsx_ejercicio_1.jsx
│   ├── Jsx_ejercicio_2.jsx
│   ├── …
│   └── Jsx_ejercicio_9.jsx
├── App.jsx            # Configuración de rutas
├── main.jsx           # Punto de entrada
└── index.css          # Estilos globales (Tailwind)

---

📚 Ejercicios incluidos

1. Cambiador de color de fondo
2. Contador de clicks
3. Lista dinámica
4. Filtro de búsqueda en tiempo real
5. Calculadora sencilla
6. Temporizador (inicio, pausa y reinicio)
7. Generador de contraseñas aleatorias
8. Contador de palabras y caracteres
9. Lista de tareas con LocalStorage
   • Marcar tareas como completadas
   • Eliminar tareas
   • Limpiar tareas completadas
   • Persistencia entre recargas

---

🧠 Conceptos de React aplicados

• Componentes funcionales
• useState para gestión de estado
• useEffect para efectos y sincronización
• useRef para acceso al DOM
• Renderizado condicional
• Listas y claves (key)
• Formularios controlados
• Persistencia con localStorage
• Enrutado con React Router

---

▶️ Instalación y ejecución

1. Clonar el repositorio:

   git clone https://github.com/tu-usuario/react-js-entrega-ejercicios-1.git
   npm install
   npm run dev

📝 Notas

• El proyecto está enfocado al aprendizaje y práctica de React.
• Cada ejercicio se ha desarrollado de forma incremental y con commits separados.
• Se ha priorizado código claro, legible y buenas prácticas frente a complejidad innecesaria.

👨‍💻 Autor

Antonio Besay Mendoza

• 📧 Email: tonybesay@gmail.com
• 💼 LinkedIn: https://www.linkedin.com/in/antonio-besay-mendoza-hern%C3%A1ndez-83304564/
• 🐙 GitHub: https://github.com/tonybesay