Descubra el universo de React con este libro imprescindible dirigido a desarrolladores, que ofrece un enfoque pedagógico progresivo y concreto para familiarizarse con esta potente biblioteca de JavaScript dedicada a la creación de interfaces de usuario dinámicas e interactivas.

Una sólida base en HTML, CSS y JavaScript facilitará la lectura de este libro. Cada capítulo está enriquecido con consejos prácticos, ejercicios estimulantes y estudios de casos reales para compren­der en profundidad los conceptos fundamentales de React.

Comenzará explorando los fundamentos esenciales de JavaScript para crear rápidamente sus primeros compo­nentes React y dominar los conceptos imprescindibles. Una vez instaladas las herramientas de desarrollo, se familiarizará con JSX, los props, los hooks, el estado local, los formularios y muchos otros conceptos clave. También recibirá una orienta­ción sobre cómo aprovechar el ecosistema React y explorará la gestión del estado con Redux y el almacenamiento en caché con React Query.

Asimismo, aprenderá a desarrollar para móviles con React Native, aprovechando las funcionalidades avanzadas que le permitirán integrar elementos como la geolocalización y la gestión de contactos. Para lograr una experiencia de usuario óptima, el autor le guiará en el uso de Storybook, así como en la conexión a una API GraphQL para realizar consultas eficientes.

También se verán en profundidad los design patterns, frecuen­temente utilizados en React, así como las pruebas unitarias, proporcionándole las habilidades necesarias para diseñar aplica­ciones robustas y fiables.

Descargas

• Descargar los ejemplos del libro (591 Ko)

Prólogo

1. Introducción
   1. 1. A quién va dirigido este libro
   2. 2. ¿Por qué elegir React?
      1. a. Reactividad
      2. b. Composabilidad
      3. c. Comunidad activa
      4. d. React Native
   3. 3. Cómo utilizar este libro
   4. 4. Acerca de los ejemplos de código
2. ¿Qué es React?
   1. 1. Introducción a React
      1. a. Origen de React
      2. b. Objetivo de React
      3. c. ¿Por qué es tan popular React?
      4. d. Principales conceptos de React
   2. 2. Filosofía React
      1. a. Componentes: la unidad básica
      2. b. Reactividad: actualización eficaz de la interfazde usuario
      3. c. Composición: ensamblaje de componentes reutilizables
      4. d. Un enfoque declarativo
   3. 3. La comunidad React
      1. a. Proyectos de código abierto
      2. b. Contribuidores comprometidos
      3. c. Eventos y conferencias
   4. 4. Versiones de React y ciclo de actualización
      1. a. Las diferentes versiones de React
      2. b. Principales cambios y mejoras
      3. c. Seguimiento de nuevas versiones
3. Estructura del libro
   1. 1. Descubrimiento de React
   2. 2. Gestión de estados en React
   3. 3. Desarrollo móvil con React Native
   4. 4. Profundizar enReact

Empezar bien con React

1. Conceptos básicos de JavaScript
   1. 1. El DOM (Document Object Model)
   2. 2. Definición de una variable en JavaScript
   3. 3. Los tipos de valores
   4. 4. Cadenas de caracteres
   5. 5. Arrays
   6. 6. Objetos
   7. 7. Clases
   8. 8. Funciones flecha
      1. a. Sintaxis de las funciones flecha
      2. b. Comparación entre una función tradicionaly una función flecha
      3. c. Uso de funciones flecha en React
   9. 9. Asincronismo
      1. a. Callbacks
      2. b. Promesas (Promises)
      3. c. Async/Await
2. Prerequisitos, conceptos y herramientas para desarrollar
   1. 1. Instalación de las herramientas necesarias
      1. a. NodeJS
      2. b. Editor
      3. c. Navegador web y herramientas de desarrollo
3. Una aplicación básica
   1. 1. El mínimo de código para una aplicaciónReact
   2. 2. Los componentes de React
4. Entorno de desarrollo
   1. 1. Introducción a JSX
   2. 2. Inicialización de un proyecto con Vite
   3. 3. Configuración de Prettier en VSCode
   4. 4. Configuración de ESLint
   5. 5. Conclusión

Descubrir el JSX

1. Introducción a JSX
2. Sintaxis y elementos JSX
   1. 1. Elementos JSX
   2. 2. Atributos JSX
      1. a. Atributos booleanos
      2. b. Atributos personalizados
   3. 3. Elementos y fragmentos de React
   4. 4. Comentarios JSX
   5. 5. Uso de JavaScript dentro de JSX
