React
Material
Documentación oficial de ReactJS para estudiar los conceptos principales.
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.
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.