Prefacio

El desarrollo de ForewordWeb se ve a menudo como un mundo loco en el que la forma

en que desarrollas el software es lanzando hacks sobre hackers. Creo que React se
desprende de este patrón y, en cambio, se ha diseñado desde el primer principio, lo
que le brinda una base sólida sobre la cual construir. ChristopherChedeau - Front-end
Engineerat Facebook Una importante fuente de errores para aplicaciones front-end fue
la sincronización entre el modelo de datos y el DOM. Es muy difícil asegurarse de que
siempre que los datos cambien, todo en la interfaz de usuario se actualice con él. La
primera innovación de Rect fue introducir una representación de JavaScript pura del
DOM e implementar la difusión en la zona del usuario y luego usar eventos que envían
comandos simples: crear, actualizar, eliminar. Con Reaccionar, al volver a renderizar
todo conceptualmente cada vez que se modifica algo, no solo tiene el código seguro de
forma predeterminada, sino que también es un trabajo sin necesidad de escribir la ruta
de creación: las actualizaciones están disponibles para usted. Los agricultores tienen,
durante mucho tiempo, han sido incompatibles debido a la gran área de superficie API
de lo que tienen que admitir para que el DOM funcione. React no solo proporciona una
excelente manera de resolver las diferencias de navegador, sino que permite casos de
uso que nunca antes fueron posibles para una biblioteca de aplicaciones para usuario,
como la representación del lado del servidor y la capacidad de implementar objetivos
como iOS nativo, Android e incluso componentes de hardware. .Pero lo más importante
de React y la razón principal por la que debes leer este libro: no solo lo usarás para
hacer grandes aplicaciones para tus usuarios, también te hará un mejor desarrollador.
Las bibliotecas van y vienen todo el tiempo y es probable que React no sea una
excepción. Lo que lo hace especial es que te enseña conceptos que pueden
reutilizarse a lo largo de toda tu carrera. Serás mejor en JavaScript porque React no
viene con un sistema de plantillas. En su lugar, React te empuja a usar todo el poder de
JavaScript para construir tu interfaz de usuario. Vamos a practicar el uso de partes de
la programación funcional, el software y el filtro, y también se anima a utilizar las
funciones más recientes de JavaScript (incluido ES6). Al no abstraer la gestión de
datos, React lo obligará a pensar en cómo diseñar su aplicación y lo alentará a
considerar conceptos como la inmutabilidad. Estoy muy orgulloso de que la comunidad
construida alrededor de React no tenga miedo de "repensar las mejores prácticas". Los
desafíos de la comunidad El status quo en muchas áreas. Mi consejo para ti es que
leas este excelente ¡GUAU! eBook www.wowebook.org

Prólogo3book para aprender y entender los fundamentos de React. Aprender nuevos

conceptos puede parecer extraño, pero “dale 5 minutos” y practícalos hasta que te
sientas cómodo. Luego, trata de romper las reglas. No hay una mejor manera de crear
software y React no es una excepción. Reactivar en realidad abarca este hecho al
proporcionarle escotillas de escape cuando quiera hacer cosas fuera de React-way.
Hágase una idea loca y quién sabe, tal vez usted sea ¡Voy a inventar el sucesor de
reaccionar!

Cómo sacar el máximo provecho de este libro

Visión General

