Sinopsis

El desarrollo Web es uno de los entornos más importantes de la programación y sin duda uno de los más cambiantes. El 'front-end', la parte visible de las aplicaciones, se ha convertido en una jungla donde distintos 'frameworks' de desarrollo compiten por ofrecer la mejor solución en la creación de nuevos proyectos.

Nacido en el seno de Facebook pero puesto a disposición de todo el mundo, React está siendo utilizado por las compañías más importantes como Airbnb, Apple, Dropbox, Instagram, Netflix, Twitter, Tesla, Uber, etc. y se ha convertido en una de las apuestas más relevantes y recomendables de los últimos tiempos ya que cuenta con un completo ecosistema de módulos, herramientas y componentes capaces de ayudar a construir casi cualquier desarrollo avanzado con relativamente poco esfuerzo.

React se distingue por ser un 'framework' que permite la organización de una interfaz Web en componentes reutilizables, aportando además una gestión más ágil de los elementos HTML mediante el uso de un DOM virtual. Facilita, además, desarrollar aplicaciones para móviles mediante la librería React Native cuyo aprendizaje resulta trivial una vez que se asimilan los principios básicos que rigen esta completa librería de JavaScript.

Con esta obra práctica el autor quiere ofrecer una estupenda alternativa para el desarrollo de interfaces de usuario, aplicaciones Web completas del lado del cliente e incluso 'apps' para Android, iOS y productos VR.

Índice

Sobre el autor

Introducción
A quién va dirigido este libro
Organización del libro
- Código fuente

Capítulo 1. JavaScript
Sintaxis básica
ES6 y más allá

Capítulo 2. Primeros pasos con React
React.js
Instalación de entorno
- Preparación
- Instalación estándar de proyectos
- Desarrollo online
Hello World
Plugins React

Capítulo 3. React básico
JSX
- ¿Qué es JSX?
- Normas básicas
- Comentarios
- Variables
- Condicionales
- Bucles
- JavaScript
- Eventos
- Hojas de estilos
Propiedades y estado
- Propiedades
- Estado
- Variación de sintaxis
Ciclo de vida
- constructor
- componentWillMount (dep)
- render
- componentDidMount
- ComponentWillReceiveProps (dep)
- getDerivedStateFromProps
- shouldComponentUpdate
- componentWillUpdate (dep)
- getSnapshotBeforeUpdate
- componentDidUpdate
- componentWillUmount
- El método setState
Multicomponentes
- Propagación hacia abajo
- Llamada a funciones hacia arriba
- Ejemplo
- Versión mínima de componente
React Fragments
Formularios
- Tipos de campos
- Campos controlados
- Campos de selección múltiple
- Campos controlados más completos
- Acceso a los campos por ref
- Un formulario no controlado más completo
- Validación
- Librerías de gestión de Formularios
React Router
- Un ejemplo
- Configuración de rutas
- Paso de parámetros
- Redirección por programación
- 404: rutas a ninguna parte
Internacionalización
- Detección del lenguaje
- Traducción con i18next
Material-UI
React Hooks
React Context

Capítulo 4. Redux
Elementos de Redux
- Acciones
- Reducer
- Store
- Componentes React
Ejemplo básico
Un CRUD completo
Acceso a API
- Modificaciones
- index.js: aplicando middleware
- La API o back-end
Mútiples estados y reducers
Un proyecto más elaborado
- Índice y App.js
- API
- Acciones Redux
- Reducers Redux
- Componentes
Normalización
- Un ejemplo simple
- Normalizr
- Immutable.js

Capítulo 5. React Native
Preparando el entorno
- Elementos básicos del proyecto
- Puesta en marcha
- Depuración
Hello React Native
- Componentes React Native
- Views
- Text
- Images
- Button
- Touchables
- Icon
- Lists
- Formularios
- Slider
Styles
- Flexbox
AsyncStorage
Una aplicación de ejemplo

Capítulo 6. Testing
Testing de aplicaciones
La aplicación
Testing unitario
- Test unitarios en React
Testing end-to-end: Cypress
- Cypress
- Test e2e de la aplicación

Capítulo 7. React con TypeScript
Motivación
Introducción a TypeScript
- Instalación de entorno
- Hello World
- Variables
- Estructuras de control
- Bucles
- Funciones
- Clases
- Interfaces
- Módulos
- Tipos
React con TypeScript

Capítulo 8. Patrones y buenas prácticas
Introducción
Componente Function
Desestructuración de properties
Expandir atributos
Fusionar properties desectructuradas con otros valores
Renderizado condicional
Children types
Array as children
Render prop function children
Children pass-through
Switch de eventos
State hoisting
Controlled input
Componente proxy
Componente de estilos
Componente de disposición o layout
Componente container
HOC: Higher-order Component
Event Bus
Server Side React

Apéndice A. Utilidades
npm
- Inicio de un proyecto con npm
- Instalación de paquetes
- Actualización
- Desinstalación
- Ejecución de scripts
yarn
Webpack
- Loaders
- Plugins
- Optimizaciones
- React

Apéndice B. Referencias
Páginas Web
Bibliografía
Cursos
- Cursos gratuitos
- Cursos de pago
Artículos

Índice alfabético