React.js: componentes

Hola, mi nombre es Tony y en estas lecciones aprenderás sobre componentes. En esta lección, veremos las funciones de ES6 plus con JSX para renderizar componentes. Quería llamar la atención sobre esto porque es muy importante. En un escenario del mundo real, no pondrías cada uno de ellos componente en una carpeta, porque como puedes imaginar, puede volverse rebelde rápidamente. Lo que buscamos para aplicaciones profesionales en una situación del mundo real es algo que se parece a esto. Como puedes ver, ya no es una estructura plana. Todos nuestros componentes están dentro de su propia carpeta, llamados componentes, y cada componente tiene su propio carpeta. La estructura de la carpeta es tal que la definición del El componente está en el archivo JS o JSX. y la solución de peinado, si es necesaria, está dentro de un Archivo CSS. Ahora bien, en un entorno profesional, también habría Sea el archivo .test aquí o el archivo .spec, que contendría la unidad pruebas. No nos vamos a preocupar por eso por ahora, pero solo para que sepas, si alguna vez ves esto en la vida real mundo, Es muy probable que así sean las cosas. Ahora, para nuestros propósitos, lo que vamos a hacer es ir para crear una aplicación que mantendrá una lista de todas las cosas que tenemos para nosotros para hacer ese día, y tendremos la posibilidad de ir quitándolos de nuestra lista uno por uno uno mientras esperamos completarlos. Este componente en particular va a ser solo una lista de todas las tareas que tenemos. Ahora, primero, importaremos React desde React. Es muy importante. React es súper global. Lo necesitamos para el desarrollo de todas nuestras aplicaciones. Y aquí vamos a tener nuestro componente. El componente que estamos construyendo se llama lista de tareas, y va a tomar los siguientes tres argumentos. Las tareas, cerremos esto para que no se queje. Entonces las tareas son el conjunto de registros, que vamos a recorrer. y generar tareas una por una. HandleCheck es una función que se activará cuando casilla de verificación que corresponde a cada una de nuestras tareas. Y HandleDelete es otra función que se activará. cuando realmente intentamos eliminar una tarea de nuestra lista. Ahora, ¿cómo renderizamos condicionalmente dentro de React? Vamos a renderizar condicionalmente dentro de React. no usar una declaración if -else tradicional porque el JSX la nomenclatura no lo permite. Usaremos una declaración terciaria. Tú Es posible que haya visto una declaración terciaria antes, y esta es su formato. Hagamos esto arriba para no estropear nuestra función, tal como un ejemplo. Entonces, la condición que estamos probando es siempre la primera. argumento en la estructura. Si esta condición resulta ser verdadera, entonces si la porción if de nuestra afirmación es verdadera, esta es la parte del código que se obtiene correr. Y si es falso, esta es la parte del código que se ejecuta. Vamos a tome lo mismo y extiéndalo a nuestro ecosistema React para haz que se vea así. Entonces nuestro el conjunto de registros será una lista desordenada, y si su longitud es menor que uno, hagámoslo más humanamente legible y decir que su longitud es cero. Triple igualdad es súper importante. Si haces un doble cero igual, eso significa esto también es igual a eso. Básicamente simplemente compara el valor, pero no comparar el tipo. Pero no estamos detrás carácter cero. Estamos detrás del número cero. Por eso siempre hacemos un triple igual para comparar. Lo hace tipo seguro. Entonces lo que vamos a hacer aquí es que si no se muestra nada, vamos a presentar al usuario un texto que Básicamente les dice, oye, no se muestra nada. Actualmente no hay nada en tu agenda. ¿Quieres añadir un evento? Y si se muestra algo, y aquí es donde las cosas se ponen interesantes, aquí es donde vamos a recorrer un conjunto de registros que Estamos pasando como primer argumento a esta función. Echemos un vistazo a cómo se ve eso. Eliminar icono. Importemos mis íconos para que no se queje. Haremos esto en la parte superior y eliminaremos nuestro ejemplo. Entonces, la parte else de nuestra cláusula terciaria ahora Tiene una función de mapa. Esta es la función que estamos pasando a nuestra función de mapa, y lo que hará es producir HTML para nosotros, lo que básicamente ser un LI o un elemento de lista para la lista desordenada que declaramos al principio de esto. Retrocedamos un paso. Aquí vamos. Y como puedes ver, básicamente estamos generando esto como un elemento a la vez. Podremos ver cómo se ve una vez que De hecho, hazlo funcionar en la siguiente parte de nuestra lección. Como puede ver, estamos generando la tarea. Hay una casilla de verificación que le corresponde. Aquí está el texto eso realmente dice cuál es la tarea. Y aquí está el botón que nos deja borrarlo. Una vez más, sólo estamos tratando de conceptualizar la tarea y cómo se verá. Lo veremos en la siguiente parte de nuestro curso. Ahora, por último, no podemos olvidarnos de cada componente. hacer esto. Estamos exportando el componente que acabamos de crear, y lo estamos exportando por defecto. Ahora bien, ¿qué significa que exportamos esto de forma predeterminada? Eso significa que cuando lo vamos a estar consumiendo por dentro de nuestro componente de aplicación que contendrá el definición para la totalidad de nuestra aplicación, lo vamos a importar así sin el rizado tirantes. Ahora, debido a que lo estamos importando por defecto, realmente podemos llamarlo lo que queramos, y seguirá funcionando. Si lo exportáramos como una exportación con nombre como esta, Podríamos importarlo entre llaves y solo específicamente por su nombre. Te preguntarás, ¿por qué no se hace esto? Parece más seguro. Bueno, porque en React, a menudo envolvemos el objeto que creado con algunas otras funciones. Hablaremos de eso más adelante, pero en realidad podríamos decir con algo y darle funcionalidad adicional, funcionalidad lógica. Pero esa es básicamente la razón por la que se nombra las exportaciones e importaciones no se realizan dentro de React, Next .js, o cualquier cosa que dependa de React como base. En nuestra próxima lección, veremos qué componente son los accesorios, cuál es su propósito, y cómo se utilizan. Gracias por ver.