Libro Multilingüe

🇺🇸 Inglés (Original) 🇪🇸 Español (Traducción)

✅ Todos los idiomas están incluidos en su compra

Editorial SAP PRESS

Año / Edición 2024 / 1

Páginas 676

Autores Sebastian Springer

React

React.js hace que desarrollar interfaces de usuario dinámicas sea más rápido y fácil que nunca. ¡Aprende a sacar el máximo partido a la biblioteca con esta completa guía! Empieza por lo básico: qué es React y cómo funciona. A continuación, sigue los ejemplos prácticos de código para crear una aplicación, desde el diseño con CSS hasta la optimización del rendimiento de la aplicación. Tanto si eres nuevo en JavaScript como si eres un desarrollador avanzado, ¡encontrarás todo lo que necesitas para crear tu interfaz con React!

Cree interfaces de usuario con React.js, una biblioteca JavaScript para frontend.
Trabaja con clases, hooks, sistemas de tipos, CSS, formularios y mucho más.
Desarrolle sus habilidades en áreas como pruebas, depuración, comunicación con servidores y renderización del lado del servidor.

Aprenderás sobre:

Introducción a React:
¿Eres nuevo en React? Aprende los conceptos básicos sobre cómo se utiliza la biblioteca. Da tus primeros pasos en el proceso de desarrollo y explora la estructura de una aplicación.
Ejemplos prácticos de código:
¡Vea React y su arquitectura basada en componentes en acción! Repase programas de ejemplo detallados y obtenga consejos prácticos para crear aplicaciones.
Desarrollo avanzado:
¿Trabajas con aplicaciones más grandes y complejas? Encuentra los recursos que necesitas para utilizar Redux, pruebas automatizadas, i18n, comunicación con el servidor y mucho más.

Aspectos Destacados:

Componentes de clase
API de Hook
Seguridad de tipos y TypeScript
CSS y estilos en línea
Pruebas y seguridad
Formularios
Bibliotecas de componentes
Navegación por la aplicación
Redux
GraphQL y Apollo
Next.js
Aplicaciones web progresivas

Ver Tabla de Contenidos Completa

Prólogo
Prefacio
- Estructura del libro
- Descargar los ejemplos de código
- Agradecimientos
1 Introducción a React
- 1.1 ¿Qué es React?
  - 1.1.1 Aplicaciones de una sola página
  - 1.1.2 La historia de React
- 1.2 ¿Por qué React?
- 1.3 Los términos y conceptos más importantes del mundo React
  - 1.3.1 Componentes y elementos
  - 1.3.2 Flujo de datos
  - 1.3.3 El renderizador
  - 1.3.4 El conciliador
- 1.4 Una mirada al universo React
  - 1.4.1 Gestión estatal
  - 1.4.2 El enrutador
  - 1.4.3 Interfaz de usuario material
  - 1.4.4 Jest
- 1.5 Pensar en React
  - 1.5.1 Descomposición de la interfaz de usuario en una jerarquía de componentes
  - 1.5.2 Implementación de una versión estática en React
  - 1.5.3 Definición del estado mínimo de la interfaz de usuario
  - 1.5.4 Definición de la ubicación del Estado
  - 1.5.5 Modelado del flujo de datos inverso
- 1.6 Ejemplos de código
- 1.7 Resumen
2 Los primeros pasos en el proceso de desarrollo
- 2.1 Inicio rápido
  - 2.1.1 Inicialización
  - 2.1.2 Compatibilidad con TypeScript
- 2.2 Entornos de pruebas para React
  - 2.2.1 CodePen: un espacio para el desarrollo web
  - 2.2.2 Un proyecto React en CodePen
- 2.3 Desarrollo local
- 2.4 Introducción al desarrollo en React
  - 2.4.1 Requisitos
  - 2.4.2 Instalación de Create React App
  - 2.4.3 Alternativas a Create React App
  - 2.4.4 Scripts React
  - 2.4.5 Comunicación con el servidor en modo de desarrollo
  - 2.4.6 Comunicación cifrada durante el desarrollo
- 2.5 La estructura de la solicitud
- 2.6 Solución de problemas en una aplicación React
- 2.7 Creación de la aplicación
- 2.8 Resumen
3 principios básicos de React
- 3.1 Preparación
  - 3.1.1 Ordenar la aplicación
- 3.2 Introducción a la aplicación
  - 3.2.1 El archivo index.jsx: renderización de la aplicación
  - 3.2.2 El archivo App.jsx: el componente raíz
- 3.3 Componentes funcionales
  - 3.3.1 Un componente por archivo
- 3.4 JSX: Definición de estructuras en React
  - 3.4.1 Expresiones en JSX
  - 3.4.2 Iteraciones: bucles en componentes
  - 3.4.3 Condiciones en JSX
- 3.5 Accesorios: flujo de información en una aplicación
  - 3.5.1 Props y componentes secundarios
  - 3.5.2 Seguridad de tipos con PropTypes
- 3.6 Estado local
- 3.7 Enlace de eventos: respuesta a las interacciones del usuario
  - 3.7.1 Respuesta a los acontecimientos
  - 3.7.2 Uso de objetos de evento
- 3.8 Inmutabilidad
  - 3.8.1 Immer en una aplicación React
