eugenia1984/react_softtek

🌟 React con Softtek y Siglo XXI 🌟

---

⭐ Referente de Softtek

• Guadalupe Santellan de Sofftek, es Talent Development. Su e-mail: [email protected]

---

⭐ Profesoras de Siglo XXI

Cris Soria (responsable academica de Siglo XXI)
Agostina Arias
Solange Britos
Emiliana Rodriguez
Natalia Barrionuevo (Jefa de producto)

---

⭐ Lanzamiento Reactjs

- Duración 3 meses (desde el 19/09 al 19/12)
- 58 encuentros de 9 a 13 hs.
- Etapa 1: nivelación teórica, con 5 módulos
- Etapa 2: aceleración práctica

Aprobación

• 5 cuestionarios cerados con 3 intentos + 1 proyecto final [email protected]

Plataforma

• Entrando a https://siglo21.instructure/lohin/canvas

• Completamos:

usuario:
dni:
contraseña:

• Reseteamos contraseña y entramos

---

⭐ PROGRAMA

Módulo 1. Incursionando en React JS

Unidad 1. Primeros pasos en React JS

- 1.1. Setup de herramientas
- 1.2. Introducción a React (parte 1)
- 1.3. Introducción a React (parte 2)

Unidad 2. Creando nuestro primer componente

- 2.1. Armado componente
- 2.2. Validación de formulario
- 2.3. Envío del formulario
- 2.4. Manejo de errores
- 2.5. Persistencia del token
- 2.6. Redirección al componente "listado"

Módulo 2. Armado y diseño de nuestros componentes

Unidad 3. Diseño de la estructura básica

- 3.1. Armado encabezado/navegación
- 3.2. Armado pie de página
- 3.3. Integración de encabezado/navegación
- 3.4. Integración de librería CSS

Unidad 4. Armado de la vista de Listado

- 4.1. Armado de vista "Listado"
- 4.2. Protección ruta
- 4.3. Obtención datos de la API
- 4.4. Renderización datos en componente
- 4.5. Manejo de errores (sweet alert)
- 4.6. Ingreso al detalle de cada ítem

Unidad 5. Vista de detalle

- 5.1. Verificación de usuario y token
- 5.2. Armado de la vista de detalle
- 5.3. Obtener los datos de la API
- 5.4. Mostrar los datos, render de información

Módulo 3. Buscador y sección favoritos

Unidad 6. Creando secciones

- 6.1. Armado componente buscador
- 6.2. Validación formulario buscador
- 6.3. Redirección a resultados
- 6.4. Llamado a la API con palabra clave
- 6.5. Armado lógica de "Favoritos"
- 6.6. Armado componente "Favoritos" 
- 6.7. Finalizando la sección "Favoritos"

Unidad 7. Introducción a Redux

- 7.1 Entendiendo la problemática en el desarrollo de aplicaciones
- 7.2 Introducción y conceptos clave para manipular Redux

Módulo 4. Diseño responsive & tests finales

Unidad 8. Modo responsive

- 8.1. ¿Qué es Mobile First?
- 8.2. Dev tools para Mobile First
- 8.3. Login con Mobile First

Unidad 9. Trabajando con formularios

- 9.1. Revisión formulario login
- 9.2. ¿Qué es Formik?
- 9.3. Login con Formik
- 9.4. Registro con Formik

Unidad 10. Trabajando con las rutas

- 10.1. React router Dom 6, rutas y roles
- 10.2. Creación de rutas con react router dom 6
- 10.3. Implementación con react router dom 6, rutas y roles
- 10.4. Transición entre rutas
- 10.5. Lazy import y suspense

Unidad 11. Adaptado a Mobile First

- 11.1. Header
- 11.2. CSS Global y estilos del login
- 11.3. Lista de tareas Mobile First
- 11.4. Listados en escritorio y utilidades
- 11.5. Refactorizaciones

Unidad 12. Trabajando con Formik

- 12.1. Creación con Formik
- 12.2. Validación con Yup
- 12.3. OnBlur en Formik y UX

Módulo 5. Modelando nuestra API final

Unidad 13. Integrando los registros

- 13.1. Integración del registro
- 13.2. Obtener en el registro datos de la API
- 13.3. Registro de usuarios
- 13.4. Variables de entorno
- 13.5. Inicio de sesión
- 13.6. Creación de tareas

Unidad 14. Creando estilos en la vista

- 14.1. Toast y Sweet Alert
- 14.2. Skeleton en listados
- 14.3. Filtrar listados
- 14.4. Búsquedas con debounce
- 14.5. Mostrar fecha y "Ver más"

Unidad 15. Estructurando con Redux

- 15.1. Introducción a Redux
- 15.2. Reducers y Store
- 15.3. Actions y Reducers
- 15.4. Hooks de Redux
- 15.5. Eliminar con Redux
- 15.6. Actualizar en Redux
- 15.7. Consumiendo el estado desde varios componentes

Unidad 16. Testeamos nuestro proyecto

- 16.1. Testing de renderizado
- 16.2. Mockear peticiones a la API

Módulo 6. Talleres

- Unidad 17. Enunciado taller de metodologías ágiles
- Unidad 18. Enunciado taller de Git
- Unidad 19. Enunciado taller de habilidades blandas

Módulo 7. Proyecto

- Unidad 20. Ceremonia scrum/enunciado del proyecto
- Unidad 21. Bonus track. Consumir el estado desde varios componentes
- Unidad 22. Bonus track. Integrar con SDK: por ejemplo, Mercado Pago
- Unidad 23. Bonus track. Mockear peticiones a API
- Unidad 24. Bonus track. Entornos y deploy (creación del build, deploy en GitHub)

---

⭐ FECHAS DE LOS EXAMENES

• Cuestionario 1: 30 de Sep -> 100 %

• Cuestionario 2: 6 de Oct -> 100 %

• Cuestionario 3: 12 de Oct -> 100 %

• Cuestionario 4: 19 de Oct -> 100 %

• Cuestionario 5: 1 de Nov -> 100%

• Examen sin nombre: 20Dec (trabajo final grupal)

---

• Repositorio en SandBox con la app de peliculas

---

Ejercicios:

Encuentra los errores de la app y explica por qué pasa y cómo solucionarlos: https://codesandbox.io/s/ily14d

Lista de supermercado (añadir y remover items de la lista): https://codesandbox.io/s/add-remove-exercise-supermarket-list-v2zs2x

El editar y eliminar todos no funciona. Vuelve a escribir handleAddTodo, handleChangeTodo y handleDeleteTodo: https://codesandbox.io/s/8wkui6

Actualización de la aplicación de películas con el buscador + la sección de favoritos: https://codesandbox.io/s/movie-app-from-videos-2rys7b

---

• Seguime en: LinkedIn - maria-eugenia-costa

---