alejandropereira / curso-react

Material del curso online de React.js

Curso React Redux

Materiales del curso online de React.js y Redux en RedAtomic.

Temario

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
• Ejercicio: Montar un proyecto React con Webpack y Babel.js

2. Construyendo componentes React

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

3. UIs complejas mediante composición

• Componentes padre y componentes hijo
• Comunicación hijo a padre
• Ejercicio 1 - Cronómetro
• Formularios y controles de formulario
• Ejercicio 2 - Buscador de personajes
• Ciclo de vida de un componente
• Optimización de rendimiento
• Ejercicio 3 - Construyendo una aplicación real: Ecommerce

4. Redux

• Qué es Redux
• Los 3 principios de Redux
• Estado global
• Acciones
• Reducers
• Store de Redux
• Combinación de reducers
• Conectar Redux y React
• Organización del código
• Ejercicio 1 - Ecommerce: instalar Redux, módulo Route
• Ejercicio 2 - Ecommerce: módulo Catalog
• Ejercicio 3 - Ecommerce: módulo Cart
• Mapear dispatch a props
• Ejercicio 4 - Ecommerce: componente Cart
• Redux middleware
• Ejercicio 5 - Ecommerce: módulo Order
• Formularios con Redux
• Ejercicio 6 - Ecommerce: terminar la aplicación

5. React y Redux en el mundo real

• Redux DevTools
• Introducción a React Router
• Configuración de rutas y búsqueda de coincidencias
• Rutas anidadas
• Ejercicio 1 - Añadir rutas a nuestro Ecommerce
• Navegar desde componentes con Link
• Navegar desde código y confirmar navegación
• Integrar React Router con Redux - navegar mediante action creators
• Ejercicio 2 - Terminar rutas en nuestro Ecommerce
• Acceso a APIs REST con Redux
• GET y POST con fetch
• Acciones asíncronas con Redux
• Ejercicio 3 - Ecommerce: cargar catálogo desde el servidor
• Normalización de datos con normalizr
• Ejercicio 4 - Normalizar los datos del catálogo

6. Testing

• Motivos
• Mocha
• Aserciones con assert y should
• Mocking son sinon: spies, stubs
• Infraestructura de testing: ES6, JSX
• Ejercicio 1 - Infraestructura de tests
• Testing de componentes: shallow rendering
• Ejercicio 2 - Testear componente Cart
• Testing de reducers
• Ejercicio 3 - Testear reducer Cart
• Testing de action creators
• Ejercicio 4 - Testear saveOrder
• Testing de action creators con acceso a API: fetch-mock
• Cobertura de código