- 3.9 Resumen
4 Una mirada entre bastidores: otros temas
- 4.1 El ciclo de vida de un componente
- 4.2 El ciclo de vida de un componente de función con el gancho Effect
  - 4.2.1 Montaje: el montaje de un componente
  - 4.2.2 Actualización: Actualización del componente
  - 4.2.3 Desmontar: ordenar al final del ciclo de vida
- 4.3 Comunicación con el servidor
  - 4.3.1 Implementación del servidor
  - 4.3.2 Comunicación con el servidor a través de la API Fetch
  - 4.3.3 Aspectos que hay que saber sobre la comunicación con el servidor
  - 4.3.4 Comunicación del servidor con Axios
- 4.4 Componentes del contenedor
  - 4.4.1 Cambio de la lógica a un componente contenedor
  - 4.4.2 Integración del componente contenedor
  - 4.4.3 Implementación del componente de presentación
- 4.5 Componentes de orden superior
  - 4.5.1 Un componente simple de orden superior
  - 4.5.2 Integración de un componente de orden superior en el componente BooksList
  - 4.5.3 Integración del componente de orden superior
- 4.6 Renderizar accesorios
  - 4.6.1 Nombres alternativos para los atributos de renderizado
  - 4.6.2 Integración de los Render Props en la aplicación
- 4.7 Contexto
  - 4.7.1 La API Context
  - 4.7.2 Uso de la API de contexto en la aplicación de ejemplo
- 4.8 Fragmentos
- 4.9 Resumen
5 Componentes de la clase
- 5.1 Componentes de clase en React
- 5.2 Estructura básica de un componente de clase
- 5.3 Propiedades en un componente de clase
  - 5.3.1 Definición de estructuras de accesorios mediante PropTypes
  - 5.3.2 Valores predeterminados para las propiedades
- 5.4 Estado: El estado del componente de clase
  - 5.4.1 Inicialización del estado mediante la propiedad State de la clase
  - 5.4.2 Inicialización del estado en el constructor
- 5.5 El ciclo de vida de los componentes
  - 5.5.1 Constructor
  - 5.5.2 «getDerivedStateFromProps»
  - 5.5.3 «renderizar»
  - 5.5.4 «componentDidMount»
  - 5.5.5 «shouldComponentUpdate»
  - 5.5.6 «getSnapshotBeforeUpdate»
  - 5.5.7 «componentDidUpdate»
  - 5.5.8 «componentWillUnmount»
  - 5.5.9 Ganchos inseguros
- 5.6 Límites de error
  - 5.6.1 Registro de errores con «componentDidCatch»
  - 5.6.2 Representación alternativa en caso de error con «getDerivedStateFromError»
- 5.7 Uso de la API de contexto en un componente de clase
- 5.8 Diferencias entre los componentes de función y de clase
  - 5.8.1 Estado
  - 5.8.2 Ciclo de vida
- 5.9 Resumen
6 La API Hooks de React
- 6.1 Una primera visión general
  - 6.1.1 Los tres ganchos básicos
  - 6.1.2 Otros componentes de la API de Hooks
- 6.2 «useReducer»: el gancho Reducer
  - 6.2.1 La función reductora
  - 6.2.2 Acciones y despacho
  - 6.2.3 Asincronía en el gancho del reductor
- 6.3 «useCallback»: Funciones de memorización
- 6.4 «useMemo»: memorización de objetos
- 6.5 «useRef»: referencias y valores inmutables
  - 6.5.1 Manejo de formularios utilizando el gancho Ref
  - 6.5.2 Almacenamiento de valores en caché utilizando el gancho Ref
- 6.6 «useImperativeHandle»: control de referencias hacia adelante
  - 6.6.1 Referencias hacia adelante
  - 6.6.2 El gancho de control imperativo
- 6.7 «useLayoutEffect»: la alternativa sincrónica a «useEffect»
- 6.8 «useDebugValue»: Información de depuración en las herramientas para desarrolladores de React
- 6.9 «useDeferredValue»: realizar actualizaciones según la prioridad
- 6.10 «useTransition»: Reducción de la prioridad de las operaciones
- 6.11 «useId»: Creación de identificadores únicos
- 6.12 Ganchos de biblioteca
  - 6.12.1 «useSyncExternalStore»
  - 6.12.2 «useInsertionEffect»
- 6.13 Ganchos personalizados
- 6.14 Reglas de los ganchos: aspectos a tener en cuenta
  - 6.14.1 Regla n.º 1: Ejecutar los ganchos solo en el nivel superior
  - 6.14.2 Regla n.º 2: los ganchos solo se pueden utilizar en componentes de función o ganchos personalizados.
- 6.15 Cambio a ganchos
- 6.16 Resumen
7 Seguridad de tipos en aplicaciones React con TypeScript
- 7.1 ¿Cuál es la ventaja de un sistema de tipos?
- 7.2 Los diferentes sistemas de tipos
- 7.3 Seguridad de tipos en una aplicación React con Flow
  - 7.3.1 Integración en una aplicación React
  - 7.3.2 Las principales características del flujo
  - 7.3.3 Flujo en los componentes React
- 7.4 Uso de TypeScript en una aplicación React
  - 7.4.1 Integración de TypeScript en una aplicación React
  - 7.4.2 Configuración de TypeScript
  - 7.4.3 Las principales características de TypeScript
  - 7.4.4 Definiciones de tipos: Información sobre software de terceros
- 7.5 TypeScript y React
  - 7.5.1 Añadir TypeScript a una aplicación existente
  - 7.5.2 Características básicas
  - 7.5.3 Componentes de la función
  - 7.5.4 Contexto
  - 7.5.5 Componentes de clase
- 7.6 Resumen
8 Diseño de componentes React
- 8.1 Importación de CSS
  - 8.1.1 Ventajas y desventajas de la importación de CSS
  - 8.1.2 Manejo de nombres de clases
  - 8.1.3 Mejora en el manejo de nombres de clases mediante la biblioteca «classnames»
  - 8.1.4 Uso de Sass como preprocesador CSS
- 8.2 Estilo en línea
- 8.3 Módulos CSS
- 8.4 CSS en JavaScript utilizando Emotion
  - 8.4.1 Instalación de Emotion
  - 8.4.2 Uso de la propiedad «css»
  - 8.4.3 El enfoque estilizado de la emoción
  - 8.4.4 Pseudoselectores en componentes con estilo
  - 8.4.5 Estilo dinámico
  - 8.4.6 Otras características de los componentes con estilo
- 8.5 Viento a favor
- 8.6 Resumen
9 Proteger una aplicación React mediante pruebas
- 9.1 Introducción a Jest
  - 9.1.1 Instalación y ejecución
  - 9.1.2 Organización de las pruebas
  - 9.1.3 Jest: los principios básicos
  - 9.1.4 Estructura de una prueba: Triple A
  - 9.1.5 Los emparejadores de Jest
  - 9.1.6 Pruebas agrupadas: Conjuntos de pruebas
  - 9.1.7 Rutinas de configuración y desmontaje
  - 9.1.8 Omitir pruebas y ejecutarlas de forma exclusiva
  - 9.1.9 Manejo de excepciones
  - 9.1.10 Prueba de operaciones asincrónicas
- 9.2 Prueba de funciones auxiliares
- 9.3 Pruebas de instantáneas
- 9.4 Prueba de componentes
  - 9.4.1 Prueba del componente «BooksListItem»
  - 9.4.2 Prueba de la interacción
- 9.5 Manejo de las dependencias del servidor
  - 9.5.1 Simulación de errores durante la comunicación
- 9.6 Resumen
10 formularios en React
- 10.1 Componentes no controlados
  - 10.1.1 Manejo de referencias en React
- 10.2 Componentes controlados
- 10.3 Carga de archivos
- 10.4 Validación de formularios con React Hook Form
  - 10.4.1 Validación de formularios con React Hook Form
  - 10.4.2 Validación de formularios mediante un esquema
  - 10.4.3 Diseño del formulario
  - 10.4.4 Prueba automática de la validación de formularios
- 10.5 Resumen
11 Bibliotecas de componentes en una aplicación React
- 11.1 Instalación e integración de Material UI
- 11.2 Visualización de listas con el componente «Tabla»
  - 11.2.1 Filtrar la lista de la tabla
  - 11.2.2 Ordenar la tabla
- 11.3 Cuadrículas y puntos de ruptura
- 11.4 Iconos
- 11.5 Eliminación de registros de datos
  - 11.5.1 Preparación de una operación de eliminación
  - 11.5.2 Implementación de un cuadro de diálogo de confirmación
  - 11.5.3 Eliminación de registros de datos
- 11.6 Creación de nuevos registros de datos
  - 11.6.1 Preparación para la creación de registros de datos
  - 11.6.2 Implementación del componente «Formulario»
  - 11.6.3 Integración del cuadro de diálogo Formulario
- 11.7 Edición de registros de datos
- 11.8 Resumen
12 Navegación dentro de una aplicación: el enrutador
- 12.1 Instalación e integración
- 12.2 Navegación en la aplicación
  - 12.2.1 Siempre se activa la mejor ruta
  - 12.2.2 Una barra de navegación para la aplicación
  - 12.2.3 Integración de la barra de navegación
- 12.3 Componente «NotFound»
- 12.4 Prueba del enrutamiento
- 12.5 Redireccionamientos condicionales
- 12.6 Rutas dinámicas
  - 12.6.1 Definición de subrutas
- 12.7 Resumen
13 Creación de bibliotecas React personalizadas
- 13.1 Creación de una biblioteca de componentes personalizados
  - 13.1.1 Inicialización de la biblioteca
  - 13.1.2 La estructura de la biblioteca
  - 13.1.3 Ganchos en la biblioteca
  - 13.1.4 Creación de la biblioteca
- 13.2 Integración de la biblioteca
  - 13.2.1 Instalación normal del paquete
- 13.3 Prueba de la biblioteca
  - 13.3.1 Preparación del entorno de pruebas
  - 13.3.2 Prueba unitaria para el componente de biblioteca
  - 13.3.3 Prueba unitaria para el gancho personalizado de la biblioteca
- 13.4 Libro de cuentos
  - 13.4.1 Instalación y configuración de Storybook
  - 13.4.2 Historia del botón en Storybook
- 13.5 Resumen
14 Administración centralizada con Redux
- 14.1 La arquitectura Flux
  - 14.1.1 El almacén central de datos: el almacén
  - 14.1.2 Visualización de los datos en las vistas
  - 14.1.3 Acciones: Descripción de los cambios
  - 14.1.4 El despachador: la interfaz entre las acciones y la tienda
