diff --git a/beta/src/content/learn/your-first-component.md b/beta/src/content/learn/your-first-component.md index 0be561a30..770fb748d 100644 --- a/beta/src/content/learn/your-first-component.md +++ b/beta/src/content/learn/your-first-component.md @@ -31,7 +31,7 @@ En la Web, HTML nos permite crear documentos estructurados con su conjunto integ ``` -Este marcado representa este artículo `
`, su encabezado `

`, y una tabla de contenidos (abreviada) representada como una lista ordenada `
    `. Un marcado como este, combinado con CSS para los estilos y JavaScript para la interactividad, están detrás de cada barra lateral, avatar, modal, menú desplegable y cualquier otra pieza de UI que ves en la web. +Este marcado representa un artículo `
    `, su encabezado `

    `, y una tabla de contenidos (abreviada) representada como una lista ordenada `
      `. Un marcado como este, combinado con CSS para los estilos y JavaScript para la interactividad, están detrás de cada barra lateral, avatar, modal, menú desplegable y cualquier otra pieza de UI que ves en la web. React te permite combinar tu marcado, CSS y JavaScript en «componentes» personalizados, **elementos reutilizables de UI para tu aplicación.** El código de la tabla de contenidos que viste arriba pudo haberse transformado en un componente `` que podrías renderizar en cada página. Por detrás, seguiría utilizando las mismas etiquetas HTML como `
      `, `

      `, etc. @@ -55,7 +55,7 @@ En la medida en que tu proyecto crece, notarás que muchos de tus diseños se pu ## Definir un componente {/*defining-a-component*/} -Tradicionalmente cuando se crean páginas web, los desarrolladores web usaban lenguaje de marcado para describir el contenido y luego añadían interacciones agregando un poco de JavaScript. Esto funcionaba perfectamente cuando las interacciones eran algo *deseable, pero no imprescindible* en la web. Ahora es algo que se espera de muchos sitios y de todas las aplicaciones. React pone la interactividad primero usando aún la misma tecnología: **un componente de React es una función de JavaScript a la que puedes _agregar markup_**. Aquí vemos cómo luce esto (puede editar el ejemplo de abajo): +Tradicionalmente, cuando se creaban páginas web, los desarrolladores web usaban lenguaje de marcado para describir el contenido y luego añadían interacciones agregando un poco de JavaScript. Esto funcionaba perfectamente cuando las interacciones eran algo *deseable, pero no imprescindible* en la web. Ahora es algo que se espera de muchos sitios y de todas las aplicaciones. React pone la interactividad primero usando aún la misma tecnología: **un componente de React es una función de JavaScript a la que puedes _agregar markup_**. Aquí vemos cómo luce esto (puede editar el ejemplo de abajo): @@ -172,7 +172,7 @@ Y `Profile` contiene aún más HTML: ``. Al final lo que el navegador ve ### Anidar y organizar componentes {/*nesting-and-organizing-components*/} -Los componentes son funciones regulares de JavaScript, por lo que puedes tener 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 torna abarrotado, siempre puedes mover `Profile` a una archivo separado. Aprenderás como hacer esto pronto en la [página sobre *imports*](/learn/importing-and-exporting-components). +Los componentes son funciones regulares de JavaScript, por lo que puedes tener 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 torna abarrotado, siempre puedes mover `Profile` a un archivo separado. Aprenderás como hacer esto pronto en la [página sobre *imports*](/learn/importing-and-exporting-components). Dado que los componentes `Profile` se renderizan dentro de `Gallery` —¡incluso varias veces!— podemos decir que `Gallery` es un **componente padre**, que renderiza cada `Profile` como un «hijo». Este es la parte mágica de React: puedes definir un componente una vez, y luego usarlo en muchos lugares y tantas veces como quieras. @@ -288,13 +288,13 @@ Puedes estar preguntándote por qué escribir solo `export` no es suficiente par -### Arregla la sentencia return {/*fix-the-return-statement*/} +#### Arregla la sentencia de retorno {/*fix-the-return-statement*/} Algo no está bien con esta sentencia `return`. ¿Puedes arreglarla? -Puede que tengas un error «Unexpected token» mientras intentas arreglar este ejemplo. En ese caso, chequea que el punto y coma aparece *después* del paréntesis de cierre. Si dejas un punto y coma dentro de `return ( )` ocurrirá un error. +Puede que tengas un error «Unexpected token» mientras intentas arreglar este ejemplo. Si te sucede, probablemente sea porque tienes algún punto y coma dentro de tu JSX, revisa que esté *después* del paréntesis de cierre. Si dejas un punto y coma dentro de un `return ( )` ocurrirá un error. @@ -316,7 +316,7 @@ img { height: 180px; } -Puedes arreglar este componente moviendo la sentencia return a una línea de esta forma: +Puedes arreglar este componente moviendo la sentencia return a una sola línea de esta forma: @@ -332,7 +332,7 @@ img { height: 180px; } -O poniendo el marcado JSX que se va retornar dentro de paréntesis que se abren justo luego de `return`: +O poniendo el marcado JSX que se va a retornar dentro de paréntesis que se abren justo luego del `return`: