Tu primer componente
Los componentesson uno de los conceptos fundamentales de React. Son la base sobre la que construyes interfaces de usuario (UI), lo que los convierte en el lugar perfecto para comenzar tu viaje con React.
Aprenderás
- Qué es un componente
- Qué papel juegan los componentes en una aplicación React
- Cómo escribir tu primer componente de React
Componentes: bloques de construcción de la UI
En la Web, HTML nos permite crear documentos estructurados y ricos con su conjunto integrado de etiquetas como<h1> y <li>:
Este marcado representa este artículo<article>, su encabezado<h1>y una tabla de contenidos (abreviada) como una lista ordenada<ol>. Marcado como este, combinado con CSS para el estilo y JavaScript para la interactividad, está detrás de cada barra lateral, avatar, modal, menú desplegable — cada pieza de UI que ves en la Web.
React te permite combinar tu marcado, CSS y JavaScript en "componentes" personalizados,elementos de UI reutilizables para tu aplicación.El código de la tabla de contenidos que viste arriba podría convertirse en un componente<TableOfContents />que podrías renderizar en cada página. Internamente, todavía usa las mismas etiquetas HTML como<article>,<h1>, etc.
Al igual que con las etiquetas HTML, puedes componer, ordenar y anidar componentes para diseñar páginas completas. Por ejemplo, la página de documentación que estás leyendo está hecha de componentes de React:
A medida que tu proyecto crece, notarás que muchos de tus diseños pueden componerse reutilizando componentes que ya escribiste, acelerando tu desarrollo. Nuestra tabla de contenidos de arriba podría añadirse a cualquier pantalla con<TableOfContents />. ¡Incluso puedes impulsar tu proyecto con los miles de componentes compartidos por la comunidad de código abierto de React comoChakra UI y Material UI!
Definir un componente
Tradicionalmente, al crear páginas web, los desarrolladores marcaban su contenido y luego añadían interacción espolvoreando algo de JavaScript. Esto funcionaba muy bien cuando la interacción era algo agradable en la web. Ahora se espera para muchos sitios y todas las aplicaciones. React pone la interactividad primero mientras sigue usando la misma tecnología:un componente de React es una función de JavaScript que puedesespolvorear con marcado.Así es como se ve (puedes editar el ejemplo a continuación):
Y así es cómo se construye un componente:
Paso 1: Exportar el componente
El prefijoexport defaultes unasintaxis estándar de JavaScript(no específica de React). Te permite marcar la función principal en un archivo para que luego puedas importarla desde otros archivos. (Más sobre importar enImportar y exportar componentes).
Paso 2: Definir la función
Confunction Profile() { }defines una función de JavaScript con el nombreProfile.
Precaución
Los componentes de React son funciones regulares de JavaScript, perosus nombres deben comenzar con una letra mayúsculao no funcionarán.
Paso 3: Añadir marcado
El componente devuelve una etiqueta<img />con atributossrc y alt. <img />está escrito como HTML, pero en realidad es JavaScript internamente. Esta sintaxis se llamaJSXy te permite incrustar marcado dentro de JavaScript.
Las declaraciones de retorno se pueden escribir en una sola línea, como en este componente:
Pero si tu marcado no está todo en la misma línea que la palabra clavereturn, debes envolverlo en un par de paréntesis:
Precaución
Sin paréntesis, cualquier código en las líneas después dereturnserá ignorado.
Usar un componente
Ahora que has definido tu componenteProfile, puedes anidarlo dentro de otros componentes. Por ejemplo, puedes exportar un componenteGalleryque usa múltiples componentesProfile:
Lo que ve el navegador
Observa la diferencia en el uso de mayúsculas:
<section>está en minúsculas, por lo que React sabe que nos referimos a una etiqueta HTML.<Profile />comienza con unaPmayúscula, por lo que React sabe que queremos usar nuestro componente llamadoProfile.
Y Profilecontiene aún más HTML:<img />. Al final, esto es lo que ve el navegador:
Anidar y organizar componentes
Los componentes son funciones regulares de JavaScript, por lo que puedes mantener múltiples componentes en el mismo archivo. Esto es conveniente cuando los componentes son relativamente pequeños o están estrechamente relacionados entre sí. Si este archivo se llena demasiado, siempre puedes moverProfilea un archivo separado. Aprenderás cómo hacer esto pronto en lapágina sobre importaciones.
Debido a que los componentesProfilese renderizan dentro deGallery—¡incluso varias veces!—podemos decir queGalleryes uncomponente padre,que renderiza cadaProfilecomo un "hijo". Esto es parte de la magia de React: puedes definir un componente una vez y luego usarlo en tantos lugares y tantas veces como quieras.
Precaución
Los componentes pueden renderizar otros componentes, peronunca debes anidar sus definiciones:
El fragmento de código anterior esmuy lento y causa errores.En su lugar, define cada componente en el nivel superior:
Cuando un componente hijo necesita algunos datos de un padre,pásalos mediante propsen lugar de anidar definiciones.
Recapitulación
¡Acabas de probar React por primera vez! Recapitulemos algunos puntos clave.
- React te permite crear componentes,elementos de interfaz de usuario reutilizables para tu aplicación.
- En una aplicación de React, cada pieza de la interfaz de usuario es un componente.
- Los componentes de React son funciones regulares de JavaScript excepto:
- Sus nombres siempre comienzan con una letra mayúscula.
- Devuelven marcado JSX.
Prueba algunos desafíos
Challenge 1 of 4:Exporta el componente #
Este entorno de pruebas no funciona porque el componente raíz no está exportado:
¡Intenta arreglarlo tú mismo antes de mirar la solución!