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