Transcripciones
1. Introducción: Mi pasión por el desarrollo web, definitivamente deriva de mi amor por la resolución de problemas. Hay algo muy satisfactorio en tomar un problema y doblarlo a tus voluntades en código. Hola ahí. Yo soy Ryan Johnson. Desarrollador web de Canadá, donde he tenido el privilegio de trabajar en la industria tecnológica desde hace 15 años. largo de ese tiempo, he tenido la suerte de trabajar en una variedad de lugares diferentes, que van desde pequeñas startups hasta grandes empresas. hoy, quiero presentarles una de mis bibliotecas favoritas con las que trabajo, React JS. No sólo React JS está respaldado por Facebook, sino que también tiene una de las comunidades de desarrollo más vibrantes por ahí. Empecé a usar React hace tres años y desde entonces no he mirado atrás. Para mí, React hace que el desarrollo de UI sea más divertido. Reaccionar traer algún orden muy necesario para el desarrollo
de la interfaz al permitirle dividir su interfaz en componentes agradables y limpios. Este curso, está orientado a desarrolladores que todos listos tienen una buena comprensión de JavaScript, pero quieren recoger React. Muchos recién llegados a React, tienden a colgarse de dependencias externas como Webpack, y Redux, y Babel, y pelusas, y pruebas, y así sucesivamente. Estas lecciones, estaré evitando esas distracciones y apegándome a los fundamentos de React, luego guiarte a través de la creación de tu primera app. Para envolver las cosas, haré todo lo posible para desentrañar cómo funciona React y qué lo hace tan eficiente. Si eres como yo y te gusta entender lo que
pasa debajo del capó y las herramientas que usas, estas lecciones son para ti. Estoy súper emocionado de presentarte a React y
realmente espero que disfrutes trabajando con él tanto como yo. Adelante y empecemos.
2. Introducción a Codesandbox: Antes de empezar, quiero presentarles a un poderoso editor de código en línea llamado CodeSandBox, que estaremos utilizando para la mayoría de estas lecciones. Voy a empezar creando un nuevo proyecto haciendo clic en Crear Sandbox. Como puedes ver, CodeSandBox admite no solo React, sino también muchos otros frameworks populares. Voy a seguir adelante y seleccionar el proyecto React, y con un solo clic, ahora
tengo una aplicación React totalmente funcional en mi navegador. CodeSandBox me ha permitido omitir la configuración y enfocarme en los fundamentos de React que estamos aquí para aprender. Lo primero que voy a hacer, ya que ya tengo una cuenta es iniciar sesión en CodeSandBox como mi cuenta de GitHub. Siéntete libre de crear una cuenta propia para que puedas seguir las lecciones. La parte final del editor de CodeSandBox es bastante estándar y funciona igual que los editores de código más populares por ahí hoy. Tienes tu navegador de archivos. Podemos ver todos los archivos y directorios en el proyecto. Como puedes ver, CodeSandBox ha ido adelante y creado algunos archivos para nosotros ya. Si quiero agregar un nuevo archivo o directorio, puedo usar los botones de aquí arriba. Debajo del editor de archivos, tenemos la sección Dependencias. Esto muestra todas las dependencias de NPM instaladas para el proyecto. Se puede ver que CodeSandBox ya ha instalado algunas dependencias de React para nosotros. Agregar nuevas dependencias también es fácil. Simplemente haz click en Agregar Dependencia, busca la que quieras, y luego haz clic en ella para instalarla. abrirá un solo clic en un archivo en el modo de vista previa, mientras que al hacer doble clic en un archivo se abrirá el archivo en modo de edición. Es posible que hayas notado a la derecha algo que se parece a una ventana del navegador. Esta es una vista en vivo de la app que se recargará automáticamente cuando un archivo cambie. Para demostrar, voy a seguir adelante y actualizar nuestro h1 para decir Hola React Principiantes. Ahora puedes ver, tan pronto como se hace la actualización, se actualiza automáticamente aquí a la derecha. Por último quiero mostrarte la consola incorporada de CodeSandBox. Esto imita prácticamente la funcionalidad de la consola de tu navegador. Entonces si sigo adelante y consola cierre algo, puedo ver la consola sandboxes de código de audición de pares. Y al igual que la consola del navegador, también
puedo ejecutar comandos. Si te adelanto en Alerta que dice Hola desde la consola, puedes ver que se ejecuta y aparece aquí en la parte superior del navegador. Ya basta de nuestro código sandbox. Estamos aquí para aprender sobre React después de todo. Pero dicho eso, sigamos adelante y empecemos.
3. Fundamentos: componentes: Cuando se trata de reaccionar, todo se trata de los componentes. Los componentes son probablemente mi parte favorita de desarrollar una reaccionar. Con los componentes puedes tomar cualquier interfaz de usuario y dividirla en trozos más pequeños y
reutilizables que pueden funcionar independientes entre sí. Por ejemplo, tomemos la interfaz de código Sandbox
en la que estamos trabajando y pensemos cómo podríamos dividirla en componentes. Haciendo caso omiso de las áreas de encabezado y pie de página, veo el potencial de tres componentes de nivel superior. Un componente Navegador de
archivos, un componente Editor de archivos y un componente Ventana del navegador. Cada uno de estos componentes puede estar conformado por sus propios componentes también. Por ejemplo, el navegador de archivos tiene un menú Accordian que podría ser su propio componente y cada elemento dentro del Accordian, también
puede ser un componente. Si querías ir más allá, cada icono de Items puede incluso ser un componente también. Rompir su interfaz de usuario en componentes manejables más pequeños como este tiene todo tipo de beneficios, incluyendo hacer que su código sea más fácil de reutilizar y probar. Pero no podemos hablar de componentes sin mencionar elementos. Un elemento es el bloque de construcción más pequeño y reacciona y describe lo que eventualmente ves en pantalla. Para demostrar, voy a empezar por crear un simple H un elemento. Dentro de ese elemento tendré algún texto hola y luego lo
incluiré en los componentes de la app que podemos renderizar a pantalla. Este es un ejemplo de un elemento muy sencillo, pero los elementos también pueden ser más complejos. Aquí hay un ejemplo de elemento más complejo llamado wrapper que está formado por un div con algún texto de párrafo dentro. Se puede pensar en los elementos como los bloques de construcción que se
utilizan para unir sus componentes. Entonces, ¿qué aspecto tiene un componente? Un componente en su forma más simple es sólo una función. Por ejemplo, digamos que teníamos una función de adición simple que tomó dos parámetros y devuelve la suma de dos valores. Ya puedes ver si paso la función add dos y dos, obtengo cuatro log a la consola. Si cambio este segundo parámetro diez, obtengo 12 de vuelta en la consola. Pero lo que es realmente genial es que podemos convertir fácilmente esta función add para ser un componente reaccionar en su lugar. En primer lugar, utilice una A mayúscula para el nombre de la función del componente ya que todos los componentes deben comenzar con una letra mayúscula. Esto se debe a que reaccionar tratará los componentes que comienzan con letra minúscula como etiquetas DOM. A continuación, en lugar de que la función tome dos parámetros, tomarán un solo parámetro llamado props. Los apoyos son cómo pasas los datos a tu componente. Un componente es una función inmutable, lo que significa siempre y cuando le dé la misma entrada y reaccione los apoyos de
caso siempre deben recibir la misma salida. Ahora puedo tomar el componente Agregar y hacer que la aplicación lo renderice. Para pasar los valores para a y b, sólo
tienes que añadirlos como propiedades al componente. Ahora se puede ver que la suma se está renderizando a la pantalla. Cuando se trata de componentes, reaccionar realmente proporciona dos opciones diferentes. El primero y el más simple de los dos son componentes funcionales, que es una función que tiene un parámetro de props y devuelve un elemento de reacción válido. El componente Add que acabamos de crear como ejemplo de un componente funcional, los componentes segundo o clase, y como dice el nombre, el componente será una clase en lugar de una función. Por ejemplo, puedo convertir fácilmente el componente Add a un componente de clase. Empieza por convertir const a clase. Entonces tener la extensión de clase de componente de punto reaccionar. Después agrega una función de render y haz que devuelva el elemento en su lugar. Por último, como props ahora es una variable de instancia, agregue esto delante de ella. Ahí lo tienes, un componente de clase. Pero la salida se ve exactamente igual que antes, lo que plantea la pregunta ¿por qué usar un componente de clase en absoluto? Simplemente sucede que hay una muy buena razón, solo los componentes de clase tienen acceso para reaccionar los métodos de estado y ciclo de vida. Ninguna de estas características está disponible a partir de componentes funcionales. No te preocupes entraremos en métodos tanto de estado como de ciclo de vida más adelante. Otra característica agradable de los componentes es la prop infantil. Por ejemplo, digamos que quería crear un componente de diseño de página reutilizable. Siendo la idea que todas mis páginas muestren el mismo Encabezado y Pie de Página. Pero o bien pasar en copia corporal diferente para cada página. Entonces, ¿cómo hago eso? Entrar props dot niños. Ahora voy a renderizar el componente de diseño, pero en lugar de una etiqueta de autocierre, voy a usar una etiqueta de apertura y cierre. Entonces agregaré algunos elementos de párrafo para esta copia de cuerpo de diseños. De esa manera, podemos ver que mi copia corporal se está renderizando entre mi Encabezado y Pie de Página. Se puede pensar en los apoyos que los niños como un Marcador de posición para cualquier contenido que incluya entre las etiquetas de apertura y cierre al renderizar su componente. Voy a seguir adelante y agregar otro componente de diseño, pero esta vez voy a pasar en copia de cuerpo diferente. Debido a que el diseño está usando prompts dot
children, soy capaz de pasar en diferente copia de cuerpo al mismo componente de diseño. Esta es una característica muy poderosa que permite escribir componentes que no requieren conocimiento de los niños ahí incluyendo. Es posible que hayas notado que cuando nuestro componente de diseño creativo, lo
envolví en un elemento div, mismo con el componente de aplicación cuando agregué el segundo componente de capa. Esto se debe a que un componente solo debe tener un solo elemento raíz a menos que usar algo reaccionar llame a fragmentos. Para demostrar voy a quitar el
div wrapper del componente layout y ver qué sucede. Se puede ver en cuanto haga eso me sale un error. Los elementos JSX adyacentes deben estar envueltos en una etiqueta de cierre. Más o menos esto es decir que estoy esperando que un componente devuelva un solo elemento y me has dado tres en su lugar. Ahora hay una forma de devolver múltiples elementos y eso es usar fragmentos como sugiere el error. Esto es útil ya que evita tener que envolver los elementos y lo que es un trato inútil en este caso. Para actualizar el diseño use fragmentos, solo
necesito envolver los elementos en el componente de fragmento de punto reaccionar. Ahora cuando nuestra página se renderice, no habrá un elemento div extra y nuestro error debería desaparecer. Eso termina todo lo que quería cubrir en los fundamentos de los componentes. A continuación estaré echando un vistazo a la sintaxis como HTML que
hemos estado usando para escribir nuestros componentes llamados JSX.
4. Fundamentos: JSX: Tenemos una cosa más que cubrir antes de saltar a crear tu primer reactor, JSX. Si recuerdas antes mencioné JSX es una sintaxis similar a HTML utilizada para describir elementos de reacción. A pesar de que puede verse mucho como HTML, en realidad
es una extensión de JavaScript y a la mayoría de la gente le resulta más fácil trabajar con ellos reacciona llamadas API de nivel superior como reaccionar crear elemento. Con eso dicho, es importante recordar que JSX todavía se compila abajo para reaccionar crear llamadas de elementos. Para demostrar o utilizar una herramienta que realmente nos muestre a qué se compila JSX. Voy a seguir adelante y copiar nuestro componente de aplicación. A la izquierda verás la versión JSX del componente y a
la derecha en realidad verás la salida del compilador de ese componente. Si echamos un vistazo más de cerca a la versión compilada del componente, realidad se
puede ver que está conformada por múltiples llamadas a React.CreateElement. Cada una de estas llamadas corresponde a un elemento en el componente JSX. Tenemos nuestra principal reaccionar crear elemento call, que es un div, que se remonta a nuestro div principal aquí. Eso tiene un nombre de clase de App, y luego tiene algunos elementos hijos también, un h1 y h2, que en ambos vemos representados aquí por dos llamadas más para reaccionar crear elemento. Al comparar estas dos versiones del mismo componente, encuentro que la versión JSX es mucho más fácil de leer. Creo que esto se mantendrá cierto para la mayoría de los desarrolladores que están familiarizados con HTML. Todas las lecciones a seguir serán usando JSX. Pero quería mostrar lo que está pasando bajo el capó cuando se crea un componente JSX. La verdadera belleza de JSX es que viene con todo el poder de JavaScript detrás de él. Empecemos con algunos fundamentos JSX, primero, incrustar expresiones. Ahora todo esto suena realmente elegante, pero en realidad ya hemos trabajado con una expresión aquí. Nuestra props.version que se está renderizando en pantalla es una expresión. En JSX, tus expresiones solo se envolverán en llaves. El contenido de las llaves son lo que en realidad se están evaluando. En este caso, sólo estamos arrojando el valor de props.version a la pantalla. Antes de continuar quiero hacer un par de giro rápido CodeSandBox. Vamos a empezar por colapsar nuestro editor de archivos haciendo clic en la pestaña del editor de archivos. Entonces solo voy a encogerme un poco nuestra ventana del navegador aquí a la derecha. Ahora voy a seguir adelante y actualizar nuestra expresión, que en realidad renderiza un mensaje condicionalmente basado en el valor de la versión. Si la versión es mayor que una, voy a renderizar un mensaje que dice versión inválida. Si la versión es menor o igual a una, entonces en realidad voy a renderizar la props.version como estábamos haciendo antes. Adelante y actualizo una versión para ser de dos puntos aunque, ahora se
puede ver que en realidad tenemos un nuevo mensaje, versión
inválida renderizada a pantalla. Como puedes ver, no teníamos que hacer nada especial aquí para que esto funcionara. Esto es solo un operador ternario de JavaScript antiguo y llano que renderiza un mensaje u otro basado en una condición. Esto es lo que me encanta de JSX, es solo JavaScript. No hay necesidad de aprender otro lenguaje de las templaciones. Ahora que hemos hecho algunos cambios, voy a seguir adelante y salvar nuestro trabajo. Es posible que lo sepas tan pronto como guardamos nuestro código en realidad auto formato. Esto se debe a que CodeSandBox en realidad está usando una herramienta llamada más bonita, que toma el trabajo monótono del formato de código y lo hace por ti automáticamente. Ahora que hemos cubierto las expresiones JSX, pasemos a los atributos. Al especificar atributos y JSX, hay algunas diferencias clave cuando se comparan con atributos HTML. ReactDom utiliza el caso de camello para los nombres de atributos. Por ejemplo, minúscula al hacer clic se convierte en camel minúscula al hacer clic, tabulador en
minúsculas se convierte en índice de tabulador de camel. Al especificar valores de atributo, tiene dos opciones. El primero son literales de cadena, y es lo suficientemente sencillo. El segundo son expresiones que permiten crear valores de atributos dinámicos como estos. Sólo para demostrar que esto estaba funcionando, voy a abrir aquí la consola. Se puede ver que esto realmente está evaluando a un índice de tabulaciones de dos. Tenga cuidado al usar expresiones como valores de atributo, no envolverlas entre comillas. Esto dará como resultado que la expresión no sea evaluada y sea tratada como un literal de cadena en su lugar. Eso concluye los fundamentos de JSX. Pero no te preocupes, estaremos entrando en un uso más avanzado de JSX en las próximas lecciones.
5. Construir una aplicación: introducción: Encontré que la mejor manera de aprender un nuevo marco es realmente construir algo. Ahora que tenemos los fundamentos cubiertos, quiero guiarte a través de la creación de tu primera app React. Entonces, ¿qué estamos construyendo? Para nuestra primera app, vamos a estar creando un simple clon de Google. Pero en lugar de poder buscar cualquier cosa, nuestro Google va a buscar chistes de papá y sólo chistes de papá. Si sigo adelante y entro a “gato”, haga clic en “Buscar”, me devuelvo una lista de cinco chistes de papá relacionados con gatos primos. Si entro un nuevo término de búsqueda y hago clic en “Buscar”, puedo ver los resultados de búsqueda se refrescan con chistes de papá nuevo. Por último, a diferencia del botón “Me siento afortunado” de Google,
tenemos el botón “Me siento divertido”, que devolverá una broma de papá soltero en este caso. A pesar de que esta aplicación puede parecer bastante sencilla, vamos a cubrir mucho gruñido al crearla, así que empecemos. Vamos a seguir usando CodeSandBox, la app de creador. Pero antes de que empecemos, quiero como empezar con una pizarra limpia. Entonces voy a seguir adelante y eliminar nuestro trabajo anterior y comenzar con un bonito componente de aplicación en blanco, e ignorar la flecha que aparece por ahora. Para empezar, vamos a mantener las cosas realmente simples. Vamos a tener un solo botón que al hacer clic, genera una broma de papá soltero. Entonces voy a empezar por seguir adelante y crear ese botón, y lo voy a etiquetar con “Cuéntame una broma”. Para que veas que tenemos nuestro nuevo botón “Dime una broma” siendo renderizado en pantalla aquí. Pero cuando hago clic en él, no está pasando todo un montón. Para manejar eventos de clic en React, utiliza el evento OnClick. Vamos a seguir y agregar uno a nuestro botón aquí. El evento OnClick realmente toma una función como su valor. Entonces vamos a seguir adelante y agregar una función simple que cierre sesión un valor cuando se hace clic. Entonces, solo sigamos adelante y abramos nuestra consola aquí. Ahora, puedes ver que cada vez que hacemos clic en el botón “Dime una broma”, la palabra “click” se registra en la consola para cada uno de esos clics. Ahora que sabemos que nuestro evento OnClick realmente está funcionando, quiero seguir adelante y mover nuestro manejador OnClick a su propia función. Voy a seguir adelante y llamarlo OnTellJoke, y se va a registrar nuestro click igual que lo está haciendo ahora mismo. Entonces voy a tomar este nuevo OnTellJoke, y voy a reemplazar la función en línea que creamos antes, y sólo voy a seguir adelante y ahorrar. Ahora, cuando hago clic en “Cuéntame una broma”, aún
deberíamos ver el click cerrado sesión. Ahora este botón de broma aún no está haciendo mucho cuando hacemos clic en él. Lo que realmente queremos pasar es que cada vez que haces clic en el botón de broma, te devuelven una broma, una broma de papá, específicamente. Pero antes de que pudiéramos hacer eso, necesitamos un lugar para conseguir algunos chistes de papá. Ya que en estos días hay una API para todo, estaremos usando una API gratuita de icanhazdadjoke.com para todas nuestras necesidades de chiste de papá. Echemos un vistazo más de cerca a los docs API para ver con qué estamos lidiando. En primer lugar, notarías que en realidad no se requiere autenticación para estas llamadas, cual es una cosa menos de la que preocuparse. A continuación, verás que la API realmente soporta múltiples formatos de respuesta. En nuestro caso, sólo nos preocupa la opción JSON y eso es lo que estaremos usando para nuestro tutorial. Para nuestro botón “Dime un chiste”, vamos a estar usando el punto final “Trae una broma de papá al azar”. El modo en que esto funcionará es que cada vez que se haga clic en el botón, se generará
una nueva broma aleatoria y se nos enviará de vuelta. Podemos ver una muestra de la respuesta que se devolverá aquí, que es un objeto que contiene la broma junto con un ID único y un código de estado HTTP. Ahora que tenemos nuestro punto final, volvamos atrás y enganchemos nuestro botón de broma. Para llamar al punto final de “broma aleatoria”, estaremos usando la API Fetch de JavaScript, que permite buscar recursos en toda la red. Estaremos pasando Fetch dos parámetros. El primero es la URL del recurso, que en nuestro caso es el punto final “Fetch random joke”. El segundo parámetro es un objeto options pero estableceremos el método HTTP para GET ya que se trata de una solicitud GET. A continuación estableceremos el encabezado “Aceptar” al tipo JSON de la
aplicación para asegurar que nuestros datos vuelvan en formato JSON. Llamar a “Fetch” devuelve una promesa que resuelve a un objeto de respuesta. En nuestro método “then”, usaremos los objetos de respuesta construidos en el método JSON para analizar nuestros datos de respuesta. Dado que el método JSON también devuelve una promesa, podemos simplemente encadenar otro método “entonces”. Esta vez la devolución de llamada se pasará a los datos JSON analizados cuando la promesa resuelva solo para asegurarse de que las cosas están funcionando con log los resultados. Ahora, sigamos adelante y abramos la consola. Ahora, cuando hago clic en el botón de broma, se
puede ver que se está cerrando la sesión la respuesta de la API de broma de papá. Ya que estamos usando el punto final de “Broma aleatoria”, recuperamos una broma diferente si vuelvo a hacer clic en el botón. Ahora que nuestro botón de broma está funcionando, eso termina esta lección. A continuación, estaremos viendo un estado clave del componente de la función React.
6. Construir una aplicación: Estado de componentes: En esta lección, voy a hacer una inmersión más profunda en el estado del componente. Pero antes de saltar, vamos por donde lo dejamos. Para recapitular, tenemos un botón de broma que busca una broma cada vez que se hace clic, y actualmente registramos la broma a la consola. Siguiente Quiero actualizar nuestras apps para que la broma de fetch sea renderizada a la pantalla. Para poder hacer eso sin embargo, necesitaremos algún lugar donde almacenar el valor de la broma de fetch. En una configuración no reaccionaria, se podría pensar en almacenar el valor en una variable como esa. Cuando se busque una nueva broma, voy a actualizar el valor de la variable de broma con la broma recuperada. Si llamas, la broma EPI devuelve un objeto. Eso incluye identificación, broma, y estado. En lugar de almacenar todo el objeto de broma, sólo
voy a almacenar la broma en sí. También voy a cerrar sesión el valor de esa variable de broma, solo para asegurarme de que se esté actualizando. Por último, voy a agregar un rápido desarrollo alrededor de nuestro botón, e insertar un elemento de párrafo, para luego establecer el contenido de ese párrafo en el valor de nuestra variable de broma. Probemos esto y veamos qué pasa. Podemos ver que nuestra variable de broma se está iniciando sesión en la consola cada vez que se hace clic en el botón, pero no estamos viendo nada actualizado en pantalla. ¿Por qué? El motivo por el que no estamos viendo ninguna actualización en pantalla es que React no sabe nada realmente ha cambiado. Un componente React sólo volverá a renderizar cuando sus indicaciones o estado hayan cambiado. En el caso de nuestro componente de aplicación, se produce
un render cada vez que React ejecuta la función de la aplicación. Voy a agregar una consola que accedió a nuestra función de aplicación. De esa manera podemos ver algo registrado cada vez que el componente se renderiza. Como puede ver, render se cierra la sesión para el render inicial de los componentes. Pero nota cada vez que hago clic en el botón de broma, render no se cierra la sesión, a pesar de que la variable de broma se está actualizando. Esto se debe a que los cambios en nuestra variable de broma no están siendo rastreados por React, y por lo tanto no están activando un nuevo render. Parece que si queremos app to app render cambios de broma, necesitaremos almacenar broma ya sea en el estado de componente o utilices. ¿ Cuál utilizamos en este caso? Los apoyos se pasan a un componente y son de sólo lectura, lo que significa que no se pueden cambiar, donde un estado contiene información sobre el componente, y se pueden actualizar. Con eso dicho, el estado parece la elección correcta ya que
estaremos necesitando actualizar el valor de la broma a medida que avancemos. Dado que los componentes funcionales no tienen acceso al estado, lo primero que tendremos que hacer es convertir la aplicación a un componente de clase. Comience cambiando la función de la aplicación a una clase que se extiende de React a un componente. Después convertir broma en una propiedad de clase. A continuación, tendremos que convertir la función OnTellJoke para que sea un método de clase en su lugar. Entonces, por último, en lugar de devolver elementos directamente, usamos el método render y devolvemos los elementos desde allí en su lugar. Ahora que OnTellJoke y broma son ambas variables de clase, tenemos que añadir esto frente a ellos. Parece que estamos renderizando sin errores, pero intentemos de nuevo el botón de broma. Parece que rompimos algo, y Code Sandbox es lo suficientemente agradable como para decirnos exactamente cuál es el error, no puede establecer broma de propiedad de indefinido. Resulta que causamos este error cuando cambiamos la función OnTellJoke a un método de clase. Esto se debe a que los métodos de clase no están enlazados por defecto. Dado que OnTellJoke se llama desde un manejador de clics, la referencia a esto ya no es alcance para el componente, sino para el botón, de ahí que obtenemos un error al intentar establecer un valor en esta broma de pensamiento. Si bien hay múltiples soluciones a este problema, elijo vincular explícitamente cada método del componente en el constructor. Nuestro componente no tiene un constructor en este momento, así que empecemos agregando uno. Dado que todos los componentes se extienden desde la clase de componente Reacts, debe asegurarse de que llame al super método antes de hacer cualquier otra cosa. Voy a tomar este método OnTellJoke, y reasignarlo a una versión de ese método que está ligado al componente. Ahora bien, aunque OnTellJoke se llama desde un manejador de clics, esto hará referencia al componente y no al botón. Con eso fijo en su lugar, sigamos adelante y probemos de nuevo un botón de broma. Impresionante, no más errores. Ahora que nuestro componente se ha actualizado con éxito a un componente de clase, estamos listos para comenzar a usar el estado local. Empecemos por eliminar nuestra vieja variable de broma ya que ya no es necesaria. En cambio, vamos a crear una nueva variable de broma en nuestro estado componente. Al agregar valores de estado a su componente, normalmente
empezaré agregando valores predeterminados. Esto se hace en el constructor
agregando directamente valores a la propiedad de estado del componente. Voy a seguir adelante y añadir chiste a nuestro estado y ponerlo en nulo para empezar. Es importante recordar que esta es la única vez que debes estar modificando el estado del componente directamente. Para las actualizaciones de estado, siempre se necesita utilizar el método de estado de los componentes, que ahora usaremos para actualizar nuestro estado cada vez que se busque una nueva broma. Empecemos por eliminar nuestra referencia a nuestra vieja variable de broma. Vamos a reemplazar eso por una llamada a este estado.set. A continuación pasaremos set state un objeto con nuestros valores de estado actualizados. En nuestro caso, eso estará pasando en nuestro nuevo valor de broma recuperada. Al usar el estado establecido, es mejor pensarlo como una solicitud, en lugar de un comando inmediato para actualizar el componente. Esto se debe a que el estado establecido no siempre actualiza inmediatamente el componente, puede por lotes o aplazar la actualización hasta más adelante. Esto hace que la lectura de esto.state justo después de llamar a conjuntos de datos potencial de trampas. Para evitar estas trampas con el estado set, recomiendo leer Reacciona docs oficiales sobre el tema, ya que es una pieza crítica al tratar temas de React más avanzados. Ahora que hemos enganchado nuestras llamadas de estado set, actualicemos nuestro elemento de párrafo para usar el estado de broma en lugar de nuestro viejo valor de broma. A ver si eso marcó la diferencia. Bonito. Ahora voy a hacer clic en el botón de broma, nuestra nueva broma se está renderizando a la pantalla. También notarás que renderiza ahora siendo registrado cada vez que hago clic en el botón. Esto se espera ya que cada clic de botón está activando una actualización de estado,
y cada actualización de estado desencadena un re-renderizado. Eso concluye la introducción al estado del componente. A continuación vamos a echar un vistazo a otra característica importante de React, los métodos del ciclo de vida.
7. Construir una aplicación: métodos de ciclo de vida: En esta lección voy a introducir métodos de ciclo de vida de reacciona. Pero antes de hacer eso, hagamos una recapitulación rápida. En la lección anterior, conectamos nuestro botón para mostrar una nueva broma cada vez que se hacía clic. Pero cuando nuestra aplicación se carga por primera vez, nuestra pantalla se ve bastante desnuda. Entonces voy a seguir adelante y agregar algunas nuevas funcionalidades que buscarán y mostrarán una broma justo cuando se cargue la aplicación. Entonces, ¿cómo hacemos eso? Para esto, estaremos aprovechando los métodos de ciclo de vida de los componentes reacciona. Estos métodos proporcionan ganchos que permiten ejecutar su propia lógica cuando se produce un evento correspondiente en un componente. En nuestro caso, queremos buscar una broma antes de que el componente de la aplicación se renderice en la pantalla. Este es un caso de uso perfecto para reacciona componentDidMount () método de ciclo de vida. Si echamos un vistazo a los docs reaccionan oficiales, dice, “ComponentDidMount () se invoca inmediatamente después de montar un componente”. También dice: “Si necesita cargar datos desde un endpoint remoto, este es un buen lugar para instanciar la solicitud de red”. Que es exactamente lo que estábamos haciendo con nuestro FetchJoke. Entonces creo que esto es un ajuste perfecto para nuestro escenario. Así que sigamos adelante y agreguemos un método componentDidMount () a nuestro componente de aplicación. Ahora podríamos simplemente copiar el contenido de nuestro manejador de clics on tell joke en componente sí montó así y eso funcionaría bien, pero crea una gran cantidad de duplicación lo cual no es genial. En cambio, voy a copiar esta lógica en un nuevo método y llamarla FetchJoke. Ahora actualizaré tanto componente sí montó y on tell Joke a ambos llamar a FetchJoke en su lugar. Con ese cambio, una broma es buscar cuando se monta el componente de la app, lo que significa que si refresco la página, debería ver una broma renderizada en la página de inmediato y ahí vamos. Al hacer solicitudes asíncronas de red, como nuestra llamada FetchJoke, es bueno pensar en lo que ve un usuario mientras esa solicitud se está cargando. Mi conexión es bastante rápida así que el tiempo entre yo haciendo clic en el botón de broma y en realidad ver una broma es bastante rápido. Pero, ¿qué pasa con esos usuarios en una conexión más lenta? ¿Qué van a ver? Voy a seguir adelante y simular una conexión más lenta usando Chrome DevTools. Con una conexión lenta, se puede ver que el usuario tiene que esperar bastante tiempo antes que vea aparecer una broma en pantalla y durante ese tiempo, el usuario no tiene ninguna indicación de lo que está pasando. Eso no hace para una gran experiencia de usuario así que sigamos adelante y mejorémoslo. Lo primero que voy a hacer es crear una nueva variable de estado llamada IsFetchingJoke. Esto se usará para rastrear cuándo se está buscando una broma y por defecto, voy a seguir adelante y ponerme a valores predeterminados. El trabajo comenzará a buscar en cuanto se llame a FetchJoke. Entonces voy a agregar un estado conjunto llamado justo al inicio de este método y set está recuperando broma a verdadero. Se considera que se hace una broma cuando recibimos una respuesta de la API de broma, que sucede aquí mismo. que ya estamos llamando a set state aquí, sólo
voy a seguir adelante y como isFetchingJoke y ponerlo en falso. Para probar que está funcionando como se esperaba, voy a renderizar el valor de IsFetchingJoke a pantalla. Dado que isFetchingJoke es un valor booleano, voy a llamar a dos cadenas en él, lo que nos permitirá renderizar el valor a pantalla. Ahora cuando hago clic en el botón, se
puede ver que el valor IsFetching está establecido en verdadero y una vez que se devuelve la broma, IsFetching vuelve a false. El primer mejoramiento que quiero hacer es tener un botón de broma desactivado mientras se está recuperando broma. Esto evitará que el usuario vuelva a hacer clic en el botón si ya estamos buscando una broma. Para que esto funcione, usaremos el
atributo botones deshabilitado y estableceremos el valor igual a nuestro nuevo valor de estado ISFetchingJoke. Ahora siempre que se esté buscando una broma, el botón se desactivará automáticamente y luego se volverá a habilitar cuando se complete la búsqueda. Otra mejora que podemos hacer es agregar mejor mensajería para el usuario mientras se está buscando una broma. Actualmente todavía sólo mostramos el viejo chiste. En cambio, me gustaría mostrar un mensaje de broma de carga para el usuario. Para lograrlo, vamos a usar una expresión condicional. El estado será si está buscando broma es verdadera, entonces renderiza el mensaje de carga y si es falso, renderiza la broma como estamos haciendo ahora. Adelante y quitemos nuestra etiqueta de ISFetchingJoke ya que ya no la necesitamos. Adelante y probémoslo. Ahora podemos ver que cada vez que se está buscando una broma, obtenemos este bonito mensaje de carga que nos permite saber que algo está pasando, esto es una gran mejora para aquellos usuarios que pueden estar usando una conexión más lenta. A continuación estaremos viendo el realce de lo que hemos hecho aquí agregando un formulario para una búsqueda.
8. Construir una aplicación: añadir formulario de búsqueda: Ahora que tenemos la app funcionando bien para una broma, vamos a llevar esto un paso más allá. En lugar de simplemente buscar una broma al azar, vamos a darle al usuario la capacidad de buscar chistes. Lo primero que vamos a necesitar es una forma. Vamos a seguir adelante y crear una forma vacía para empezar. A continuación, necesitamos algún lugar para que nuestro usuario introduzca su búsqueda. Sigamos adelante y agreguemos una entrada de texto con algún texto de Marcador de posición. Por último, crearé un botón de búsqueda etiquetado, donde el usuario envíe nuestro formulario. Ahora que tenemos una configuración de formulario o dime que un botón de broma se ve solitario, flotando por ahí. Por ahora, lo voy a mover dentro de nuestra forma ya que la estaremos usando más adelante. ¿ Qué sigue? Al trabajar en una nueva característica, me parece muy útil desglosarla en tareas más pequeñas. Vamos a seguir adelante y crear una lista de tareas para rastrear el trabajo que vamos a estar haciendo para el formulario de búsqueda. En primer lugar es llamar al endpoint de broma de búsqueda y almacenar los resultados, luego guardar la consulta de búsqueda del usuario, luego activar la búsqueda en el formulario enviar. Después de eso, renderizando los resultados de búsqueda a la pantalla, luego enganchando el botón Me siento divertido, seguido de crear el componente de foro de búsqueda. Después refactorización y limpieza de código, y por último pero no menos importante, agrega estilos a la aplicación. Ahora que tenemos un plan, empecemos con la tarea número 1, llamando al punto final de búsqueda y almacenando los resultados de búsqueda. Lo primero que necesitamos es dónde buscar chistes de papá. Por suerte para nosotros, la misma API que estábamos usando para buscar una broma de papá al azar también proporciona un endpoint de búsqueda. De acuerdo con los docs API, necesitamos pasar el término de búsqueda como prem de consulta y nos devolverán los resultados de búsqueda en el siguiente formato. Voy a seguir adelante y copiar la URL para el punto final de búsqueda. En lugar de crear un nuevo método de búsqueda, voy a reutilizar el método de broma de fetch existente. Empezaré cambiando la URL de fetch el endpoint de búsqueda del usuario que copié de los documentos. Entonces vamos a quitar la llamada SetState por ahora y simplemente reemplazarla por una llamada registraré los resultados de búsqueda en la consola. A continuación, quiero cambiar el nombre del método FetchJoke por algo más apropiado. Dado que FetchJoke está actualmente referenciado a múltiples lugares, voy a hacer uso de código sandboxes cambiar todas las ocurrencias opción. Esto me permite reemplazar rápidamente todas las referencias de FetchJoke con los nuevos chistes de búsqueda de nombre en su lugar. Por último, voy a hacer un poco de limpieza y quitar algunos artículos sin usar que ya no se están utilizando. De acuerdo, echemos un vistazo a la consola y veamos qué está pasando. En realidad se puede ver que ya tenemos una respuesta conectada a la consola. Esto se debe a que se están llamando chistes buscados en el método del ciclo de vida ComponentDidMount, al
igual que fue FetchJoke. Tal vez estés pensando, ¿cómo estamos obteniendo resultados de
búsqueda si en realidad aún no hemos ingresado como búsqueda? Si volvemos a pasar a los muelles de la API, puedes ver que si ningún término de búsqueda
es válido, por defecto devolverá todos los chistes. Esto es lo que está sucediendo en nuestro caso. Otra cosa que puedes notar es que una respuesta de búsqueda contiene algo más que solo resultados de búsqueda. En nuestro caso, realmente sólo estamos interesados en la matriz de chistes que contiene la propiedad de resultados. Por esa razón, voy a simplificar las cosas y almacenar los resultados directamente en una variable llamada chistes. Ahora podemos ver que sólo estamos recuperando una serie de chistes, que será más fácil trabajar con ellos. Ahora que sabemos que funcionan nuestras llamadas de búsqueda, necesitamos algún lugar donde almacenar los resultados. Para eso, vamos a crear una nueva variable de estado llamada chistes y establecerla igual a una matriz vacía para empezar. A continuación, sustituyamos nuestra llamada console.log por una llamada a setState y pasemos los chistes devueltos de la búsqueda. Mientras estamos en ello, sigamos adelante y sumamos de nuevo nuestro estado ISFetchingJoke y ponerlo en falso. También al igual que antes, deberíamos establecer IsFetchingJoke en true cuando se llama por primera vez a SearchJokes. Por último, eliminemos la vieja variable de estado de broma ya que ya no se está utilizando. Tan solo para comprobar que se están almacenando nuestros resultados de búsqueda, voy a seguir adelante y renderizarlos a pantalla. Dado que los chistes son una matriz, solemos iterar sobre los datos para renderizarlo. Por ahora solo voy a llamar a ToString para que podamos ver algo que aparece en pantalla. Ahí vamos, nuestros resultados de búsqueda se están mostrando, aunque se ven bastante feos en este momento. No te preocupes sin embargo, estará dando esos resultados de búsqueda en un TLC muy necesario pronto. Por ahora sin embargo, creo que eso se encarga de la tarea número 1. Voy a seguir adelante y tachar eso. Ves, ¿eso no es satisfactorio? Estamos haciendo algunos avances aquí. A continuación se está guardando la búsqueda del usuario en estado.
9. Construir una aplicación: Guardar la consulta de búsqueda: Empecemos con la tarea número 2 de nuestra lista, guardando la búsqueda del usuario en el estado de la app. Antes de sumergirnos, quiero hablar un poco más sobre las formas y reaccionar. Las formas son un caso único ya que los elementos de formulario HTML
nativos ya gestionaban su propio estado interno. Por ejemplo, si escribo en nuestra entrada de búsqueda, el valor está siendo almacenado en el estado interno de entradas. Esto plantea la pregunta, dónde debe ser gestionado el estado de forma en una aplicación React, en el estado reaccionar, o en el estado interno de insumos. En nuestro caso, vamos a estar gestionando nuestro valor de entrada de búsqueda usando estado de reacción. El primero que necesitaremos es un lugar donde almacenar el valor de los insumos de búsqueda. Para eso, crearé una nueva variable de estado llamada término de búsqueda, y la estableceré igual a una cadena vacía por defecto. A continuación, necesitamos una forma de que un término de búsqueda se mantenga sincronizado con lo que los usuarios realmente escriben en la entrada de búsqueda. Para esto, podemos usar las entradas en evento Change, que como dice el nombre, dispara cada vez que cambia el valor de la entrada. Para una prueba rápida, solo voy a agregar una función de
manejador de eventos que registra el valor de entradas. El manejador de eventos se pasa en un objeto de evento, que es muy similar a un evento JavaScript nativo. Pero en realidad es lo que React llama eventos sintéticos. Este evento sintético es un envoltorio alrededor del evento nativo del navegador. Eso sigue la misma interfaz, pero funciona de manera idéntica en todos los navegadores. Con eso dicho, podemos acceder al valor de la entrada en event.target.value. Ahora si abres la consola, y comienzas a escribir, podemos ver que el valor de las entradas se está cerrando a medida que escribimos. A continuación, eliminemos la función de prueba, y creemos un método adecuado en el manejador de cambios llamado en el cambio de búsqueda. En este método, tomaremos el event.target.value y estableceremos nuestros términos de búsqueda estado igual a él. A continuación, actualice los insumos de búsqueda en evento Cambio para llamar a nuestro nuevo manejador de cambios de búsqueda. Sigamos adelante y tratemos de escribir algo en nuestra búsqueda. Parece que nuestro cambio está creando un error que se produce cuando escribes en la entrada de búsqueda. Si recuerdas, hemos visto antes este mismo error, y está ocurriendo porque nos olvidamos de vincular el manejador on search al componente. Esto es lo mismo que teníamos que hacer para el manejador OnTellJoke antes. Adelante y arreglemos eso. Perfecto. Ahora escribir en la entrada de búsqueda funciona sin error. Solo para asegurarnos de que se esté guardando un término de búsqueda, vamos a renderizarlo temporalmente en la pantalla. Ahora podemos ver que a medida que escribimos, el valor del término de búsqueda se está actualizando también, con el término de búsqueda que se guarda exitosamente en estado de aplicación, podemos considerar esta tarea completa. Siguiente arriba es desencadenar en una búsqueda para suceder en formulario enviar.
10. Construir una aplicación: enviar Serach: El siguiente en nuestra lista de tareas es la tarea número 3, teniendo un oleaje desencadenado cuando se envía el formulario de búsqueda. Hasta este punto es la forma de búsqueda no hace mucho. Si hacemos clic en Buscar, parece que no pasa nada. Adelante y cambiemos eso. Lo primero que tenemos que hacer es capturar cuando se está enviando el formulario. Para ello, utilizaremos los formularios onSubmit evento, que tendremos que pasar nuestra función de manejador de eventos a. Voy a crear un nuevo método llamado onSearchSubmit que tome el evento de formulario como parámetro y por ahora solo cierre la sesión pero se está enviando el formulario. Además, no olvides vincular este nuevo manejador al componente o
recibiremos el mismo error que hicimos la última vez que nos olvidamos de enlazar nuestro método de manejador. A continuación, agreguemos nuestro nuevo manejador al evento OnSubmit para este formulario de búsqueda, veamos qué sucede ahora si hacemos clic en Buscar para enviar el formulario. Eso es extraño, no estamos viendo nada aparecer en nuestra consola. Resulta que la forma está haciendo exactamente lo que se supone que debe hacer. Es enviar el formulario como una solicitud GET a la página, lo que luego provoca que la página se actualice y que la constante se borre. Es por ello que no estamos viendo que nuestro formulario envíe mensaje se cierre la sesión. En nuestro caso sin embargo, queremos gestionar el envío del formulario y reaccionar. El primero que tendremos que hacer es evitar que se presente el formulario. Prevenir envío de formulario usará el pase de objeto de evento
al manejador y llamará al método PreventDefult en él. Una vez en su lugar, evitará que ocurra el comportamiento predeterminado de los formularios al enviar. Ahora cuando enviamos el formulario, podemos ver que los formularios enviar se está registrando en la consola como se esperaba, y la página ya no se está actualizando. Las cosas se ven bien pero nuestra forma aún no está buscando nada. Sigamos adelante y reemplacemos el console.log y en su lugar llamemos a nuestro método de búsqueda Bromas. Antes de seguir adelante y probar esto, voy a eliminar nuestra llamada de chistes de búsqueda de ComponentDidMount ya que ya no se requiere. Ahora sigamos adelante y presentemos el formulario y veamos qué pasa. Parece que el formulario está funcionando, pero todavía estamos simplemente renderizando la versión stringificada de la matriz de chistes, que lamentablemente no proporciona mucho detalle en los resultados de búsqueda. Por ahora voy a registrar los chistes devueltos de la búsqueda a la consola. De esta manera podemos tener una mejor idea de lo que realmente está sucediendo. Voy a seguir adelante y presentar dos búsquedas de chistes diferentes. Uno para gatos y otro para perros. Echemos un vistazo más de cerca a la primera broma devuelta de nuestra búsqueda de gatos. “ Estoy cansado de seguir mis sueños. Simplemente les voy a preguntar a dónde van y reunirme con ellos más tarde”. Ahora esa fue una opción para agregar broma, no tiene mucho que ver con los gatos. Echemos un vistazo a la primera broma en nuestra búsqueda de perros. No sólo esta broma no tiene nada que ver con los perros, es la misma broma exacta que en realidad la conseguimos también la búsqueda de gatos. Este es en realidad el comportamiento esperado ya que
todavía no estamos enviando la cadena de búsqueda a la API. Por lo tanto, todas las llamadas de búsqueda devolverán las mismas listas de chistes predeterminadas, que es lo que está pasando con nuestra búsqueda de gatos y perros en este momento. Refresquemos nuestra memoria y echemos un vistazo a los perros de nuevo. Si recuerda, el endpoint de búsqueda requiere que pase el término de búsqueda como un parámetro de cadena de consulta, que aquí demuestran. En nuestro caso estábamos reemplazando el valor hipster por un término de búsqueda valor estado. Ahora en ese refresco, actualicemos la llamada de chistes de búsqueda para usar este parámetro de cadena de consulta. Primero voy a actualizar la URL para usar la sintaxis literal de plantilla de JavaScript. De esta manera puedo incrustar fácilmente nuestro valor de término de búsqueda como expresión. Ahora que tenemos eso en su lugar, intentemos volver a hacer algunas búsquedas, como antes, empezaré por buscar chistes de gato y luego intentaré una segunda búsqueda de chistes de perros. Ya podemos ver que cada búsqueda devolvió un número diferente de resultados, lo cual ya es una buena señal de que algo ha cambiado. Ahora echemos un vistazo más de cerca a la primera broma de la búsqueda de gatos : “Apaga al gato, no me di cuenta de que estaba en llamas”. Eso suena más sobre el tema que la última vez. Ahora vamos a echar un vistazo a la primera broma de perros. “ ¿Por qué el vaquero tenía un perro de wiener? Alguien le dijo que se pusiera un perrito largo”. Siéntete libre de tomarse un momento para componerte después de esa gema. Sigamos. Las cosas realmente están empezando a juntarse. Ahora tenemos un formulario funcional que envía con éxito la búsqueda en el envío, que en realidad se encarga de la tarea número 3 de nuestra lista. A continuación, voy a dar a los resultados de búsqueda render una atención muy necesaria.
11. Construir una aplicación: resultados de búsqueda de procesamiento: A continuación en una lista de tareas se encuentra la prueba Número 4. Renderización en el resultado de búsqueda. En su forma actual los resultados de búsqueda no son demasiado para mirar. Ni siquiera podemos ver los chistes reales de la búsqueda, lo cual no es muy útil. Para poder mostrar correctamente una lista de resultados en JSX, deberás iterar a través de la colección. Lo primero que voy a hacer es cambiar la etiqueta p en una etiqueta de lista desordenada. Esto tiene más sentido ya que estamos renderizando una lista de chistes. Dado que los chistes es una matriz, puedo llamar a mapa en él. Por cada elemento de la matriz, voy a devolver un elemento LI. Dentro de cada elemento
LI, voy a insertar la copia de broma real. Si recuerdas, un objeto de broma contiene un identificador único bajo la prop ID y luego la broma real en sí bajo la prop de trabajo. En nuestro caso, queremos simplemente renderizar la broma. De acuerdo, ahora probemos una búsqueda y veamos qué pasa. Agradable. Parece que nuestros chistes finalmente están renderizando. Pero puedo ver que nuestro registro de consola tiene una advertencia en él. React normalmente te dará una advertencia en la consola si estás haciendo algo que no le gusta. En este caso, nos está diciendo que cada niño en una matriz o iterador debe tener un puntal clave único e incluso proporciona un enlace para más información si nos gusta. Parece que React nos está diciendo que necesitamos darle a cada elemento LI un puntal clave único. Este atributo clave permite a React identificar elementos individuales en la colección. Esto se vuelve especialmente importante a la hora de ordenar colecciones grandes ya que permite reaccionar solo para renderizar los elementos que cambian en lugar de volver a renderizar toda la lista. El parte importante es que cada valor clave sea único. En nuestro caso, podemos usar el apuntalamiento ID de nuestros datos de broma. Ahora que cada broma de la lista tiene un puntal clave único nuestra advertencia de reaccionar ha desaparecido. Te habrás dado cuenta de que todavía estamos configurando eso es recuperar estado de broma de antes, pero ya no lo estamos usando. Al igual que antes, me gustaría mostrar un mensaje mientras se están buscando los resultados de búsqueda, podemos usar el mismo enfoque que la última vez y usar una expresión condicional. Si es buscar chiste es cierto, muestra el mensaje buscando chistes. Si buscar broma es falsa, renderiza los resultados de búsqueda. A continuación esto funcionará. No soy un gran fan de este formato ya que me resulta más difícil de leer. A veces puede que te resulte útil romper el renderizado en funciones más pequeñas. Voy a seguir adelante y hacer justamente eso con un elemento de lista de chistes. Empezaré por crear un nuevo método llamado chistes
render y que en su lugar devuelva la lista desordenada de los chistes. Ahora puedo actualizar mi expresión condicional para usar chistes
rendertidos en lugar de ese elemento de lista de chistes, lo que creo hace que la condición sea mucho más fácil de leer. Para probar el mensaje de carga, lo
volveré a lanzar a mi velocidad de conexión usando DevTools de Chrome. Ahora cuando enviamos la búsqueda, obtenemos un mensaje de búsqueda mucho más fácil de usar de
chistes mientras se están recogiendo los chistes. Eso se encarga de renderizar resultados de búsqueda en nuestra lista de tareas. siguiente paso es engancharme a, me siento divertido botón.
12. Construir una aplicación: me sentido divertido: Estamos haciendo algunos grandes avances en nuestras listas de tareas y estamos listos para pasar a enganchar el botón “Me siento gracioso”. Este botón es un juego en el botón
“Me siento afortunado” de Google , que al hacer clic, lleva al usuario al primer resultado de búsqueda por defecto. En nuestro caso, estará devolviendo una broma de “Papá Soltero”. Para el botón “Me siento gracioso”, vamos a replantear el botón existente “Dime una broma”. Empecemos relabando el botón con “Me siento divertido”. Ahora mismo si hacemos clic en el botón y llama al método “On Tell Broke”, que luego llama al "Método Search Bromas”. Ya que no tenemos un término de búsqueda ingresado en este momento, simplemente
devuelve la lista de chistes por defecto. Entonces, ¿cómo conseguimos el,” Me siento el botón de la suerte” para devolver sólo una sola broma. Si volvemos a los docs API para los chistes de papá, verás que el endpoint de búsqueda tiene otros parámetros de cadena de consulta disponibles. Mirando aquí podemos ver que existe un parámetro de límite el cual permite controlar la cantidad de resultados devueltos. Actualmente estamos usando el valor predeterminado el cual devolverá 20 chistes. Sigamos adelante y agreguemos límite a nuestra llamada de búsqueda y pongámosla igual a una. Cuando hago clic en el botón “Me siento divertido”, sólo
estamos recuperando la broma. Ya que codificamos duro el límite de uno, nuestro formulario de búsqueda sólo devuelve una broma también, que no es lo que queremos. Necesitamos una forma de pasar chistes de búsqueda el límite que queremos utilizar. Para ello, voy a agregar un parámetro de límite y darle un valor predeterminado de 20. Esta forma de parámetros Novoalign pasados, todavía
tenemos un valor válido que podemos utilizar. Ahora actualicemos la URL de búsqueda para usar el nuevo parámetro límite como valor. Démosle otro intento a nuestra búsqueda. Parece que la búsqueda está funcionando de nuevo, pero estamos de vuelta al cuadrado uno con nuestro botón “Me siento afortunado” ya que sigue regresando múltiples chistes. Para solucionarlo tendremos que actualizar los botones Manejador On-click. En primer lugar voy a quitar el método “On Tell Broke”. Ya que todo lo que hace este método es llamar al método “Buscar chistes”. Podemos eliminarlo y simplemente llamar a “Buscar chistes” directamente en su lugar. Ahora que he eliminado “On Tell Joke”, también
necesito eliminar el método de enlace en el constructor también. Ahora podemos seguir adelante y agregar la “Búsqueda de chistes Call” al manejador al hacer clic. En este caso sin embargo, quiero pasar un valor de uno para el parámetro límite. Si quiero pasar el parámetro de chistes de búsqueda, no
puedo hacer que el evento On-click lo llame directamente. En cambio, usaré una función [inaudible], que me permitirá llamar chistes de búsqueda con parámetros y en este caso un límite de uno. Ahora cuando hago clic en el botón “Me siento afortunado”, me devuelvo una broma de sellos como se esperaba. Si envío una búsqueda, sigo viendo que varios chistes regresan como se esperaba también. Creo que estamos bien para cruzar el botón “Me siento divertido” de nuestra lista de tareas. Siguiente paso: Crear los componentes del formulario de búsqueda.
13. Construir una aplicación: componentes de SearchForm: El siguiente paso en una lista de tareas es crear un componente SearchForm. Hasta ahora hemos estado haciendo todo nuestro trabajo en un solo componente o componente de aplicación. En React, no quieres que un solo componente esté manejando demasiado. Al igual que las funciones, si encuentras que un componente está haciendo demasiado, suele
ser una buena señal de que se puede romper en componentes más pequeños. echar un vistazo a nuestro componente de aplicación, creo que el SearchForm es un buen candidato para ser desprendido en su propio componente. Empecemos por crear un nuevo archivo llamado SearchForm.js. Por ahora, SearchForm será un componente funcional de huesos desnudos que devuelve un cada uno que contiene un saludo. Este será un Marcador de posición temporal hasta que movamos el elemento de formulario desde el componente de la aplicación. También es un patrón común que la exportación por defecto de un archivo de componentes sea el propio componente, que es el patrón que estaremos siguiendo. Para poder utilizar el componente SearchForm desde la app, necesitarás importarlo como lo harías con cualquier otro archivo. A continuación, agreguemos el componente al método render y veamos si funciona. Agradable. Podemos ver nuestro renderizado de componentes, pero no está haciendo mucho. Vamos a copiar el SearchForm de la aplicación en el archivo de componente SearchForm. Una vez que guardamos esto, podemos esperar ver algunos errores, ya que todavía estamos haciendo referencia a los métodos endstate desde el componente de la app. El primer error que obtenemos es 'no se puede leer la propiedad onSearchSubmit of undefined'. Esto se debe a que el método onSearchSubmit hace referencia a nuestro componente de aplicación. Entonces, ¿cómo accedemos a los métodos en el componente app desde el componente SearchForm? Aquí es donde los apoyos son tu amigo. Volvamos al componente de la aplicación, y agreguemos un nuevo prop a este SearchForm llamado onFormSubmit. Lo que haremos es pasar la referencia de aplicaciones a OnSearchSubmit como el valor de la prop onFormSubmit. Ahora de vuelta en SearchForm, lugar de llamar a onSearchSubmit, accederemos a los componentes props, y usaremos en su lugar la nueva prop OnFormSubmit, que no olvidan es una referencia al método onSearchSubmit en aplicación. Ahora cuando guardamos, podemos ver que el error onSearchSubmit se ha ido, pero ahora tenemos un nuevo error, pero esta vez se está quejando de que OnSearchChange esté indefinido. Entonces en el formulario, voy a empezar por agregar un nuevo prop a SearchForm llamado onSearchValueChange y luego pasar aplicaciones referencia a onSearchChange como valor. Entonces de vuelta en nuestro SearchForm, llamaremos a la prop onSearchValueChange en lugar del onSearchChange. Ahora cuando guardamos, el error es reemplazado por uno
nuevo quejándose de que el estado está indefinido. A estas alturas deberías conocer la rutina. Añadiré un nuevo prop a SearchForm llamado IsSearching y pasaré el estado IsFetchingJoke como el valor. Si bien estoy en ello, voy a pluralizar el nombre a isFetchingBrokes ya que ahora estamos buscando más de una broma. De vuelta en SearchForm, reemplace la referencia a IsFetchingJoke por IsSearching prop. También acabo de notar que solo desactivamos el botón I'm Feeling Lucky cuando IsSearching es cierto. Deberíamos estar haciendo lo mismo para el botón de búsqueda. Por lo tanto, vamos a añadir la prop de desactivación allí también. Bueno, parece que hemos arreglado los errores, pero puedo ver que seguimos haciendo referencia a SearchBrokes desde el botón I'm Feeling Funny. Si sigo adelante y hago clic en él, se puede ver que obtenemos un error, 'no se puede leer la propiedad SearchBromas de indefinido'. Esta parece ser nuestra última referencia sobrante al componente de la aplicación, así que sigamos adelante y arreglémoslo. Voy a empezar por copiar el valor existente de OnClick ya que lo vamos a necesitar. Entonces voy a agregar otro prop a SearchForm llamado OnSingleSearchClick y por el valor, voy a pegar en el valor OnClick que copié antes. Ahora en SearchForm, utilizaremos la prop OnSingleSearchClick en su lugar. Ahora, vamos a ahorrar y a ver cómo se ven las cosas. Parece que el botón I'm Feeling Funny está funcionando de nuevo, y la búsqueda también se ve bien. Ahora que todo está funcionando de nuevo, echemos un vistazo más de cerca al nuevo componente que creamos. El método render se ve mucho más ordenado ahora con toda la lógica formal escondida en el componente SearchForm. Otra ventaja añadida es que el componente SearchForm ya no maneja ningún dato por sí mismo. Todas las referencias a los datos se manejan a través de apoyos y devoluciones de llamada. Habrán notado que he estado manteniendo mis nombres de prop lo más genéricos posible. No tener sus nombres de prop bien acoplados a sus datos, hace que su componente sea más versátil. De esta forma, si terminamos cambiando nuestra aplicación para buscar algo que no sea bromas, no
tenemos que renombrar ninguno de nuestros props SearchForm. A este tipo de componente se le conoce en ocasiones como un componente tonto o presentacional en la Comunidad React. A estos componentes no les importa qué tipo de datos se les está pasando, sólo les preocupa su aspecto. Esto crea un buen punto que es mucho más fácil de reutilizar. Por ejemplo, si queríamos que nuestro SearchForm buscara algo distinto de chistes, solo
tenemos que actualizar los apoyos y devoluciones de llamada para pasar en diferentes datos en lugar de crear un componente completamente otro. Con el componente SearchForm completo, podemos tachar ese de nuestra lista. A continuación estaremos haciendo algo de Refactorización y Limpieza.
14. Construir una aplicación: refactoring y limpieza: Estamos casi al final de nuestra lista de tareas, y ahora es el momento de hacer algunas refactorías y limpiar. Se puede pensar en refactorizar como servicio de limpieza para su código. Siempre es bueno dar un paso atrás después de desarrollar una nueva característica para ver si hay alguna área en la que puedas hacer mejoras. Dicho esto, me gustaría hacer algunas mejoras relacionadas con el nuevo componente de formulario de búsqueda. Si miramos tanto el cambio en la búsqueda como el en la búsqueda Enviar métodos, ambos
esperaban un objeto de evento como parámetro. Ahora que estamos pasando estos métodos como apoyos para buscar formulario, no siempre
podemos garantizar que se les llame con un evento. Voy a empezar con el método en búsqueda Enviar, y eliminar el parámetro de evento así como el punto de evento [inaudible] event dot prevent default. Ahora en la búsqueda Enviar realmente no está haciendo nada además de llamar chistes de búsqueda, eso nos permite simplificar un poco las cosas. Ahora, el formulario de paso, presentar el método en búsqueda Enviar. Simplemente voy a seguir adelante y pasar directamente el método de chistes de búsqueda. que en realidad significa que podemos deshacernos de en la búsqueda Enviar y la lógica de enlace en el constructor con él también. Además, no olvides vincular los chistes de búsqueda al componente. Ahora que se está llamando como manejador de eventos. Al eliminar el manejador de envío en búsqueda, también
eliminamos el método PreventDefault que estaba deteniendo nuestro formulario de Enviar. Si Enviamos una búsqueda ahora puedes ver que la página se está refrescando de nuevo. Debido a que los formularios por defecto Enviar comportamientos ya no se previenen. Para solucionar este problema ahora estaremos manejando el evento de
envío de formulario desde el componente de formulario de búsqueda. Lo primero que necesito hacer es agregar un retorno explícito en el componente. De esta forma puedo crear una nueva función llamada onsubmit, que luego usaré para el manejador de eventos onsubmit ahora. Esto significa que la función onsubmit recibirá el objeto de evento como su primer parámetro y ahora que tenemos acceso al objeto de evento, podemos evitar el envío de formularios utilizando el mismo método antes y después de eso solo hacemos una llamada a el en formulario Enviar prop. Ahora cuando Enviamos una búsqueda, el formulario está funcionando de nuevo como se esperaba. Pero al tener formulario de búsqueda manejar sus propios eventos de forma, lo
desacoplamos aún más del componente de la aplicación. A continuación, vamos a mejorar también el método de cambio de búsqueda, y eliminar el parámetro de objeto de evento. En cambio, hará que las cosas sean más genéricas y cambiará el parámetro excepto el valor directamente en lugar de sacarlo del objeto de evento. Ahora del formulario de búsqueda es al que pasa el evento, sacará el valor del evento y pasará eso a lo largo en su lugar. Esto nuevamente ayuda a desacoplar el componente de formulario de búsqueda del componente de la aplicación y cuanto más componente desacoplado sea, más fácil es reutilizar. Sólo para demostrar que voy a duplicar nuestro formulario de búsqueda, pero en este formulario sólo voy a volver a chistes cuando se envíe una búsqueda. Este cambio se vuelve muy fácil modificando un solo prop y el segundo componente de forma. Ahora cuando busco con la primera forma, funciona igual que antes. Cuando busco con la segunda forma, solo
obtengo los dos resultados de búsqueda de vuelta. Ambas formas están usando el mismo componente, pero pueden funcionar independientemente el uno del otro. Este puede no ser el ejemplo más práctico, pero ojalá demuestre los beneficios de usar componentes DOM. Antes de terminar, quiero hacer un par de artículos de limpieza rápida. Primero es deshacerte de la etiqueta de término de búsqueda que estábamos usando para probar antes ya que ya no lo necesitamos. Última cosa voy a quitar el registro de punto de consola
estábamos usando la prueba los resultados de broma antes. Ahora déjame ordenarlo un poco. Estamos listos para pasar a nuestra tarea final; diseñar la aplicación.
15. Construir una aplicación: añadir estilos: En este punto, estoy bastante contento con cómo funciona la aplicación, pero no tan contento con cómo se ve, lo que lleva muy bien a nuestro siguiente tema; diseñar tu aplicación React. Cuando se trata de agregar estilos en React, hay muchos sabores diferentes para elegir. Hay CSS llano viejo, preprocesadores
CSS como Sass, módulos
CSS, CSS in-jazz y muchos más que podría tocar. El punto es que no hay una solución correcta o incorrecta, ya que realmente se reduce a lo que funciona para ti. Mi recomendación a ustedes es experimentar por su cuenta y ver con cuál de estos, si los hay, realmente les gusta trabajar. Mientras tanto, solo voy a repasar algunos conceptos básicos de usar CSS simple y viejo en React. Es posible que ya hayas notado que nuestra app contiene los estilos dot css ya. Esto fue creado por CodeSandBox cuando empezamos por primera vez. Si abrimos ese archivo, verás que tenemos un solo nombre de clase dot App con algunas reglas básicas de CSS. No estamos usando esta clase en este momento, pero podemos agregarla fácilmente a un elemento agregando el nombre de la clase prop y estableciendo el valor igual al nombre de la clase. Es realmente, no es diferente a cómo lo harías con HTML simple y CSS. La gran diferencia aquí es que estás usando el prop nombre de clase, en lugar del atributo de clase. Ahora cuando guardamos, puedes ver que nuestra app está usando estos nuevos estilos ya que ahora nuestra forma está centrada en la página. Otra cosa que habrás notado es la línea css de los estilos de importación dot en la parte superior de nuestro componente de aplicación. ¿ Cómo fue nuestro archivo JS importando un archivo CSS? Se puede preguntar. Si no estás familiarizado con los bundlers como webpack, esto podría parecer realmente extraño. En nuestro caso, tenemos suerte ya que webpack ya fue configurado para nosotros por CodeSandBox y webpack podría honestamente ser todo un curso por sí solo. Por ahora, solo tienes que saber que una vez que se importe un archivo CSS, esos estilos se agregarán a tu aplicación y están listos para su uso. Además, no estás restringido a mantener todo tu CSS en un solo archivo. De hecho, es común que cada componente tenga su propio archivo CSS dedicado. Con eso dicho, sigamos adelante y creemos un archivo CSS para nuestro componente de formulario de búsqueda. Voy a seguir adelante y nombre a este formulario de búsqueda de archivos dot CSS. También es práctica común que un componente y su archivo CSS tengan el mismo nombre. Esto no sólo ayuda con la organización en el sistema de archivos, también deja muy claro que estos estilos pertenecen a este componente. Ahora que tenemos listo nuestro archivo CSS, voy a seguir adelante y jalar algunos estilos prehorneados que creé antes. A continuación, vamos a importar el formulario de búsqueda CSS en nuestro archivo de componentes y guardar. Si tenemos un vistazo más de cerca al formulario de búsqueda CSS, se
puede ver que hay una clase de formulario de búsqueda dentro. Voy a seguir adelante y agregar esta clase al elemento raíz en
el componente de formulario de búsqueda. Además, voy a seguir adelante y envolver nuestros botones en un div ya que solo se necesita para que algunos de estos estilos funcionen. Ahora cuando guardo, se puede ver que las cosas realmente empiezan a verse mejor ahora que tenemos un poco de estilo. Es importante tener cuidado al dividir CSS en archivos
separados que no estás rebasando estilos en otro archivo. A pesar de que el archivo css del formulario de búsqueda sólo se está importando en el componente, ese componente también se está importando en una aplicación. Una app también tiene su propio archivo CSS. Para demostrar, voy a seguir adelante y agregar un color de fondo al elemento body en el formulario de búsqueda dot CSS. Después añadiré un color de fondo al cuerpo y la app CSS también y guardaré. Como puedes ver, los estilos de cuerpo y app dot css han sobrescrito los estilos de cuerpo y la forma de búsqueda dot CSS. Por lo que hay que tener cuidado al trabajar con múltiples archivos. Si tienes oportunidad, te recomiendo echar un vistazo a los módulos
CSS ya que no tienes que preocuparte por anular otras clases CSS ya que mantiene tus estilos de componentes locales al componente en el que estás trabajando. De acuerdo, para terminar, voy a hacer trampa un poco y traer
el resto de los estilos terminados para el componente App también. último, pero no menos importante, nuestro hermoso papá bromea edición logotipo de Google. Ahí lo tienes, tu propio papá totalmente funcional chistes motor de búsqueda incorporado reacciona. Con el estilo completo, que cuida el último elemento de nuestra lista de tareas. Siguiente paso vamos a hacer algunas exploraciones de alto nivel sobre cómo funciona React detrás de bambalinas.
16. Cómo funciona: procesamiento de la DOM: Al trabajar en React, es fácil olvidar que tu aplicación
todavía se está ejecutando en un archivo HTML simple y antiguo. En nuestro caso, ese es el archivo HTML índice que CodeSandBox creó para nosotros. Si lo abrí y eché un vistazo, se
puede ver que no hay mucho marcado HTML en el cuerpo aparte de este div vacío. Sólo para demostrar que esta es efectivamente la página que estamos renderizando en el navegador, voy a seguir adelante y agregar un mensaje personalizado y guardar. Una vez que guardo, puedes ver que esta copia ahora aparece junto con el mensaje hola CodeSandBox, que viene de nuestro componente de aplicación. Pero no vemos la copia para el componente de la app en ninguna parte de este archivo HTML, entonces ¿cómo es que la estamos viendo en el navegador? El motivo es que React está manejando el renderizado del componente de la app para nosotros y gestiona la creación de los elementos DOM que se muestran en el navegador. Pero, ¿cómo terminaron los elementos creados por React en el archivo HTML índice? React requiere que le proporcione un nodo DOM en el que renderizar, que se conoce como el nodo DOM raíz. En nuestro caso, el nodo DOM raíz es este div vacío que señalé antes, que convenientemente tiene un atributo ID igual a root. Si volvemos al Add Component, verías que estamos haciendo una llamada a ReactDom dot render. El paquete ReactDom está separado de React y contiene métodos que son sorpresa, específicos para tratar con el DOM. Si alguna vez terminas trabajando con renderizado del lado del servidor, también
te encontrarás trabajando con ReactDom. Ahora de vuelta a nuestro componente de aplicación cuando ReactDom dot render se llama su pasado el componente y una referencia al elemento DOM raíz. El renderizado de ReactDom generalmente solo se llama una vez, y una vez que se llama todo lo que está dentro del elemento DOM raíz ahora es administrado por React. Sólo para demostrar, voy a abrir mi Chrome DevTools e inspeccionar el DOM. Aquí puedo ver el elemento div root que estaba vacío en nuestro archivo HTML. Pero ahora en lugar de estar vacío, contiene los elementos que está gestionando React. Ahora que sabemos cómo React se renderizará en el DOM, echemos un vistazo más de cerca a cómo maneja las actualizaciones de renderizado.
17. Cómo funciona: renderización de actualizaciones: Es más que probable si le preguntas a alguien por qué usar React, podrían decir porque es rápido. Si bien React es súper eficiente cuando se trata de renderizar actualizaciones, realmente no ayuda a responder ¿por qué es rápido? Quería indagar en algunas características clave que contribuyen a la velocidad de React. Número uno, Reaccionar solo actualiza lo necesario. Se ve en React cuando se actualiza un componente, se asegura de que sólo aplica lo que ha cambiado al DOM. Para demostrar, tengo un ejemplo sencillo que consiste en componente llamado botón. Cada vez que se hace clic en el botón, se incrementa un estado de recuento de clics uno y se renderiza que cuentan como parte de la etiqueta de botones. Voy a abrir este ejemplo en una ventana de navegador independiente para poder acceder mejor a mis herramientas de desarrollo de Chrome. En la pestaña de elementos seleccionaré el botón y ampliaré para que podamos ver todo el contenido del elemento. Ahora cuando hago clic en el botón, se puede ver que el valor numérica está cambiando y también se está resaltando cada vez que cambia. Este punto culminante representa lo que se está cambiando en el DOM. Podemos ver que nuestra etiqueta de recuento de botones y clics permanecen intactas. Sólo se está actualizando el valor numérica. Ahora tengo el mismo ejemplo en JavaScript simple sin React esta vez. Voy a seleccionar el elemento en herramientas de desarrollo y expandido igual que antes. Para este momento cuando hago clic en el botón, se
puede ver que en esta ocasión se están resaltando todos los botones. Esto significa que en lugar de sólo el número que se está cambiando, se está cambiando todo
el botón en el DOM. Si bien este ejemplo es simple, imagina lo importante que se vuelven estas actualizaciones eficientes cuando tu aplicación crece de tamaño y tiene cientos de elementos. Otra cosa que React hará son las actualizaciones de estado por lotes juntas. Si activa múltiples cambios de estado desde un manejador de ventilación reactivo o método de ciclo de vida, se agrupará todos esos cambios en un solo render. Por ejemplo, finjamos que tengo una sencilla aplicación React que consiste en un componente de entrada de búsqueda,
un componente de lista de resultados
y un componente de paginación. Cuando hago clic en el botón de búsqueda, desencadena un cambio de estado en los tres componentes. Ahora dados los cambios de 3 estados, normalmente
esperarías ver tres renders. Pero ese no es el caso aquí. En realidad es sólo el render único. Esto se debe a que las tres actualizaciones de estado se juntaron por lotes y React es capaz hacerlo porque las tres actualizaciones se originaron a partir del mismo evento de clic. Ahora al último elemento de la lista, los elementos
React son solo objetos llanos. A diferencia de los elementos DOM del navegador, los elementos
React son objetos y baratos de crear. De hecho, toda tu app React está representada por un objeto que se mantiene en la memoria. Por ejemplo, tomemos este sencillo marcado HTML para un formulario de inicio de sesión con una entrada de nombre de usuario y contraseña. En React, esto estaría representado por un objeto que se ve algo así. Se puede ver que cada uno de los elementos HTML están representados por un objeto y reaccionan. Entonces, cuando se produzca un cambio, reaccionar comparará la versión anterior del objeto con la versión actualizada
del objeto y realizará actualizaciones basadas en las diferencias y luego renderizará los cambios al DOM. Bueno, este fue un desglose muy simplificado del complejo concepto DOM virtual de React. Espero que te diera alguna idea de lo que sucede bajo el capó en React. Estas son solo algunas de las grandes características que contribuyen a reaccionar velocidad y eficiencia. Si bien es posible que estos elementos no sean necesarios de aprendizaje para React, creo que tener al menos una comprensión de alto nivel de estas características te ayudará a convertirte en un mejor desarrollador de React.
18. Conclusión: Wrapping: Antes de terminar las cosas en la clase, quería darte un resumen rápido del proyecto de clase. El proyecto implica tomar una aplicación de broma de búsqueda [inaudible] que acabamos de crear, y añadirle algunas mejoras. Esas mejoras están delineadas en la descripción del proyecto, pero también te guiaré por ellas ahora. Cada una de estas nuevas características se construirá sobre lo que ya has aprendido a lo largo del curso. El primer elemento de la lista es mover la lista de resultados de búsqueda a su propio archivo de componentes. A continuación, deberá agregar un mensaje “no se han encontrado resultados” cuando una búsqueda no devuelva chistes. Después de eso, agrega un botón que borre los resultados de búsqueda y término de búsqueda. A continuación, agregue una entrada selecta que permita
al usuario seleccionar la cantidad de chistes devueltos de la búsqueda. Por último, si estás listo para un reto, actualiza la entrada de búsqueda para que los resultados se actualicen a medida que tecleas. Para poder agregar tu trabajo, necesitarás hacer primero una copia de mi CodeSandBox bifurcándolo. Para bifurcar mi proyecto, basta con abrir la URL del proyecto CodeSandBox incluida en la descripción de la clase, y hacer clic en el cuarto botón de la navegación principal. Ignora la advertencia ya que sólo estoy recibiendo esto ya que soy el dueño del proyecto que se bifurca. Ahora tengo una copia del proyecto que puedo renombrar y hacer cualquier cambio que me guste independiente de la versión original. Si tienes alguna pregunta o comentario, por favor siéntete libre de contactarme en Twitter o dejar un comentario aquí en la clase. Si disfrutaste de la clase, por favor siéntete libre de difundir la palabra y compartir el enlace. También búsquame en medios de comunicación. Si tienes una oportunidad como también posteo regularmente, se trata de Reaccionar. Gracias de nuevo por unirte a mí y espero verte también en futuras clases.
Ryan Johnson, Full-Stack Developer, React, Node.js