3. Construir una interfaz con componentes
   1. 1. Composición
   2. 2. Aislamiento de funcionalidades
   3. 3. Profundidad de la composición
   4. 4. Buenas prácticas
      1. a. División en componentes reutilizables
      2. b. Profundidad de composición razonable
      3. c. Respeto al principio de responsabilidad unica
4. Los fragmentos JSX
   1. 1. Utilización de fragmentos JSX
   2. 2. Fragmento explícito
5. Expresiones condicionales
   1. 1. El operador ternario
   2. 2. La sentencia if
6. Utilizar listas y claves
   1. 1. Las claves de los elementos de la lista
      1. a. ¿Por qué son importantes las claves?
      2. b. ¿Cómo asignar claves?
   2. 2. Utilizar una lista
   3. 3. Las claves y el rendimiento

Los fundamentos de React

1. Los componentes
   1. 1. Introducción a los componentes
      1. a. Tipos de componentes
      2. b. Crear un componente
      3. c. Importar un componente
   2. 2. Utilización de props
      1. a. Pasar props a un componente
      2. b. Uso de props en el componente hijo
   3. 3. Diferencias entre componentes funcionales y de clase
   4. 4. Ciclo de vida de los componentes de clase
   5. 5. Componentes controlados y no controlados
      1. a. Componentes controlados
      2. b. Componentes no controlados
      3. c. ¿Cuándo debe utilizarse cada enfoque?
   6. 6. Componentes con estado (stateful) y sin estado (stateless)
      1. a. Componentes con estado
      2. b. Componentes sin estado
      3. c. ¿Cuándo debe utilizarse cada tipode componente?
   7. 7. Composición y jerarquía de los componentes
2. Los props y el estado local
   1. 1. Introducción a los props y al estado local
      1. a. Props
      2. b. El estado (state)
   2. 2. Utilización de props
      1. a. Transmisión de datos de padres a hijos
      2. b. Utilizar props por defecto
   3. 3. Estado local
      1. a. Utilización del hook useState para gestionarel estado local
      2. b. Modificar el estado local con setState (para componentesde clase)
      3. c. Comparación entre props y el estado local
3. Los hooks
   1. 1. Introducción a los hooks
   2. 2. Problemas con los componentes de clase
   3. 3. Los principales hooks incorporados
      1. a. useState
      2. b. useEffect
      3. c. useContext
      4. d. useReducer
      5. e. useCallback
      6. f. useMemo
      7. g. useRef
      8. h. useImperativeHandle
      9. i. useLayoutEffect
      10. j. useDebugValue
   4. 4. Crear sus propios hooks
   5. 5. Buenas prácticas para el uso de hooks
      1. a. Respete el orden de los hooks y no los llame condicionalmente
      2. b. Divida las responsabilidades de los hooks para evitarcomplejidades
   6. 6. Limitaciones de los hooks
4. El estilo
   1. 1. Introducción al estilo en React
      1. a. Utilización de estilos en línea(Inline Styles)
      2. b. Utilización de clases CSS
      3. c. Utilización de módulos CSS
      4. d. Uso de bibliotecas de estilo (por ejemplo, Bootstrap,Material-UI)
   2. 2. Tailwind
   3. 3. La gestión de clases condicionales
   4. 4. Animaciones y transiciones
5. Enrutamiento
   1. 1. Introducción al enrutamiento en React
      1. a. Comprender el concepto de enrutamiento en una aplicaciónweb
      2. b. React Router
   2. 2. Utilización de parámetros URL (URLParameters)
6. Formularios
   1. 1. Utilización de formularios controlados
      1. a. Gestión del estado del formulario con useState
      2. b. Validación de campos del formulario
      3. c. Envío del formulario
   2. 2. Uso de formularios no controlados
      1. a. Definición de formas no controladas
      2. b. Gestión de datos de formularios con referencias(refs)
      3. c. Acceso a los valores de los formularios enviados
   3. 3. Utilización de componentes de formulario
      1. a. Presentación de Formik
      2. b. Instalación y configuración de Formik
      3. c. Creación de un formulario con Formik
      4. d. Validación de campos con Formik
   4. 4. Campos de formulario avanzados
      1. a. Seleccionar campo
      2. b. Casillas de verificación (checkbox) y botonesde opción (radio button)
      3. c. Campo de archivo (file input)
      4. d. Selector de fecha (date picker)
   5. 5. La validación de formularios
   6. 6. React-hook-form, la alternativa a Formik
   7. 7. Gestión de formularios complejos
      1. a. Formularios con campos dependientes
      2. b. Formularios Multipasos
      3. c. Formularios con listas dinámicas (añadir/eliminarcampos)