Este libro pretende ser el recurso más útil para aprender React. Para cuando no estés
leyendo este libro, tú (y tu equipo) tendrán todo lo que necesitas para construir
aplicaciones confiables y poderosas. El núcleo de Reacción es delgado y poderoso.
Después de los primeros capítulos, tendrá una sólida comprensión de los fundamentos
de Reacción y podrá crear una amplia gama de aplicaciones web enriquecidas e
interactivas con el marco. Sin embargo, más allá del núcleo de React, hay muchas
herramientas en su ecosistema que pueden serle útiles. aplicaciones de producción
para la construcción. Cosas como el enrutamiento del lado del cliente entre páginas, la
administración del estado complejo y la interacción pesada de la API a escala. Este
libro consta de dos partes. En la Parte I, cubrimos todos los aspectos fundamentales
con un enfoque progresivo basado en el ejemplo. Creará sus primeras aplicaciones,
aprenderá a escribir componentes, iniciará la interacción con el usuario, administrará
formas ricas e incluso interactuará con los servidores. Fijaremos la primera parte
explorando el funcionamiento interno de la aplicación Create React (la herramienta de
Facebook para ejecutar aplicaciones React), escribiendo pruebas de unidades
automatizadas y construyendo una aplicación de varias páginas que utiliza
enrutamiento del lado del cliente. La Parte II de este libro se mueve hacia conceptos
más avanzados que verá utilizados en aplicaciones de gran tamaño y producción.
Estos conceptos exploran estrategias para la arquitectura de datos, el transporte y la
administración: Redux es un paradigma de administración estatal basado en la
arquitectura Flux de Facebook. Redux proporciona una estructura para grandes árboles
de estado y le permite desacoplar la interacción del usuario en su aplicación de
statechanges. GraphQL es una alternativa a la API REST poderosa y con tipo, donde el
cliente describe los datos que necesita. También cubrimos cómo escribir sus propios
servidores GraphQL para sus propios datos. .Relayis el pegamento entre GraphQL y
React. Relay es una biblioteca de obtención de datos que lo hace fácil de escribir
aplicaciones de gran flexibilidad y rendimiento sin un montón de código de obtención de
datos. Por último, en el último capítulo, hablaremos sobre cómo escribir aplicaciones
móviles nativas y multiplataforma usando Rectivo nativo. Hay algunas pautas que
queremos darle para aprovechar al máximo este libro. Primero, sepa que no necesita
leer este libro de forma lineal de principio a fin. Sin embargo, hemos ordenado el
contenido del libro. En cierto modo, nos sentimos en el orden en que deberías aprender
los conceptos.

Lo alentamos a que aprenda todos los conceptos de la Parte I del libro antes de
sumergirse en los conceptos de la Parte II. En segundo lugar, tenga en cuenta que este
paquete es más que un libro: es un curso completo con código de examen para cada
capítulo. A continuación, le diremos: • cómo abordar los ejemplos de código y • cómo
obtener ayuda si algo va mal

Ejecución de ejemplos de código

Este libro viene con una biblioteca de ejemplos de código ejecutables. El código está
disponible para descargar desde el mismo lugar donde compró este libro. Si compró
este libro en Amazon, debería haber recibido un correo electrónico con instrucciones.
Si tiene algún problema para encontrar o descargar los ejemplos de códigos, envíenos
un correo electrónico a: atreact@fullstack.io.Utilizamos el programa npm6to para ver
todos los ejemplos en este libro. Puedes arrancar la mayoría de las aplicaciones con
los siguientes dos comandos:

npm install

npm start

Si no está familiarizado con npm, explicamos cómo instalarlo en la sección superior de

configuración en el primer capítulo

Después de que comiencen a ejecutar npm, verá algunos resultados en su pantalla que
le indicarán qué URL debe abrir para ver su aplicación. Algunas aplicaciones requieren
algunos comandos más para la configuración. Si alguna vez tiene dudas sobre cómo
ejecutar una aplicación de ejemplo específica, verifique el REEMPLAZO .mdin el
directorio de ese proyecto. Cada proyecto de muestra contiene aREADME.md que le
dará las instrucciones que necesita para ejecutar cada aplicación.

Configuraciones de proyectos

Los primeros dos proyectos comienzan con una configuración React simple que nos
permite escribir rápidamente las Aplicaciones de Reacción. Desde allí, con un par de
excepciones, cada proyecto en este libro se creó utilizando la aplicación Create React.
La aplicación Create React se basa en Webpack, una herramienta que ayuda a
procesar y agrupar varios archivos de JavaScript, CSS, HTML e imágenes. Exploramos
la aplicación Create React en profundidad en el capítulo "Uso de Webpack con la
aplicación Create React". Sin embargo, la aplicación Create React no es un requisito
para usar React. Es simplemente envuelto alrededor de Webpack (y algunas otras
herramientas) lo que hace que sea fácil comenzar.

Bloques de código y contexto

Casi todos los bloques de código de este libro se extraen de un código de código
ejecutable que puede encontrar en el código de ejemplo. Por ejemplo, aquí hay un
bloque de código extraído del primer capítulo:

Observe que el encabezado de este bloque de código indica la ruta al archivo que
contiene este código:

voting_-app/public/js/app-2.js.

