Estructura del curso
- Me presento
- Antes de comenzar
- Tips
- Plataforma Udemy
- Preguntas
- Condiciones de calificación
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)
- React-Dev-Tools 2
- 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 Yourself (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)
