/curso-react-flux

Ejercicios y diapositivas del curso presencial que se imparte en redradix sobre react y flux

Primary LanguageJavaScript

Curso React + Flux RedRadix

Este repositorio contiene las fuentes, ejercicios y soluciones del curso React + Flux (Nov 2015)

Contenido

1. ¿Qué es React?

  • Single Page Applications
  • De página Web a aplicación Web
  • Problemas comunes y soluciones previas
  • Así que... ¿qué es React?
  • Virtual DOM
  • Montar un proyecto React con Webpack y Babel.js

2. Construyendo componentes React

  • Conceptos clave
  • ¿Qué es JSX?
  • Nuestro primer componente - Hola Mundo
  • Visualizar nuestra aplicación React en el browser
  • Props y validación de props con PropTypes
  • Visualizando listas
  • Estado interno de un componente
  • Eventos
  • Ejercicio - Contador

3. Composición frente a herencia

  • Componentes padre y componentes hijo
  • Comunicación hijo a padre
  • Ejercicio - Nuestra primera app completa: Cronómetro
  • Formularios y controles de formulario
  • Ejercicio - Base de datos de personajes
  • Ciclo de vida de un componente
  • Optimización de rendimiento
  • Mixins y Componentes de Orden Superior
  • Componentes sin estado
  • Ejercicio - Construyendo una aplicación real: Ecommerce

4. Flux

  • Qué es Flux
  • Acciones y creación de acciones
  • Dispatcher
  • Stores y la separación Command Query (Comando / Consulta)
  • Ejercicio - Programando los Stores de nuestro Ecommerce
  • Uniendo todos los elementos
  • Ejercicio - Terminando nuestro Ecommerce con Flux

5. React en el mundo real

  • Rutas en el cliente con React Router
  • Configuración de rutas y búsqueda de coincidencias
  • Transiciones y ciclo de vida por ruta
  • Integración React Router con Flux
  • Ejercicio - Añadir rutas a nuestro Ecommerce
  • Comunicación con el servidor
  • Integración con APIs REST
  • Ejercicio - Cargar nuestro catálogo desde el servidor
  • React en el servidor
  • Resumen de diferentes implementaciones de Flux
  • Una variación de Flux: Redux

6. Testing

  • Por qué es importante el testing
  • Introducción rápida a Mocha
  • Configurar Mocha para testear componentes de React
  • Shallow render y JSDOM
  • Mocking con Sinon.js
  • Inyección de dependencias con Rewire
  • React Test Utils
  • Testing de componentes de React
  • Testing de Stores de Flux