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.

  • Componente como función (variante recomendada utilizando hooks)

    • Conversor, utilizando la técnica useState.

    • Heladería, agregamos al useState el useEffect para actualizar la página a intervalos.

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

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

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

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

    • Mundial 2022 Qatar.

  • Componente como clase (variante alternativa)

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

  • 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

Videos en Youtube

Si te interesa seguir la secuencia didáctica hay tutoriales en Youtube donde podés seguir esta lista de reproducción.

Ejemplos en Internet