React.js: componentes

Name: React.js: componentes
Author: Tony Davydets

Este módulo cubrirá las funciones ES6 + con JSX para renderizar componentes, accesorios de componentes y estado de componentes, que son conceptos básicos en…

Preview the first lesson free — get full access to all 1 lessons.

Solicitar una demo Iniciar sesión

Curso: bajo demanda

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.

Proveedor : Tony Davydets 1 lección · 18m en Árabe, Alemán, Inglés, Español, Francés, Portugués, Chinese

Descripción del curso

Este módulo cubrirá las funciones ES6 + con JSX para renderizar componentes, accesorios de componentes y estado de componentes, que son conceptos básicos en React, una popular biblioteca de JavaScript para crear aplicaciones web modernas.

Los componentes de React son los bloques de construcción de una aplicación React. Estos componentes se pueden escribir como funciones ES6+ con JSX, lo que permite a los desarrolladores escribir código más conciso y legible. JSX es una extensión de sintaxis para JavaScript que permite que los elementos similares a HTML se escriban en código. Con JSX, los desarrolladores pueden crear componentes personalizados que se pueden representar en el DOM. El estado es una característica que permite a los componentes de React almacenar datos que pueden cambiar con el tiempo. Esto permite actualizaciones dinámicas e interactivas de los datos de un componente. El estado se puede inicializar en un constructor o mediante un enlace de estado, una función introducida en React 16.8.

Comprender las funciones de ES6+ con JSX, accesorios de componentes y estado de componentes es esencial para crear aplicaciones web modernas con React. Estos conceptos permiten componentes reutilizables e interactivos que se pueden personalizar con diferentes datos.

Lo que aprenderás

Usar funciones ES6+ con JSX para renderizar componentes React
Escribir sintaxis JSX para crear componentes personalizados renderizados al DOM
Pasar datos a componentes utilizando propiedades de componentes
Gestionar el estado del componente para almacenar datos que cambian con el tiempo
Inicializar el estado en un constructor o con el gancho de estado introducido en React 16.8

Puntos clave

Los componentes React son los bloques de construcción de una aplicación React y pueden escribirse como funciones ES6+ con JSX.
JSX es una extensión de sintaxis para JavaScript que permite escribir elementos similares a HTML en código.
El estado permite que los componentes React almacenen datos que pueden cambiar con el tiempo, permitiendo actualizaciones dinámicas e interactivas.
El estado puede inicializarse en un constructor o usando un gancho de estado, una característica introducida en React 16.8.
Entender funciones ES6+ con JSX, propiedades de componentes y estado de componentes permite componentes reutilizables e interactivos que pueden personalizarse con diferentes datos.

Preguntas frecuentes

¿Qué cubre este módulo de React.js?

Este módulo cubre funciones ES6+ con JSX para renderizar componentes, propiedades de componentes y estado de componentes, que son conceptos principales en React, una biblioteca de JavaScript para construir aplicaciones web modernas.

¿Qué es JSX en React?

JSX es una extensión de sintaxis para JavaScript que permite escribir elementos similares a HTML en código. Con JSX, los desarrolladores pueden crear componentes personalizados que pueden renderizarse al DOM.

¿Cómo se puede establecer el estado en un componente React?

El estado puede inicializarse en un constructor o usando un gancho de estado, una característica introducida en React 16.8. El estado permite que los componentes almacenen datos que pueden cambiar con el tiempo.

¿Por qué son importantes las propiedades de componentes y el estado?

Entender funciones ES6+ con JSX, propiedades de componentes y estado de componentes es esencial para construir aplicaciones web modernas usando React, permitiendo componentes reutilizables e interactivos que pueden personalizarse con diferentes datos.

¿Qué lecciones se incluyen en este módulo?

El módulo incluye tres lecciones: Funciones ES6+ Con JSX para Renderizar Componentes, Propiedades de Componentes y Estado de Componentes.