Seguimiento de clases

Clases

17

Y cerramos la cursada corrigiendo el TP de React el día jueves, donde además confirmaremos el acta en SIU Guaraní.

16

15

14

  • Continuaremos estudiando React con el ejemplo Pedidos de helados, que permite introducir el hook useEffect, relacionado con el ciclo de vida de un componente React.

  • Y veremos el segundo ejemplo con componentes puramente funcionales con React Hooks: Mails, maneja comunicación entre componente padre (que hace llamadas asincrónicas mediante useEffect y maneja el estado con el hook useState) y sus componentes hijos que reciben props (objetos o funciones). Conditional rendering.

  • Videos de clase: Parte 1: Unit Testing + Ciclo de vida de un componente React. Parte 2: useEffect.

  • Videos de youtube: Diseño de componentes en React.

13

  • Comenzaremos a conocer React (en el link encontrarás las herramientas que tenés que instalar),

    • primero conceptualmente con una intro teórica, y luego con ejemplos:

    • Hola-mundo: el primer ejemplo en React, contiene dos componentes (uno funcional y otro con clases), veremos el testeo unitario de componentes con React Testing Library, la diferencia entre state y props, el manejo de eventos simple. El plugin Reactime nos va a servir para ayudarnos a entender los cambios.

    • Veremos el ejemplo del Conversor como componente funcional, utilizando la técnica React Hooks > useState.

    • Videos de clase: Intro a React. Parte 1. Parte 2.

    • Videos de youtube: Introducción a React. Tests de frontend en React.

12

  • BONUS: hablaremos muy brevemente de los frameworks de CSS del mercado, en particular Bulma. Ejemplo: Login-Bulma.

  • Cómo desarrollar tests e2e con Cypress. Ejemplo introductorio de Cypress.

  • Si hay tiempo, comenzaremos a conocer React (en el link encontrarás las herramientas que tenés que instalar),

    • primero conceptualmente con una intro teórica, y luego con ejemplos:

    • Hola-mundo: el primer ejemplo en React, contiene dos componentes (uno funcional y otro con clases), veremos el testeo unitario de componentes con React Testing Library, la diferencia entre state y props, el manejo de eventos simple. El plugin Reactime nos va a servir para ayudarnos a entender los cambios.

    • Conversor: el tradicional conversor de millas a kilómetros: explica el ciclo de vida, mutación de estado y posterior render.

  • Videos de clase: Cypress. Bulma + Chakra.

  • Videos de youtube: Cypress

11

10

9

Primero vamos a cerrar el desarrollo del backend con Springboot mostrando cómo escribir tests de integración.

Luego veremos asincronismo, concurrencia y paralelismo en la VM de JS:

8

Vamos a generar el componente de backend en base a lo que construimos en Algo2, para lo cual

7

  • Tareas Routing: muestra un ejemplo de aplicación Master/Detail, donde se genera un Alta-Modificación de Tareas pendientes, y se introduce el framework de routing de Angular que permite definir la navegación de componentes. Diapositivas de Routing.

  • Búsqueda de libros: a partir de aquí vemos los services de Angular como objetos encargados de conocer un origen de datos y recolectar información. En principio el servicio es solamente local. El ejemplo cuenta también la definición de pipes custom para filtrar una búsqueda en forma local + el testeo unitario de un componente utilizando un stub del servicio de Angular. Para la vista se utiliza el framework Material Design for Bootstrap, que de aquí en adelante será nuestro estándar. Diapositivas de Pipes.

  • Videos de clase: Búsqueda de libros / Tareas routing. Springboot - Parte 1.

  • Videos de youtube: Angular - Routing. Angular - Pipes.

6

5

4

El jueves comenzaremos a conocer Typescript, que nos servirá para trabajar con el framework Angular. Por lo pronto, seguí las instrucciones que están en la página Typescript para instalar las tecnologías necesarias y descargarte los ejemplos. En clase veremos:

Diapositivas: Diseño en Typescript

Videos de clase: Intro a Typescript - Parte 1. Parte 2.

Videos de Youtube: Intro a un proyecto Typescript. Diseño en Typescript.

3

2

1

El martes será la presentación oficial de la materia:


Anotate en la lista


Los temas para ver en la clase del jueves serán:


BONUS: Ejemplo de Maquetado Web, para leer en casa:

  • Paso 0: introducción. Presentación del contenido de la página.

  • Paso 1: Elección de la tipografía.

  • Paso 2: Elección de la paleta de colores.

  • Paso 3: Manejo espacial de la página.

  • Paso 4: Refactorización del contenido y de los estilos.

Cursadas históricas