- 14.2 Instalación de Redux
- 14.3 Configuración del almacén central
  - 14.3.1 Depuración con las herramientas de desarrollo de Redux
- 14.4 Manejo de cambios en el almacén utilizando reductores
  - 14.4.1 La sección Libros
  - 14.4.2 Integración de «BooksSlice»
- 14.5 Vinculación de componentes y la tienda
  - 14.5.1 Visualización de los datos de la tienda
  - 14.5.2 Selectores
  - 14.5.3 Implementación de selectores mediante Reselect
- 14.6 Descripción de cambios con acciones
- 14.7 Creación y edición de registros de datos
- 14.8 Resumen
15 Manejo de la asincronía y los efectos secundarios en Redux
- 15.1 Middleware en Redux
- 15.2 Redux con Redux Thunk
  - 15.2.1 Integración manual de Redux Thunk
  - 15.2.2 Lectura de datos del servidor
  - 15.2.3 Eliminación de registros de datos
  - 15.2.4 Creación y modificación de registros de datos
- 15.3 Generadores: Saga Redux
  - 15.3.1 Instalación e integración de Redux Saga
  - 15.3.2 Carga de datos desde el servidor
  - 15.3.3 Eliminación de datos existentes
  - 15.3.4 Creación y modificación de registros de datos con Redux Saga
- 15.4 Gestión de estado con RxJS: Redux Observable
  - 15.4.1 Instalación e integración de Redux Observable
  - 15.4.2 Acceso de lectura al servidor mediante Redux Observable
  - 15.4.3 Eliminación mediante Redux Observable
  - 15.4.4 Creación y edición de registros de datos con Redux Observable
- 15.5 Token web JSON para autenticación
- 15.6 Resumen
16 Comunicación con el servidor mediante GraphQL y Apollo Client
- 16.1 Introducción a GraphQL
  - 16.1.1 Las características de GraphQL
  - 16.1.2 Las desventajas de GraphQL
  - 16.1.3 Los principios de GraphQL
- 16.2 Apollo: un cliente GraphQL para React
  - 16.2.1 Instalación e integración en la aplicación
  - 16.2.2 Acceso de lectura al servidor GraphQL
  - 16.2.3 Estados de una solicitud
  - 16.2.4 Compatibilidad con tipos en el cliente Apollo
  - 16.2.5 Eliminación de registros de datos
- 16.3 Herramientas de desarrollo de Apollo Client
- 16.4 Administración local del estado mediante Apollo
  - 16.4.1 Inicialización del estado local
  - 16.4.2 Uso del estado local
- 16.5 Autenticación
- 16.6 Resumen
17 Internacionalización
- 17.1 Uso de react-i18next
  - 17.1.1 Carga de archivos de idioma desde el backend
  - 17.1.2 Uso del idioma del navegador
  - 17.1.3 Ampliación de la navegación con cambio de idioma
- 17.2 Uso de marcadores de posición
- 17.3 Formateo de valores
  - 17.3.1 Formato de números y monedas
  - 17.3.2 Formateo de valores de fecha
- 17.4 Singular y plural
- 17.5 Resumen
18 aplicaciones React universales con renderización del lado del servidor
- 18.1 ¿Cómo funciona el renderizado del lado del servidor?
- 18.2 Implementación del renderizado del lado del servidor
  - 18.2.1 Inicialización y configuración de la aplicación del servidor
  - 18.2.2 Implementación de la aplicación del lado del cliente
  - 18.2.3 Dinámica en la representación del lado del servidor
- 18.3 Renderización del lado del servidor con Next.js
  - 18.3.1 Inicialización de una aplicación Next.js
  - 18.3.2 Implementación del componente de página
  - 18.3.3 Implementación del lado del servidor
  - 18.3.4 Rutas API en Next.js
- 18.4 Resumen
19 Rendimiento
- 19.1 El gancho de devolución de llamada
- 19.2 Componentes puros
- 19.3 «React.memo»
- 19.4 «React.lazy»: «Suspense» para la división de código
  - 19.4.1 Carga diferida en una aplicación
  - 19.4.2 Carga diferida con React Router
- 19.5 Suspense para la obtención de datos
  - 19.5.1 Instalación y uso de React Query
  - 19.5.2 React Query y Suspense
  - 19.5.3 Patrones de concurrencia
- 19.6 Mesas virtuales
- 19.7 Resumen
20 aplicaciones web progresivas
- 20.1 Características de una aplicación web progresiva
- 20.2 Inicialización de la aplicación
- 20.3 Facilidad de instalación
  - 20.3.1 Entrega segura de una solicitud
  - 20.3.2 El manifiesto de la aplicación web
  - 20.3.3 Trabajador de servicio en la aplicación React
  - 20.3.4 Instalación de la aplicación
  - 20.3.5 Preguntar a los usuarios
- 20.4 Capacidad sin conexión
  - 20.4.1 Integración de Workbox
  - 20.4.2 Manejo de datos dinámicos
- 20.5 Herramientas para el desarrollo
- 20.6 Resumen
21 aplicaciones nativas con React Native
- 21.1 La estructura de React Native
- 21.2 Instalación de React Native
  - 21.2.1 Estructura del proyecto
  - 21.2.2 Inicio de la aplicación