7. Optimización del rendimiento de las aplicaciones
   1. 1. Comprender los problemas de rendimiento
      1. a. Reactividad de la interfaz de usuario
      2. b. Velocidad de carga inicial
      3. c. Gestión de estado
      4. d. Renderizado no necesario
      5. e. Consulta y gestión de datos
      6. f. Renderizado condicional
   2. 2. Almacenamiento en caché y memorización
   3. 3. Lazy loading y suspense
   4. 4. Virtualización
   5. 5. Code splitting
   6. 6. Análisis de rendimiento
   7. 7. Prueba de rendimiento

Gestión del estado

1. Introducción
2. Las diferentes soluciones
   1. 1. Estado del servidor (server state) y estado del cliente (clientstate)
   2. 2. El context API
   3. 3. Redux
   4. 4. MobX
   5. 5. Recoil
   6. 6. Zustand
3. Combinar contexto y los hooks
   1. 1. Crear un contexto
   2. 2. Utilización de Context con el hook useContext
   3. 3. Uso de useReducer para estados más complejos
4. Redux
   1. 1. Elementos clave de Redux
      1. a. Actions
      2. b. Reductor (reducer)
      3. c. Store
      4. d. Redux Toolkit
   2. 2. Crear un store
   3. 3. Utilizar createSlice
   4. 4. Asincronismo con createAsyncThunk
   5. 5. Capacidad de prueba
5. MobX
   1. 1. Principios básicos de MobX
      1. a. Observables
      2. b. Actions
      3. c. Reactions
      4. d. Computed values
   2. 2. MobX con React
   3. 3. Conclusión

Gestión del estado del servidor con React Query

1. Introducción
2. Instalación
   1. 1. Instalación de dependencias
   2. 2. Configuración del proveedor
3. Consultas (queries)
   1. 1. La función fetch
   2. 2. Utilización de useQuery
4. Mutaciones
5. Invalidation
   1. 1. Diferentes formas de invalidar una solicitud
   2. 2. Otros medios de invalidación
   3. 3. Invalidaciones condicionales
6. Utilizar herramientas de desarrollo específicas

Desarrollo móviles con React Native

1. Introducción
2. Presentación de React Native
   1. 1. Componentes nativos
   2. 2. Reutilizar la lógica
   3. 3. Acceso a las funciones del dispositivo
3. Crear una aplicación con Expo
   1. 1. La herramienta create-expo-app
   2. 2. La aplicación Expo Go
4. Configurar la navegación
   1. 1. Instalación de dependencias y configuración del proyecto
   2. 2. El directorio app
   3. 3. Navegación entre pantallas
5. Añadir estilo
   1. 1. Utilizar estilos en línea
   2. 2. Utilización de estilos externos
   3. 3. Estilos condicionales
   4. 4. Utilizar Tailwind

Funciones avanzadas con React Native

1. Introducción
2. Utilizar la geolocalización y acceder a los contactos
   1. 1. Utilizar la geolocalización
      1. a. Instalación del módulo de geolocalización
      2. b. Utilización de la geolocalización
   2. 2. Acceso a los contactos
      1. a. Instalación del módulo de contacto
      2. b. Utilizar el acceso a los contactos
3. Ejemplo: utilización de un tema claro u oscuro con la API de contexto
4. Conclusión

Next.js, el framework React por Vercel

1. Introducción
   1. 1. ¿Por qué Next.js?
      1. a. Renderizado del lado del servidor (SSR) y generaciónde sitios estáticos (SSG)
      2. b. Enrutamiento sencillo e intuitivo
      3. c. Precarga de páginas
      4. d. Optimización de imágenes
      5. e. Compatibilidad con CSS-in-JS y SCSS
2. Creación de un sitio con Next.js
   1. 1. Creación de un proyecto Next.js
   2. 2. Creación de páginas
   3. 3. Iniciar la aplicación
3. Navegación entre las páginas
   1. 1. Utilización del componente Link
   2. 2. Ruta dinámica
   3. 3. Navegación con useRouter
   4. 4. Navegación programada
4. Gestión de assets
   1. 1. Archivos públicos
   2. 2. Carga de imágenes
5. Utilizar SWR, el equivalente de React Query
   1. 1. Instalación de SWR
   2. 2. Utilización de SWR
   3. 3. Opciones de configuración avanzadas
6. Renderizado del lado del servidor y generación de sitios estáticos
   1. 1. Renderizado del lado del servidor (SSR)
   2. 2. Generación de sitios estáticos (SSG)
   3. 3. Actualización automática (ISR)
