Fundamentos de React.js - ¡crea una calculadora súper-divertida! | Luke Fabish | Skillshare
Buscar

Velocidad de reproducción


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

Fundamentos de React.js - ¡crea una calculadora súper-divertida!

teacher avatar Luke Fabish, Let's get coding!!

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.

      ¡Hola y bienvenido a los fundamentos de React.js de React.js!

      1:21

    • 2.

      Vamos a configurar.

      2:48

    • 3.

      ¡Comienza a construir el calculador

      20:56

    • 4.

      Crear componentes con clases

      6:57

    • 5.

      React las propiedades de componentes

      11:26

    • 6.

      Dato de una persona: ¡por qué es increíble!

      4:40

    • 7.

      dataflow reverso!

      17:49

    • 8.

      React de estado y lo que hace!

      15:15

    • 9.

      ¡Vamos a hacer que nos calculemos con nuestro calculador calculador!

      4:24

    • 10.

      El ciclo de vida de componentes de React.

      7:50

    • 11.

      React de codificación #1

      5:17

    • 12.

      React de codificación n.2

      4:50

    • 13.

      ¡Ya te extraño!

      0:25

  • --
  • 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.

500

Estudiantes

1

Proyectos

Acerca de esta clase

Esta es una gran oportunidad para aprender todo lo que necesitas para empezar a construir aplicaciones de Reactos.

Si no te familiar con ello, React.js es la biblioteca que elimina la complejidad de crear aplicaciones web.