- 21.3 Visualización de una lista general
  - 21.3.1 Vista de lista estática
  - 21.3.2 Estilo en React Native
  - 21.3.3 Campo de búsqueda para el componente «Lista»
  - 21.3.4 Comunicación con el servidor
- 21.4 Depuración en el entorno simulado de React Native
- 21.5 Edición de registros de datos
  - 21.5.1 Implementación del componente «Formulario»
- 21.6 Publicación
- 21.7 Resumen
El autor
Índice

React

React.js makes developing dynamic user interfaces faster and easier than ever. Learn how to get the most out of the library with this comprehensive guide! Start with the basics: what React is and how it works. Then follow practical code examples to build an application, from styling with CSS to maximizing app performance. Whether you’re new to JavaScript or you’re an advanced developer, you’ll find everything you need to build your frontend with React!

Build user interfaces with React.js, a frontend JavaScript library
Work with classes, hooks, type systems, CSS, forms, and more
Grow your skills in areas such as testing, debugging, server communication, and server-side rendering

You'll learn about:

Getting Started with React:
New to React? Learn the basics of how the library is used. Take your first steps into the development process and explore the structure of an application.
Hands-On Code Examples:
See React and its component-based architecture in action! Walk through detailed example programs and get practical tips for building applications.
Advanced Development:
Working with larger, more complex applications? Find the resources you need for using Redux, automated tests, i18n, server communication, and more.

Key Highlights:

Class components
Hook APIs
Type safety and TypeScript
CSS and inline styling
Testing and security
Forms
Component libraries
Application navigation
Redux
GraphQL and Apollo
Next.js
Progressive web apps

View Full Table of Contents

Foreword
Preface
- Structure of the Book
- Download the Code Samples
- Acknowledgments
1 Getting Started with React
- 1.1 What Is React?
  - 1.1.1 Single-Page Applications
  - 1.1.2 The Story of React
- 1.2 Why React?
- 1.3 The Most Important Terms and Concepts of the React World
  - 1.3.1 Components and Elements
  - 1.3.2 Data Flow
  - 1.3.3 The Renderer
  - 1.3.4 The Reconciler
- 1.4 A Look into the React Universe
  - 1.4.1 State Management
  - 1.4.2 The Router
  - 1.4.3 Material UI
  - 1.4.4 Jest
- 1.5 Thinking in React
  - 1.5.1 Decomposing the UI into a Component Hierarchy
  - 1.5.2 Implementing a Static Version in React
  - 1.5.3 Defining the Minimum UI State
  - 1.5.4 Defining the Location of the State
  - 1.5.5 Modeling the Inverse Data Flow
- 1.6 Code Examples
- 1.7 Summary
2 The First Steps in the Development Process
- 2.1 Quick Start
  - 2.1.1 Initialization
  - 2.1.2 TypeScript Support
- 2.2 Playgrounds for React
  - 2.2.1 CodePen: A Playground for Web Development
  - 2.2.2 A React Project on CodePen
- 2.3 Local Development
- 2.4 Getting Started with Developing in React
  - 2.4.1 Requirements
  - 2.4.2 Installing Create React App
  - 2.4.3 Alternatives to Create React App
  - 2.4.4 React Scripts
  - 2.4.5 Server Communication in Development Mode
  - 2.4.6 Encrypted Communication during Development
- 2.5 The Structure of the Application
- 2.6 Troubleshooting in a React Application
- 2.7 Building the Application
- 2.8 Summary
3 Basic Principles of React
- 3.1 Preparation
  - 3.1.1 Tidying Up the Application
- 3.2 Getting Started with the Application
  - 3.2.1 The index.jsx File: Renderingthe Application
  - 3.2.2 The App.jsx File: The Root Component
- 3.3 Function Components
  - 3.3.1 One Component per File
- 3.4 JSX: Defining Structures in React
  - 3.4.1 Expressions in JSX
  - 3.4.2 Iterations: Loops in Components
  - 3.4.3 Conditions in JSX
- 3.5 Props: Information Flow in an Application
  - 3.5.1 Props and Child Components
  - 3.5.2 Type Safety with PropTypes
- 3.6 Local State
- 3.7 Event Binding: Responding to User Interactions
  - 3.7.1 Responding to Events
  - 3.7.2 Using Event Objects
- 3.8 Immutability
  - 3.8.1 Immer in a React Application
- 3.9 Summary
4 A Look Behind the Scenes: Further Topics
- 4.1 The Lifecycle of a Component
- 4.2 The Lifecycle of a Function Component with the Effect Hook
  - 4.2.1 Mount: The Mounting of a Component
  - 4.2.2 Update: Updating the Component
  - 4.2.3 Unmount: Tidying Up at the End of the Lifecycle
- 4.3 Server Communication
  - 4.3.1 Server Implementation
  - 4.3.2 Server Communication via the Fetch API
  - 4.3.3 Things to Know about Server Communication
  - 4.3.4 Server Communication with Axios
- 4.4 Container Components
  - 4.4.1 Swapping Out Logic to a Container Component
  - 4.4.2 Integrating the Container Component
  - 4.4.3 Implementing the Presentational Component
