React
Material
Material
- Apunte introductorio a ReactJS
- Documentación oficial de ReactJS para estudiar los conceptos principales.
Instalación del entorno
Instalación del entorno
Seguí las instrucciones que están en este sitio.
Crear un proyecto React
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
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
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
Ejemplos en Internet
Ejemplos en Internet