7. Presentación de React Server Components (RSC)

Introducción a Storybook

1. Descubrimiento e instalación
   1. 1. ¿Qué es un Storybook?
   2. 2. Instalación de Storybook
   3. 3. Crear historias (stories)
   4. 4. Lanzamiento de Storybook
   5. 5. Qué ofrece Storybook
2. Creación de un componente
   1. 1. Creación de un componente
   2. 2. Visualización y comprobación delcomponente
   3. 3. La utilidad de crear componentes en Storybook
3. Utilizar stories
   1. 1. Visualizar y poner a prueba la story
   2. 2. Ventajas de crear stories
4. Utilización de add-ons
   1. 1. Instalación de add-ons
   2. 2. Utilización de add-ons
   3. 3. Lo que ofrece el uso de add-ons
5. Conclusión

Conectar React a una API GraphQL

1. Introducción a GraphQL y primeras consultas
   1. 1. ¿Qué es GraphQL?
   2. 2. Primeras consultas GraphQL con React
2. Creacion de una API con Hasura
3. Llamada a una API con React y Apollo Client
   1. 1. Configuración del cliente Apollo
   2. 2. Llamada a la API creada con Hasura
4. Conclusión

Dominar los design patterns de React

1. Introducción
2. Higher-Order Components
   1. 1. Funcionamiento de los Higher-Order Components
   2. 2. Qué ofrecen los Higher-Order Components
   3. 3. Casos prácticos de Higher-Order Components
   4. 4. Limitaciones y consideraciones
      1. a. Los HOC en cascada
      2. b. Conflicto de props
3. Renderizar props
   1. 1. Cómo funcionan los render props
   2. 2. Cualidades de los render props
   3. 3. Casos de uso de render props
      1. a. Control de los componentes interactivos
      2. b. Gestión del estado o de datos
   4. 4. Limitaciones y consideraciones
4. Provider
   1. 1. Funcionamiento del Provider Pattern
   2. 2. Ventajas del Provider Pattern
   3. 3. Casos prácticos del Provider Pattern
   4. 4. Limitaciones y consideraciones
5. Componentes container y de presentación
   1. 1. Componentes container
   2. 2. Componentes de presentación
   3. 3. Qué ofrecen el componente container y losde presentación
   4. 4. Casos prácticos de componentes containery de presentación
   5. 5. Limitaciones y consideraciones
6. Hooks
   1. 1. Conceptos básicos del pattern Hooks
   2. 2. Hooks personalisados
   3. 3. Extracción lógica

Probar una aplicación React

1. Uso de Jest y React Testing Library
   1. 1. Introducción a Jest
   2. 2. Instalación de Jest
   3. 3. Escribir pruebas con Jest y React Testing Library
   4. 4. Ejecución de pruebas
   5. 5. Jest y React Testing Library
   6. 6. Limitaciones y consideraciones
2. Escribir su primera prueba
   1. 1. Configuración básica
   2. 2. Escribir su primera prueba
   3. 3. Explicación de la prueba
   4. 4. Ejecución de la prueba
   5. 5. ¿Por qué esta sencilla prueba?
   6. 6. Limitaciones y consideraciones
3. Probar los componentes con Cypress
   1. 1. Configuración básica
   2. 2. Instalación de Cypress
   3. 3. Escribir pruebas con Cypress
   4. 4. Ejecución de pruebas
   5. 5. Qué ofrece Cypress
   6. 6. Limitaciones y consideraciones
   7. 7. Playwrigh, la alternativa a Cypress
4. Conclusión
   1. 1. La importancia de las pruebas
   2. 2. Elección del método de prueba
   3. 3. Buenas prácticas de prueba
   4. 4. Integración y despliegue continuos
   5. 5. Evolución de las pruebas

Conclusión

1. Ir más allá
   1. 1. Explorar áreas relacionadas
   2. 2. Contribuir a la comunidad
   3. 3. Crear proyectos personales
   4. 4. Participación en eventos y conferencias
   5. 5. Experimentar con nuevas tecnologías
2. Despliegue con Netlify
   1. 1. Creación de un proyecto y compilación
   2. 2. Crear una cuenta Netlify
   3. 3. Configuración del despliegue
   4. 4. Despliegue
3. Utilizar una biblioteca de componentes
   1. 1. ¿Por qué utilizar una bibliotecade componentes?
   2. 2. Ejemplos de bibliotecas de componentes
   3. 3. Limitaciones
4. Recursos de lectura complementaria
   1. 1. Documentación oficial
   2. 2. Blogs
   3. 3. Vigilancia tecnológica