Fundamentos de React moderno: crea un generador de citas | David Sealey | Skillshare
Buscar

Velocidad de reproducción


1.0x


  • 0.5x
  • 0.75x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 1.75x
  • 2x

Fundamentos de React moderno: crea un generador de citas

teacher avatar David Sealey, Web Developer

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Ve esta clase y miles más

Obtenga acceso ilimitado a todas las clases
Clases enseñadas por líderes de la industria y profesionales activos
Los temas incluyen ilustración, diseño, fotografía y más

Lecciones en esta clase

    • 1.

      Introducción

      2:44

    • 2.

      Introducción al proyecto

      2:48

    • 3.

      ¿Qué es React y por qué usarlo?

      1:18

    • 4.

      Configuración del proyecto de React

      10:34

    • 5.

      Componentes y JSX

      12:49

    • 6.

      Accesorios

      12:29

    • 7.

      Introducción a los ganchos y al usoState

      8:36

    • 8.

      useEffect ganchillo

      6:36

    • 9.

      Los datos y cómo conectar nuestros... ganchos

      11:44

    • 10.

      Pruebas

      3:32

    • 11.

      Agregar estilos

      10:27

    • 12.

      Implementación de tu trabajo

      5:44

    • 13.

      ¿Hacia dónde ir desde aquí?

      4:24

    • 14.

      Resumen y razones por las que eres impresionante

      1:26

  • --
  • Nivel principiante
  • Nivel intermedio
  • Nivel avanzado
  • Todos los niveles

Generado por la comunidad

El nivel se determina según la opinión de la mayoría de los estudiantes que han dejado reseñas en esta clase. La recomendación del profesor o de la profesora se muestra hasta que se recopilen al menos 5 reseñas de estudiantes.

194

Estudiantes

3

Proyectos

Acerca de esta clase

Si quieres aprender todas las técnicas básicas de React.js para que puedas comenzar a crear una aplicación web completa, ¡esta clase de React es para ti!

En esta clase, aprenderás a codificar una aplicación React que será generada en una sola página web. Las técnicas modernas de React que se usan para crear este proyecto abarcarán una amplia gama de conceptos y enfoques para asegurarte de que tendrás la confianza de poder usar React en futuros proyectos por tu cuenta. Todo lo que se describe en este curso será fundamental para dominar los aspectos importantes de la creación de una aplicación de React.

Te explicaré cómo uso React para crear una aplicación funcional y de alto rendimiento que mejore la experiencia integral del usuario.

Esta clase abarcará lo siguiente:

  • Aspectos básicos como configurar un proyecto de React, componentes funcionales, accesorios, ganchos, gestión básica del estado, etc

  • Reaccionar con ganchos, como useState y useEffect

  • Uso de React DevTools para depuración

  • Trabajo con datos en React

  • Agregar estilos

  • Extensiones y herramientas útiles de React para facilitar el desarrollo

Se te mostrará cómo publicar tu trabajo (¡gratis!) usar Netlify para que puedas compartir tu trabajo con los otros estudiantes de este curso.

Incluso si recién comienzas en React, estas técnicas simples y efectivas son fáciles de usar y podrás aplicar todo lo que aprendas a tus propios proyectos web futuros.

Conoce a tu profesor(a)

Teacher Profile Image

David Sealey

Web Developer

Profesor(a)

Hi, I'm David. I am a senior front-end web developer from Norwich, England.

I have had various roles within the digital marketing sector including SEO, digital advertising management, and user experience but it is my current role in web development where my passion truly lies.

I have many years of front-end experience building websites, apps, infographics, digital ads, and data visualisation tools for many high-profile international clients.

Ver perfil completo

Level: Beginner

Valoración de la clase

¿Se cumplieron las expectativas?
    ¡Superadas!
  • 0%
  • 0%
  • Un poco
  • 0%
  • No realmente
  • 0%

¿Por qué unirse a Skillshare?

Mira las galardonadas Skillshare Originals

Cada clase tiene lecciones cortas y proyectos prácticos

Tu membresía apoya a los profesores de Skillshare

Aprende desde cualquier lugar

Ve clases sobre la marcha con la aplicación de Skillshare. Progresa en línea o descarga las clases para verlas en el avión, el metro o donde sea que aprendas mejor.

Transcripciones

