React

Material

Instalación del entorno

Seguí las instrucciones que están en este sitio.

Crear un proyecto React

Para crear un proyecto React desde la consola Git Bash o bien desde una terminal Linux escribimos:

Por defecto la aplicación cliente levantará en el puerto 3000. Como suele quedarse levantada aun cuando canceles la línea de comando y el navegador, te dejamos este link que te dice cómo bajar el proceso del sistema operativo para correr otro ejemplo.

Ejemplos nuestros

  • Hola-mundo: el primer ejemplo en React, contiene dos componentes

    • un contador al que podemos sumarle o restarle uno

    • un label que permite saludar a una persona (muestra cómo pasarle parámetros a un componente)

    • explica los conceptos componente funcional vs. componente como clase, props, estado, manejo de eventos, y da una introducción al testeo unitario de componentes con React Testing Library.

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

  • Pedidos de helados. Ciclo de vida de un componente React.

  • Tareas de un equipo de desarrollo contra un backend REST. Llamada a servicios asincrónicos, actualización del estado de componentes padres a hijos. Listas y keys.

  • React Context | Hooks

    • Conversor, utilizando la técnica useState.

    • 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.

    • Contador: tiene la explicación de Provider, Context y Consumer.

    • Mundial 2018 Rusia.

  • Input disabled: composición de componentes (props children, slot).

  • Testeo end-to-end (e2e)

  • Y por último tenés un tutorial paso a paso que desarrolla una aplicación en React, NodeJS y Firebase para mostrar charlas de una conferencia

Redux - versión histórica

Si te interesa conocer ejemplos utilizando estado global con Redux, te dejamos estos ejemplos que son del 2018 y que reemplazamos por otras variantes que consideramos mejores

Ejemplos en Internet