(¡Fue a la de Facebook para que corre su sitio de sprawling, y complicado de pulgar y de la

Esta clase te llevará de conceptos básicos de React a través para crear una aplicación de trabajo e incluye todos los recursos que necesitas para crear tu proyecto.

Durante esta clase aprenderás:

  • ¡Qué es React.js y por qué es lo que es impresionante!
  • Conceptos fundamentales como la gestión de estado de React, propiedades y procesamiento de render.
  • Cómo funciona de la vida de los componentes de React, y cómo aprovechar con él.

En el curso utilizarás React para implementar una aplicación de calculadora: ¡es una pequeña aplicación pero te enseña todo lo que necesitas de tiempo para empezar a crear cualquier lo que puedas imaginar!

No tienes que ser un ninja, total web sin que se de ninja, pero se it’s que ya se conocen algo de HTML, CSS y JavaScript.

Conoce a tu profesor(a)

Teacher Profile Image

Luke Fabish

Let's get coding!!

Profesor(a)

I'm a great believer in empowerment through learning, and that's what I believe teaching on Skillshare is all about.

As a professional software engineer I've benefited massively from educational resources on the Internet.

Especially, I want my Skillshare classes to be an entry point for anyone who wants to learn about programming from the very beginning, and to start a journey into the world of professional software development.

There are a lot of misconceptions about what kind of person you need to be to be a programmer.

Good at maths? Obsessed with computers? High-IQ?

None of that is required.

If you're ready to learn, and willing to work through a problem, you've got what it takes.

Person... Ver perfil completo

Habilidades relacionadas

Desarrollo Herramientas de desarrollo React
Level: Intermediate

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. ¡Hola y bienvenido a los fundamentos de React.js de React.js!: todo el mundo. Mi nombre es Luke faddish y en el desarrollador de software profesional escribí mi primer macho HD en 1997 que se ve así. En realidad no. Pero hoy estoy aquí para hablarles de reaccionar J s si no han oído hablar de ello. React es un uso de biblioteca de scripts de trabajo para construir interfaces web front-end. Y lo bueno de reaccionar es que elimina mucha de la complejidad que normalmente enfrentamos cuando estamos construyendo una aplicación Web, me meteré más en eso más adelante durante la clase. Pero por ahora, ¿qué minutos sabe que los reactores se vuelven tan populares que ahora podemos construir aplicaciones de escritorio y móviles en reactores? Bueno, entonces por eso estoy súper emocionado de estar impartiendo esta clase, que es reaccionar fundamentales de vanguardia y desarrolladores durante esta clase, y vamos a construir esta calculadora como proyecto fuera. Podría parecer bastante simple, pero lo bueno de ello es que cubre todo lo que necesitamos saber para poder empezar a construir aplicaciones web de reacción. Estoy súper emocionado de empezar, y no puedo esperar a verte dentro de la clase 2. Vamos a configurar.: todo el mundo lo hará. Bienvenido de nuevo en esta conferencia, vamos a asegurarnos de que seas capaz de ejecutar una aplicación de reacción en tu navegador. Ahora, ¿ya has estado ejecutando aplicaciones de reaccionar en tu navegador? Casi seguro. Porque si ejecutas Facebook, entonces sin duda has ejecutado una aplicación de reactor antes de que Facebook inventara el reactor, y lo usan en todas partes. Pero vamos a estar usando reaccionar un poco diferente a esos chicos durante nuestros ejercicios de desarrollo y práctica. Por lo que por favor descargue de los recursos recuento médicos completos aquí. Ya lo tengo sentado aquí en mi pequeña ventana de fonder. Dale a eso un doble clic para abrirlo. Se puede ver que en compresas en estos recuento Foto completa. Abre eso hacia arriba y por dentro. Tenemos re Calcuta dot html. Ahora, en tu navegador, puedes seguir adelante y abrir ese archivo como hacer clic en Recuentar ese HD y lanzarlo como abrir . Por cierto, puedes usar comando o en un Mac o control sobre en un PC con el fin de abrir un lejos de tu hermano. Y aquí tenemos nuestra pequeña calculadora. Y si hacemos algunas matemáticas complicadas nueve divididas por tres. Oye, Todenhofer hizo algo o no, porque la respuesta es tres de todos modos. Eso es todo. Está ahí. Está funcionando más o menos como esperamos si no está funcionando. Lo que esperamos ver es esto. Rick fuera. Aguanta, Trae sombreros, todo el mundo. Es la calculadora React y luego una gran gorda nada blankness junto a ella lo que será más probable porque no estás conectado a Internet. Todo eso es algo malo con tu conexión a Internet. Acabo de pasarme y muchas veces lo demuestro. Eso se debe a que jalamos en algunas bibliotecas externas para usar sin aplicar reaccionar. Si no puedes ver Internet, no podrás usar la aplicación, y no podrás completar el resto. Por supuesto, um, la otra razón más probable es que estarías usando un navegador bastante antiguo si aún no tienes suerte. Tienes Internet encendido. ¿ Tienes un nuevo navegador? Ah, sí, claro. Asegúrate de tener JavaScript activado también, y tienes javascript activado, y todavía no obtienes nada. Oye, avísame y vamos a resolver lo que está pasando y ponerte en marcha. Pero eso es todo por ahora. Espero que hayas visto un precioso ahí se calcularon en tu navegador, y espero verte en la próxima conferencia cuando empecemos a construirlo. 3. ¡Comienza a construir el calculador: Hola de nuevo, a todos. La conferencia de hoy es donde el caucho se encuentra con la carretera y comenzamos a trabajar en nuestra calculadora de recuento . Entonces vamos a empezar como esta calculadora e implementarla. Y solo quiero deletrear realmente que el objetivo de hoy es ver cómo se ve reaccionar. Dale de un mango sobre él. Thompson Reaccionar código en un editor de texto. Juega un poco con él. No se trata de aprender teoría. Todo lo que hoy hacemos aquí, estaremos cubriendo o más tarde en los tribunales. Entonces tendremos otras conferencias dedicadas a, como qué componentes fuera, cómo debemos implementarlos, qué hacen con los datos que recibieron de otros componentes, todo este tipo de cosas. Entonces vamos a estar buscando en eso. Ah, todo mucho más. Lo que necesitamos hacer para empezar es descargar un archivo ZIP que contenga un archivo html esqueleto en el que vamos a hacer nuestra codificación. Como puedes ver, este archivo se le llama un recuento de Scratch Doctor, cual puedes descargar, y solo voy a hacer doble clic en eso, y puedes ver que crea una carpeta en ese mismo directorio dentro de esa carpeta es una recuento dot HTM L Así que abramos eso con uno de mis muchos miles de texto. Los editores usarán el código de estudio visual hoy. Como puedes ver, aquí tenemos un documento HTML, tiene cabeza y un poco de contenido. Entonces vincula recursos. Oye, tenemos algunos estilos predefinidos solo para salvarnos. Se molestan jugando con CSS de lo que estamos aprendiendo reacciona. Y aquí tenemos algunos archivos vinculados externamente que requerimos para reaccionado para ejecutarte Now browser. Ahora se trata de un ejercicio educativo, así que realmente estamos vinculando directamente a estos archivos en el navegador, pero en una situación normal de desarrollo, no nos gustaría esto. Entonces solo ten en cuenta si donde no puedo estar haciendo esto en un entorno de desarrollo de producción . Ah estaría haciendo todo este tipo de cosas en la línea de comandos y produciendo un archivo de paquete para incluir, ya sabes, fuente. Pero eso está un poco fuera del alcance fuera de lo que estamos viendo en este curso en particular, porque estamos aquí para aprender sobre los fundamentos, fuera de la construcción de interfaces, usando reaccionar, y eso es lo que vamos a empezar haciendo ahora mismo, dijo Tienes código de reactor comienza aquí y se puede ver lo que es un tipo de etiqueta de script. El viaje de texto es como indicamos que estaban escribiendo algo que no va a ser bastante adecuado JavaScript. Y, uh, este archivo balbucea mindo Js Es el responsable de cuidarlo ahora, reaccionar a los rostros se componen con componentes. Y así mejor empezamos definiendo nuestro primer componente, y será una vez que dejé de hacer mi tipo de ser una pequeña función en una calculadora local , y en este caso, una función realmente no tiene que hacer nada que no sea devolver algo. Y en este caso, va a devolver J seis. Ahora, al término de esta conferencia en particular, estará mirando a JSX en más Ditto. Um, se parece mucho a HTM No. Ah A Z puede ver que hay algunas diferencias como este camello cased nombre de clase Andi. Vamos a dar a nuestros como poco componentes clase, nombre off, calcular o salvaje con top estuvo aquí hoy y de adentro hacia afuera calcular tendré un gran cero gordo , y así que esa es una función para renderizar un componente reaccionar. Y eso es casi tan simple como se va a conseguir un componente reactivo. Como dije, Estamos regresando algunos JSX. Estaremos hablando de J six en un momento, pero esto no es suficiente para realmente conseguir algo, ya sabes, navegador. Porque si te metes en el navegador de cangrejo ahora mismo, haz una recarga de este archivo. Se puede ver que no hay nada ahí, y se usa una de las cosas que necesitamos hacer para mostrar un componente en el navegador en React. Reacciona, dongle, dijo Render. Aquí puedes ver que tenemos reaccionar, Dom, Dom, Y este es el archivo que es responsable de renderizar nuestra reaccionar en un navegador. Porque, por supuesto, reaccionar no tiene que aparecer en un navegador. Podríamos estar generando lado de servicio también en. Se habla mucho ahora mismo sobre la fibra de reacción, que va a admitir múltiples renderizadores para reaccionar, pero muchos para usar realmente tontos para renderizar cómo componente en el navegador. Entonces podemos referirnos a cómo componente así. Como puedes ver, parece que acabamos de ir y hacer un HD personalizado no Ted llamado calculadora, que es lo que pasa a ser auto cierre y así reacciona. Dorm dot Render requiere un componente encendido. También necesita saber dónde debe renderizar ese componente. Entonces lo pondremos y lo pondremos aquí. Entonces tenemos este trato con un I D off container, y aquí es donde todo nuestro código de reacción se va a renderizar en nuestro documento HTML. Entonces tengo documento Get Nana by I d Container, y eso debería ser suficiente para que nos pongamos en marcha. Y hay un gran cero gordo. Qué emocionante. Entonces realmente, queremos hacer algo un poco más interesante que eso. Y así deberíamos tener una pantalla de calculadora y así renderizará que él más o menos exactamente de la misma manera. Simplemente le haré café a ese tipo porque va a ser muy similar, y lo llamaremos Cal Display. Seguiré adelante con la convención restante una vez más, y todavía tendremos un cero ahí dentro, ya sabes, solo para mantener las cosas interesantes. Pero ahora, en nuestro eso era mamones. Y por cierto, um, um, pero ahora de adentro hacia afuera componente calculado, manera libre de hacer referencia al componente de pantalla del sofá. Y entonces lo que eso hará es cuando rendericemos calculadora, esa calculadora va a subir aquí y volverá. Es J. es X y dentro de ese sexo carcelario Cal podría exhibir y decir, Bueno, necesitamos ese conteo Display. Por lo que aquí, eso a su vez, provocó que se ejecutara esta función de espía de personajes. Y es JSX se renderizará papá y él. A ver cómo nos vemos ahora. Y tengo un cero y se puede ver que Al cero ha cambiado de apariencia porque una vez más , solo recuerda, tenemos algunos prettify y CSS y eso ve, dice define estilos para algo con la clase nueve quilates mostrados para que veas cómo estamos empezando a construir una interfaz combinando componentes reactivos. El siguiente cálculo que se va a necesitar es un botón. Entonces quiero botón. Haremos una función. Bueno, por ahora, este negocio de utilería. Ya veremos cómo funciona eso en un momento, en realidad, como ahora mismo, porque vamos a tener que usarlo para escuchar hacer un botón de sofá. veremos cómo funciona eso en un momento, en realidad, realidad, como ahora mismo, De acuerdo, así que una vez más, vamos a devolver un ciervo. Um, muy vivo. El HTML tags que soportaba J six, por cierto. Por lo que tienes tramos y guisantes, y para que pudieran tener tramos y etiquetas P y los todos los artículos knaves todo pero se pegarán . Teoh da ahora mismo. Y, por supuesto, eso tendrá un nombre de clase casa por delante. Hablar y mecanografiar no es mi fuerte. De acuerdo, Dave, como ah, así lo dijo todo. Eso como lo hacemos en esta conferencia estará mirando con mucho más detalle más adelante. Uh, solo repasa las cosas por ahora. En el interior de aquí. Bueno, vamos a tener muchos fondos o una calculadora, por lo que realmente no tiene sentido codificar los valores. O sea, no tiene sentido. Tampoco juegan los valores codificados duros en nuestros personajes, pero servirá por ahora. Pero en un cath Barton, queremos que las cosas sean un poco más interesantes. Entonces voy a referenciar algo llamado este pensamiento Krups valor. Y estos Kelly precios una indicación Teoh cómo, uh, doble paquete o burbuja, biblioteca que estamos usando una expresión dentro de un j seis y que esa expresión debe ser evaluada. Y así en este caso, estamos haciendo referencia a alguna estructura de datos que pertenece a esto, y va a tener algo llamado valor en ella. ¿ Y de qué viene ese valor? Bueno, el valor es fácil encontrar nombre lo que podríamos llamarlo Elephant Popsicle o lo que queramos. Um, pero claro, valor. Y así podemos conseguir un hit y simplemente pop en una vaca como una vaca. Pero es un valor igual y decir por qué. Sí, así que veamos cómo se ve eso. Ahora recarga de navegador y nada. ¿ Por qué es eso, entonces es porque refiriéndose a estas cosas apoyos, eso fue un error tonto porque claramente estaba recibiendo apoyos aquí arriba. No necesitamos referirnos a esto que viene del hábito de usar clases en lugar funciones a necesitar Teoh se refieren a una instancia actual. Uh, vamos a estar usando clases, uh, uh, más tarde para definir componentes de reacción. Por ahora, usar funciones y funciones son bastante buenos, pero nosotros pero las clases nos dan un poco más de funcionalidad, que vamos a requerir. Pero todo el punto es que no tuve que referirme a este escritorio. Tienes que usar utilería y, uh, déjame especificar y valorar como esos atributos es lo que lo llamaríamos en html. Ah, y reaccionar. Es una propiedad fuera del componente de botón del sofá y, uh, reacciona, pero renderiza el botón del sofá que pasa. Sea lo que sea que encuentre aquí en una estructura de datos llamada apoyos en la función, podemos referirle su valor de stock adecuado. De acuerdo, así que he guardado esa cacería. No volverás a cargar solo. Todo Aquí está uno su cero grande. Pero aún no se ve como calculado, Realmente. Entonces Ah, sólo voy a seguir adelante en qué van a ver en un separado diferente, querida? Muy bien, um, lejos, lejos seis. De acuerdo, así que eso constituye una fila de botones en una calculadora. Y se puede ver ahora que bien, y se puede ver cómo podemos usar, uh, uh, los quejosos Teoh componer una interfaz en reaccionar. Porque una vez que tienes uno definido y está funcionando de la manera que queríamos, entonces estamos en bastante buena forma para ir y usar ese componente donde y como nos plazca . Y eso no se supone que sean restas. Primera visión creativa. Como pueden ver, realmente me estoy acercando. Teoh calculó las normas aquí. Oye, cómo orden de los operadores y esa será esta atracción en. Necesitamos más de estos tipos, ¿verdad? Vía necesaria. ¿ Cómo? Uh, tenemos C para claro y necesitamos un cero en todo, calculadora en iguales y finalmente edición. De acuerdo, Así que guarde eso. Bueno, ahí está. Pero eso se ve un poco incómodo fuera de ir antípodas. Algo más, estoy seguro. Um, cuenta Bottoms. Está bien. Ah, él es el culpable. Calcula o eso se jode mientras estoy hablando hasta que él pueda ver mucho de eso. Pido disculpas. No puedo decir que nos veamos un poco mejor. Y cómo Aquí está nuestra calculadora. Como dije antes, tenemos algunos estilos predefinidos. Um, cuáles son qué? Haciendo a cabo cuál es lo que está haciendo botones. Cómo no flote y qué no. Uh, pero se puede ver cómo tenemos que encontrar algunos componentes de reacción usando funciones como contienen esos componentes. Bueno, definí por j six y cómo hemos combinado esos componentes juntos, es decir, componiendo con ellos con una interfaz web compuesta combinando estos componentes los cuales luego Renda usando reaccionar Dom. Entonces ahora mismo, vamos a volver a la presentación para mirar un sexo en cadena un poco más de cerca, señor, en nuestro pequeño ejercicio de codificación justo ahora, vimos mucho fuera de J S X. Es esa cosa que se parece a HTML? Eso realmente no es html. ¿ Qué es JSX? Se trata de JavaScript, extensión de sintaxis. Al menos ese es el nombre que Facebook le dio hace un rato. Um, parecen haberse retrocedido un poco de eso ahora, No han dicho que llamó a eso en un tiempo o se refirió a su extensión de sintaxis de JavaScript. Uh, pero no se puede pensar en ello como HTML que se llega a personalizar si eso ayuda a subir. Supongo que puede haber que tengamos que tener en cuenta es que J six tags corresponden para reaccionar componentes, así que es un perrito feliz. ¿ Por qué está feliz? Siempre feliz, porque Jazz X nos da unas cosas bastante impresionantes. Es intuitivo. Si conoces HTML, puedes mirar a JSX y tener una bastante buena idea de lo que está pasando. Es conciso. Ah, esas etiquetas ocupan mucho menos espacio y requieren mucho las que escriben que escribir en el guión de trabajo . Tendrías que teclear en lugar de montar una etiqueta de sexo gigante. Porque cada vez que ves una etiqueta JSX, lo que realmente está sucediendo es que estamos creando componentes de un reactor y repartiendo un montón de propiedades, y todo esto se suma a tener un código bastante legible. Eso es impresionante. Esto hace que las cosas sean mucho más obvias y simplemente reduce nuestras oportunidades de cometer errores. Pero es un dicho burro. ¿ Por qué está así dicho este perrito? Bueno, JSX es un perfecto. Desafortunadamente, requiere más utillaje. Hicimos que Teoh usara la Biblioteca Babel para interpretar nuestro JSX y Trans lo apilan en un JavaScript regular . Uh, hace que su semántica incluya, que es igual que algunas personas locas. Odian eso, Um, porque, claro, se parece mucho a villanos HTML y HD todo sobre crear estructura semántica en la página Web personalmente no me molesta. Y bueno, una vez, una vez, las páginas renderizadas con javascript eran una especie de rastreadores web del dedo del pie invisibles como Google. Pero eso ya no es cierto. Se trata de unas pruebas recientes, dicen recientes, no apuestan recientemente, como 2015 algunas personas probaron su página web J s ex generada. Uh, sólo que ayudó fue indexado por un montón de llamadas web y motores de búsqueda, y fue indexado a fondo por todos. Excepto, creo que Baidu de China porque estos motores de búsqueda ahora están ejecutando el JavaScript , su renderizando la página antes de que intenten rastrearla. Entonces si ves a alguien diciendo, bueno, bueno, reactor de salida de jazz, Vale, pero van a ser invisibles para los motores de búsqueda ya no es cierto. El siguiente tipo de cosa que necesitamos a Teoh ir es algunos pequeños cambios que se han producido en la forma en que le decimos a un navegador de esa manera, usando J s ex ahora normalmente en el tipo habitual de desarrollo configurado. No tenemos que decirle esto al navegador porque no estamos incluyendo directamente un JSX en el HTML Falls. Pero por el bien fuera aprender reaccionar. ¿ Cómo vamos a hacer eso? Y necesitamos decirle al navegador que estamos usando código JSX y no algún maki html realmente formateado mezclado con JavaScript. Entonces, ¿cuál es el punto en el tiempo? Hicimos esto para poner un comentario en el inicio de nuestro J seis así. JSX naufragó al amanecer para que el navegador supiera lo que estaba consiguiendo. Ya no hacemos eso. Ahora lo hacemos en nuestra etiqueta de guión. Le damos un bisel tipo de texto slash, que le dice al navegador Hey, balbucear necesita cuidar de esta cosa que se le da a balbucear. Y entonces nuestro J seis y el resto de nuestro código serán rápidos y ejecutados con éxito. Y la razón por la que me voy a meter en todo esto es porque todavía encontrarás la antigua manera referenciada en algunos artículos antiguos. Si estás buscando en Google alrededor de forma o información sobre J s ex cómo funciona. Entonces eso es una cabeza arriba para ti. Entonces sólo un resumen rápido de todo eso. Eso es bastante para cubrir en una naturaleza. Pero solo recuerda, etiquetas JSX son equivalentes a reaccionar componentes y también finalmente recuerdan que la función de render define la apariencia todo un componente reaccionar. 4. Crear componentes con clases: Oye, todos bienvenidos de nuevo en esta conferencia estarán hablando de definir componentes de reaccionar con clases. Se puede ver que hemos definido un componente calculado general y lo llena con componentes fuera de Siri para definir una pantalla de calculadora y botones. Por el momento, estos orden aéreo dispararon con funciones puras en eso es impresionante. Siempre que podamos usar funciones puras para definir un componente, deberíamos. Eso hace que el código sea mucho más fácil de mantener y de entender cuando estamos tratando de averiguar por qué las cosas no están funcionando a su manera, deberían. No obstante, las clases nos dan más funcionalidad que nos permiten hacer más sin componentes, y por eso los van a estar revisando hoy. ¿ Cuál es el objetivo de la naturaleza actual? Bueno, primer lugar, queremos hacer algunos componentes usando clases, y en segundo lugar, cubrirán brevemente. ¿ Por qué no querría usar una clase en primer lugar? Entonces, ¿por qué querríamos usarlo? ¿ Clase? Vamos a comprobarlo. Como podemos decir, tenemos estas pequeñas funciones que definen componentes e incluso nuestro componente de calculadora , que es un poco más grande. Se nota la función, sin embargo, hay algunas cosas que simplemente no podemos hacer con las funciones. Esas cosas incluyen mantener valores de estado como el seguimiento de, ah, una interacción de usuario a la siguiente definición de valores predeterminados. Nos fijamos brevemente en el paso de valor a un componente como valor de inicio de la prop aquí. ¿ Y si quisiéramos que Teoh le diera un valor por defecto? Pero si quisiéramos validarlo, realmente no podemos hacer eso en una función. Este es el tipo de cosas que, uh, las clases nos dan. OK, entonces vamos a convertir nuestra función pura en una clase, y lo primero que tenemos que hacer es crear una definición de clase fue un botón de scout de clase y se extiende. Bueno, reacciona. Vamos It. De acuerdo, entonces se expande componente reactivo. Y la única función que debe tener una clase de componente de reacción es Orender render es tres función que es responsable de definir cómo aparece componente en el navegador. Funciones de render Onda Voy a hacer exactamente lo mismo que nuestra función pura hacía anteriormente . tenemos que cambiar el valor de prop stock a este valor de stop pop oscuro ya que ahora sacamos Sítenemos que cambiar el valor de prop stock a este valor de stop pop oscuro ya que ahora sacamos propiedades de una instancia de clase y no se están pasando a una función pura. No, que los reactores se encargaron de todo eso. Detrás de las bambalinas, solo llamamos pantalla de conteo Llamamos Cath Button, pero tengo que preocuparme por cómo entran las propiedades ahí. Pero ahora hemos convertido el botón de cuenta en una clase, así que vamos a ir a ver cómo se ve eso en el navegador. Dale a eso una recarga y ahí está. Se puede ver que estamos mostrando sin botones exactamente de la misma manera que lo hacíamos antes. Y no tuvimos que cambiar la forma en que usábamos botón talco abajo y aquí y el componente de calculadora. Todo sucedió aquí arriba, y los cambios lo pasaron sin problemas, así que eso es genial. Entonces como un pequeño ejercicio de ropa, ahora los invito a convertir el componente de pantalla de Cal, y el componente de calculadora de funciones puras en dos colapsos dijo, Please pausar la conferencia e ir. Haga eso y luego vuelva a la conferencia y trabajaré por eso rápidamente también. De acuerdo, entonces aquí tenemos de vuelta en la comida y es mi turno de convertir estas cosas de funciones a clases, digamos display de gorras de clase. No necesito afloramientos que se extiende, se extiende, extiende, reacciona componente. Tenemos nuestra función de render, que devolverá lo mismo. Tu función lo hizo previamente y de igual manera se meterá. Él Se trata de calculadora. Es una calculadora de clase y reacciona su nombre y renderiza eso por favor. Bryant va a personal 44. Fue que eso es como, um, 20. Mm, tan bien. Correcto. Estoy feliz porque conté bien mis indentaciones. De acuerdo, así que vamos a guardar eso. Hemos aplicado una definición de clase a nuestros componentes renderizado implementado. Eso va a ver si todo esto funciona. Y luego lo tenemos fuera. Pequeñas calculadoras ahora para encontrar con componentes que en clases y no funciones puras. Entonces volvamos a nuestra conferencia para que podamos hablar de lo que no debemos hacer cuando definamos nuestros componentes como clases. ¿ Qué pasa con un tiempo como ah, hace seis meses? Es así como definiríamos una clase roja usaría el punto de reacción Crear clase. Este ya no es el camino. Como viste, ahora usamos clase lo que se extiende el componente de punto reacciona y solo ten en cuenta que volverás a ver la versión anterior cuando estés buscando en Google y leyendo sobre las cosas de reaccionar. Verás la forma anterior de hacer eso, usando nuestra clase de creación de punto de reaccionar. Ya no hagas eso. Extender componente reaccionar en su lugar. Así que recuerda, las clases nos dan más funcionalidad como constructores, valores por defecto, manejo de eventos de validación, montones de cosas emocionantes. Um, se crean al extender reaccionar, dr Componente y no reaccionar punto Crear clase. Espero que haya disfrutado de eso. Y espero verlos en la próxima conferencia cuando hablemos más de propiedades de los componentes de reaccionar . 5. React las propiedades de componentes: Oigan, todos, bienvenidos de nuevo. hoy vamos a estar hablando de reaccionar Propiedades. Como habrás escuchado, los componentes de lectura tienen dos tipos de datos. Este dos tipos de datos fuera propiedades y estado. hoy vamos a estar revisando propiedades. Entonces, ¿cuáles son las estancias de color? ¿ Conferencia? Bueno, es aprender a usar componente de propiedades en reaccionar y también ayudará a definir los valores de propiedad predeterminados también, dicho Propiedades se asignan a un padre a un niño así como así , y se accede a ellos a través de la este punto apoyos constructo. Así que echa un vistazo. Esto ya lo hemos visto en nuestra pequeña pre implementación. Fuera de la calculadora. Tenemos nuestra calculadora de cláusula Woe Be aquí y ah, está usando estos componentes de botón cack y puedes ver que está asignando el valor de, en este caso, uno a algo llamado valor. Por lo que las propiedades, se parecen mucho a los atributos en HTML, pero son propiedades para en un componente de reactor. Y así si tenemos nuestro botón de polla solo firmar algo a nuestra propiedad que se llama valor ahí, aquí arriba en la definición del botón del sofá, entonces podemos seguir adelante y referirnos a esto que los problemas inician valor. Y no tuvimos que usar el valor del nombre aquí, ¿verdad? Es Ah, nombre que debilita. Asignarnos a nosotros mismos. Podría ser rábano o dingbat o lo que nos guste. Pero ese punto es que en el padre, le damos un valor en el niño. Nosotros accedemos a ella a través de este stop apoyos, valor de pensamiento. Y supongo que una de las cosas que es más importante darse cuenta en este momento acerca de las propiedades es que son inmutables. Entonces si fuera a ir, en realidad, echemos un vistazo primero a esto en el navegador. Y aquí está, su salida. Una pequeña calculadora no hace nada aún si comprobamos nuestro control. Y aquí tenemos nuestras advertencias estándar sobre la instalación de las herramientas reactivas, que no me he molestado en hacer en Chrome. ¿ Eh? También nos había dicho que lo estamos usando en modo de desarrollo. Esta no es una configuración de producción, y de hecho son tan correctas. Pero no nos vamos a preocupar por eso ahora, Um, este ser un ejercicio de aprendizaje. Entonces como podemos ver, no tenemos nada más de qué preocuparnos en la sala de conciertos ahora mismo. Pero si pasamos por aquí y yo muy norte botón pantorrilla modificarlo o modificarlo nuestra función de render . ¿ Verdad? Eso pondría en la declaración de retorno, diciendo que empiezas apoyos. El valor es igual, Digamos que, uh bien. Disculpe. Perdió el control. Edición de la misma. De acuerdo, Él es Ah, sí, yo quería hacer Se puso un común similar en el individuo. Entonces, ¿cómo es? ¡ Yee hah! Y si vuelvo al navegador y vuelvo a cargar, Uh oh, mira esto. No se puede asignar a leer en el valor de la propiedad del objeto objeto objeto hash de barra inclinada. Um, y luego un montón de otra, um, información potencialmente útil sobre dónde está esto. Se podría ver, uh, uh, sin embargo no se retiene. Por lo que dicen que son apoyos son de hecho inmutables. No se les permitió cambiarlos en la clase. Eso son realmente ellos. Teme a este Alto valor de las acciones de prop. Ah, el tipo de datos que podemos cambiar es Estado Frío. Y vamos a estar viendo eso en una pareja que ella ha hecho. Entonces me voy a deshacer de eso ahora mismo. Así que echemos un vistazo un poco a cómo funcionarán las propiedades. OK, así que digamos que tenemos alguna interfaz web y fuera de este malvavisco rosa rebuscando nube aquí que está representando nuestros datos saliendo de una red en alguna parte. Tenemos un valor me gusta y me gusta está establecido en 12 y él tenemos un componente de padres. Bien. Por lo que el componente aparente obtiene este valor me gusta de 12. Pero ya sabes, realmente no sabe cómo exhibir eso. Se encarga de juntar información. Eso es, Ah, ID asociado nosotros que mostrando me gusta. Pero cuando se trata de la pantalla real, bueno , es, ah, está un poco perdido, pero eso está bien, porque tiene otro componente que puede pasar. A esto le gusta el valor como una propiedad a un componente hijo. Genial. Entonces es franca. Y así pasa su vientre a través del niño. Y entonces el niño sabe exactamente qué hacer con eso aquí y hay, ah, pulgares grandes arriba y 12 al lado. Entonces tenemos me gusta renderizado de esa manera. Y aunque reaccionar es todo lo que la vista cuando se trata de interfaces de usuario, todavía tenemos que mantener una especie de separación de preocupaciones entre diferentes componentes y la gestión fuera de sus funciones. Entonces ahí dentro en este caso, el padre sabe cómo sacar datos de la nube, y probablemente sabe cómo organizarlos de una manera que tiene sentido en la página Web. Y luego tenemos otra capa. Al niño, que probablemente no sabe nada de dónde provenían los datos, no le importa mucho cómo se organiza. Todo lo que sabe es que sólo tiene que jugar 12 me gusta en la página. Este es un patrón bastante común en reaccionar. Entonces ahora es el momento de hacer algo de codificación, y lo que vamos a hacer es empezar a usar propiedades en nuestra pantalla cal de componente, que no está usando propiedades en este momento. Simplemente muestra un valor fijo fuera de cero. Echemos un vistazo a eso ahora mismo. De acuerdo, así que esto no nos sirve de mucho aún. Tengo esta pantalla de calculadora. Está mostrando el valor cero. Um, pero, ya sabes, probablemente quería mostrar otras cosas. Probablemente valores que pasamos a ella. Entonces bajemos a donde se usa. Y, uh, vamos a darle una propiedad, y podemos llamar. Ah, eso. Uh, sí, creo que llamaremos a ese display un número encendido y muy, uh, acaba de decir Reno que hemos hecho cambio aquí lo pondremos en 99. Ahora bien, esto realmente no es mucho más útil que sólo mostrar este cero aquí. Pero esto es lo que podemos hacer por ahora y otros sobre el uso de llaves aquí. Por lo que en JSX eran libres de usar etiquetas fuera y fuera camello propiedades cased, algunas de las cuales son bastante encontradas, como, apellido. Um, pero si queremos usar una expresión, necesitamos hacerlo dentro de estas razas femeninas. Entonces ahora queremos una expresión. Queremos referenciar este material para el número de visualización de inicio ascendente. Sí, está bien, lo guardaré. Y ahora cuando pasamos a nuestra calculadora y hacemos una recarga rápida, se puede ver que visualizo mostrando 99. Entonces esto no es super, um, sorprendente. ¿ En serio? Porque ya has visto cómo funciona esto. Phillips vuelve a nuestro código y bien dijo que de nuevo a cero por ahora, breve, vamos a estar actualizando la calculadora para que la pantalla de la calculadora cambie realmente cuando presionamos un botón. Um, eso es como, tiempo de dos elecciones. Pero primero, hay algo que tenemos que explorar, y esa es la noción de los valores predeterminados para las propiedades y una de las cosas buenas sobre el uso de clases es que llegamos a tener alguna funcionalidad extra. Como mencioné, una de las cuales es, uh, estas funciones estáticas. Y llamaremos a eso a la culpa. Quizás los apoyos por defecto son parte de la interfaz de componente reaccionar para un P I. Y su trabajo es devolver un objeto JavaScript. Y ese objeto de script de trabajo tendrá un par de valores clave o pares de valores clave en él, lo que decía caer valores para las propiedades para ese componente. Por lo que en este caso, necesitamos un valor predeterminado para el número de visualización. Algo es un número de exhibición y se sentará ahí desde respaldados en 19 9 De acuerdo, así que vayamos aquí abajo. Y bueno, si guardamos este Aiken caliente a través de nuestro navegador, hazlo confiado, puedes ver que está volviendo a cero. Y eso es porque estamos asignando cero para mostrar número aquí. Pero, ¿es por alguna razón que queríamos contar exhibiciones? Sí. Um, ¿qué más? Um, calculado que lo harían ellos y que primero va dedo del pie tener, como ningún valor asignado al número de visualización dicho para hacer eso y en una recarga, aquí está fuera a las pantallas de la calculadora. Por lo que es el 1er 1 sin valor asignado al número de visualización. Ernie puede ver que es el Padre a 99 y el 2do 1 que sí tiene un valor predeterminado asignado a él, se ha establecido en cero. Y así solo para terminar, recuerda que mientras reacciono, los componentes tienen dos tipos de datos. hoy hemos estado mirando propiedades ah, propiedades acceso aire vía este punto props dot cualquiera que sea el nombre de la propiedad y están asignados por aparente a un componente hijo. Y por último, tienen valores por defecto establecidos por la función getter estética de los apoyos por defecto. 6. Dato de una persona: ¡por qué es increíble!: Oigan, todos, bienvenidos de nuevo. Esto es sólo que realmente rápido poco tipo de revisión. O si, pero una revisión solo yo, uh, uh, diferente manera de resumir de lo que acabamos de hablar con las propiedades de los componentes de reaccionar y también explorar estas implicaciones un poco más amplias fuera de que dije que estamos va a estar hablando son de una manera punto para en reaccionar. Ahora bien, esto es una especie de gran cosa en reaccionar porque realmente era una caza de una manera fundamentalmente diferente de hacer las cosas a la mayoría de las aplicaciones javascript. Vamos a estar revisando cuál? Mi hija desde hace años Y, um, algunos de los beneficios que nos da como desarrolladores reaccionan. Cuando preferimos el flujo de datos de un solo sentido. Porque, como veremos, no es súper práctico solo tener todos tus datos yendo en una dirección de todos modos. Tantas aplicaciones JavaScript se ven así. Entonces si decimos que estos puntos azules representan nodos en ayuda navegador Dom y un evento que ocurre en cualquiera de estos puntos azules podría causar que cualquiera de los otros puntos azules cambie. Y creo que lo hemos visto bien, porque, ya sabes, debes sumar un botón, sin hacer clic en algo o escribir algún texto Ian en alguna parte ¿Y quieres cambiar un mensaje de validación en tu página? O quieres que un estado cambie su representación por color. Ver cambiar de color en estas cosas puede terminar. Escucha, todos tienen la página. Y, um, puede ser un poco difícil resolver lo que está cambiando. Qué exactamente eso cuando llegamos a reaccionar, se parece un poco más a esto. Y puedes pensar que estoy un poco más de vender el caso un poco aquí presentando un típico ser de JavaScript con todas estas líneas locas yendo a todas partes y es reaccionar uno con estos, como agradable, aseado poco simple líneas bajando. De verdad, así es como nos gustaría que funcionaran nuestras aplicaciones. Pero sí requiere una especie de cambio fundamental en la forma en que piensas cómo desarrollas tu aplicación. Porque cuando tenemos esto, es realmente súper fácil solo pensar Bueno, necesito ir y sentarme algún estilo diferente en este elemento todo el camino por ahí. Bueno, la forma en que están, um, hablando dentro de una clase, hazlo o modificarlo directamente, Um, que en este caso, necesitamos higo súper cuidadosamente sobre dónde nuestro hija viene de y cómo funcionan las interacciones. Pero de todos modos, no eres típico. JavaScript. Si tienes esta situación, ¿dónde está el naranja? Guy ha cambiado de alguna manera. Y si eso fue un comportamiento inesperado, tenemos una gran tarea por delante trabajando por qué, ¿ Dónde? Uh, se cambió. Pero en reaccionar, sabemos que realmente sólo hay otro nodo ahora componente principal que puede afectar esa nota. O lo esperamos. Entonces nuestro trabajo fuera de la depuración, nada de repente se vuelve mucho más simple o al menos tenemos una pregunta de lista que responder, que es cual nodo causó el cambio Ahora, que señaló, inició el reto podría ser un completamente pregunta diferente, pero realmente ha hecho la vida mucho más sencilla a partir de ahí. Pero si volvemos a nuestro ejemplo anterior fuera de nuestra interfaz como gusto, um, pero tenemos datos saliendo de la nube, y eso va para los padres aparente positivos para un niño. Niño lo renderiza en la página Web. ¿ Sabes qué pasa si alguien clica luz? Bueno, los datos obviamente necesitan volver al revés. Simplemente no podemos tener nuestro gusto sentado en 12 para siempre, ¿ verdad? ¿ Eh? Claramente, los datos necesitan retroceder en la otra dirección, y para eso es el estado. Por lo que anda por ahí para la próxima conferencia donde investigamos río iniciar un flujo en reaccionar. 7. dataflow reverso!: Oigan, todos, bienvenidos de nuevo en esta clase, vamos a estar hablando de flujo inverso darter , es decir, vamos a ver cómo un componente infantil puede pasar información de nuevo a aparente componente, y luego veremos qué haría un componente padre en esas circunstancias. Entonces, ¿cuáles son nuestros objetivos hoy? Nosotros lo entenderemos. Invertir el flujo de datos en reaccionar, e incluso vamos a enano también. Entonces vamos a agrietarse. Echa un vistazo a esto. Parece problemas, ¿no? Tenemos que haber invertido fuera de reaccionar foránea porque los componentes de los padres necesitan saber a qué se están poniendo al día sus componentes secundarios. Por lo que aquí tenemos nuestro pequeño mini Dom. Entonces esta es una muy buena Es simple. Es comprensible, hace que un código sea fácil de depurar. Pero cuando estamos viendo nuestro pequeño gusto, tu dispositivo, tengo que pedir bien, como se hace clic. ¿ Qué pasa? Necesita ser actualizado. Y así esto nos lleva a la idea de que podemos pasar funciones como propiedades así como datos. Ahora, por supuesto, las funciones son como estas. Negociaron a sus miembros de primera clase en Javascript para que podamos tratarlos a su hija. Y así va a redundante decir que podemos pasar datos y funciones. Pero el punto Kim tipo de perderse, porque cuando pasamos una función a un componente secundario reaccionar, se convierte en una función de devolución de llamada. Y, por supuesto, programadores de JavaScript generalmente no hay agujero sobre las funciones de devolución de llamada. Y así lo que podemos hacer sin función callback es si nuestro pequeño azul oscuro abajo aquí es clics, puede llamar a la función que se pasó como propiedad. Esa función se ejecuta, que ocurre componente independiente en típicamente el hijo compilar algún tipo de datos en esa función y que le dirá al componente padre lo que está pasando. Y así esto nos da un claro entendimiento aún apagado. ¿ De dónde están los valores que vienen? Porque si ahora somos padres componente el tipo verde aquí y queremos saber bien, ¿cómo consiguió ese valor que tiene en el momento que está pasando a su trabajo ? Bueno, ese valle será típicamente sentarse, um, dentro del componente padre y sólo dentro del componente padre. Y sabemos que ese valor se puede cambiar como un efecto secundario de una función de devolución de llamada que se está ejecutando ahora, una pequeña palabra de advertencia recientemente depredar ID o algo llamado el estado Vinculado. Mezcla y aún verás que brotando en los resultados de búsqueda de Google aquí y allá. Uh, esto era una vacuna. Podrías aplicar a tus clases de componente de reacción que te dejarían curl link up state con campos de entrada y para que el estado se actualizara automáticamente cuando ingresaras algo en algún tipo de campo de entrada. Um, béisbol dejó de eso, y el Link State Mixon ya no está. Entonces si ves algo así en un resultado de búsqueda de Google, sé que estás viendo información desactualizada. Hay una forma de que un componente hijo actualice los datos en un componente padre. Y eso es usar funciones de devolución de llamada. No, Claramente, es hora de que empecemos a implementar. Ah, algún flujo de datos inverso en nuestra calculadora, así que cuelgue apretado. Vamos a ir y hacer eso en el código ahora mismo. Entonces por favor abre tu corazón empieza a ir en tu editor de texto favorito y código junto conmigo . De acuerdo, todos, bienvenidos de nuevo a nuestro cud. Entonces solo vuelvo a navegar para hablar de lo que vamos a hacer ahora. Entonces lo que queremos hacer es implementar algún tipo de flujo de datos inverso en nuestra calculadora. Y, uh, vamos a hacer eso asegurándonos de que cuando se haga clic en ese botón, entonces ese componente calculado sepa de Es un componente de calculadora como todo el asunto con todos los botones dentro. A pesar de su aparente componente y todos los botones thes chicos, son Niños fuera de ese componente padre. Entonces lo que queremos hacer es asegurarnos de que hacemos clic en un botón y un padre lo sepa y puede hacer algo útil con el valor de los componentes secundarios. Entonces aquí estamos en un código. Aquí sale el componente de botón de gallo, que está implementando los fondos en la calculadora, y justo aquí teníamos fuera componente de calculadora encendido. Se puede ver a quién puede ver que golpea usando botones de Calcuta para implementar esa interfaz de calculadora . Entonces lo que queremos es pasar una función del padre al componente secundario y luego que el componente secundario utilice esa función cuando se haga clic. Entonces lo primero que más vale que hagamos es asegurarnos de que tengamos una función que podamos pasar en vidente. Digamos que tendremos un botón, no un botón, un código de función hasta el número de hoy porque en última instancia eso es lo que va a hacer. Se va a actualizar. Um, calculé el número de pantalla, que es lo que querría que sucediera en una calculadora cuando se hace clic en el botón, ¿ verdad? Veo valor ahí dentro, y no haremos nada terriblemente emocionante sin un momento. Los pedidos ponen un valor a la derecha. Y así está en función muy bueno. Y ahora queremos pasar eso como propiedad para salir componente de botón cal. Y necesitamos pasar eso al componente de botón cal como propiedad. Voy a darle este 'll en nuestro nombre ridículamente largo. Um, sólo por la lucha de la claridad. Realmente Más que nada, esta no es una zona de Carrie número. Entonces cuando están pasando, uh, uh, esa función en ahora componente hijo y nuestro hijo comportado mejor hacer algo con él , dijo que es idiomático en reaccionar tuvo el momento de no ejecutar funciones o funciones de devolución de llamada directamente desde un evento. Es más idiomático para ti. Hazte un poco de función local para manejar eventos y luego desde esa función, ejecuta tu función Colback. Y así vamos a tener mango, click. Y así cuando se hace clic en nuestro botón de gorra. Queremos manejar Click para ser ejecutado tan bien, poner en click igual Nota el caso camello. Mis amigos este inicio dan clic y de nuevo se puede ver que estamos usando, uh, estas llaves porque esta es una expresión referencia a una función es una expresión y las cosas props punto reportan una pulsación de botón. Aquí vamos. Y, um obviamente, recibimos un valor. Vamos a pasar ese valor de vuelta a cabo. Aparentemente componente para que lo sepamos. Pero se ha hecho clic en el número uno en ese botón Número dos, pero el número tres o el botón de división para que detengan quizás valor oscuro. De acuerdo, así que tenemos sentarnos en click Handler. Y ahora, en la función de manejo de flick, ejecutamos ahora la función de devolución de llamada. Entonces decimos que podemos ir a nuestro navegador, volver lascivo y hacer clic en el número uno encendido, y no pasa nada. Echemos un vistazo a esto, Inspector. Consigue un cónsul y oh, preciosa. Mira eso. No se puede leer los apoyos de propiedad desactivados. No, querida. Ahora tenemos corriendo a un encantador a través de la arruga en el desarrollo del reactor. Entonces aquí estamos, en Botón Capital y manejador de ejecución. Da click ahora mismo y tenemos un pequeño problema Eso es porque manejado como no sabe qué es esto en este caso. Tristemente, cuando usamos funciones para el manejo de eventos como este, la instancia actual fuera de nuestro botón de tope no se vincula automáticamente a esa función. Entonces no sabe qué es esto. ¿ Qué es esto? No lo sabemos Así que tristemente, tenemos que hacer a nosotros mismos en el constructor Ahora, a pesar de que este componente no necesitaba ser una clase en el momento en que lo convertimos en una clase antes Uh, esta es la razón por la que um, tenemos que hacerlo. Obtengo constructores accesorios de cinta y deberes de prueba llamados Super Cuando nuestros props dijeron que fuera clase de padres puede tener nuestras propiedades y hacer algo útil con ellos. Y entonces tenemos que decir, señor Handel, click es igual a este mango. Encuentra esto y obedeciendo Bueno, vamos a guardar eso y por arte de magia obstaculizará Hausa mostrará uno porque eso es lo que hemos configurado nuestra función de actualización para hacer en este momento y no quejarse en la consola de JavaScript. Fantástico. Y por supuesto, hacemos click a tres. Cualquier otra cosa aún no funciona porque solo asignamos y un botón de informe de calculadora presiona Teoh, botón de ayuda número uno. OK, así que yo sólo voy a hacer todo en eso, también. Descansa. Cómo, Pero hones senior, construyendo tipografías Agradécele a , ya sabes, solo voy a ir y poner esos a través del resto del hecho. Está bien. Realmente debería tener un espacio entre, pero y Curly Brace. Y qué tal una etiqueta cerrada iba a hacer eso rápidamente. Oso conmigo. Entonces toma, como, no hay prueba de tiempo. Eso es mejor. Dios, ahora dijimos recarga de calculadora en una. Muy bien. Y yo estaba como empezó a quejarme de todos estos diálogos para que veas que están comprimidos. Estos botones y seres funcionan. Sí, tipo de. OK, pero eso está bien. De verdad. Lo que queremos hacer es al menos tener nuestra pantalla de la calculadora Un número, solo un número en lugar de cero. Entonces intentemos hacer eso ahora, Y esto es realmente una introducción al estado. Estaremos hablando más de estado en la próxima conferencia, pero ahora lo vamos a echar un vistazo. Por lo que ellos constructores. Se necesita utilería, Por supuesto. Y lo estoy haciendo por dos razones. Una es porque pero ese número va a necesitar ser derribado. Está bien, Uh, este no número porque, ya sabes, encuentro hacer esto uh huh. Otra cosa que tenemos que hacer es sentarnos algún estado, y así podemos diseñar algún estado por defecto, lo cual es una idea bastante buena. Entonces solo digo que está atascado. Estado y estado es una vez más un pequeño objeto JavaScript. Diré que el número de visualización es cero. Algún día llegaremos a exhibir algo que no sea cero. Pero de todos modos, no podemos nada bueno aquí diremos que En lugar de pasar cero así, dirás cosas que ST dot display number look. Entonces hemos dicho que alguien debería empezar, dijo. Esa sería una industria callejera de Medscape. Está bien, Sue, iremos Ese Gov hace una recarga y felizmente en calculadora sigue jugando, mostrando cero. Entonces sabemos que nuestra asignación estatal predeterminada está funcionando felizmente y aquí en número de actualización , podemos acabar con nuestra mirada A, mostrando negocios y en su lugar decir, es ese estado. No, así no. No. Ya ves, el constructor es el único lugar donde podemos asignar un estado como este y que realmente se pegue. De lo contrario, necesitamos usar una función especial llamada inicio, siéntate escenario, y luego pasamos un objeto javascript a la función de estado establecido. Y esto realmente se sentará superada si acabamos de ir final, le asignamos un valor directamente. Sin usar el estado establecido, perderíamos ese valor. Um, es real decir, uh, uh, número de visualización es igual al valor. Eso está bien desde que lo enfrentó. De acuerdo, entonces diremos eso y golpearemos a través de un navegador Realmente lascivo. Y es uno, todo eso y que muestran actualizaciones. Y eso no son, ya sabes, días. Pero es, ah, una gran mejora en lo que teníamos anteriormente. Entonces eso es bonito. Yo estoy contento con eso. Pero hay un amor, una cosita que podemos hacer justo antes de terminar de engañar sin estado y eso es ah calculadora para crear un número más grande que un conjunto de dígitos, creo que diremos bien, para encontrar un nuevo valor, que vamos a carbón. Um, yo digo que voy a decir Que la libertad. Sí, costo, supongo. De acuerdo, se muestra el número igual distorsiona el número de datos. Oh, en realidad, ellos quieren No, así es. Sí. Disculpe. Nace Online. Beba primer valor. Está bien. Entonces, ¿qué estamos haciendo aquí? Nos estamos llevando a una condesa. Mi número y somos Podrido 't Katyn ating durante la edición Katyn Aging valor al final de misma porque estamos tratando con cuerdas aquí. Por lo que ahora podemos. Así que adelante y di que es que establece que exhibes número y bueno, lo que sea. Como, ah, haciendo una cita. Gracias. Ganaron una deidad tres, 46 y así sucesivamente. Y así, si tienes todo tipo de tonterías ahí dentro montones y montones de tonterías, Ok. Pero ahora en realidad estamos llegando a algún lugar. Nos estamos acercando un poco más. ¿ En serio? Sin pantalla de calculadora. Ah, eso lo cierra para esta sesión de codificación. Tendremos una mirada mucho más cercana al estado y las consecuencias compensando estado en el próximo asegurarnos. Y espero verte ahí cuando en realidad empezamos a hacer algo de suma y resta y cosas así sin calculadora. 8. React de estado y lo que hace!: De acuerdo, bienvenidos a eso, todo el mundo. hoy vamos a estar hablando de estado en reaccionar. Por lo que tuvimos un pequeño vistazo a ST en la conferencia anterior donde hicimos un estado de modificación calculado usando funciones de AC en frío para actualizar la pantalla en la calculadora. Y como pueden ver, tenemos un poco de margen para la mejora en. Eso lo vamos a hacer en la conferencia de hoy, pero primero, hablemos de lo que vamos a cubrir. Por lo que nuestro objetivo hoy es entender y usar el estado. A pesar de que ya hemos hecho ese poquito y conocemos las consecuencias de modificar el estado , hay consecuencias. Vamos a revisarlos ahora mismo. Digamos que tenemos un componente emparejado y ejecuta Rendah y ah, si un componente padre está usando un componente hijo, entonces esa función render componentes hijo se va a ejecutar también. Entonces podríamos pensar en esto como, como ahora componente calculado, el verde de la izquierda aquí, y luego el azul de aquí podría ser uno de los botones de la calculadora. Y así cuando los componentes padre, Orender o calculadoras render función ha ejecutado los componentes hijo, también se ejecuta la rendición y bien podríamos hacer clic en uno de nuestros botones. Entonces si se hace clic en el componente hijo y tiene, como, como, algún tipo de función de clic de mango y ah, maneja clic función vino, luego ve y ejecuta un cool back. El regreso de llamada fue dado a nuestro hijo por el padre de familia. Y, ah, si esa llamada de vuelta, entonces va y ejecuta el estado conjunto dentro del padre, esto es lo que realmente no cubrimos antes. ¿ Cuándo por aquí? Eso es correcto. Cada vez que ejecutemos el estado conjunto dentro de un componente, hará que ese componente vuelva a Rendah. Y si ese componente se renderiza, entonces todos sus pequeños componentes hijo van a renderizar un oleaje y sus Hijos y sus Hijos y así sucesivamente. Por lo que se puede ver que el estado de configuración en reaccionar es de donde proviene la interactividad en nuestra Web, en dispositivos que se implementan con reaccionar. Entonces no hay nada como un poco de práctica para realmente conseguir un control en esto. Entonces entrémonos en el código y usemos state algunos mawr. Oigan, todos, aquí estamos en nuestro código antes, pero antes de hacer algo aquí, sólo hace calor volver a la calculadora. Por lo que en nuestra forma de conferencia invertida fuera de Florida Actualizado la calculadora. Um, para que estos componentes hijo, estos fondos les pasaran datos al componente principal que contiene y lo que haría que actualizara el número que se muestra en la parte superior del calculado aquí. Pero como podemos ver, realmente no está haciendo lo que queremos todavía. Eso es una especie de locura. Um, así que sólo voy a papá de verdad Lo primero que creo que hay algunas cosas que arreglar. Entonces creo, y lo que queremos hacer en este momento es conseguir que en realidad haga algo de cálculo. Pero lo primero que creo que queremos cambiar es deshacernos de este cero inicial al estilo del número. Eso no me gusta. Entonces, uh, vamos a meternos en el golpe. Quién ya en nuestro componente de calculadora. Y esto es lo que hicimos la última vez. Aquí se puede ver que sólo estamos pisando el siguiente valor a nuestro a pesar de un número. Y luego recordando este inicio dicho estado para poner una pantalla número dos a tu alrededor número de exhibición , Um, que es yo dije, Bueno, eso estuvo bien. Nos sirvió bien antes, pero ahora creo que queremos hacer algo un poco diferente. Creo que lo que haremos es mirar, creo que empezaremos con el tipo de por ingenua ah, solución, que es como lo primero que me hubiera ocurrido cuando me sentara a hacer esto. Um, no soy un fanático masivo de Jude o código alongs o lo que sea ese show. La respuesta final primero, como si esa fuera la primera solución con la que se encontró la programación. Creo que ese es realmente el caso del señor Done It, como el mismo programa exacto 10,000 veces nunca sale así para mí. Um, si lo hace por ti, estoy celosa. Pero de todos modos, así que sin nuevo número de pantalla, creo que lo que haremos es probar valor. Entonces si el valor es igual a cero, entonces diremos, um, dirás que Bueno, solo juegas número es igual verdad que te enfermas. Haremos nuestro número de visualización habitual porque luego inicia ese número de visualización duh más valor. De acuerdo, y luego nos sentamos estado en nuestro número de exhibición. Esperemos que todo esté bien. Eso es recargar una calculadora y mostrar cero clic derecho en una y no hace una maldita cosa . Excelente. Eso es porque he hecho la prueba equivocada. Número de exhibición hilarante. Todo lo que dicen de hacer todo bien. En primer lugar. Cielos, um, obviamente, no he hecho esto como 10 mil veces todavía. Entonces, de todos modos, lo que realmente queríamos comprobar es si nuestro número de visualización estatal actual es igual a cero, y luego si es budista, reemplácelo por nuestro nuevo valor. De lo contrario, iniciaremos una pendiente por lo que hemos guardado esa recarga. Y hago clic en uno y está en 153 multiplicado. Bueno, eso no es lo que queremos. Pero ese es el próximo movimiento del libro que va a resolver. Vamos a entrar. Y así doce no el alma. Es instrumentar adición. Entonces va a mirar a estos tipos. Entonces tenemos, como, como, vamos a implementar la adición, lo que significa cambiar como dos botones. Vamos a tener que hacer más botón, hacer algo diferente. Voy a tener que hacer que nuestro botón igual haga algo diferente. Por lo que nuestro botón plus va a tener que hacer un par de cosas. Se va a tener que registrar el hecho de que queremos agregar algo, y también vamos a tener que, um, um, almacenar nuestro número de pantalla actual como el primer operandi. Entonces creo que llamaré a esta función ¿Cuenta separada? Sí. Para siempre y contar. Y tardará alrededor de dos. Pero debo llamar a esa operación porque esta sería la operación que realmente queremos realizar, a pesar de que aún no la estamos realizando. Tenemos actuación porque no tenemos ese segundo número en este punto cuando alguien presiona. Además, sólo se consiguió un número. Ah, y donde, um y no estamos implementando nuestra vida. Cálculo post fix. Ah, en esto tenía que ser Ah, gracioso, como, simplemente no interesante. De todos modos, a casa. Entonces lo que queremos hacer es establecer algún estado guardar. Empiezas Ciudad, estado y un pequeño objeto JavaScript ahí y lo diremos todo. Cooperación y lo pondremos a funcionar. Y queremos almacenar el número de exhibición como nuestro primer operandi. Por lo que tendremos oferta y una, y eso se establecerá a este número de visualización del estado de pensamiento. Está bien, genial. Y luego qué pasa con mostrar el número s. Entonces aquí es donde nuestra solución inicial de ingenua vuelve a mordernos un poco. No podemos sentarnos número de exhibición para que nos guste no podemos simplemente dejarlo tal como está. De lo contrario empezaremos a hacer un gran número nuevo Así que por ahora, lo pondremos a cero. Ah, sí. Cero. De acuerdo, entonces ahí vamos. Y lo que podemos hacer es bajar al botón Julie Little Plus, y cuando se ejecuta fue decir, Hey, Hey, ejecutar prep, Cal. Um, es algo que me estoy olvidando aquí. El personaje está haciendo muchas referencias. Teoh vuela, y es una función de devolución de llamada. Entonces por supuesto que tenemos que agregarla aquí. Brett cuenta. Gracias a un conteo. Muy bien. Dicho, ese es nuestro botón de adición cuidando. ¿ Qué pasa con cómo iguala botón fuera Hacer el botón de cálculo. Entonces pero esto va a querer hacer es volver a establecer algún estado, um, y hacer un cálculo para que yo los muestre pero muestre el resultado fuera lo que esté en número de pantalla y nuestra primera oferta y la operación que almacenamos. Entonces llamaré a esta nueva función Duke Colak, Cal um, en cualquier cosa que tenga que tomar una discusión y porque soy como el campeón del mundo en olvidarse de hacer esto, voy a seguir adelante y poner eso en un siendo vinculado a la instancia actual porque simplemente me molestará cuando me olvide de hacer eso bien. De acuerdo, Entonces, ¿qué vamos a hacer ahora? Bueno, vamos a primero que nada, supongo que necesitamos saber lo que queremos hacer. Por lo que inicias operación se quedó arriba, y supongo que la mitad 1er 1 será edición. ¿ En serio? Correcto. Y tendremos que votar bien, poniendo un descanso después de la falta. Porque, por supuesto, en el trabajo skip default puede aparecer en cualquier lugar de la declaración de caso. Y entonces supongo que lo que queremos hacer es poner algún estado. Eso es estado. Y qué queremos hacerlo. Preguntar fecha. Bueno, creo que terminamos sin operaciones. Eso pondrá la operación a indefinida. Y pondremos número de exhibición a flauta Aziz. Ahora, Como dije, realmente no me gusta presentar primero la solución final. Pero te voy a salvar. Que el dolor fuera de mí, trabajando a través de los diversos problemas fuera no hacer esto básicamente, porque estamos trabajando con cuerdas. Ah, cuando los aparta en números con el fin de hacer alguna adición con ellos. Por supuesto, si acabamos de decir pase float, es esa marca estatal uno Plus que ese número de exhibición, entonces, por supuesto, nuestro pequeño símbolo burbujeante plus podría Karen ocho Esos tips bebidas y nos dan resultado ridículo. Entonces de todos modos, um, y finalmente creo que queremos deshacernos. Bueno, reiniciar operado uno para más allá del hallazgo. De acuerdo, digamos eso. Y por último, tenemos que bajar, y nosotros nuestro botón de gato, uh, equivale a Teoh Do contar. De acuerdo, entonces, ¿qué creemos que va a pasar? ¿ Eso va a funcionar? Averiguémoslo. Hazlo. Confía. Yo quiero decir uno más Teoh porque 30 my gosh, se implementó Adición. Súper emocionante. Um Y ahora, claro, si escribo 333 0 gosh. Eso Ya ves, nuestra, um, um, inicialización del número de pantalla no está funcionando realmente para nosotros. Y tenemos algunos otros botones que tipo de no comportarse con sensatez todavía también. Entonces en su conjunto, incluido el ejercicio. Yo les animo justamente a seguir adelante e implementar la multiplicación y resta de división siguiente en su propio tiempo. Um, la fecha comenzó, igual que, totalmente aflojando. No lo estoy haciendo yo mismo, porque en un pequeño tipo de código provisional, a lo largo de las conferencias, voy a seguir, implementarlos yo mismo. Por lo que espero verlos en la próxima conferencia. 9. ¡Vamos a hacer que nos calculemos con nuestro calculador calculador!: Está bien, todo el mundo. Bueno, como dije en la conferencia anterior, esto va a ser una carrera rápida implementando las operaciones restantes en nuestra calculadora, es decir, multiplicación y resta de división. Entonces echemos un vistazo a nuestro código. Si recuerdan, tenemos esta función llamada Duke ALC, que por el momento sólo está implementando adición. Y además, pasamos y conjuntos de vehículos que, um, actualizan el estado que solíamos hacer un seguimiento. Estábamos a la altura en su operación y finalmente cambiamos muy bien. Entonces claramente, este es este spot donde queremos implementar las otras operaciones. Pero voy a hacerlo un poco diferente. Yo creo que sí. Lo que haremos es sacar a este tipo de fuera. Cómo declaración de caso. Tiene un estado conjunto de llamadas y poniendo estas abrasiones y el extremo superior una y otra cosa una y otra vez. Entonces lo que haremos en su lugar es crear esta pequeña variable. Diga, deje que pueda inicializar el número a los 20 creo que me gusta encendido y, ya sabes, caso fuera adición. Bueno, acabamos de ser nuevos a pesar del número y lo pondremos. Teoh. Sí, vamos, eso lo convierten en un comunicado. Muy bien. Y entonces ahora aquí abajo, estoy seguro que se puede ver lo que va a pasar. Usted sólo muy número. Yo puedo decir. Vamos a darle a eso una prueba rápida y un cálculo relacionado. Me aseguro de que la adición siga funcionando. Explosión cinco 10. Excelente. Um, entonces ahora lo que necesitamos son tres declaraciones de caso más que implementen nuestras otras operaciones. Sobel dio resta en división y múltiple. Uh, OK, entonces ¿dónde estamos? Bueno y se ha vuelto bastante sencillo. Ya sabes, si tuviéramos, como, 1000 de estas operaciones que hacer, lo hacemos un poco diferente. Estaría pasando la función alrededor en lugar de tener una declaración de caso. Uh, pero creo que esto servirá para nuestra pequeña calculadora. Y sólo voy a asegurarme de que tenemos todas sus operaciones en el lugar correcto. Sí, creo que sí. ¿ Cómo nunca? Bueno, mejor que lo hagamos. En el caso de división, él es yo miro te digo lo que eso ha salido no es un número, y lo dejaremos ir. Acabo de enterarme del caso divide por cero, y creo que vamos a golpear esa vida por el momento. Hospital, culminando a un mejor destino. ¿ Verdad? Pero eso no va a funcionar aún claramente porque nuestros diversos botones y no usar nuestra nueva función. Entonces vamos a hacer que la música sea nueva función. Uh, disculpa, ¿ puedo dudar? Lo mismo por dentro. ¿ Verdad? Recarga calculadora y le daremos una prueba. Por lo que yo diría seis multiplicados por tres iguales a Alcanzar. Restar. Seis egos 12. Dividido por dos. Seis. Por último, asegúrate de que la adición siga funcionando. Siete hoy. Está bien, genial. Por lo que eso fue una carrera rápida por fuera implementando el resto de las operaciones son nuestra calculadora. Espero verlos en la próxima conferencia. 10. El ciclo de vida de componentes de React.: ok, Todo el mundo dijo Ahora es el momento de echar un vistazo al componente del reactor del ciclo de vida, y lo primero que vamos a hacer hoy es averiguar qué había usado el ciclo de vida del componente del reactor , y luego veremos cómo podemos usarlo. Entonces, ¿qué es? Bueno, es las funciones off de un Siri en un componente de escritura que un frío en diferentes etapas fuera de su ciclo de vida. A lo mejor eso es un poco autoexplicativo, pero de todos modos, esto es lo que son. Tenemos el constructor los cuales han visto si tienen componente Wilm fuera, tenemos componente. Hizo montar. Contamos con componente. Recibirá apoyos en caso de actualización de componentes render componente hizo actualización y componente Will Matt. Ahora eso son muchas cosas. Ah, es fácil pensar en ellos. Ah, en términos de montaje y sobre montaje. Estas cuatro funciones actualmente resaltadas para hacer con el montaje en y um, fundiendo así construir un componente montará componente sí montó y componente se montará podrido con ser cargado en el navegador por primera vez, o ser eliminado del navegador y luego estos en el medio aquí tenían que ver con renderizar tan físico cada vez que el componente re renderiza. La mayoría de ellos no son llamados en el Orender inicial además de la función de render real. Uh, pero eso aún tiene mucho que ver. Entonces estos son los que más he visto utilizar en la práctica. Ahora ya hemos visto la función constructora siendo utilizada. Hemos visto renderizar siendo usado, y eso deja a estos otros tres chicos componente sí montó. En caso de actualización de componentes y componente se montará, por lo que componente sí montó. Este es un buen lugar, um, para configurar cosas como, ah, ah, solicitudes asíncronas de red. Um, detenga cualquier temporizadores que el componente necesite cosas así. Esto son sólo cosas que necesitan estar en su lugar o para comenzar antes de que realmente entre en la página. caso de actualización de componentes se estará buscando en debería actualización de componentes, ya sabes, código. Pero brevemente, es una manera de alejarse de comprobar si el reactor realmente debería ir a la molestia apagada, haciendo que nuestro componente esté en el dom. Porque a pesar de que reaccionar es famosamente eficiente en el renderizado, si pudiéramos evitarlo, eso es bastante bueno en Finalmente, componente se montará. Este es un lugar para ordenar cualquier conexión de red incompletada, cancelar temporizadores, cosas así. Pero vamos a ir a implementar Debe actualización de componentes OK, así que aquí estamos en nuestro código, sentados justo encima de la función de render para el componente de calculadora. Ahí está. Calculadora. Me parece que debería hacer esto un poco más grande para ti. Ahí lo conseguimos. De acuerdo, así que está fuera, revisa sobre un componente y es una función diversa, y él es Renda, y vamos a poner la actualización de componentes debería aquí mismo. Y se necesitan dos parámetros siguiente, tal vez, y siguiente estado. Por lo que en su momento, se está llamando a esa actualización de componentes. Todavía tenemos nuestros viejos apoyos en nuestro antiguo estado a nuestra disposición para que podamos referirnos a las caídas de stock . Esto no estatal. Y esta es una gran oportunidad para comprobar si algo importante ha cambiado. Y si no ha cambiado, entonces no se nombra pie. Renderizar cualquier cosa en tonta. Te indicamos que Orender debe ocurrir o no debiera devolverse verdadero o falso. Entonces ahora que tenemos esta función aquí, igual que las caídas de retorno nunca renderizan. Eso es lo que estamos diciendo aquí mismo. Y aquí estamos en una casa sin dar un poco seguir recargar y puedo dar click. Estoy haciendo clic de distancia en estas cosas y nada está cambiando, ya sabes, calculadora, porque debería actualización de componentes está devolviendo falso. Y si vamos devuelve verdadero, recargar. Y ahí estamos, trabajando como siempre. OK, pero eso no es lo que queremos hacer. lo que realmente nos importa es nuestro número de pantalla, porque eso es lo que realmente va a indicar si necesitamos volver a renderizar o no. No hay nada más que cambie en la página. Entonces podríamos decir, si estos pensamientos que muestran el número es igual al siguiente número de pantalla de puntos ST, entonces sube ese truco de Jane Fells más. De acuerdo, entonces decimos que eso está todo muy bien, pero no podemos decir la diferencia entre, uh el navegador actualizando y no actualizando si exactamente el mismo valor va a estar en nuestra pantalla de calculadora. Entonces será mejor que vayamos a poner la molesta alerta aquí y digamos que no actualizamos. surcos son así. Te digo Bien. Volvamos. Cada aquí, haz una recarga. De acuerdo, entonces si dices uno Bueno, uh, igual a decir, um cuatro más cero. Y entonces tenemos esa pequeña alerta diciendo que no estamos actualizando el navegador. Había un cero ahí antes. Esto es cero. Ahí. Ahora, no vamos a hacer ningún trabajo excepto mostrar este molesto un poco no puedo conformarme quitado de él. Y así que esa es una implementación muy simple o actualización de componentes alimentarios para ver si ah, podríamos ir a la molestia de actualizar el navegador o no. Y, uh, hay un par de puntos importantes sobre debería de actualización de componentes uno es que el uso de actualización de componentes debería estar cambiando en el futuro. Facebook han dicho que se tratará como una sugerencia en el futuro. Acabo de hacer una cancha con mis dedos sugerencia tan reactiva mi que decida que sabe mejor que tú sobre si algo debe actualizarse o no. Uh, sobre todo cómo eso sale en el futuro. Yo no lo hice. Otra cosa importante a recordar es que esto podría ser una fuente de bugs porque no como si no hubiera nada más que pudiera ser una fuente de bugs en nuestro código. Pero éste en particular puede ser porque sólo va a estar revisando apoyos en estado. Y si basas tu render en algo distinto de los apoyos en estado que esta función te va a servir de nada porque si estás obteniendo datos en tu render desde fuera fuera del reaccionar un P I, um, obteniendo el resultados de pequeñas solicitudes de red o algún dieter global o algo así , entonces realmente no se puede usar debe señalar que para decir si se necesita o no renderizar. Por lo que o vas a basar todo en apoyos en ST en render o no vas a usar esta función. 11. React de codificación #1: Creo, todo el mundo. Sí, es hora de algunos ejercicios. Tiempo de aire en particular para ejercicios de codificación. No necesitas un traje t Rex para eso. Por lo que realmente son dos cosas pendientes las que tenemos que hacer. Uno de ellos es Teoh. Arreglar este negocio donde hacemos multiplicación, digamos, y hacemos click. El display del botón de multiplicación vuelve a cero. Una calculadora regular no haría eso. Simplemente dejaría a los ocho ahí arriba, y luego lo superamos número. Todavía obtenemos el resultado de esa cumbre sí. Puede esperarse, pero es un poco asqueroso que tengamos cero ahí antes de que hagamos otra cosa. Entonces, como ejercicio para ustedes, invito a implementar una solución para ese pequeño problema en particular. Entonces pausa la conferencia. Tener ah, pensar y tener una gala. Eso y, uh, te mostraré lo que se me ocurrió una vez que reinicies más tarde. De acuerdo, así que aquí estamos y Ah ja. ¿ Qué? Ha visto un poco ¿Quién? El sitio en su código. Um, mi código. Apenas podría pedirte que te responsabilizaras de lo que aquí mismo. Pero ahora, ajuste del estado inicial es algo que ignora el hecho de que tenemos algún otro estado que cuidar además del número de visualización. Y así creo que vamos a hacer se acabó y está indefinido. Y yo quería ofrecer uno en operación no puedo volver a hacer porque este tipo de plomo en lo que necesitamos hacer ahora mismo. En fin, Entonces, ¿quién es nuestro número de actualización? Aquí está. Entonces es tener Ah, miro no puedo mostrar número y ver si es cero y si lo está reemplazando por el nuevo valor, De lo contrario se inicia un valor pendiente para no poder mostrar número, que es, ya sabes fue una especie de OK resolver un poco el problema para nosotros, pero podríamos hacerlo mejor, creo que es apropiado usar el valor de ladrón apagado a pesar del número dos. Decidir si necesita ser reemplazado o anexado a, porque esto es realmente una cuestión de camino. Estamos a la altura de sus cálculos. Entonces estoy pensando que tendremos una pequeña bandera y la llamo número como Ok, eso podría ser igual a falso. Pero en realidad eso sería cierto cuando en realidad cuando se creó la calculadora, cuando el constructor aquí en nos salimos y tienes una bandera dijo que es verdad. Y así cuando vayamos a actualizar el número en lugar de probar para ver si el número de España es cero, diré este ST te punto de la bandera. Y si ah, ah empezamos y tu número entonces, sí, haremos el reemplazo. Si no, sí dependeremos. Y, por supuesto, sabiendas quiere introducir una bandera. Nos vamos todos estatales a cuidar a todos lados. No importa. De acuerdo, entonces, ¿qué dices? El flick ahora es falso. Otro lugar que necesitamos a Teoh hacer algo con nuevo número. Bandera está en prep Kout porque aquí es donde restablecemos nuestro número en pantalla. Y así te estamos diciendo ahora que Flug ahora es falso. Pero, ya sabes, no vamos a restablecer por número. Ahora vamos a dejar que siga mostrando lo que estuviera mostrando anteriormente. Sí, Y así en este número de caso, Flug ahora será yo debería ser verdad. No para nosotros. Uh, y así aquí arriba bajaremos por aquí. Fue tener otra flick es cierto. Y te reemplazaremos. Sólo número llano. Aunque esté exhibiendo, dime que no es Hazlo. Entonces digamos eso y veamos cómo tenemos que recargar calculadora. Y si es un dos multiplicado por dos, es igual a por excelente y luego fue un plus. Tres dijeron que eso se arregló nuestro pequeño problema con el cero reapareciendo luego de presionar un botón de operaciones. 12. React de codificación n.2: De acuerdo, así que ahora es el momento del ejercicio número dos. Y en este caso, tenemos este botón C aquí abajo, que sigue como que no hace nada útil y tiene el poder de romper calculadora decir, si lo fuera decir, Porque eso es bastante gracioso, en realidad. Pero en realidad, queríamos solo restablecer nuestra calculadora como un nuevo ejercicio de corte. Por favor, adelante e implementa el botón mar fuera de curso. Sí, voy a estar haciendo eso ahora mismo, Así que por favor pausa el más tarde y, uh implementa que digas. Pero puedes comparar lo que hiciste con lo que estoy a punto de dio. De acuerdo, pues mira, hora del botón. Aquí está en nuestra calculadora. Apenas ver botón de informe presiona todavía igual al número de actualización. Lo que creo que vamos a hacer en su lugar es que lo haremos. Um sí. Mira, creo que tendremos, como, como, una función de estado por defecto, porque eso es realmente lo que estamos haciendo. Estamos ajustando todo de nuevo a cómo esperaríamos que fuera cuando la calculadora sea por primera vez inst enshi ated. Creo que voy a, como, totalmente agravio sobre dónde debería poner esta función, uh, diversión. Y lo pongo justo aquí, y lo haremos toda la noche. ¿ En serio? Porque Este es el Esto no tiene nada que ver con Ah, la instancia actual de calculadora. Eso debe ser función extática. Get bien decir estados por defecto que solían ser una función de estado por defecto. Ahora ya se ha ido. Y entonces lo que haremos es devolverle algo que se parece exactamente a esto. Tienes ese lote, ¿verdad? Eso lo que podemos hacer aquí ahora esto es Puedes ver lo práctico para nosotros es que podemos entrar aquí y decir Jack, tu calculadora ayuda. ¿ Le pusiste eso? Ah, gente dice. Está bien. Y, uh, y luego, por supuesto. Bueno, el hombre se extendió fuera de control. Por fin esperó, Podría debilitar vino aquí abajo después de vaca de preparación y hacer hablar, podemos decir como, um hacer KLIA y podemos decir estas cosas. Ese es ese estado. Uh, es eso para el estado. Entonces porque sabemos que ahí no faltan. Estado es un objeto javascript. Podríamos simplemente pasarlo a través para establecer estado de esa manera, y luego finalmente, sin botón c, debilitar Say, ¿lo veo? Ah, pero claro, no olvidemos. ¿ Se despeja? Necesita ser incluido, y construyó Tener esto ligado a ella. Daremos eso confiado. Entonces diremos cinco multiplicados por seis tocino. Estable y claro, ¿ no? Entonces echemos un vistazo a lo claro que está haciendo el tour de vaca que. Está bien, Um, yo señorío calle que tarde o bien. Por lo que este chico de desagradable consejo 555 y despejado y volvió a 06 pies de ancho por nueve. Ah, ¿hice click? Multiplica Sisi ni multiplicado por nueve Porque ese joven para nosotros, ¿no? De todos modos, así que ahí lo tenemos. Hemos implementado qué tan claro botón. Eso es todo por los ejercicios de codificación para hoy. Y espero verlos en la siguiente imagen. 13. ¡Ya te extraño!: Bueno, eso es todo para la clase. Todo el mundo. Realmente espero que lo hayan disfrutado y aprendan alguna información útil. Disfruté mucho enseñarlo y no puedo esperar a ver tu proyecto de clase. Entonces por favor sí recuerda eso. Publalas en la galería de proyectos. Si te encuentras con algún problema durante la clase, avísame en el área de discusiones y te subiré y te ayudaré lo más rápido que pueda. Hasta entonces, espero verlos la próxima vez.