1. Introducción: En esta clase, te estaré enseñando los fundamentos de reaccionar, qué es, por qué creo que es una gran biblioteca con la que ponerte a la vista y cómo implementar las prácticas más nuevas y mejores en tus proyectos web. React es uno de los frameworks o bibliotecas líderes en la creación de UIs interactivas sin fisuras. Por lo que realmente es esencial que cualquier desarrollador web front-end tenga alguna experiencia en. A lo largo de esta clase, te enseñaré cómo trabajar con componentes funcionales React, JSX, props, hooks, administración estatal, cómo depurar y probar tu aplicación. Difícil de agregar estilos y mucho más. Todos los cuales son partes cruciales a saber a hora de construir grandes UIs con reaccionar. Al seguir junto conmigo a través de todas estas lecciones, usas estas habilidades recién adquiridas para construir tu propio generador de cotizaciones. Cada paso de construir este generador de cotizaciones cubrirá tantas habilidades importantes que necesitará para ser un desarrollador React completo y seguro. Oye, soy David y soy desarrollador web front-end de Northridge en Inglaterra. Tengo muchos años de experiencia creando aplicaciones digitales para una variedad de clientes internacionales. Disfruta ayudando a otros desarrolladores web como tú a mejorar sus habilidades, lo que les ayudará a seguir adelante sus carreras y última instancia, los ayudará a convertirse en el mejor desarrollador o al azar que puedan ser. Pero odio hablar de ti mismo. Así que pasemos rápidamente. Esta clase soy yo bajo estudiantes que tienen algunos conocimientos básicos de tecnologías front-end incluyendo JavaScript, pero me gustaría aprender reaccionar. Incluso si has venido de un fondo de lenguaje de codificación diferente, aún podrías ser capaz seguir siempre y cuando conozcas los conceptos básicos de funciones, matrices y objetos. Si eres un principiante completo para reaccionar , eso está absolutamente bien. Todo lo que necesitas para crear tu proyecto de clase es tu IDE favorito. Vs código será mi editor de código de elección usado en esta clase. Pero cualquier otro que te sienta cómodo usando a ti mismo están absolutamente bien. Cuando termine de construir su generador de núcleo, estará implementando un producto en la web usando Netlify. Se preocupan, te mostraré lo fácil que es hacer eso y todo es completamente gratis. Con las habilidades que ganarás de esta clase, podrás ofrecer mucho más como desarrollador, ya sea independiente o si trabajas para una empresa, reaccionar sigue siendo la biblioteca JavaScript más popular utilizado en el mundo. Y tantas aplicaciones web se construyen usando React. Una vez que requieras estas nuevas habilidades, podrás demostrar tus conocimientos a cualquier empresa que busque desarrollador front-end altamente calificado y sólido. Al final de esta clase, podrás crear resbaladizos y de alto rendimiento, usar interfaces utilizando las últimas funciones de reaccionar. Sin más preámbulos, comencemos. 2. Introducción del proyecto: En esta clase juntos estaremos construyendo un generador de cotizaciones aleatorias todo dentro, reaccionar. Al pulsar este botón y aparecerá al instante nueva cita aleatoria. Esta será una aplicación de una sola página, que incluirá un área para poblar la cotización, un pie de página simple. Y te mostraré cómo gestionar el estado de tu solicitud. Si estás siguiendo junto a mí, cual te animo encarecidamente que lo hagas, también puedes construir algo así como un generador de hechos aleatorios o una aplicación similar que mira algún texto datos y poblar aleatoriamente una cadena de texto aleatoria. El texto en sí no era demasiado importante. Serán todas las técnicas de React que te mostraremos en cada lección las cuales son importantes. Ahora he elegido un generador de cotizaciones como proyecto para construir ya que esta es una aplicación web ideal que cubriremos muchos conceptos importantes de React. Esto incluye trabajar con paradigma de gestión estatal componentes infantiles, trabajar con apoyos, trabajar con ganchos y datos de altura que Kennedy utiliza en el interior reaccionar. Primer proyecto exitoso. Intenta usar todos los conceptos que te mostraré en este curso. Si te sientes particularmente seguro por puntos de bonificación, no has leído los documentos oficiales de desarrollo de React e incluir más contextos que no están cubiertos en este curso. También puedes intentar incluir componentes adicionales como un encabezado o incluso páginas adicionales. También intenta iniciar tu cancha generada de manera diferente a mente usando tu propio diseño, fuentes y colores. Los estudiantes deben estar usando su IDE favorito o editor de código para construir su proyecto de clase. Estaré usando el código VS, pero cualquier IDE funcionará igual de bien. Ahora necesitarás usar un terminal que esté disponible en la mayoría de los sistemas operativos. Pero estaré usando el terminal que viene liado con VS Code. Cualquiera va a hacer, por supuesto, usted utiliza el terminal para crear el proyecto y también para ayudarle a implementar su proyecto final usando Netlify. No te preocupes, te mostraré lo fácil que es configurar esto y empujar tu trabajo a una página web en vivo para que todos lo vean. Y podemos hacer esto todo en menos de un minuto. Todo mi trabajo estará en GitHub en esta URL. Para que puedan ver mi proyecto final. Yo usaría esto como referencia si te quedas atascado. Y incluiré esta URL en las notas del curso para cuando hayas desplegado tu proyecto, será genial para ti compartir capturas y vincular a tu generador terminado. Puedes hacerlo subiendo tu trabajo a la sección de tu proyecto en Skillshare. Esta es una gran manera de obtener retroalimentación de mí, de los otros alumnos y realmente a la prioridad mostrar tu trabajo y tu nuevo amigo reacciona habilidades. Por supuesto, si tiene alguna pregunta, por favor háganme saber. Ahora, echemos un vistazo a lo que React realmente es en la próxima lección. 3. ¿Qué es React y por qué lo uses?: Entonces, ¿qué es React y por qué aprenderlo en absoluto? Simplemente, como se indica en el sitio web oficial de reaccionar, React es una biblioteca JavaScript útil construyendo interfaces de usuario. Con React, podrás diseñar vistas sencillas para cada estado de tu aplicación. Reaccionar a tan eficiente que sabrá solo actualizar los componentes correctos cuando cambien tus datos, en su lugar, recargando toda la página. Esto lo hace ideal para la aplicación de una sola página que vamos a construir en esta clase. Esto significa que tu aplicación React tendrá un gran rendimiento y será súper rápida. Cada componente está encapsulado, lo que significa que cada componente gestiona su propio estado. Componentizado, trabajo mixto, fácil de administrar todo su código lo que le permite reutilizar componentes a lo largo de su aplicación. Para reaccionar ahora se utiliza en más de 10 millones de sitios web en todo el mundo. Esto también significa que hay una comunidad fuerte con grandes recursos por ahí para ayudarte en tu viaje. También hubo una curva de aprendizaje mucho más suave en comparación con su contraparte Angular. Y espero mostrarles justamente eso en este curso. ¿ Vamos a montar nuestro proyecto? Hagámoslo en la próxima lección. 4. Configuración del proyecto de React: Ahora déjame mostrarte cómo crear tu proyecto React y cómo ponerlo en marcha. Por lo que ya he abierto código VS aquí. Entonces este es el editor de código que estaré usando. Así que por favor haz lo mismo, abre la tuya y solo sigue conmigo. Lo primero que he hecho es crear una carpeta vacía llamada generador de cotizaciones. Curso lo que quieras y guárdalo donde quieras. No hay archivos ahí todavía, pero eso es lo que vamos a estar configurando. Ahora para crear un proyecto React, deberás asegurarte de tener instalado Node JS. Si no tienes JS ya descargado, ve a Node js.org. Se te presentará esta página. Ahora, como puedes ver, ya se ha detectado que estoy en un Mac iOS y quieres descargar los últimos archivos de descarga o actuales justo aquí. Ahora, ya tengo instalado Node, así que no necesito hacer eso. Pero al hacer clic en esto, se le presentará un asistente de instalación. Y solo necesitas pasar por los pasos hasta que tengas nodo en tu sistema. Y entonces, ¿cómo verifica si tienes nodo? Sólo voy a abrir una terminal. Y así si VS Code en nueva terminal, si no estás usando código VS y no tienes un terminal dentro de tu editor de código. No puedes usar simplemente cualquier terminal que esté liado con macOS o Windows. Así que acabo de abrir una terminal aquí, pero acabo de cerrar esto porque estaré usando el total dentro de las curvas S. Entonces espero que eso tenga sentido. De todos modos, para comprobar que sí tengo instalado Node, sólo voy a estar escribiendo nodo dash V, que está con versión. Y puede ver que 17.9, por lo que está instalado. Si ves estos números aquí, después de escribir el nodo b, entonces tienes nodo correctamente instalar. ¿ Qué es exactamente nodo y por qué lo necesitamos? Básicamente, es un entorno de servidor y es completamente de código abierto, multiplataforma. Ahora lo que hace esto, te permite usar JavaScript para escribir herramientas de línea de comandos o terminal para el scripting del lado del servidor. Y esto es exactamente lo que necesitamos para crear esta app React. ¿ Cómo creamos la app React? Escribimos n px, creamos guión, reaccionamos, guión, espacio. Y luego puedes escribir el nombre de tu carpeta o aplicación. Pero solo quería usar generador de cotizaciones, que es el nombre de mi carpeta aquí arriba. Entonces para hacer eso, solo uso un punto en lugar de un nombre y pulsa Enter. Necesito instalar, Create, React app. Vale, para proceder, sí, le pego Y. Y aquí está abarrotada la app React y todos los archivos y carpetas necesarios. Sólo dale un segundo a esto. Puede tomar algún tiempo dependiendo de phos altos a una máquina lo siento, no tengo que pasar todo nuestro proceso de instalación porque estaba tomando un poco de tiempo. Aquí queremos almacenar completa, correcta. Todo se ve bien. Como se puede ver a la izquierda aquí, tenemos esta estructura de carpetas que creó. Por lo que tenemos salsa con varios archivos. App.js como la aplicación raíz base. Muchos otros archivos aquí. Llegaremos a esos en un minuto. Ahora para poner en marcha esta aplicación en tu navegador, nuevo en la terminal, déjame simplemente borrar todo. Si escribo npm detenido, no MPS, NPM, que significa Node Package Manager, que te da varios scripts que puedes ejecutarlo. Por lo que sólo quería detener este espacio MPM. Detenido Entrar. Presumo que es un poco pasa bien. Debe abrir una pestaña o una ventana. Y si no lo hace, o tienes que hacer es ir al anfitrión local tres veces y ahí vamos. Ahora, si puedes ver esta página, entonces tu replicación reaccionó cuando se configuró. Empezando. Todo bien. Ahora si no ves esto, no ves esto en el anfitrión local 3 mil. Entonces debí haber sido un error en alguna parte. Y entonces vale la pena revisar lo que está diciendo tu terminal porque probablemente te dará algunos mensajes de error, que te explicaremos exactamente dónde está el tema. Vale, ahora sabemos que esto está en marcha. Vamos a ordenar algunos archivos dentro de app.js, que es el archivo padre para la aplicación. No necesitaremos la mitad de esto, así que en realidad nos deshagamos de todo lo que hay dentro del div, el encabezado. Sólo voy a incluir un H1 para decir. Jen. Sólo para asegurarnos de que sepamos qué es esto. Esto se actualiza en tiempo real, como se puede ver, hemos perdido la animación y tiene el nuevo texto. Por lo que no hay necesidad de seguir actualizando esto o seguir iniciando el servidor. Todo está buscando buenas actualizaciones en tiempo real. Ya no necesitamos importar el logotipo tampoco. Ahorra eso. Dentro de fuente como estamos aquí, vamos a configurar una estructura de carpetas. Ahora, esta es la forma en que me gusta hacer para mantener las cosas ordenadas y ordenadas. ¿ Puedes causar copiarme o piensas de manera diferente? Pero necesitaremos una carpeta para nuestros componentes. Esto es dentro de la fuente, por cierto. También dentro de fuente, vamos a tener una carpeta para nuestros datos, nuestros datos de texto. Y luego vamos a hacer lo mismo para la carpeta de estilos. Para estilos. Todo eso se ve bien. ¿ De qué más podemos deshacernos aquí? Deshazte de las geniales herramientas web phi cada vez que estemos haciendo alguna prueba esto y deshazte de las pruebas de configuración. Eso está todo bien. Lo que significa que es index js. Podemos deshacernos de lo que hemos borrado ahí. Y también esta parte del fondo. Ahí vamos. Compilado con éxito. Index js sostiene nuestro app.js, que simplemente debería tener la cancha Enero para también deshacerse de esta prueba. Sí. Y medio para hacer esto, pero no ha estado usando estos archivos. Vamos a mantenerlo limpio y ordenado, agradable y sencillo. Con la escuela cargando bien en esta etapa, déjame simplemente mostrarte algunas extensiones útiles que estoy usando en código VS solo para ahorrar algo de tiempo. Entonces a lo largo de este curso me verás usando algunos atajos de teclado y cosas solo para ahorrar tiempo y esfuerzo. Podrías encontrarte esto útil para mostrarte esto en. Entonces componentes, solo voy a crear un componente para el pie solo para probar estas cosas que pasé para mostrarte. Entonces llamaremos a este pie de página dot js. Por lo general es la convención normal para iniciar el componente js con una letra mayúscula. El primer atajo útil es crear un componente funcional React. Simplemente voy a teclear II y tab y se crea estructura de componentes aquí. Lo que está haciendo esto es una extensión que estoy usando fragmentos de código, fragmentos DX7 y actualizada. Entonces esto me está dando un montón de atajos de teclado solo para ahorrar algo de tiempo. Así que mantengan un ojo hacia fuera para esta extensión exactamente. Otra extensión útil que estoy usando se llama más bonita. Si tuviera que mover esto por ahí para que no se vea muy bien. Si entonces resalto la escuela y uso el atajo de teclado, Bennett la formatea en su lugar. Ahora esto está usando bonito Act. Entonces si vamos a Extensiones tiempo, nuevo, voy a tener esto ya instalado. Ya que eres más guapa. Debería ser este resultado superior aquí. Código toda la materia. Se puede ver que este archivo está usando proteínas muriendo en la parte inferior aquí mismo. No he visto que eso es más bonito aquí. Permítanme simplemente mover eso hacia arriba. Solo para que lo sepas, esto se está ejecutando en este archivo. Eso es un gran ahorro de tiempo. Otro, íbamos a cambiar esta etiqueta de apertura. Si cambio esto a uno, digamos, se puede ver que la etiqueta de cierre también se actualiza y obtiene sus extensiones. Este se llama etiqueta auto completa. Sin embargo ahí vamos. Entonces esta de arriba aquí. Nuevamente, muy útil, sobre todo si tus archivos están creciendo en tamaño, entonces no necesitas encontrar esta etiqueta de cierre inferior justo en la parte inferior de la documentación. Ya sabes, si actualizas esto, entonces bien la segunda etiqueta, la etiqueta de cierre también se actualiza. Con eso, tu aplicación está toda configurada y lista para funcionar. Echemos un vistazo a un código más. Y eso es en realidad crear la propia aplicación. 5. Componentes y JSX: Hablemos de componentes y JSX. En primer lugar, en la pantalla tenemos el componente de costo y un componente funcional. A lo largo de este curso, estaremos trabajando con componentes funcionales por solo quería mostrarte la diferencia entre los dos. Cuando se hizo reaccionar por primera vez, era bastante común usar componentes de costo. Esto implicaría el balanceo, la clase de palabras, el nombre que puedes componer. Tendrías que extender el componente de puntos React. Tendrías que incluir un render para devolver el código HTML real. Y si estás cambiando de estado, tendrías que incluir un constructor. Tendrías que incluir super, tener que usar esto, la, esta palabra clave para cambiar un estado. Componentes funcionales. Sólo estamos realmente acostumbrados si estás renderizando un componente o algún código. Si estuvieras trabajando con el cambio de estado, tendrías que usar un componente de clase. Pero todo esto ha cambiado ahora. Puede utilizar ganchos para administrar el estado dentro de los componentes funcionales. Encuentro función Comparando. Es un poco más fácil de entender. Pero esto puede ser diferente para alguien de un fondo de programación orientado a objetos como Java. Pero encuentro que los componentes de la función usan menos código. Y como digo, con la introducción de ganchos, ahora se puede administrar el estado. Hay menos código. Creo que es más ordenado, así que estaremos trabajando con componentes funcionales en todas partes. No, componente funcional es básicamente solo una función JavaScript que declara el nombre constante Hayek o en forma. Y es sólo una sencilla función de flecha. Y luego estamos devolviendo el código HTML. Ahora ya no hay necesidad importar React desde reaccionar ya porque esta aplicación ya sabe que este es un archivo React. La única vez que lo vamos a importar de esta manera es cuando empezamos a usar ganchos más tarde por la línea. Pero por ahora, podemos quitar eso. Hace que el código sea aún más ordenado. Esto podría parecer raro. Poner maqueta dentro de Javascripts no muestra que se acostumbrará a ella, pero esto es esencialmente lo que es JSX. Ahora, toda la lógica y el trabajo para el pie dispuesto se quedarán dentro del archivo footer dot js. Y es más fácil administrar el marcado y lógica en el mismo archivo. React se centra en separar las preocupaciones más que nada. Aquí abajo, aquí es donde exportamos el pie de página. Y estamos diciendo que este pie es lo predeterminado para exportar. Podrías devolver otros componentes o funciones aquí. Sólo estamos diciendo que está el pie de página que es el predeterminado para explorar desde este archivo. Ahora dentro del retorno aquí está el marcado, que es esencialmente HTML. Entonces si ya estás familiarizado con HTML, puedes escribirlo de la misma manera. No obstante, hay un par de casos en los que algunos atributos se nombran ligeramente diferente. Por ejemplo, si quisieras agregar una clase, decir distalless para la clase es una palabra reservada, como acabo de mostrarte antes. Puedes usar componentes basados en clases en React. Clase se convierte en ClassName así. Y ya mi candidato, ¿me está diciendo o sugiriendo el nombre de clase, Aquí está lo correcto a usar. Así que recuerda usar ClassName y no clase. Además, si estuvieras trabajando con Formularios, digamos crear, digamos una etiqueta para un formulario el tiempo más sencillo a otra línea. Si está vinculando esto a una entrada, normalmente tendría cuatro y luego el ID de la entrada. Cuatro es también una palabra reservada. Necesitas recordar incluir HTML Full con CamelCase así. Simplemente útil recordar que esto se elimina. Aún no vamos a añadir ningún estilo. Pero mientras están en el pie de página. Vamos a cambiar esto a una etiqueta de pie de página. Entonces voy a poner el texto dentro de un párrafo como tal. Y luego vamos a actualizar esto más para decir algo así como cogeneración a David JC Lee, ese soy yo. Y luego agregaremos un símbolo de copyright como este, ampersand copy. Quita esos personajes. Estoy diciendo copia punto y coma 2022. Otra cosa a tener en cuenta es en este retorno, si tu HTML está empezando a hacerse bastante grande, que está aquí, puedes, por supuesto, mu es M en dos líneas separadas. Es así, pero solo recuerda incluir paréntesis alrededor de todo paréntesis como este. Usando más bonita, solo voy a formatear esto en la prensa Comando a para seleccionar todo. Entonces voy a mantener la opción Turno F a Formato. Y entonces vamos a ahorrar mucho más ordenado. Ese es esencialmente nuestro pie de página completo. Pasemos a otro componente. Puede seleccionar el directorio de componentes. Vamos a crear un componente para la cotización. Entonces la cotización ab.js, porque esto es simplemente realmente un archivo JavaScript. Y luego usando mis atajos de extensión S7 o la pestaña ICF, en realidad eliminó la entrada porque ya sabe que es reaccionar. Cotización. Bien, genial. Ya tenemos paréntesis para múltiples líneas en la vuelta cuando está devolviendo la maqueta. Así que eso es práctico. Solo espaciemos esto un poco. Dentro del div. En realidad vamos a usar una etiqueta blockquote, y luego simplemente vamos a codificar alguna consulta difícil. Esta es una gran cotización que voy a hacer por ahora. Y luego por el nombre de la persona que dijo la cotización, pongámosla en etiquetas de párrafo. Sólo pongamos tu nombre. Por supuesto, cuando estoy trabajando con datos reales por la línea, vamos a hacer de esta dinámica tanto la cotización como el nombre. Pero por ahora solo estamos juntando el componente base. De nuevo, voy a golpear Comando una opción de turno F, preciosa en formateada. Y ese es nuestro segundo componente hijo. Ahora, cuando digo componente Charles, eso significa que tanto la foto como la cita, necesita vivir dentro de un componente padre. Ahora componente aparente es el app.js, que debería haber sido creado cuando creaste tu aplicación React. Anteriormente. Sólo tenemos código duro en este generador de cotizaciones. Si bien aquí, vamos a cambiar por lo que la maqueta. Entonces en realidad vamos a dejar ese Davidson, pero lo pondremos en una sección, envolveremos todo en esta sección así. Eventualmente tendremos aquí el área de cotización. Comenta que están entre el div, La sección eventualmente tendremos el pie de página aquí. Apenas comentemos esa matemática por ahora. Debajo de la consulta, necesitaremos un botón para aleatorizar cada grupo. Así que vamos a crear un botón ahí. Y voy a escribir el texto generado para el botón. Ahora se puede ver nada está cambiando a la derecha. Eso es porque necesitamos arrancar el servidor. Apenas hacer npm iniciar inter. Espere a que eso se cargue. Iniciando el servidor de desarrollo, se compilan con éxito. Y luego podemos ver nuestro botón Generar. Antes traemos la cotización y el pie de página, al igual que señalar un consejo práctico mientras ya es punta es algo que debes saber. Dentro de nuestro regreso, tenemos esencialmente un envoltorio. Entonces es la sección. Si tuviera que poner aquí una segunda. Segunda sección. Segunda sección, se puede ver que hay líneas rojas por todas partes. Se está quejando, no le gusta. Si pasamos el cursor sobre el texto, se puede ver las expresiones JSX deben tener un elemento padre. ¿ Qué pasa si realmente necesitabas dos hermanos como esta dos secciones? Bueno, necesitas algún tipo de envoltorio. Funcionaría si tuvieras un div externo. Es ambos de esos. Pero si no querías incluir un día de solo por el bien de ello, puedes usar un fragmento de React y todo lo que es es un div vacío como este. Aquí se puede ver una mesa vacía y un div de cierre vacío aquí. Estos son Fragmentos React. Por suerte, no necesitamos una segunda sección. Solo te estaba mostrando eso como ejemplo para que puedas deshacerte de eso. Deshágase de este fragmento de apertura, y guarde eso. Entonces. Vamos a importar nuestro componente de cotización que hicimos alguna vez cabeza. Debajo de esta entrada del CSS. Nuevamente, esta app dot CSS se lió con su aplicación Create React. Puede que en realidad no necesitemos eso, así que eliminemos eso por ahora. Para importar un componente hijo en el padre, podemos hacer cotización de entrada de. Entonces como una cadena, tenemos que entrar en componentes de barra de puntos, slash quote. Bien, genial. Dice que se declara la cotización pero su valor nunca se lee. Todo lo que hacemos aquí es tener componente de cotización autocierre como este. Solo nombre de corchete del soporte de cierre de barra inclinada del componente. Eso Vamos a ahorrar. Y luego en el oído derecho podemos ver que tenemos nuestro cuidado del corazón hizo bastante bien. Hagamos lo mismo por el pie de página. Pie de página de lo siento, componentes de barra de puntos slash slash. Mejor. Haciendo el mismo pie de página. Cierra esa salva. Y ese es nuestro pie de página. Hemos importado componentes hijos a nuestro componente padre. Ahora, lo bueno separarse de estos componentes es que puedes usarlos en todas partes porque están componentizados. Entonces esto es esencialmente componente quo. Podríamos doblete, triplete, ahorrar. Ahí vamos. Tenemos tres de esos. Por lo que esto es bastante componente se puede caer en cualquier parte dentro de nuestra app y funciona de forma independiente. Cada uno comparándolos, gestiona su propio estado, sus propios estilos y todo así. Por lo que sólo se puede caer en todas partes mientras estamos aquí. Antes de que me olvide, si sí quería detener su servidor, se puede ver que esto sigue funcionando dentro su terminal o lo hace es hacer Control y C. Y entonces se puede ver que se ha detenido. Y luego si iba a refrescar esta página, no hay nada ahí porque hemos detenido al vendedor. Espero que todo tenga sentido. Ahora pasemos a trabajar con indicaciones. 6. Accesorios: Echemos un vistazo a trabajar con propiedades o apoyos. Ahora, primero déjame volver a poner en marcha el servidor. Haremos npm parado, golpeó Enter. Los apoyos son la calificación útil para pasar datos dinámicos del proponente padre a sus diversos componentes secundarios. ¿ Qué puedes pasar abajo? Bueno, casi cualquier cosa realmente. En este ejemplo, no es necesario seguir conmigo. Estos son solo algunos ejemplos antes de empezar a trabajar con nuestros datos reales. Entonces lo que voy a hacer primero es digamos que queríamos cambiar el nombre en el pie de página. Entonces aquí está nuestro pie de página en el padre. Podemos agregar un atributo, digamos nombre. Puedes llamar a esto cualquier cosa que quieras. Pero cambiamos el nombre. Y luego cambiemos este nombre para decir, Jim, Salvemos eso. Están dentro de nuestro pie de página. ¿ Cómo recibimos la cadena de texto de vuelta? Bueno, los paréntesis aquí, el parámetro tiene que ser apoyos. Props, juego tirado en el mismo. Se declara que nunca se lee su valor. ¿ Cómo actualizamos este texto aquí? Vamos a eliminar eso. Y entonces lo que tenemos que hacer es abrir unos tirantes rizados. Y así es como usamos JavaScript dentro de este JSX. Podemos escribir cualquier tipo de droga dentro de aquí, pero vamos a estar trabajando con las variables de utilería. Usamos apoyos y luego se detuvo y lo que llamamos aquí el atributo, que se llama nombre de punto aproximado. Lo guardaremos y se actualiza a Jim por aquí. También podemos usar esto varias veces sobre la segunda foto y vamos a cambiar el Dave, es que lo honesto llamado Julie va a golpear save. Y ahí vamos. Tenemos lo mismo para dos componentes, usados tres veces más, pero está aceptando tres tipos diferentes de apoyos. Ahora también puedes pasar variables, golpear el interior de nuestra app. Vamos a crear un const. Llamaremos a este nombre uno. Guardará como una cadena llamada Jamie. El nombre uno se puede usar aquí dentro en lugar de Jim, pero no es una cuerda. Así que asegúrate de usar llaves rizadas. Y pondremos el nombre uno ahí. Yo digo Save. Y ahí está Jamie. Retire los pies de página. ¿ Qué más podemos pasar aquí? Deshaznos de nuestro nombre uno, dejemos pasar algún tipo de booleano. Entonces vamos a tener un verdadero o falso. Y lo que podemos hacer es, digamos al pie de página se mostrará u ocultará esta fecha. Llamemos a nuestro puntaje de año constante. Y vamos a establecer esto a false porque vamos a esconderlo en el pie de página y vamos a eliminar este atributo. Digamos que llamaremos a esto. A esto se le llama un año. Entonces en algunos tirantes rizados estamos pasando por nuestra variable arriba. Esto se llama año, por lo que eso significa en pie de página, necesitamos simplemente cambiar esto de nuevo a mi nombre. Tan duro llevar de vuelta. ¿ Cómo nos mostramos y nos escondemos? Este año? Nuevamente, necesitamos abrir llaves rizadas. Y sólo vamos a usar un condicionado de taquigrafía. Entonces vamos a pasar apuntalamientos abajo, puntales dot, que acaba de llamarse año. Creo que sólo estamos pasando. Si los apoyos dot año es igual a verdadero, entonces vamos a mostrar la cadena de 2022. De lo contrario, sólo tendremos un árbol vacío, cuerdas vacías, así que simplemente nos esconderemos hacia atrás. Esto es sólo una taquigrafía. El signo de interrogación es básicamente un if, si es cierto, y este codon es básicamente un otro. Veamos, Lo guardaremos y de hecho lo tiene en nuestro año. Entonces si volvemos con nuestro padre, cambiemos eso a falso. Lo siento, cambia eso a verdad porque sí queremos mostrarte por aquí. guardaremos y mostraremos el año. Esto es realmente útil para mostrar y ocultar cosas como contenido de texto o incluso cambiar nombres de clase porque diferente estilo. Vamos a revertir esto de nuevo a cuando teníamos nombre aquí. Sí, aproximadamente nombre por aquí. Vamos a cambiar esto de nuevo a nombre, cambiaría esto a nombre, y luego cambiemos nuestro nombre de variable. Cambié el nombre a Keith. Keith ha creado este generador de consultas, bueno, dientes de burro. Mi siguiente ejemplo es que puedes establecer props predeterminados. Por ejemplo, tenemos puntales nombre de punto aquí. Pero si Keith ya no está disponible, podemos hacer doble tubería, que significa que todos los props dot name, o pooling. Eso no ha cambiado, eso sigue diciendo dientes porque Keith está declarado aquí arriba. Si se trataba de una cadena vacía, digamos que los apoyos ya no están disponibles. Así que quita eso. Entonces tenemos agrupación aquí porque el nombre está en blanco. Estamos pasando por un prop de mezcla. Dentro de los apoyos, el nombre del punto de los props no está disponible. Así que nos hemos dedicado a tirar. Eso también es útil para copias de seguridad si no tienes ningún dato o puede que no haya ningún dato que se transmita. Ok, espero que eso tenga sentido. No, podemos hacer esto aún más ordenado. Imagina que tienes múltiples textos. Entonces tienes que escribir apoyos una y otra vez. Hemos usado la palabra props cuatro veces allí. Pero lo que necesitaremos es nombre. Ahora, podemos lo que se llama estructura D estos apoyos. Por lo que sólo podemos conseguir el nombre y hacer eso. Eliminar las indicaciones de nuevo en llaves rizadas, sólo podemos escribir la palabra nombre. Simplemente deshazte de estos múltiples nombres. Y eso significa que solo necesitamos tu nombre como gordo. Eso es muy necesario. Sólo eres ahorro y mensajes de texto eso. Así que recuerde usar los tirantes rizados para hacerse con cualquiera de estas indicaciones que se están pasando por el padre. A pesar de que hemos estado usando el pie aquí y en realidad no necesitamos pasar nada al pie de página. Así que vamos a deshacernos de eso. Volvamos a revertir esto a mi nombre. Será tu nombre. Por supuesto, si has creado una foto de ti mismo, dilo otra vez. Eso ha vuelto a la normalidad. Creo que hemos hecho con una foto por ahora hasta que empezamos a estilizarla. Por lo que estamos más preocupados por la cotización que genera al componente de cotización. Entonces este código está codificado y este nombre está codificado. El curso que queremos transmitir datos reales dentro de la app. Voy a crear tu objeto y vamos a llamar a este dato igual, y esto va a ser un objeto. Y la razón por la que esto es un objeto es porque estamos pasando. Bueno, necesito dos cosas aquí, la cita y el nombre. Digamos que el nombre es igual a Joe Bloggs. Y digamos que la cita está en la cuerda. Esta es una cancha impresionante. Este dato es lo que nos gustaría pasar a nuestro componente de cotización. Llamemos a estos datos. Estamos haciendo referencia al objeto de datos anterior. Dentro de cotización, Empecemos con un nombre aquí. Eliminemos esto, algunas llaves rizadas. Y antes de que me olvide, hay que traer aquí los apoyos. Es aceptar apoyos y M, necesitamos hacer referencia a los datos de puntos de puntales. Y luego en nuestro objeto, tenemos nombre, nombre. Vamos a ahorrar. Y ahí tenemos. Joe Bloggs usaría lo mismo para que la cita necesite el texto codificado duro, llaves rizadas abiertas, apoyos, datos de puntos, cita de puntos. Esta es una cotización impresionante. Genial. De acuerdo, voy a ser muy molesto y solo añadir algunas cotizaciones allí para que parezca que una cotización real tiene mejor. Recuerda, podemos desestructurar esto. Deshaznos de los apoyos para hacer estos tirantes rizados más ordenados. Llamaremos a esto los datos no lo han hecho. Lo que significa que podemos deshacernos de los datos de puntos puntales, nombre del punto de datos de punto debe seguir siendo exactamente el mismo. Estaremos trabajando con múltiples cotizaciones porque la idea es presionar Generar y luego muestra una cotización aleatoria. Por ahora, vamos sólo código duro, digamos cinco cotizaciones diferentes. Entonces eso significa que esto no va a contener un objeto. Tendrá cinco objetos, lo que significa que debemos incluir esto en una matriz. Así que el cuadrante, el cuadrante hace que sea más fácil y más claro el espacio del costado y todo lo que voy a hacer es golpear una coma allí y voy a copiar esto cinco veces más. Y entonces voy a cambiar el nombre y la consulta para cada uno. Así que usa el texto que quieras usar, sea cual sea el nombre que quieras, donde quieras, no solo tienes que tener cinco, puedes tener tres donde puedes tener 100. Solo asegúrate de que siga este formato. Así que asegúrate de usar tus propias cotizaciones dondequiera que recojas información. No puedes simplemente escribir este acto, pero sólo voy a acelerar esto. Haré esto muy rápido y luego volveremos pronto. Genial. Si codifican cinco cotizaciones allí, cinco objetos dentro del formato de matriz de datos. Eso es, eso está todo ordenado. Ahora se puede ver que esto no está poblando aquí. Y eso es porque ahora estamos trabajando con objetos dentro de una matriz. Entonces no sabe lo que acabo de pasar. Esencialmente no estoy pasando por una matriz. Por lo tanto final de la cotización. Esto ya no tiene sentido porque los datos son una matriz, por lo que no sabe qué consulta extraer de este ser una matriz. Vamos a tirar la primera cita hacia abajo. Así que vamos a hacer el cuadrante de datos 0. Por ahora diremos que esto está poniendo a través de nuestra primera cita. Nuevamente. Pronto te mostraré cómo cambiar esto. Entonces esto es dinámico y compartir citas y nombres aleatorios. No, para hacer todo esto, vamos a empezar a mirar ganchos y ganchos nuestro set antes son bastante buena manera de manejar estado y cambiar los efectos de las cosas. Vamos a pasar por eso siguiente. 7. Introducción a los hooks y usar: Hablemos ahora de anzuelos y luego profundizaremos en nuestro primer estado tomado de Estados Unidos. Ahora solo explica algunas cosas y luego echaremos un vistazo a algún código. ¿ Qué son los ganchos? Como puede ver aquí, ganchos sí permiten usar características que se encontraron en los componentes basados en clases. Ahora podemos utilizarlos dentro de componentes funcionales, y son componentes funcionales que vamos a utilizar en este curso. Estas características incluyen la lógica con estado. Por lo que sí significa que se pueden agregar estados a cada componente de forma completamente independiente y reutilizado de componente a componente. Para mí, usando ganchos en componentes funcionales, el código parece ser mucho más corto, más simple y más ordenado, mientras que están teniendo todas esas características que se encontraron en los componentes basados en clases. ¿ Porque el código es más corto? O crees que los ganchos tienen una curva de aprendizaje más baja comparación con el equivalente en las clases, lo cual es genial cuando estás aprendiendo por primera vez este tipo de cosas en React. Los ganchos sólo se agregaron en React 16.8. Así que sí, Tipo de tipo de new-ish en el lapso de vida de React. Un consejo rápido. No use ganchos conbucles interiores dentro de condiciones o funciones anidadas. Simplemente llamarías hooks al nivel superior de tu componente. Como especie de tocado. Y los ganchos evitan mucha de la sobrecarga que requieren las clases, como crear instancias de clase, como vincular eventos y crear un constructor también. Ahora si eso no tiene sentido y eso está absolutamente bien, ahora vamos a mostrar algún código. Entonces primero, crearé un componente basado en clases, y crearé este contador. Entonces cuando presiones un botón, aumente el número en la pantalla en uno. Entonces lo que haremos es crear un componente funcional usando el gancho de Estado de Estados Unidos para lograr lo equivalente. Y luego se puede ver una comparación con la cantidad de código y la diferencia en el código para lograr lo mismo usando el gancho de Estado de Estados Unidos. Así es como se ve un componente basado en clase básica. Simplemente estaremos creando una función de estado simple. Por lo que al hacer clic en este botón, agrega 12. Bueno entonces Amazon ahí en este momento, pero te mostraré cómo se ve eso en un segundo. Con clases. En primer lugar la necesidad de importar el componente, tendrá que utilizar la palabra clave class, el nombre de nuestro componente, y tenemos que extender componente. Por lo que esto ya es más largo que la primera línea de un componente funcional. Si estamos actualizando estado, necesitamos incluir un constructor y super. Entonces para establecer el estado, digamos que nunca el número predeterminado, necesitaríamos usar la, esta palabra clave, este estado es igual. Y luego un objeto al que podemos llamar a nuestra variable, digamos contar, y vamos a establecer ese default de 0. Necesitaríamos una función para incrementar el número. Vamos a llamarlo incremento. Y luego para volver a establecer el estado, necesitamos usar la palabra clave this y usaríamos este estado conjunto. Por lo que esto cambiará el valor dentro de un objeto. Nuestra variable de conteo necesitaría actualizarse a este estado de puntos, conteo de puntos más uno. Entonces estamos tomando el valor original y actualizándolo por uno cada vez. Para utilizar la función de incremento en el botón usamos onclick. Entonces tenemos que llamar a este punto incrementos. Entonces para que realmente funcione esta función de incrementos, hay que vincularla también dentro del constructor, que se olvida fácilmente. Así que sí, esto está incluido o necesario en los componentes basados en clases, harías esta corriente es igual a este incremento de puntos, punto bind dot dot this. Cuando primero estás aprendiendo cosas como esta, especialmente en componentes basados en clases, esto es bastante confuso. Aquí hay mucho que llevar. Y no tiene sentido de inmediato por qué se necesita esto. Pero lo es. Nuevamente, te mostraré cómo esto difiere dentro de un componente funcional basado usando ganchos. Y luego para mostrar un número, el número es ahora este punto estado conteo de puntos. Sólo guardemos ese número es ahora uno a uno. Ahí vamos. Está cambiando el estado cada vez. De acuerdo, así que bastante incluido ahí, alrededor de 20 líneas de código. Ahora echemos un vistazo a nuestro gancho. Lo que voy a hacer es que acabo de comentar la clase y comentaré en el gancho. Vale, el número está nueve minutos en blanco. De acuerdo, entonces, ¿cómo logramos el resultado equivalente dentro del componente base funcional usando el gancho Estado de Estados Unidos. En primer lugar, necesitamos importar estado estadounidense. Tercero de React. Necesitas importarte estado así. Y entonces, ¿cómo se ve el uso state? principio, necesitaríamos declarar una constante, que le igualaría usted declara traído arriba. Y luego dentro de los paréntesis está nuestro valor predeterminado, que es 0. Por lo que sabemos esto. Y entonces lo que pasa antes de los iguales. Entonces como dije, es un const. Y entonces tenemos que desestructurar lo que nos da usted declara. Hay dos parámetros que debemos incluir. De hecho, dice que golpeó. Se espera un valor o retorno al valor con estado y una función para actualizarlo. Entonces esas son las dos cosas. El valor se llama conteo, podemos llamar a esto como queramos. Y luego una función para actualizar esto. Por lo general, la sintaxis convencional de esta función sería la palabra establecida y luego el nombre de la variable, o en CamelCase en esta corriente, en este caso se establece contar así. No se puede contar el conjunto actual, utilice el estado. Dentro de nuestro botón, necesitamos esa función de incrementos o onclick, al menos onclick es igual. Entonces lo que tenemos que hacer es usar una función de flecha. Cada vez que hace clic en esto, desencadena la función y solo podemos usar set current aquí. Así que establece el recuento. Podemos hacer contar más uno. Entonces el número es ahora actual. No necesitamos usar la, esta palabra clave dondequiera que podamos saltos de referencia actual. No hay vinculación de la función. Simplemente podemos hacerlo todo en línea. Entonces la teoría, presionando uno actualiza el número sin actualizar la página. Y mira cuánto más ordenado se compara esto nuestra clase de componentes basada en clase. Tenemos que incluir comparativo. No hay necesidad de eso. El nombre de la función es mucho más simple. No estamos extendiendo reaccionar, no estamos extendiendo el componente. No hay uso de constructor aquí o super. No tuvimos que vincular la función. Sólo usamos una línea de tu estado aquí. No hay necesidad de esta función adicional. No necesitamos usar la, esta palabra clave aquí. Sólo podemos contar referencias como lo hemos hecho aquí. Se puede ver cómo hemos ahorrado tanta codificación aquí, solo usando el gancho de Estado de Estados Unidos. De acuerdo, entonces estaremos usando la estadidad de Estados Unidos en nuestra aplicación real, pero llegaremos a eso en breve. Veamos un, otro gancho útil, pero estaremos usando el efecto de usuario enfriado en la siguiente lección. 8. Gancho de uso: El efecto estadounidense Hooke. Damas y caballeros, usaremos el efecto estadounidense Hooke en nuestra aplicación. Utilizamos para obtener nuestros datos locales, por lo que nuestra matriz de cotizaciones y facilidad. De hecho, Herc es genial para eso porque te permite realizar efectos secundarios dentro de los componentes y eso es un efecto secundario. Entonces eso es la obtención de datos, como configurar una suscripción y cambiar manualmente el DOM dentro de los componentes de React. Echemos un vistazo a algún código ahora para que pueda mostrarte algunos ejemplos prácticos del uso del gancho de efecto. De acuerdo, Así que esta es una aplicación muy cruda. Lo que esto hará es que vamos a actualizar el título aquí de la pestaña. Al hacer clic en el botón, se establecerá el número en el título y el título del documento. Y esto sólo puede suceder después de que todo se haya cargado, después de que el comparativo se haya importado. No se puede hacer de inmediato porque estamos accediendo al documento. ¿ Utilizamos efecto tan similar al estado estadounidense, podemos traerlo en apariencia de efecto importante en estos tirantes rizados. ¿ Cómo se ve el efecto de las abejas? Puedes escribir estos efectos. Después abrimos algunos paréntesis y luego vaciamos paréntesis por ahora. Y luego solo usaremos una función array y abriremos eso con algunas llaves rizadas. De acuerdo, así que he dicho que queremos actualizar el título del documento después de que todo tenga mi título de punto de documento igual, y luego cambiaremos el mensaje a algo como clicado. Entonces solo vamos a interpelar la corriente. Entonces usando el estado estadounidense, que te mostré en una lección anterior, para actualizar el contador por uno. Has hecho clic en contar sin embargo muchas veces el valor predeterminado es 0. Puedes ver que está actualizado en el tema clicado 0 veces. Entonces en teoría, si presionamos incremento, se ve ese número cambiando ahí arriba. Ahora esto no funcionaría fuera del efecto estadounidense Hooke. Y eso es porque como dije, esto es un efecto secundario. Lo que estamos haciendo aquí, estamos actualizando el documento. Tenemos que esperar a que todo cargue antes de que esto suceda. Ahora podemos pasar aquí un segundo parámetro, que serán algunos corchetes. Lo que esto le dice al componente es básicamente así. De forma predeterminada, este efecto secundario de efecto de uso se ejecuta tanto después del primer render como después cualquier otra actualización después de cualquier renderzado en la página. Entonces no me corchetes significa que esto solo sucederá la única vez. En este ejemplo, eso no es realmente útil porque podemos ver que estoy colgando incrementos. Ya no se está actualizando en cualquier momento porque todo lo que digo es solo obtener esta información una vez y nunca más. Escenario donde esto es útil es cuando estás buscando datos externos o cualquier dato realmente que te mostrará un ejemplo muy pronto. En ese escenario, solo querías recabar información la única vez en que todo baja. Pero aquí queremos actualizar esto muchas veces. En realidad podemos especificar cuándo queremos que esto se renderice o cambie. Voy a poner cada vez que ese recuento cambia. Esto ignorará cualquier otra vez que la página renderiza, pero solo si contar actualizaciones entonces haga esta teoría. Si presiono incremento ahora, se está actualizando de nuevo porque está reconociendo que el recuento está cambiando. ¿ Qué pasa con los datos externos? Entonces si queríamos obtener algunos datos de una API o si los efectos de uso entran en juego entonces es un componente de datos externo get. Aquí solo estamos enumerando arte de cosas pendientes. Entonces esto es simplemente básicamente cuadro de texto de placeholder. Esta información viene de esta API externa. Se puede ver aquí con nuestro estado estadounidense, esto es una carga de tareas pendientes. Entonces el valor predeterminado inicial es solo una matriz vacía. Lo sentimos, Inicialmente no tenemos los datos, pero sabemos que va a ser una matriz de tareas pendientes o una matriz de texto. Entonces en nuestro efecto de usuario, aquí, solo buscamos los datos y esta es una función que estoy llamando aquí abajo. Como se puede ver, estoy usando la matriz vacía. Esto apenas se enfría una vez en el primer render porque sólo queremos obtener esta información cuando todo se baja, cuando todo está montado, solo la única vez que estoy usando async esperan. Eventualmente puedes estos datos, que es Jason. Y luego cuando tengamos la respuesta, que es una variable pivot aquí, estableciendo las tareas pendientes. Entonces nuestro estado estadunidense ser la respuesta. La respuesta es una carga de información dentro de una matriz. Y eso significa hacer. Ahora causamos el mapeo de respuesta a través de todas las tareas pendientes porque es una matriz. Y luego en una etiqueta de párrafo, solo estoy enumerando el título del artículo. Esta variable aquí se puede llamar todo lo que queramos. Podemos llamarlo para hacer si queremos importar artículo, entonces solo estoy accediendo al título del ítem y está mostrando esta información aquí. Debido a que esta información, estos datos podrían ser un archivo masivo y masivo, encontrarán cientos y miles y miles de entradas, lo que significa que no puede obtener acceso a esto de inmediato. Tenemos que esperar todo a Mt. En el efecto secundario. Podría tardar un segundo cargar estos datos. Y por eso estamos usando estos efectos. Y luego cuando esté listo y es acceso a todos los datos que podemos mostrar. Hace uso Efecto aplica a nuestra aplicación y a nuestros datos. Donde te mostraré eso en la próxima lección cuando empezamos a enganchar todos nuestros ganchos y usar nuestros datos. Por lo que vamos a estar usando el estado de Estados Unidos y usted usa efecto en nuestra aplicación en la siguiente lección. 9. Los datos y la engancha: Ahora hemos aprendido sobre los fundamentos de los ganchos. En realidad usemos el estado estadounidense y usemos el efecto y trabajemos con nuestros datos reales de cotización aquí. Entonces lo primero que voy a hacer es realmente mover estos datos a un archivo de datos. Creamos este directorio de datos dentro los datos de origen que es sólo crear un archivo de datos dot js. Por favor sígueme si puede. Voy a copiar estos datos llegados. A ver si eso realmente se rompe porque los datos no están definidos, vamos a pegarlos aquí. Y no olvidemos exportar los datos en sí mismo formato. Está bien, eso es exportado. Sólo tenemos que importar fecha e importe, no te olvides de los tirantes rizados. Datos de datos de barra inclinada. Slash data está funcionando muy bien en su propio archivo, por lo que más fácil de mantener. Nuevamente, si esto fuera un, un 100 líneas o más de lo que simplemente tendría más sentido tenerlo en sus propios datos, un archivo. Entonces por el momento solo estamos codificando duro en la primera cita de nuestra matriz. Y lo estamos haciendo pasando etiqueta citas fechadas para abierto el componente de cotización, se pueden ver datos y luego el primero es 0, y esa es la primera cita. Pero nos gustaría cambiar esto cuando haga clic en el botón. Estará actualizando el estado, lo que significa que necesitamos traer en uso estado, nuevo estado. Y entonces se puede ver que dice que usted declara fragmento, sólo voy a golpear Tab y está poblando casi lo que necesitamos. Así que voy a llamar a esta cotización, luego establecer cotización, que necesita ser CamelCase. Lo que podemos hacer el equivalente a codificar duro el primero en la matriz es simplemente hacer datos. Entonces 0 estado no está definido porque no lo he importante aquí arriba en Fort directamente desde React. Genial. Y entonces lo que tenemos que hacer entonces es en lugar de solo pasar el tiempo, todos los datos, sólo tenemos que pasar cotización abajo, cotización se declara aquí y pasarla aquí abajo. Vamos a romper porque por dentro son bastante competitivos. Precios abajo de todos los datos en contra de esto necesita cambiar. citar, no vale trimestre. Nota, estamos llamando a los datos mis errores. Cambié esos bytes de datos, pero ya no necesitamos esta matriz eliminada de la cita y el nombre. Ahí vamos. ¿De acuerdo? Si tuviera que cambiar este valor predeterminado a uno, entonces es ideal. Otras cotizaciones, Judy Smith, si llegamos a nuestros datos, entonces sí, es la correcta. El siguiente en la matriz que está codificado duro, esa es nuestra cotización predeterminada. Pero luego en el botón, por supuesto que queremos en click. Simplemente use esa cotización de conjunto para cambiar el valor. Por ahora, solo vamos a código duro un valor como digamos a los datos, al siguiente en la matriz. Entonces en teoría debería cambiármelo a mí. Golpe Generar. Ahí vamos. Esto siempre estará respaldado. Tercero en la matriz porque esto es lo que lo hemos establecido aquí. Lo que realmente tenemos que hacer es aleatorizar este número aquí, porque la idea es que golpeas Generate y ya recoge una cita aleatoria de nuestros datos. Así que vamos a trabajar un número aleatorio. Pongamos esto en un const y lo llamaremos número aleatorio. Simplemente usando JavaScripts estándar, necesitamos utilizar el punto matemático aleatorio, que recoge un número aleatorio entre 01, por lo que 0.10.2, etcétera Pero entonces necesitamos veces esto por la longitud de los datos. Por lo que tenemos cinco cotizaciones aquí. Podemos hacer longitud de punto de datos. Esto significa que incluso si terminamos con un 100 más y seguimos agregando a esto, entonces la longitud del punto de datos siempre será la longitud de nuestros datos. Porque no solo queremos un decimal, queremos que sea número entero. Tenemos que agregar piso de punto Matemáticas. ¿ De acuerdo? Esta es nuestra teoría de números aleatorios. Simplemente registramos el número aleatorio. Y solo inspeccionemos lo que está sucediendo en la consola. Nosotros obtenemos 23340144. Estamos recibiendo números aleatorios aquí. Ahora nuestra explicamos y pronto por qué esto está sucediendo dos veces porque sólo queremos que suceda los. Y entonces lo que tenemos que pasar es en lugar de codificar duro esto, necesitamos aleatorizar el número onClick. Así que vamos a crear la función aleatorizada. Llamaremos al azar. Sólo voy a ser una función de flecha. La función simplemente iba a utilizar la cotización establecida. Indicas los valores aquí donde se apoderan de los datos. Pero entonces en lugar de un número codificado duro, estamos usando el número aleatorio aquí. Entonces en lugar de en patrón llamando set quote, solo podemos usar aleatorizar así. Veamos qué pasa. ¿ Por qué eso no está cambiando? Por supuesto, necesitamos usar el efecto estadounidense. Traer en ti usa efecto aquí. Simplemente elimine algunos de estos valores. Eliminar el valor en los corchetes. Entonces vamos a dejar esto vacío porque solo queremos conseguir los datos. La primera carga. Lo que vamos a hacer es llamar al azar efecto de uso interior. Ahora tienes un número? Cuando hago clic en Generar no es continuamente poblar las cotizaciones. El motivo es que cuando fijamos nuestro número aleatorio aquí sólo tiene sucediendo los. Por supuesto, queremos conseguir una cotización aleatoria. Cada vez que algo cambia en la página están en primera carga cuando la magnitud de todo y el onclick aleatoriza conseguir causa se está enfriando y usar un vector que es correcto, pero nosotros sólo hay que conseguir que ese número redondo sea poblado en cada clic y después cada sola teoría de la agenda en este momento están recibiendo las diferentes cotizaciones. Excelente. Y una cosa que es útil hacer es si se trataba de un enorme archivo de datos de miles de entradas, esto puede tardar un poco en cargarse la primera vez que cargues la página. Por lo que es útil tener algún tipo de carga de texto y cargar el archivo usas para decirle al usuario que los datos están llegando. Principalmente efecto lo que estamos haciendo aquí porque hay datos normalizados con los que trabajar. Cuando se trabaja con aplicaciones más grandes. Esto es útil saber. Podemos hacer esto con usted estado también. Entonces aquí arriba, solo vamos a crear el fragmento de datos de Estados Unidos y vamos a recordar que esto se está cargando y luego set está cargando el capital I. Y luego vamos a establecer esto en verdadero. Porque será cierto inicialmente cuando esté tratando de obtener los datos. Estará cargando los datos cuando cargues esto por primera vez, pero luego cuando tenga los datos y podemos decir que se está cargando de nuevo a false porque se han recibido los datos. Pero lo que hacemos con esto es cargar valor. Bueno, podemos usarlo como condicional para mostrar u ocultar cierto texto o contenido. Esto es un booleano a verdadero. Entonces nos ponemos a false cuando se obtiene los datos. Por lo que no queremos mostrar esta cotización hasta que se haya completado la carga. Debajo de la H1. Para usar algo de JavaScript, acabamos de abrir algunas llaves rizadas. Entonces podemos hacer es cargando. Entonces, si esto es cierto, entonces, ¿qué tenemos que hacer? Vamos a mostrar un párrafo que dice cotización, cargando. Esto está bien por ahora. De lo contrario, si no es cierto, si es falso y se ha completado el aprendizaje. Ahí es donde queremos esta cotización que pueda sentarse aquí. Incluso si refresco esta página, simplemente no vas a ver eso porque es tan rápido. Vamos a establecer está cargando a false aquí, signo de exclamación. Refresca la página y puedes verla dice cotización ahora aprendiendo, por lo que esto es lo que se vería revertir esto de vuelta. Ahí, básicamente tenemos nuestra configuración de gancho. Estamos usando nuevo estado para establecer una cotización, para establecer si se está cargando. Esencialmente estamos usando el efecto de usuario para el efecto secundario, donde estamos obteniendo un número aleatorio y luego configurándolo a los datos. Entonces todo esto sucede después de que todo se haya cargado en la página. Podemos entonces usar el condicional está cargando para mostrar y ocultar contenido diferente. Pasando nuestra cotización a nuestro componente de cotización, onClick, estamos aleatorizando el número aleatorio y estamos aleatorizando la cotización para obtener de estos datos que se encuentra en su archivo separado. Eso tendrá sentido en absoluto, agradable y ordenado, solo usando los ganchos de símbolo. Y en realidad porque estamos utilizando este hecho de usuario, podemos eliminar este valor predeterminado porque enorme efecto en el nodo ya está aleatorizando este cuarto de galón. Todo tipo de nota que trae una nueva cotización, Genial. 10. Pruebas: Pruebas, pruebas 123. Vale, esto es lo que vamos a hacer. Ahora básicamente terminamos la parte React de la obra. Podemos probar los datos, podemos probar nuestros componentes. Y la mejor manera de hacerlo es si estás usando Google Chrome es ir a la tienda web de barras de Chrome.google.com y buscar herramientas para desarrolladores de React. Esta es la herramienta oficial dev porque es ofrecida por Meta, que es el nuevo Facebook, que hacen reaccionar si no lo sabías. puedes ver que ya he descargado esto a mi chrome porque dice eliminado del crecimiento, pero sí, asegúrate de obtener esto. Lo que esto te da. Déjame cerrar esto. Te mostraré cómo consigues dos. Y llegas a eso. Estamos en una app antes de tu tiempo para inspeccionar. Abre tus herramientas de desarrollo normales donde probablemente estés familiarizado. Y luego se pueden ver estas nueva pestaña, sake oponentes y perfil. Haga clic en Componentes. Y él es nuestra aplicación. Entonces tenemos nuestra app, que es nuestro componente padre. Y básicamente se puede ver la jerarquía, señor. Se puede ver que la aplicación tiene que componentes hijo, cotización y pie de página. Haga clic en esos, también lo resalta en el front-end también. Y también es genial si vamos a cotizar, sabemos sobre nuestro componente actual, estamos pasando los datos de cotización. Ves hélice, tal vez está al otro lado. Tenemos apoyos. Podemos ver el aproximado que se pasa a este componente central. Y en efecto son datos que tenemos un nombre y tenemos una cotización. Si actualizamos esto, generamos, luego actualizaciones en tiempo real, se puede ver cómo se cambia eso. Incluso podemos probar nuestro proxy para poder escribir lo que quiera. Y ahí vamos. Se está actualizando en el front-end. Tengo que hacerlo. También podemos ver que está el estado que estamos declarando en nuestro componente de aplicación padre, que de hecho es que esto se realizó deletreado excepcionales plantas equivocadas, no muy excepcionales de mi parte. Ignora eso, por favor. Tenemos a nuestro estado aquí. También tenemos un segundo estado. Entonces este es nuestro estado de carga. Actualmente se establece en false. Si tuviera que marcar esto, hay una casilla de verificación todo el camino a la derecha aquí. Puedes ver en nuestra cotización ahora cargando. Por lo que es una buena manera de probar cosas que puedes interactuar con tus datos reales e indicaciones dentro de aquí, encendiendo y apagando esto. Y entonces se puede ver también en la jerarquía hit esconde el componente core, que debe hacer cuando está cargando se establece en true. Resulta lo falso y vuelve otra vez. Otra cosa a mostrar rápidamente, esto no es parte de las herramientas reactivas. Si vamos a elementos, podemos ver que pie de página tiene una clase de Pie de página. Recuerda que la clase es una palabra clave reservada en reacciona. Si solo voy a mi código, verás que en pie de página estamos usando el nombre de clase correctamente. Y luego solo muestra que está compilando aquí la palabra correcta de clase, lo cual es bueno saber. Así que cuando estés teniendo una jugada con la aplicación URN, sí, definitivamente descarga esto y haz un clic alrededor y ve qué datos estás pasando. Además, es una buena manera de depurar tu mano si no estás obteniendo los datos, si no te están pasando los apoyos correctos, si el estado no se ve bien, este es el mejor lugar para ver qué va mal y dónde podría necesitar arreglar algo. 11. Cómo añadir estilos: ¿ Verdad? Bueno, pero más o menos terminó con la parte React de este curso, que es lo más importante. En esta lección, solo voy a añadir algunos estilos depende completamente de ti si quieres seguir a lo largo o ver esta lección en absoluto, literalmente solo estaré agregando algunos estilos CSS. Pero si estás contento de agregar la tuya propia y no necesitas seguir adelante. Siéntete libre de saltarte esta lección, ¿verdad? Así que de todos modos, para aquellos que se pegan dentro de nuestro directorio de estilos, dentro de la fuente, solo voy a crear un archivo styles.css. Vamos. En el cuerpo. Sólo voy a establecer una bonita familia de fuentes. Vayamos por algo como Gilroy le gustaba esa font-familia. Simplemente haremos Helvetica sans-serif para acabar con eso. Lo que podemos hacer es dentro de App, vamos a importar estilos slash slash styles.css, él después de estilos. Ok. Vamos a crear algunos estilos para la página. Aún no hemos creado esta clase. Tenemos que añadir eso a nuestro marcado. Pero por ahora solo agreguemos poco de estilo para elegir un bonito fondo verde, 70 BC a AD, sí, y nada. Entonces volvamos a nuestra app. Añadamos nuestro nombre de clase a nuestra sección. No olvides su nombre de clase y no clase. Página K Ahí está nuestro verde. Voy a cambiar este nombre de clase de app a container. Y entonces, ¿qué más debemos cambiar? Nuestro está cargando texto, podemos parar eso como agregar un nombre de clase. Todo solo aprender está bien. Nuestra cotización, y vamos a poner esto en una nueva línea para que podamos ver eso un poco mejor. En realidad voy a envolver esta cotización en un nombre de clase div de contenedor de cuarto de galón. Sólo corre hecho. Era nuestro pie de página mirando a través de nombre de fértil, Eso está bien. Entonces, ¿qué tal nuestro comparador queer? ¿ Bloqueó el párrafo de la palabra para el nombre. En realidad vamos a agregar un nombre de clase. Nombre aquí. Este punto, te animaría a que solo tengas un lío con el Oregon College y nosotros ya en fondos y hagamos esta aplicación que eres dueño de tu estilo, la propia manera de David. Entonces es un poco diferente. Mía. Dentro de la página, quiero que todo se apila uno encima del otro solo para asegurarme de que esté sucediendo. Voy a configurar display para que se flexione lado a lado, pero luego podemos cambiar de dirección a columna mejor. Y entonces pondré la altura para que sea un 100% de la altura de vista, bien, verde por todas partes, exactamente lo que quiero. A continuación, ¿qué debemos mirar? Tenemos un contenedor. Un contenedor. También vamos a hacer este flex de pantalla. Y de nuevo, pongamos esto en una columna, columna de dirección flex. Quiero poner todo centrado, centro de contenido justificado. Entonces la altura del contenedor. Apenas hagamos 95 vista altura. Ahora en el centro. Asegúrate de enviar a correctamente con el margen 0, la parte superior e inferior o dos en el medio. Eso se ve bien. Haremos un ancho máximo de 1200 píxeles solo para pantallas más grandes. Entonces vamos a establecer un ancho del 80 por ciento porque no quería ir todo el camino a través. Ahí vamos. Esto es cheque. Ahí vamos. Se puede ver el max-width funcionando muy bien allí. Veamos nuestro encabezado H1. H1. Va a hacer de esto un verde ligeramente oscuro, por lo que un hash 2676. Hagamos un tamaño de fuente de 5050 píxeles y bastante grande. Margen ceros 0100 recoge un pequeño hueco en la parte inferior. Así es como nuestra cotización contiene una x. que quiero hacer es agregar un poco de margen. Gestión inferior 50 pixeles. El propio presupuesto blockquote, centrado. Nos aseguraremos de que sea blanco. Entonces hash FFF, estilo de fuente para que sea cursiva. Espero que puedan ver lo útil es esto para que esto se esté actualizando en tiempo real. Entonces podemos, en tiempo real afectar los estilos y verlo realmente funcionando y cómo se ve, lo cual es realmente práctico. Margen y vamos a mover eso. Imagina ceros a la izquierda. Haremos un tamaño de fuente de 90 pixeles. Agradable y grande. Masivo, pero bastante parecido. Muy bien, entonces el nombre abajo abajo, Joe Bloggs, nombre de clase. Voy a poner el color a hash CA 755 C. Sí, buen tipo de color anaranjado. Casi como he preparado previamente estos colores. Increíble. Tamaño de fuente a 20 pixeles. Manera de hacerlo audaz o 800. Sé bueno. En realidad, voy a hacer que el texto se transforme en mayúsculas. Sí, Niza. Está bien, nos estamos acercándonos. A continuación, echa un vistazo al botón. Color de fondo. Voy a ponerlo en un color verde oscuro 267, un borde. Vamos a deshacernos de 0. Color del texto y hazlo blanco. Vamos a asegurarnos de que el cursor sea puntero cuando pasa el cursor sobre él. Agradable. Familia de fuentes para el botón. En realidad vamos a robar o tienes aquí font-weight, audaz, 800. El ancho es demasiado grande, por lo que es un ancho máximo. 150 pixeles. Necesita algún relleno de 5015 pixeles alrededor de huecos y buenos, y vamos a hacer transformación de texto. mayúscula. Agradable. Al igual que agregar un estado de desplazamiento a este botón, el botón dos puntos se desplace. Cambiaré el color de fondo para que sea blanco. Y cambiaremos el color del texto para que sea el verde oscuro. Básicamente solo revirtiendo todo a 66 F. Luce bien. Creo que acabamos de meter el pie de página por el fondo aquí. En realidad no añadí una clase de pie de página a eso. Vamos a usar esa clase de pie de página. Color del texto. Hagamos esto gris. Sí, eso está bien. Y nos aseguraremos de que el texto alinee establecido al centro. Sí, eso está bien. Eso hará esto buscando nuestro texto de carga. Déjame ir a la app. Lo que haremos es que nos fijemos como aprender a falso. Aquí hay un signo de exclamación, carga coordinada y ver, mi párrafo tiene nombre de tos de carga. Entonces vamos a los estilos. Ciertamente no hace falta estar a Francine. Aprendiendo constantemente el color puede ser blanco. Y sólo vamos a hacer un tamaño de fuente más grande de seis píxeles profundos aquí. Absolutamente bien. Sólo revertir eso atrás. Guardar. Eso se ve bastante decente. Sí, simpática. Ese es nuestro generador de código. Agradable y sencillo. Pero trabajando, luce bastante bien. 12. Despliegue de tu trabajo: Ahora es el momento de desplegar tu fantástica app, pero acabas de construir para que todo el mundo pueda verla. Y ahora te voy a mostrar lo fácil que es hacer usando Netlify. Netlify son un gran equipo y cuentan con un gran servicio en diversas herramientas para construir e implementar aplicaciones. Sí, tengo bastantes características incluyen análisis y pruebas divididas. El despliegue es realmente genial. Y por eso usaremos servicio de implementación de Netlify para implementar tu app. Vamos a hacer esto todo dentro de la terminal aquí. Abre tu terminal. Dentro de tu app. Asegúrate de construir una aplicación lista para la producción. Para ello, solo vamos a ejecutar npm run build. Como dice en la terminal, la creación de una producción optimizada se construye. Entonces esto va a compilar todos nuestros archivos en estos archivos de tamaño muy pequeño, lo cual es genial. Y si miramos a nuestra estructura de carpetas, ahora tenemos una carpeta Build. Y esto es exactamente lo que se va a subir. Por lo que esencialmente se ha creado un archivo HTML de índice con todo nuestro trabajo. También hay una carpeta estática con nuestros estilos y JavaScript. Esto es producción lista, construye nuestra app. Simplemente haga clic una vez en la pantalla. Entonces solo necesitamos instalar npm, instalar el cliente Netlify, que es Netlify space CLI, y vamos a hacer space dash g. por lo que está instalado globalmente. Si te encuentras con alguna zona de permisos como yo tengo, simplemente escribe todo de nuevo, pero pon sudo al frente. Esto nos da permisos de administrador para instalar el cliente Netlify. Sudo npm instalar Netlify. Cli, space dash g. Tenemos instalado el cliente Netlify. Vamos a aclarar que estaba en la terminal y luego es solo un caso de escribir espacio Netlify, desplegar. Golpea Enter. Asegúrate de deletrearlo bien. Falta una T ahí. Siguiente lo-fi, lo escribí mal de nuevo. Levantamiento neto phi. Despliegue. Nuevamente por tener áreas de permiso hacen lo mismo con sudo en el frente. Netlify. No notifique el despliegue. Y luego esto abrirá una página que se ve así y necesitas iniciar sesión en Netlify. Puedes usarlo dependiendo de lo que tengas es que tengas GitHub o Bitbucket, o simplemente puedes usar tu e-mail. Voy a iniciar sesión con mi GitHub. Ya poblado para mí. Acabamos de iniciar sesión. Tenemos autenticación de dos factores. Déjame resolver eso. Entonces autorizaremos a Netlify. Entonces de nuevo, sólo estamos consiguiendo a través los pasos de seguridad, autorizar. Acabamos de volver a nuestra terminal. Voy a seleccionar estos dos oxígenos. Voy a seleccionar Creighton, olvidar un nuevo nombre de sitio como opcional. Vayamos freelance, indefinido. Y luego me está preguntando qué directorio publicar. Bueno, es nuestra carpeta Build. Sólo voy a escribir construir aquí. Ahí está desplegando nuestro trabajo, solo esperar el Go Live es bastante rápido y el despliegue está en vivo. En teoría. Esta URL que se ha proporcionado en nuestra terminal. Vamos a esa noche. Esa es nuestra app. Trabajando como se esperaba. Todo esto es gratis también y pudimos desplegar esto con bastante rapidez. Espero que todo ese material terminal tuviera sentido. Así es como se puede desplegar trabajo Netlify y es gratis, lo cual es genial. Gráfico para seguir estos pasos, siga las instrucciones del terminal. Asegúrate de crear una carpeta de compilación que sea el objetivo que debes decirle a Netlify que mire. Entonces como generador final de cotizaciones en la URL proporcionada en la terminal. Ahora te recomendaría que si has llegado a esta etapa y todo es exitoso y tienes un enlace para compartir. Por favor, asegúrate de compartir tu trabajo en Skillshare. O también podría incluir una bonita captura de pantalla si lo desea. Sería genial compartir tu URL. Así que yo y otros estudiantes podemos ver tu increíble trabajo y no recibí retroalimentación. Y mientras hacemos eso, ¿por qué no echamos un vistazo al trabajo del otro alumno? Bonito. Acabas terminar de construir un generador de cotizaciones o no reaccionar y también ha sido desplegado en la web. Bien hecho. 13. ¿Dónde ir desde aquí?: Podría decir que has hecho tu app, has aprendido los fundamentos de React. Eres impresionante, pero ¿cómo te vuelves más impresionante al reaccionar? Bueno, estas son solo algunas sugerencias de mi parte sobre dónde posiblemente puedes ir continuación si quisieras hacer alguna lectura más, pero con respecto a reaccionar y luego es más intermedio, tipo avanzado de cosas que creo que debes hacer es echar un vistazo a algunos otros ganchos. Hay más ganchos aparte de lo que indica en efecto de uso. Aquí hay una pareja. Use href y use context. Vamos a llegar a los en un segundo y muchos otros. Así que echa un vistazo a la documentación de React. Entonces a continuación he enumerado reaccionan router porque sería genial para ti saber, entender cómo puedes trabajar con otras páginas. Por lo que solo construimos una aplicación de una sola página. ¿ Qué sucede si tienes otras páginas que necesitas para llegar a agarrar el sistema rutinario, entonces podrías utilizar algunos frameworks. Y a continuación, JS es un framework React muy popular y tiene algunas características realmente prácticas para simplificar su proceso y para la optimización para hacer más de una aplicación React más completa y optimizar. Otros ganchos usan ref que mencioné, y esta es una gran manera de acceder a elementos DOM. En este ejemplo, hemos conseguido uso href aquí. Inicialmente es nulo. Hemos agregado esto a una constante llamada elemento de entrada. Y en la entrada misma estamos usando REF para el elemento de entrada. Por lo que este elemento de entrada es ahora un referenciado. Entonces cuando hacemos clic en el botón, en el botón, haga clic aquí arriba, esta es la función. Tenemos entradas elemento punto, la referencia corriente oscura, enfoque oscuro. Por lo que estamos agregando foco a este elemento. Hemos accedido a este elemento DOM con use ref, use context. Entonces como he escrito aquí, se utiliza para crear datos comunes a los que se puede acceder a lo largo de la jerarquía de componentes debe destacarse porque eso es lo más importante sin pasar la paroxetina manualmente a cada nivel. Así que imagina que tienes niños cinco niveles abajo. Entonces cuando nuestra app, nuestra app, lo siento, tuvimos un padre y dos hijos en un nivel abajo, pero imagina si hay más hijos, sus nietos, bisnietos, los niveles siguen bajando. No quieres seguir pasando escuela Prop hasta el final. Me pondré bastante molesto. Puedes usar, usar contexto o crear contexto, el contexto en el nivel padre. Entonces en este ejemplo están usando temas, sistema hey, o sistema de color para la luz y la oscuridad. Y luego envolverías la aplicación con este tema, proveedor de contextos constantes pasando por tus valores y luego con el niño. Por lo que esto puede ser cualquier nivel abajo en lugar de pasar los cultivos todo el camino hacia abajo dentro del niño, cualquier niño, puedes usar estos contextos. Recogimos en una constante llamada tema, y luego solo tienes acceso a ese contexto o fondo. Piensa en primer plano. Este tema se está accediendo desde el padre. Mencioné el enrutamiento. Echa un vistazo a la documentación oficial está aquí. El URL es solo una colección de componentes de navegación que se pueden utilizar dentro de su aplicación. Así que echa un vistazo a esto si quieres trabajar con múltiples páginas en tus frameworks de aplicaciones, he mencionado Next JS. Nuevamente, eche un vistazo a la eficiente orientación del Dr.. Tiene muchas, muchas grandes características, representación estática y del lado del servidor para un buen rendimiento, liado inteligente, soporte completo de TypeScript, prefetching grosero y el enrutamiento. A particularmente como en el siguiente y lo hace tan simple. Es casi como un sistema de arrastrar y soltar en el sentido que tendrías un directorio para páginas y arrastrarías, las compararás o páginas en ese directorio y fuente ya sea enraizamiento para ti más o menos. Sí, agradable y fácil. También viene con la optimización de imagen y muchas otras características. Así que una vez que tengas la cabeza alrededor reacciona anual cómodo, x de próxima gen valdría la pena echarle un vistazo. 14. Resumen y razones por qué te impresionantes: Bien hecho. Has hecho un trabajo impresionante de conseguir todo el camino a través de este curso y crear tu propio generador de cotizaciones utilizando las últimas técnicas que has aprendido. Ciertamente características importantes de React incluyendo JSX, props, hooks, administración estatal y pruebas, solo por nombrar algunos. Ser un desarrollador front-end y tener conocimiento de los fundamentos modernos de React es un conjunto tan útil de habilidades para tener sin importar el nivel en el que estés, ya sea junior, de nivel medio o senior. React sigue siendo la biblioteca JavaScript más popular del mundo. Entonces el hecho de que hayas hecho una aplicación React de una sola página te pone justo en la parte superior del espacio de desarrollador web front-end. Enhorabuena a ti. Ahora puedes tomar estas habilidades y usarlas en tu futuro trabajo? Por último, sólo quería decir un agradecimiento masivo por no sólo inscribirse a este curso, sino también por completarlo. Sin tu apoyo, profesores como yo no serían capaces de crear contenidos como este. Entonces de verdad, muchas gracias. Si disfrutabas este curso, y realmente espero que lo hicieras, significaría tanto para mí si pudieras tomarte el tiempo para dejar una reseña. Leí cada pedacito de comentarios que obtengo y tomo a bordo cualquier comentario que puedas dejar. Para que puedas seguir mejorando mis clases y seguir haciendo los cursos que te resulten útiles. Entonces con eso dicho, muchas gracias de nuevo, eres impresionante. Noche ir adelante y código.