Estructura del curso
  • Me presento
  • Antes de comenzar
  • Tips
  • Plataforma Udemy
  • Preguntas
Nivelación de conceptos
  • A quién esta dirigida esta sección
  • Presentación de la sección
  • Estructura aplicación web HTML CSS Javascript
  • Clases CSS
  • Versiones Javascript. ES5 vs ES6
  • React y alternativas
  • Check Point
Nos acercamos a React
  • Presentación de la sección
  • Hola Mundo React! (en CodeSandbox)
  • Grupo de estudiantes
  • ¿Probamos el sandbox?
Instalamos el entorno
  • Presentación de la sección
  • Contenido de la sección
  • Instalamos Node.js (h)
  • Instalamos VSCode (h)
  • Instalamos un plugin para VSCode (h)
  • Utilización de la terminal de VSCode (h)
  • Checkpoint
Creación de una aplicación: Pasos iniciales
  • Presentación de la sección
  • Creamos la estructura de la app: "npx"
  • Analizamos el package.json (t)
  • ¿Qué pasa detrás del comando "npm start"? (t)
  • Probamos el "hot reload" (t)
  • Entendemos el Index.html
  • Construyendo el Index.js
  • Vamos a utilizar la extensión JSX ¿Por qué? (t)
  • ¿Qué es JSX? (t)
  • Entendiendo los pasos para crear componentes
  • Creamos App.js
  • ES6: Arrow Functions (t)
  • Conectamos App.js dentro de Index.js
  • Encontrando errores: debugging básico
  • Checkpoint
  • Feedback
Aplicación "Calculadora" (CalcApp)
  • Presentación de la sección
  • Esquema de la aplicación
  • Crear archivo CSS e importarlo
  • Utilización de className
  • Patrón SOLID (aún no lo aplicamos)
  • Feedback
Components en CalcApp
  • Presentación de la sección
  • Creamos componente Result
  • Orden de renderización y Debugger
  • Pasar información entre componentes: Propiedades
  • React-Dev-Tools (h)
  • Pasamos la prop value desde App.Js
  • Utilización de varias propiedades
  • Utilizamos la prop dentro del componente
  • ES: Destructuring (t)
  • Destructuring aplicado al componente
  • Instalación de PropTypes
  • Resolver problemas en la instalación de paquetes (t)
  • Validación básica con PropTypes
  • Establecemos propiedades por defecto
  • Esquema del componente Button
  • Estructura del componente Button
  • Pasamos propiedades al componente
  • onClick handler en Button
  • PropTypes en Button
  • Simplificación de sintaxis
  • Planificación componente MathOperations (p)
  • Creación de componente MathOperations
  • Evento onClick para MathOperations
  • Entendiendo el flujo del evento onClick
  • Planificación componente Functions (p)
  • Creación de componente Funcions
  • Utilización de propiedad Type y Css asociado
  • Refactor de Button en carpeta
  • Planificación componente Numbers (p)
  • Creación del componente Numbers
  • DRY Dont Repeat Yourselft (t)
  • DRY aplicado: renderButtons
  • ES6 Función Map (t)
  • Utilizando la función map en renderButtons
  • Propiedad Key (t)
  • Utilizamos la propiedad Key
  • Feedback
Hook useState, Template literals, Lodash y ternario
  • Presentación de la sección
  • Cómo funciona la calculadora (p)
  • Cómo funciona la calculadora - en ejecución (p)
  • Hooks: useState (t)
  • Usamos el useState I
  • Usamos el useState II
  • useState con Array Destructuring
  • Proceso de renderizado y burbujeo (t)
  • Teoría actualización react render
  • Agregamos funcionalidad a la app