Contenido del curso
Antes de comenzar
Tips
Node.js, Npm y Yarn
Gestor de Paquetes NPM y Yarn
VSCode
Puntos fuertes de React JS
¡Hola Mundo! Babel, ES6, CodePen
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
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
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
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
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
Material Design
Material UI
Instalación y uso de MaterialUI
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
NOTA SOBRE ACTUALIZACIÓN
MediaQueries, Flexbox, Bootstrap
Grid System de React 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