Si alguna vez siente que le falta el contexto para un ejemplo de código, abra el archivo
de código completo con su editor de texto favorito. Este libro está escrito con la
expectativa de que también verá el código de ejemplo junto con el manuscrito. Por
ejemplo , a menudo necesitamos bibliotecas para que nuestro código se ejecute. En los
primeros capítulos de el libro mostramos estas declaraciones de importación, porque
no está claro de dónde provienen las bibliotecas. Sin embargo, los últimos capítulos del
libro son más avanzados y se centran en los conceptos clave en lugar de repetir el
código repetitivo que se trató anteriormente en el libro. Si en algún momento no está
claro en el contexto, abra el ejemplo de código en el disco.
 Numeración de bloques de código

En este libro, a veces construimos un ejemplo más grande en pasos. Si ve que se está
cargando un archivo que tiene un sufijo numérico, eso generalmente significa que
estamos construyendo algo más grande. Por ejemplo, encima del bloque de código
tiene el nombre del archivo: app-2.js. Cuando vea la sintaxis de-N.js, eso significa que
estamos construyendo una versión final del archivo. Puede saltar a ese archivo y ver el
estado de todo el código en esa etapa en particular.

Obteniendo ayuda

Si bien hemos hecho todo lo posible para ser claros, precisos y precisos, es posible
que cuando escribe su código se encuentre con un problema. En general, existen tres
tipos de problemas:

• Un "error" en el libro (por ejemplo, cómo describimos que algo está mal)

• Un "error" en nuestro código

• Un "error" en tu código

Si encuentra una inexactitud en la forma en que describimos algo, o si siente que un

concepto no está claro, envíenos un correo electrónico. Queremos asegurarnos de que
el libro sea preciso y claro a la vez. Igualmente, si ha encontrado un error en nuestro
código, definitivamente queremos para saberlo. Si tiene problemas para que su propia
aplicación funcione (y no es un código de ejemplo), este caso es un poco más difícil de
manejar. Su primera línea de defensa, al obtener ayuda con su aplicación
personalizada, debería Sé nuestra sala de chat de la comunidad oficial8. Nosotros (los
autores) estamos presentes de vez en cuando, pero hay cientos de otros lectores que
pueden ayudarlo más rápido que nosotros. Si aún está atascado, nos encantaría saber
de usted. Y aquí algunos consejos para obtener una respuesta clara y oportuna.

Emocionarse

Escribir aplicaciones web con React es divertido. Y al utilizar este libro, aprenderá
cómo crear aplicaciones React rápidamente. (Y mucho más rápido que pasar horas
analizando publicaciones de blog obsoletas). Si ha escrito JavaScript en el lado del
cliente anteriormente, encontrará que React es refrescante e intuitivo. Si esta es tu
primera incursión seria en la parte delantera, te sorprenderás de lo rápido que puedes
crear algo digno de compartir. Así que agárrate fuerte: estás a punto de convertirte en
un experto en React y te divertirás mucho en el camino. . ¡Vamos a profundizar en el!.

PARTE 1

Tu primera aplicación web React

Búsqueda de productos de construcción

En este capítulo, obtendrá un curso intensivo sobre Reacción mediante la creación de

una aplicación de votación sencilla, inspirada en Product Hunt13. Se familiarizará con
cómo React se acerca al desarrollo de front-end y todos los fundamentos necesarios
para crear una aplicación React interactiva de principio a fin. Gracias a la simplicidad
central de React, al final del capítulo ya estará bien. a su manera con una variedad de
interfaces rápidas y dinámicas. Nos centraremos en hacer que nuestra aplicación React
funcione rápidamente. Echamos un vistazo más profundo a los conceptos cubiertos en
esta sección a lo largo del libro.

Configurando su entorno de desarrollo

Editor de código

A medida que va a escribir el código a lo largo de este libro, deberá asegurarse de

tener un editor de código con el que se sienta cómodo trabajando. Si aún no tiene un
editor preferido, le recomendamos que instale Atom14 o Sublime Text15.

Node.js and npm

Para todos los proyectos en este libro, deberemos asegurarnos de que tengamos un
entorno de Nodo.js16 de trabajo junto con npm. Hay varias formas diferentes de
instalar Node.js, así que consulte el sitio web de Node.js para obtener información
detallada: https : //nodejs.org/download/

Si estás en una Mac, lo mejor que puedes hacer es instalar Node.js directamente
desde el sitio web de Node.js en lugar de otro administrador de paquetes (como
Homebrew). Se sabe que la instalación de Node.js viaHomebrew causa algunos
problemas.

El Administrador de paquetes de nodos (npm para abreviar) se instala como parte de

Node.js. Para verificar si npm está disponible como parte de nuestro entorno de
desarrollo, podemos abrir una ventana de terminal y escribir:

