Curso de React desde cero - LearnThis Academy

- Familiarizarse con los fundamentos de React.
- Aprender a construir aplicaciones web utilizando componentes de React.
- Comprender el flujo de datos unidireccional de React.
- Desarrollar habilidades en el uso de JSX para escribir interfaces de usuario en React.
- Dominar el enrutamiento en aplicaciones de React.
- Aprender a utilizar el estado y las propiedades en React para la gestión de datos.
- Explorar las diversas bibliotecas y herramientas asociadas a React.

00
Introducción
0.1
Requisitos previos
0.2
Chrome y React Developer Tools
0.3
Node JS
0.4
VSCode y extensiones

01
Qué es React
1.1
Por qué React
1.2
Los primeros componentes
1.3
El origen de React y JSX
1.4
Imperativo vs Declarativo
1.5
Cascade updates
1.6
El DOM de Javascript
1.7
El Virtual DOM
1.8
¿Qué es React?

02
Creando el primer proyecto
2.1
El problema de Javascript
2.2
La alternativa de React
2.3
Transpilación y Babel
2.4
Modularización y ES Modules
2.5
Empaquetado, bundles y Webpack
2.6
Por qué no usamos create-react-app
2.7
Creando una app con Vite
2.8
Entendiendo cómo funciona Vite
2.9
Cómo funciona el dev server
2.10
Configurando ESLint
2.11
Configurando Prettier
2.12
Conflictos de Prettier y Eslint
2.13
Subiendo el proyecto a git

03
La sintaxis de JSX
3.1
Qué es una etiqueta JSX
3.2
La propiedad children
3.3
React fragment
3.4
Las props de JSX
3.5
La propiedad style
3.6
className y htmlFor
3.7
defaultValue y defaultChecked
3.8
dangerouslySetInnerHTML
3.9
Custom attributes
3.10
Spread de props y keys

04
Componentes
4.1
Funciones que devuelven JSX
4.2
Componentes y props
4.3
Destructuring de props
4.4
Composición de componentes
4.5
Modularización y nomenclatura
4.6
El componente App
4.7
CSS Modules
4.8
CSS Global
4.9
Renderizado condicional
4.10
Aislar lógica en componentes
4.11
Funciones vs clases

05
Estado y useState
5.1
El renderizado inicial
5.2
Qué es un estado
5.3
useState
5.4
Fases del cambio de estado
5.5
Variables durante el render
5.6
Reglas del estado y los hooks
5.7
El valor inicial
5.8
Profundizando en SetState
5.9
Valor del estado durante el render
5.10
Too many rerenders
5.11
Dónde colocar el estado
5.12
Introducción a múltiples estados

06
Eventos y formularios
6.1
Añadiendo event listeners
6.2
Eliminando event listeners
6.3
SyntheticEvent
6.4
PreventDefault
6.5
Target vs CurrentTarget
6.6
Event bubbling, capturing y stopPropagation
6.7
Formularios no controlados
6.8
Formularios controlados
6.9
Ejemplo con un buscador

07
Lógica, estructura y custom hooks
7.1
Modularizando la lógica
7.2
Responsabilidad única
7.3
Añadiendo nuevos filtros
7.4
Añadiendo lógica de filtrado
7.5
Primitivos, referencias, stack y memoria
7.6
La importancia de las funciones puras
7.7
Componentizar
7.8
Agrupando estados
7.9
Custom hooks
7.10
Más custom hooks

08
Contexto y useContext
8.1
La técnica de prop drilling
8.2
La alternativa de context
8.3
Context provider y useContext
8.4
Valor por defecto del context
8.5
Múltiples context providers
8.6
Las implicaciones de useContext
8.7
Manejo de múltiples contextos
8.8
Context vs prop drilling

09
Side effects y useEffect
9.1
La experiencia de usuario
9.2
Prioridad y side effects
9.3
useEffect
9.4
Las dependencias de useEffect
9.5
Las reglas de los hooks
9.6
ESlint Plugin React Hooks
9.7
No mientas con tus dependencias
9.8
Limpieza de side effects
9.9
El asincronismo
9.10
No todo son side effects
9.11
Desmontado y memory leaks

