React desde cero (2021)

Entenderás el propósito de las librerías Javascript y particularmente de React.

• 1.1 - Bienvenida al curso
  1:27
• 1.2 - ¿Qué es react?
  8:04
• 1.3 - Construye tu propia librería js
  19:40
• 1.4 - Optimizando nuestra librería js
  3:33
• 1.5 - Resolución de la librería js
  4:28
• 1.6 - Introduciendo jsx
  13:17
• 1.7 - Restricciones jsx para etiquetas
  5:24
• 1.8 - Restricciones jsx para atributos
  7:39

Utilizaremos Create React App para iniciar nuestras aplicaciones y entenderemos la estructura inicial de un proyecto.

• 2.1 - Requerimientos para instalar react
  7:34
• 2.2 - Instalando mi primera app react
  9:28
• 2.3 - Explorando los archivos de la instalación
  9:57
• 2.4 - Entendiendo la carpeta public
  9:49
• 2.5 - El componente index
  10:59
• 2.6 - El componente App
  7:29
• 2.7 - Aclarando la importación de react
  2:38

Los componentes son piezas de código reutilizables a lo largo de nuestra aplicación.

• 3.1 - Qué son los componentes
  6:33
• 3.2 - Componentes presentacionales
  13:22
• 3.3 - Destructuración de props
  5:02
• 3.4 - Componentes de clase
  7:47
• 3.5 - El estado de los componentes
  10:29
• 3.6 - Actualizando el estado
  8:37
• 3.7 - React developers tools
  5:03
• 3.8 - Ciclo de vida de los componentes
  17:49

Hoy en día los componentes funcionales dominan el ecosistema React. Es muy importante que los domines.

• 4.1 - Migrando a componentes funcionales
  12:44
• 4.2 - Hooks, useState y el estado inicial
  8:32
• 4.3 - Actualizando el estado con hooks
  8:57
• 4.4 - El hook useEffect
  17:17
• 4.5 - El hook useRef
  13:29

La base fundamental de una Single Page Application es un Router. React router es la librería por excelencia para manejar rutas fácilmente en React.

• 5.1 - Iniciando y limpiando un proyecto nuevo
  7:15
• 5.2 - Integrando EDgrid al proyecto
  9:32
• 5.3 - Componente presentacional Header
  8:10
• 5.4 - Estructura de carpetas para componentes
  9:50
• 5.5 - Creando componentes de páginas
  12:01
• 5.6 - Usando react router
  10:25
• 5.7 - Componentes Switch y Route
  7:41
• 5.8 - Componente Link
  4:20
• 5.9 - Componente NavLink y hooks de react router
  4:11

Una SPA tiene como una principal característica el poder conectarse a una API y así poder manipular la información que se brinda al usuario.

• 6.1 - Usando mocks y API con JSON server
  11:16
• 6.2 - Preparando mi componente reutilizable
  9:07
• 6.3 - Peticiones HTTP con Fetch API
  15:55
• 6.4 - Renderizando contenido desde una API
  8:26
• 6.5 - Utilizando variables de entorno
  19:11
• 6.6 - Escuchando cambios en la petición y manejando errores
  5:09
• 6.7 - Peticiones HTTP con AXIOS
  5:35

Reutilizar código, controlar errores y validar los tipos de propiedades, son temas fundamentales que debe tener tu aplicación antes de subirla a producción.

• 7.1 - Duplicando código innecesariamente
  10:04
• 7.2 - Creando nuestro propio hook
  5:30
• 7.3 - Utilizando nuestro propio hook
  6:03
• 7.4 - Manejo de errores con hook
  5:43
• 7.5 - Prop Types
  9:23
• 7.6 - Default props
  8:49
• 7.7 - Build y deploy
  13:02