- 4.5 Higher-Order Components
  - 4.5.1 A Simple Higher-Order Component
  - 4.5.2 Integrating a Higher-Order Component in the BooksList Component
  - 4.5.3 Integrating the Higher-Order Component
- 4.6 Render Props
  - 4.6.1 Alternative Names for Render Props
  - 4.6.2 Integrating the Render Props into the Application
- 4.7 Context
  - 4.7.1 The Context API
  - 4.7.2 Using the Context API in the Sample Application
- 4.8 Fragments
- 4.9 Summary
5 Class Components
- 5.1 Class Components in React
- 5.2 Basic Structure of a Class Component
- 5.3 Props in a Class Component
  - 5.3.1 Defining Prop Structures Using PropTypes
  - 5.3.2 Default Values for Props
- 5.4 State: The State of the Class Component
  - 5.4.1 Initializing the State via the State Property of the Class
  - 5.4.2 Initializing the State in the Constructor
- 5.5 The Component Lifecycle
  - 5.5.1 Constructor
  - 5.5.2 “getDerivedStateFromProps”
  - 5.5.3 “render”
  - 5.5.4 “componentDidMount”
  - 5.5.5 “shouldComponentUpdate”
  - 5.5.6 “getSnapshotBeforeUpdate”
  - 5.5.7 “componentDidUpdate”
  - 5.5.8 “componentWillUnmount”
  - 5.5.9 Unsafe Hooks
- 5.6 Error Boundaries
  - 5.6.1 Logging Errors Using “componentDidCatch”
  - 5.6.2 Alternative Representation in Case of an Error with “getDerivedStateFromError”
- 5.7 Using the Context API in a Class Component
- 5.8 Differences between Function and Class Components
  - 5.8.1 State
  - 5.8.2 Lifecycle
- 5.9 Summary
6 The Hooks API of React
- 6.1 A First Overview
  - 6.1.1 The Three Basic Hooks
  - 6.1.2 Other Components of the Hooks API
- 6.2 “useReducer”: The Reducer Hook
  - 6.2.1 The Reducer Function
  - 6.2.2 Actions and Dispatching
  - 6.2.3 Asynchronicity in the Reducer Hook
- 6.3 “useCallback”: Memoizing Functions
- 6.4 “useMemo”: Memoizing Objects
- 6.5 “useRef”: References and Immutable Values
  - 6.5.1 Form Handling Using the Ref Hook
  - 6.5.2 Caching Values Using the Ref Hook
- 6.6 “useImperativeHandle”: Controlling Forward Refs
  - 6.6.1 Forward Refs
  - 6.6.2 The Imperative Handle Hook
- 6.7 “useLayoutEffect”: The Synchronous Alternative to “useEffect”
- 6.8 “useDebugValue”: Debugging Information in React Developer Tools
- 6.9 “useDeferredValue”: Performing Updates According to Priority
- 6.10 “useTransition”: Lowering the Priority of Operations
- 6.11 “useId”: Creating Unique Identifiers
- 6.12 Library Hooks
  - 6.12.1 “useSyncExternalStore”
  - 6.12.2 “useInsertionEffect”
- 6.13 Custom Hooks
- 6.14 Rules of Hooks: Things to Consider
  - 6.14.1 Rule #1: Execute Hooks Only at the Top Level
  - 6.14.2 Rule #2: Hooks May Only Be Used in Function Components or Custom Hooks
- 6.15 Changing over to Hooks
- 6.16 Summary
7 Type Safety in React Applications with TypeScript
- 7.1 What Is the Benefit of a Type System?
- 7.2 The Different Type Systems
- 7.3 Type Safety in a React Application with Flow
  - 7.3.1 Integration into a React Application
  - 7.3.2 The Major Features of Flow
  - 7.3.3 Flow in React Components
- 7.4 Using TypeScript in a React Application
  - 7.4.1 Integrating TypeScript in a React Application
  - 7.4.2 Configuration of TypeScript
  - 7.4.3 The Major Features of TypeScript
  - 7.4.4 Type Definitions: Information about Third-Party Software
- 7.5 TypeScript and React
  - 7.5.1 Adding TypeScript to an Existing Application
  - 7.5.2 Basic Features
  - 7.5.3 Function Components
  - 7.5.4 Context
  - 7.5.5 Class Components
- 7.6 Summary
8 Styling React Components
- 8.1 CSS Import
  - 8.1.1 Advantages and Disadvantages of CSS Import
  - 8.1.2 Dealing with Class Names
  - 8.1.3 Improved Handling of Class Names via the “classnames” Library
  - 8.1.4 Using Sass as CSS Preprocessor
- 8.2 Inline Styling
- 8.3 CSS Modules
- 8.4 CSS in JavaScript Using Emotion
  - 8.4.1 Installing Emotion
  - 8.4.2 Using the “css” Prop
  - 8.4.3 The Styled Approach of Emotion
  - 8.4.4 Pseudoselectors in Styled Components
  - 8.4.5 Dynamic Styling
  - 8.4.6 Other Features of Styled Components