$ npm -v
Si no se imprime un número de versión y recibe un error, asegúrese de descargar un
Node.jsinstaller que incluya npm.

Instalar Git

La aplicación en este capítulo requiere que Git instale algunas bibliotecas de terceros.
Si no tiene Git instalado, consulte estas instrucciones18 para instalar Git en su
plataforma. Después de instalar Git, le recomendamos que reinicie su computadora.

Navegador

Por último, le recomendamos que utilice el navegador web Google Chrome19 para
desarrollar aplicaciones React. Usaremos el kit de herramientas para desarrolladores
de Chrome a lo largo de este libro. Para seguir con nuestro desarrollo y eliminación de
errores, recomendamos descargarlo ahora.

Instrucción especial para usuarios de Windows.

Todo el código en este libro ha sido probado en Windows 10 con PowerShell.

Asegúrese de que IIS esté instalado

Si se encuentra en una máquina con Windows y aún no ha realizado ningún desarrollo

web, es posible que necesite instalar IIS (Servicios de información de Internet) para
ejecutar servidores web localmente. Consulte este tutorial20 para instalar IIS.

JavaScript ES6/ES7

JavaScript es el lenguaje de la web. Se ejecuta en muchos navegadores diferentes,

como Google Chrome, Firefox, Safari, Microsoft Edge e Internet Explorer. Los
diferentes navegadores tienen diferentes intérpretes de JavaScript que ejecutan el
código de JavaScript. Su adopción generalizada como lenguaje de scripts del lado del
cliente de Internet llevó a la formación de un cuerpo de estándares que gestiona sus
especificaciones. La especificación se llama ECMAScriptor ES.
La quinta edición de la especificación se llama ES5. Puede pensar en ES5 como una
"versión" del lenguaje de programación JavaScript. Finalizada en 2009, ES5 fue
adoptada por todos los principales navegadores en unos pocos años. La 6ª edición de
JavaScript se conoce como ES6. Finalizadas en 2015, las últimas versiones de los
principales productores aún están terminando de agregar soporte para ES6 a partir de
2017. ES6 es una actualización importante. Contiene toda una serie de nuevas
funciones para JavaScript, casi dos docenas en total. JavaScript escrito en ES6 es muy
diferente de JavaScript escrito en ES5.ES7, una actualización mucho más pequeña
que se basa en ES6, se ratificó en junio de 2016. ES7 contiene solo dos novedades.
Como futuro de JavaScript, queremos escribir nuestro código en ES6 / ES7 hoy. Pero
también queremos que nuestro JavaScript se ejecute en navegadores más antiguos
hasta que desaparezcan por su uso generalizado. Más adelante en este capítulo
veremos cómo podemos disfrutar de los beneficios de ES6 / ES7 hoy en día, al tiempo
que seguimos admitiendo la gran mayoría de los navegadores del mundo. Este libro
está escrito con JavaScript ES7. Debido a que ES6 ratificó la mayoría de estas
características nuevas, en general nos referiremos a estas nuevas características como
funciones ES6. Hemos incluido un apéndice en la sintaxis de ES6 que utilizamos,
"Apéndice B: ES6". A menudo nos referiremos al apéndice cuando se encuentra con la
sintaxis de ES6 por primera vez, pero si alguna vez la sintaxis no le resulta familiar,
vale la pena revisar el Apéndice B para ver si es nueva la sintaxis de JavaScript de
ES6.

ES6 se refiere a veces como ES2015, el año de su finalización. ES7, a su vez, a

menudo se conoce como ES2016.

Empezando

Código de muestra

Todos los ejemplos de códigos que encontrará en cada capítulo están disponibles en el
paquete de códigos que viene con él libro. En ese paquete de códigos encontrarás
versiones completas de cada aplicación, así como repeticiones que usaremos para
construir esas aplicaciones juntas. Cada capítulo proporciona instrucciones detalladas
sobre cómo seguirlo por su cuenta. Si bien no es necesario codificar el libro, le
recomendamos que lo haga. Jugar con ejemplos y código de ejemplo ayudará a
consolidar y fortalecer conceptos.

Vista previa de la aplicación

Estaremos construyendo una aplicación React básica que nos permitirá tocar los
conceptos más importantes de React en un nivel alto antes de sumergirse en ellos en
las secciones siguientes. Comencemos echando un vistazo a una implementación
práctica de la aplicación. Abra la carpeta de código de muestra que venía con el libro.
Cambie al directorio_voting_app / en el terminal:

