Estructura del curso
  • Antes de comenzar
  • Tips
Preparandonos
  • Node.js, Npm y Yarn
  • Gestor de Paquetes NPM y Yarn
  • VSCode
  • Puntos fuertes de React JS
  • ¡Hola Mundo! Babel, ES6, CodePen
Comenzamos!
  • Creación de app react
  • Planificación con Wireframes
  • Creación de functional component
  • VSCode Plugins y extensiones
  • ES6 Arrow Functions
  • Ejercicio: Creación de componentes e importación
  • Componentes WeatherExtraInfo y WeatherTemperature
  • Uso de parámetros / Herramientas de debugging Chrome
  • Parámetro con Object Destructuring
  • ES6: Object Destructuring
  • Parámetros y uso de template string
  • ES6: Template Strings
  • Instalación de libreria con npm install o yarn add
  • Recomendaciones sobre uso de packages externos y ubicación del index.html
  • Agregar Icono y uso de función en functional component
Haciendo el código más sólido
  • Utilización de constantes
  • PropTypes
  • Validación con PropTypes
  • Repaso sobre validaciones de PropTypes
  • Truco para refactorizar sin problemas: Uso de carpetas e Index.js
Dándole estilo
  • Cómo incluir CSS en React
  • Opciones para estilo: CSS, Preprocesadores CSS y CSSModules
  • CSS en React "Under the hood"
  • Aplicación de estilos CSS
  • Estilos componente WeatherTemperature
  • Estilos componente WeatherExtraInfo
  • External Font y otros detalles
  • Herramientas de debugging para estilo y CSSMatic
Avanzamos
  • Doble Destructuring
  • Utilización de PropType.Shape
  • Cómo transformar un functional en un class Component
  • Evento OnClick y manejo de State
  • SetState (updater)
  • React Developer Tools para Chrome
Conectando con Api
  • Api Rest OpenWeatherMap
  • Fetch y solapa de debugging Network de Chrome
  • Promises
  • Utilización de valores retorno de Fetch
  • Transformación de datos
  • Arquitectura de datos: independencia de API
  • Object Literal Property Value Shorthand
  • Convert-Units
  • Services Layer
  • React Class Component LifeCycle
  • ComponentDidMount y Network Slow 3G Chrome Tool
  • Indicador de Carga, utilización ternario
Más estilo
  • Material Design
  • Material UI
  • Instalación y uso de MaterialUI
Seguimos codificando
  • Utilización y configuración de ESLinter
  • Uso de propiedades en Class Component combinado con state
  • LocationList
  • Mapeo de estados a íconos
  • Agregamos parámetros a LocationList
  • Refactorización de LocationList
  • ES6: Función de collections Map
  • Uso de Key en listas de componentes
  • Estilos de comunicación de componentes: Eventos, Routing y Estado global
  • "Burbujeo" de eventos
  • Repaso de los eventos creatos y salida por consola
Diseño Responsivo
  • NOTA SOBRE ACTUALIZACIÓN
  • MediaQueries, Flexbox, Bootstrap
  • React Flexbox: Autosize, Alignment, Distribution
  • Herramienta en Chrome para testear diseño responsivo
  • Uso de Grid, Row, Col y vh
  • MaterialUI AppBar
  • CSS Mejoras
  • Diseño Responsivo avanzado: Media Query
Más herramientas y ES6!
  • Plan de componente ForecastExtended
  • Creación de ForecastExtended
  • Creación de parámetro para ForecastExtended
  • Utilización de state en App.js
  • Actualización de state
  • Ciclo de actualización de state / render
  • Manejo de estado inicial
  • Manejo de estado inicial 2
  • Truthy values y Falsy values
  • Estilo ForecastExtended: Utilización de ClassName
  • Presentación del componente ForecastItem
  • Creación componente ForecastItem
  • Utilización de array de componentes
  • Incorporación de WeatherData al ForecastItem