- 8.5 Tailwind
- 8.6 Summary
9 Securing a React Application through Testing
- 9.1 Getting Started with Jest
  - 9.1.1 Installation and Execution
  - 9.1.2 Organization of the Tests
  - 9.1.3 Jest: The Basic Principles
  - 9.1.4 Structure of a Test: Triple A
  - 9.1.5 The Matchers of Jest
  - 9.1.6 Grouping Tests: Test Suites
  - 9.1.7 Setup and Teardown Routines
  - 9.1.8 Skipping Tests and Running Them Exclusively
  - 9.1.9 Handling Exceptions
  - 9.1.10 Testing Asynchronous Operations
- 9.2 Testing Helper Functions
- 9.3 Snapshot Testing
- 9.4 Testing Components
  - 9.4.1 Testing the “BooksListItem” Component
  - 9.4.2 Testing the Interaction
- 9.5 Dealing with Server Dependencies
  - 9.5.1 Simulating Errors during Communication
- 9.6 Summary
10 Forms in React
- 10.1 Uncontrolled Components
  - 10.1.1 Handling References in React
- 10.2 Controlled Components
- 10.3 File Uploads
- 10.4 Form Validation Using React Hook Form
  - 10.4.1 Form Validation Using React Hook Form
  - 10.4.2 Form Validation Using a Schema
  - 10.4.3 Styling the Form
  - 10.4.4 Testing the Form Validation Automatically
- 10.5 Summary
11 Component Libraries in a React Application
- 11.1 Installing and Integrating Material UI
- 11.2 List Display with the “Table” Component
  - 11.2.1 Filtering the List in the Table
  - 11.2.2 Sorting the Table
- 11.3 Grids and Breakpoints
- 11.4 Icons
- 11.5 Deleting Data Records
  - 11.5.1 Preparing a Delete Operation
  - 11.5.2 Implementing a Confirmation Dialog
  - 11.5.3 Deleting Data Records
- 11.6 Creating New Data Records
  - 11.6.1 Preparing the Creation of Data Records
  - 11.6.2 Implementation of the “Form” Component
  - 11.6.3 Integration of the Form Dialog
- 11.7 Editing Data Records
- 11.8 Summary
12 Navigating Within an Application: The Router
- 12.1 Installation and Integration
- 12.2 Navigating in the Application
  - 12.2.1 The Best Route Is Always Activated
  - 12.2.2 A Navigation Bar for the Application
  - 12.2.3 Integrating the Navigation Bar
- 12.3 “NotFound” Component
- 12.4 Testing the Routing
- 12.5 Conditional Redirects
- 12.6 Dynamic Routes
  - 12.6.1 Defining Subroutes
- 12.7 Summary
13 Creating Custom React Libraries
- 13.1 Creating a Custom Component Library
  - 13.1.1 Initializing the Library
  - 13.1.2 The Structure of the Library
  - 13.1.3 Hooks in the Library
  - 13.1.4 Building the Library
- 13.2 Integrating the Library
  - 13.2.1 Regular Installation of the Package
- 13.3 Testing the Library
  - 13.3.1 Preparing the Testing Environment
  - 13.3.2 Unit Test for the Library Component
  - 13.3.3 Unit Test for the Custom Hook of the Library
- 13.4 Storybook
  - 13.4.1 Installing and Configuring Storybook
  - 13.4.2 Button Story in Storybook
- 13.5 Summary
14 Central State Management Using Redux
- 14.1 The Flux Architecture
  - 14.1.1 The Central Data Store: The Store
  - 14.1.2 Displaying the Data in the Views
  - 14.1.3 Actions: The Description of Changes
  - 14.1.4 The Dispatcher: The Interface between Actions and the Store
- 14.2 Installing Redux
- 14.3 Configuring the Central Store
  - 14.3.1 Debugging Using the Redux Dev Tools
- 14.4 Handling Changes to the Store Using Reducers
  - 14.4.1 The Books Slice
  - 14.4.2 Integration of “BooksSlice”
- 14.5 Linking Components and the Store
  - 14.5.1 Displaying the Data from the Store
  - 14.5.2 Selectors
  - 14.5.3 Implementing Selectors Using Reselect
- 14.6 Describing Changes with Actions
- 14.7 Creating and Editing Data Records
- 14.8 Summary
15 Handling Asynchronicity and Side Effects in Redux
- 15.1 Middleware in Redux
- 15.2 Redux with Redux Thunk
  - 15.2.1 Manual Integration of Redux Thunk
  - 15.2.2 Reading Data from the Server
  - 15.2.3 Deleting Data Records
  - 15.2.4 Creating and Modifying Data Records
- 15.3 Generators: Redux Saga
  - 15.3.1 Installation and Integration of Redux Saga
  - 15.3.2 Loading Data from the Server
  - 15.3.3 Deleting Existing Data
  - 15.3.4 Creating and Modifying Data Records Using Redux Saga
- 15.4 State Management Using RxJS: Redux Observable
  - 15.4.1 Installing and integrating Redux Observable
  - 15.4.2 Read Access to the Server Using Redux Observable
  - 15.4.3 Deleting Using Redux Observable
  - 15.4.4 Creating and Editing Data Records Using Redux Observable
- 15.5 JSON Web Token for Authentication
- 15.6 Summary
16 Server Communication Using GraphQL and the Apollo Client
- 16.1 Introduction to GraphQL
  - 16.1.1 The Characteristics of GraphQL
  - 16.1.2 The Disadvantages of GraphQL
  - 16.1.3 The Principles of GraphQL
