React

• Apunte introductorio a ReactJS
• Documentación oficial de ReactJS para estudiar los conceptos principales.

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

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.

• 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)
  • Conversor - Cypress
• 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

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

• Tenés un ejemplo básico del contador utilizando React Redux, con React Bootstrap
  • Hay una versión mejorada de las funciones reductoras, en este branch
• Mundial 2018 - Rusia: es una serie de ejemplos que permite ir conociendo diferentes conceptos de la tecnología
  • comenzamos con una búsqueda de los países que juegan la copa, en base al grupo que le tocó en la primera fase o en la descripción. Repasamos componentes customs, estado, props, servicios, etc.
  • luego agregamos la posibilidad de ingresar los resultados de los partidos del mundial, definiendo rutas con React
  • en la tercera versión podrás ver la tabla de posiciones que se irá actualizando dinámicamente a medida que cargás los resultados, utilizando React Redux para tener en un store los resultados actualizados del mundial

• https://react.rocks/
• Ejemplos de la página de React
• 11 ejemplos - DevTo