Introducción al Curso y Proyectos que construiremos
  • Viendo los Proyectos MERN, Gatsby y GraphQ, Next y Firebase
  • Los otros proyectos + de 10 Aplicaciones diferentes!
  • Qué es React
  • Lo que debes saber para tomar este curso
  • Que aprenderás en este curso
  • Cómo sacar máximo provecho al curso
  • Sobre los Repositorios de Código en Github
  • Cómo Obtener Ayuda cuando el código no funciona
JavaScript - Introducción / Recordatorio, ¿Cuanto JavaScript debo saber?
  • Visual Studio Code y Extensiones Recomendadas
  • Variables con var
  • Variables con let y const
  • Scope en JavaScript
  • Template Strings en JavaScript
  • Funciones y los distintos tipos de funciones
  • Funciones con parametros
  • Arrow Functions
  • Objetos en JavaScript - Object Literal
  • Objetos en JavaScript - Object Constructor
  • Prototypes
  • Object Destructuring
  • Object Literal Enhacement
  • Funciones en un Objeto
  • Arreglos, map y Object.keys
  • Spread Operator
  • .Filter .find y .reduce y métodos para arreglos
  • Promises
  • Promises con Ajax
  • Mostrando el resultado en nuestro HTML
  • Programación Orientada a Objetos - Clases
  • Programación Orientada a Objetos - Clases - Heredando de una Clase
  • Módulos en ES6
  • Exportando Funciones en Módulos
  • Exportando Clases en Módulos
Instalando Node.js, NPM y qué es Create-react-app
  • Instalando Node, Npm y que es create-react-app
Introducción y Básicos de React
  • La estructura de Create react app
  • Creando nuestro primer Componente
  • Básicos de JSX
  • Creando un Segundo Componente
  • Que son los Props
  • Introducción a React Hooks
  • Primeros pasos con el State de React
  • Como mostrar una colección del State
  • Eventos en React
  • Creando un segundo state y función para agregar elementos a ese State
  • Finalizando nuestra función para agregar elementos al carrito y actualizar state
  • Mostrando los elementos del carrito
  • Eliminando Elementos del carrito
PROYECTO: Administrador de Pacientes
  • El Proyecto Finalizado
  • Creando el Proyecto y copiando CSS
  • Creando el Componente de Formulario
  • Agregando los campos del formulario
  • Creando el state para las citas
  • Leyendo lo que el usuario escribe en los inputs
  • Evento para leer cuando el usuario envie el formulario
  • Validación de Formularios en React
  • Asignando un ID a las citas
  • Creando las Citas
  • Reiniciar el Formulario
  • Mostrando las Citas
  • Eliminar Citas del State
  • Mostrando un mensaje de forma condicional
  • El hook useEffect
  • Agregando LocalStorage
  • Documentando con PropTypes
  • Deployment del Proyecto
PROYECTO: Control de Presupuesto
  • Lo que vamos a construir
  • Creando la App y Primeros Ajustes
  • Preguntando al Usuario por su Presupuesto
  • Leyendo el Presupuesto del Usuario
  • Validar un Presupuesto
  • Mostrando mensajes de error
  • Almacenando el Presupuesto
  • Creando Formulario de Gastos
  • Cargando un Componente u Otro
  • Creando el State para los Gastos
  • Validando los Gastos
  • Crear un nuevo gasto
  • Colocando los Gastos en el State de Gastos
  • Mostrando los gastos en la interfaz
  • Creando el Componente que mostrará el Presupuesto y el Restante
  • Restando del Presupuesto al añadir un gasto
  • Cambiando el color del restante conforme se agota el presupuesto
  • Documentando la App
  • Deployment a Netlify
PROYECTO: Cotizador de Seguro de Automóvil
  • El Proyecto que vamos a construir
  • Creando la App y Ajustes
  • Agregando Emotion para Styled Components
  • Creando los Primeros Styled Components
  • Creando el Formulario
  • Creando los Styled Components para el Formulario
  • Finalizando los Styled Components del Formulario
  • Leyendo la información que el usuario Selecciona
  • Validando el Formulario