10
Práctica 1: Gestor de usuarios
10.1
Analizando los requisitos
10.2
Objetivos y metodología
10.3
Los flujos del diseño
10.4
El UI Kit
10.5
Definiendo variables CSS
10.6
Adaptando el código anterior
10.7
UserRole y el uso de variables
10.8
UserStatus y los SVG
10.9
Creando el UserDisplay
10.10
Rematando estilos de UserRow
10.11
Revisando la lógica de filtrado
10.12
El comportamiento en conjunto
10.13
Creando input search
10.14
Rematando el input search
10.15
Creando input checkbox
10.16
Creando el select
10.17
Ajustando los estilos
10.18
Evitando valores mágicos
10.19
Modularizando la lógica
10.20
Planteando la paginación
10.21
Creando UsersListPagination
10.22
Creando el IconButton
10.23
Creando el PageSelector
10.24
Organizando los estados
10.25
JSON Server
10.26
Cargando usuarios con fetch
10.27
Evitando memory leaks
10.28
Modularizando nuestro hook
10.29
Data, loading, error y el UX
10.30
Creando el button
10.31
Creando el input text
10.32
Creando el input text con icono
10.33
Cambiando entre formularios
10.34
Maquetando el formulario de creación
10.35
Controlados o no controlados
10.36
Validando los campos
10.37
Completando las validaciones
10.38
Validaciones asíncronas
10.39
Modularización y memory leaks
10.40
Debounce
10.41
Gestionando el submit
10.42
Submitting
10.43
Separación de responsabilidades
10.44
Separando los fetch
10.45
El orden de presentación
10.46
Custom hooks y responsabilidades
10.47
Complica dentro, simplifica fuera
10.48
Recargando los usuarios
10.49
Form layout
10.50
Edición, borrado y prop drilling
10.51
Formulario de edición
10.52
Adaptando las validaciones
10.53
Adaptando el onSubmit
10.54
Cambiando las props
10.55
Formulario de borrado
10.56
Modularizando
10.57
Creando un contexto
10.58
Aprovechando el return null
10.59
Creando un custom provider
10.60
Organizar los archivos
10.61
Selector de vista
10.62
Creando las cards
10.63
Filtrado y paginación en JSON server
10.64
Paginación desde servidor
10.65
Refetch y las dependencias
10.66
Filtrando desde el servidor
10.67
Un pequeño fix
10.68
Un último refactor
10.69
La accesibilidad
10.70
Actualizando a React 18
10.71
Conclusiones

11
Reducers y useReducer
11.1
Repasando useState
11.2
Los problemas de useState
11.3
Centralizando los setState
11.4
useReducer
11.5
Escribir correctamente un reducer
11.6
Lazy initialization
11.7
useState vs useReducer

12
Práctica 2: Refactor con useReducer
12.1
Revisando los estados sencillos
12.2
Revisando useFilters
12.3
Revisando useEditForm
12.4
Las props y los reducers
12.5
Revisando useCreateForm
12.6
Revisando useSelectedForm
12.7
Revisando useUsers
12.8
Evitando valores mágicos
12.9
Aislando reducers
12.10
Creando action builders
12.11
Más action builders
12.12
Estandarizando el payload

13
Referencias y useRef
13.1
El problema de las variables globales
13.2
Referencias y useRef
13.3
Referencias vs Estados
13.4
El por qué de ref.current
13.5
Usos de las referencias como valor
13.6
Referenciando nodos del DOM
13.7
Asignación de referencias al DOM
13.8
Reenviando refs con forwardRef
13.9
useImperativeHandle
13.10
¿Necesitas una referencia?

14
Más allá del Virtual DOM
14.1
La gestión del Virtual DOM
14.2
Las APIs del navegador
14.3
Intervalos y timeouts
14.4
Los eventos del navegador
14.5
El problema de la jerarquía
14.6
Portales y createPortal
14.7
Cómo funciona createPortal
14.8
Eventos en portales
14.9
La alternativa de los custom events
14.10
Implementando custom events

15
Práctica 3: Referencias, portales y más allá
15.1
Los nuevos requisitos
15.2
Cambios en el diseño
15.3
Actualizando las dependencias
15.4
Nuevos iconos y colores
15.5
Creando el modal
15.6
Creando un modal genérico
15.7
El modal de creación
15.8
Modales de edición y borrado
15.9
Refactorizando el JSX
15.10
Limpiando el código
15.11
Deshabilitando el scroll
15.12
Refactorizando UserActions
15.13
Creando el dropdown
15.14
Manejando el click
15.15
Manejando el click outside
15.16
Añadiendo la foto por defecto
15.17
Generando imágenes de prueba
15.18
Input file y data URL
15.19
Promisificando el file reader
15.20
Enviando la foto al servidor
15.21
Generando la preview
15.22
Validando las imágenes
15.23
Adaptando estilos
15.24
Mejorando la legibilidad
15.25
Input file y referencias
15.26
Rematando el formulario
15.27
Creando las alertas
15.28
Creando custom events
15.29
Modularizando los eventos
15.30
Usando las alertas

16
Técnicas avanzadas de reutilización