Las aplicaciones de nodo contienen apackage.json que especifica las dependencias del
proyecto. Cuando ejecutamos npm install, npm usó ourpackage.json para determinar
qué dependencias descargar e instalar. Los instaló en el foldernode_modules /

El diseño general aquí es común para las aplicaciones web. Dentro de public /
isindex.html, el archivo que servimos a los navegadores que solicitan nuestro sitio web.
Como veremos en breve, index.html es la pieza central de nuestra aplicación. Se carga
en el resto de los activos de nuestra aplicación

Inside public / js es donde pondremos el JavaScript de nuestra aplicación. Escribiremos

nuestra aplicación React dentro de app.js.app-complete.js es la versión completa de la
aplicación en la que estamos trabajando, que vimos hace un momento. Además,
hemos incluido cada versión de app.jsas lo construimos a lo largo de este capítulo
(app-1.js, app-2.js, etc.). Cada bloque de código de este capítulo hará referencia a la
versión de la aplicación en la que puede encontrarla. Puede copiar y pegar inserciones
de código más largas desde estas versiones de la aplicación en su app.js.

Para empezar, ensureapp-complete.jsis ya no se carga inindex.html. Luego tendremos

un lienzo en blanco para comenzar a trabajar en insideapp.js.Abra uppublic /
index.htmlin su editor de texto. Debe tener un aspecto como este:

¿Qué es un componente?

Construir una aplicación React es todo acerca de los componentes. Un componente

React individual se puede considerar como un componente UI en una aplicación.
Podemos dividir la interfaz de nuestra aplicación en dos clases de componentes:

Tenemos una jerarquía de un componente principal y muchos componentes

secundarios. Llamaremos a estosProductListandProduct, respectivamente:
1.ProductList: contiene una lista de componentes del producto2.Product: muestra un
producto determinado

Los componentes de React no solo se asignan limpiamente a los componentes de la

interfaz de usuario, sino que también son autónomos. Themarkup, view logic y, a
menudo, el estilo específico de cada componente están alojados en un solo lugar. Esta
característica hace que los componentes de Reactividad sean reutilizables. Además,
como veremos en este capítulo y en todo este libro, el paradigma de React para el flujo
de datos de componentes y la interactividad se define de manera rígida. En
Reaccionar, cuando las entradas de un componente cambian, el marco simplemente
vuelve a renderizar ese componente. Esto nos da una garantía de consistencia de
interfaz de usuario sólida: con un conjunto dado de entradas, la salida (el aspecto del
componente en la página) siempre será la misma.

Nuestro primer componente

Comencemos por construir el componente de producto. Escribiremos todo nuestro

código React para el resto de este capítulo dentro del archivo public / js / app.js.
Abramos app.js e insertemos el componente:

class ProductList extends React.Component{

render(){
return(
<div className='ui unstackable items'>
Hello, friend! I am a basic React component.
</div>
);

}
}

Los componentes de React son clases ES6 que extienden la clase React.Component.
Estamos haciendo referencia a la variable React.index.html carga la biblioteca React
para que podamos hacer referencia aquí:

voting_app/public/index.html

<scriptsrc="vendor/react.js"></script>

Nuestra ProductListclass tiene un método único, render (). render () es el único método
requerido para un componente React. React utiliza el valor de retorno de este método
para determinar qué representar a la página

Si bien JavaScript no es un lenguaje clásico, ES6 introdujo una sintaxis de declaración

de clase. Las clases de ES6 son azúcar sintáctica sobre el modelo de herencia basado
en el prototipo de JavaScript. Cubrimos los detalles importantes que necesita saber
sobre las clases con respecto a los componentes de buildingReact. Si desea obtener
más información sobre las clases de ES6, consulte la documentación en MDN
Tiene cierta familiaridad con JavaScript, el valor de retorno puede ser sorprendente:

423/5000

La sintaxis del valor de retorno no se parece al JavaScript tradicional. Estamos

utilizando JSX (sintaxis JavaScripteXtension), una extensión de sintaxis para
JavaScript escrita por Facebook. El uso de JSX nos permite arrastrar el marcado para
nuestras vistas de componentes en una sintaxis familiar similar a HTML. Al final, este
JSXcode compila a JavaScript de vainilla. Aunque el uso de JSX no es una necesidad,
lo usaremos en este libro, ya que combina muy bien con React.