- 16.2 Apollo: A GraphQL Client for React
  - 16.2.1 Installation and Integration into the Application
  - 16.2.2 Read Access to the GraphQL Server
  - 16.2.3 States of a Request
  - 16.2.4 Type Support in the Apollo Client
  - 16.2.5 Deleting Data Records
- 16.3 Apollo Client Devtools
- 16.4 Local State Management Using Apollo
  - 16.4.1 Initializing the Local State
  - 16.4.2 Using the Local State
- 16.5 Authentication
- 16.6 Summary
17 Internationalization
- 17.1 Using react-i18next
  - 17.1.1 Loading Language Files from the Backend
  - 17.1.2 Using the Language of the Browser
  - 17.1.3 Extending the Navigation with Language Switching
- 17.2 Using Placeholders
- 17.3 Formatting Values
  - 17.3.1 Formatting Numbers and Currencies
  - 17.3.2 Formatting Date Values
- 17.4 Singular and Plural
- 17.5 Summary
18 Universal React Apps with Server-Side Rendering
- 18.1 How Does Server-Side Rendering Work?
- 18.2 Implementing Server-Side Rendering
  - 18.2.1 Initializing and Configuring the Server Application
  - 18.2.2 Implementing the Client-Side Application
  - 18.2.3 Dynamics in Server-Side Rendering
- 18.3 Server-Side Rendering Using Next.js
  - 18.3.1 Initializing a Next.js Application
  - 18.3.2 Implementing the Page Component
  - 18.3.3 Implementing the Server Side
  - 18.3.4 API Routes in Next.js
- 18.4 Summary
19 Performance
- 19.1 The Callback Hook
- 19.2 Pure Components
- 19.3 “React.memo”
- 19.4 “React.lazy”: “Suspense” for Code Splitting
  - 19.4.1 Lazy Loading in an Application
  - 19.4.2 Lazy Loading with React Router
- 19.5 Suspense for Data Fetching
  - 19.5.1 Installing and Using React Query
  - 19.5.2 React Query and Suspense
  - 19.5.3 Concurrency Patterns
- 19.6 Virtual Tables
- 19.7 Summary
20 Progressive Web Apps
- 20.1 Features of a Progressive Web App
- 20.2 Initializing the Application
- 20.3 Installability
  - 20.3.1 Secure Delivery of an Application
  - 20.3.2 The Web App Manifest
  - 20.3.3 Service Worker in the React Application
  - 20.3.4 Installing the Application
  - 20.3.5 Asking the Users
- 20.4 Offline Capability
  - 20.4.1 Integrating Workbox
  - 20.4.2 Handling Dynamic Data
- 20.5 Tools for Development
- 20.6 Summary
21 Native Apps with React Native
- 21.1 The Structure of React Native
- 21.2 Installing React Native
  - 21.2.1 Project Structure
  - 21.2.2 Starting the Application
- 21.3 Displaying an Overview List
  - 21.3.1 Static List View
  - 21.3.2 Styling in React Native
  - 21.3.3 Search Field for the “List” Component
  - 21.3.4 Server Communication
- 21.4 Debugging in the Simulated React Native Environment
- 21.5 Editing Data Records
  - 21.5.1 Implementing the “Form” Component
- 21.6 Publishing
- 21.7 Summary
The Author
Index

ℹ️ ¿Cómo adquirir este libro?

Este producto tiene un precio especial bajo consulta. Puedes iniciar tu pedido o aclarar cualquier duda en el botón Consultar precio de la página.

También hemos preparado una guía paso a paso para explicarte cómo solicitar tu cotización fácilmente.

Ver paso a paso aquí →

Descargo de responsabilidad

SAP, otros productos SAP y servicios mencionados aquí así como sus respectivos logos son marca registrada de SAP SE (o una compañía afiliada de SAP) en Alemania y otros países. Nuestra compañía no está afiliada con SAP SE ni con ninguna de sus compañías afiliadas incluyendo pero no limitada a: Sybase, Business Objects, Hybris, Ariba y SuccessFactors. Todos los otros nombres, marcas, logos, etc. son marcas o servicios registrados de sus respectivos propietarios.

Inicio > Libros SAP > Libros Multilingüe > React - La guía completa

React - La guía completa

Name: React - La guía completa
Brand: SAP
SKU: BOOK-SAPPRESS-EBOOK-2024-9781493224418
Availability: InStock

Garantía

Recibe el producto que esperabas o te devolvemos tu dinero

¿Desea ver una muestra del curso o libro?

Necesita una muestra del curso o libro, solicítela en el chat de abajo y se la brindamos con gusto.

1 mes de $0.00 USD sin intereses		Total $0.00 USD
2 meses de $0.00 USD sin intereses		Total $0.00 USD
3 meses de $0.00 USD sin intereses		Total $0.00 USD
4 meses de $0.00 USD sin intereses		Total $0.00 USD
5 meses de $0.00 USD sin intereses		Total $0.00 USD
6 meses de $0.00 USD sin intereses		Total $0.00 USD

React

Aprenderás sobre:

Aspectos Destacados:

React

You'll learn about:

Key Highlights:

ℹ️ ¿Cómo adquirir este libro?

Descargo de responsabilidad

React - La guía completa

Productos relacionados