From 6f3e24c2d2e313b8c292093700bb63ab2f4ffcd0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Sun, 10 Apr 2022 23:27:55 -0400 Subject: [PATCH 1/4] wip --- beta/src/pages/learn/your-first-component.md | 31 ++++++++++---------- beta/src/sidebarLearn.json | 2 +- 2 files changed, 16 insertions(+), 17 deletions(-) diff --git a/beta/src/pages/learn/your-first-component.md b/beta/src/pages/learn/your-first-component.md index cae284d46..ebe8e4d29 100644 --- a/beta/src/pages/learn/your-first-component.md +++ b/beta/src/pages/learn/your-first-component.md @@ -1,24 +1,24 @@ --- -title: Your First Component +title: Tu primer componente --- -Components are one of the core concepts of React. They are the foundation upon which you build user interfaces (UI), which makes them the perfect place to start your React journey! +Los componentes son uno de los conceptos esenciales de React. Constituyen los cimientos sobre los que construyes interfaces de usuario (UIs por sus siglas en inglés). ¡Y eso los convierte en el lugar perfecto para comenzar tu recorrido por React! -* What a component is -* What role components play in a React application -* How to write your first React component +* Qué es un componente +* Qué papel desempeñan los componentes en una aplicación de React +* Cómo escribir tu primer componente de React -## Components: UI building blocks {/*components-ui-building-blocks*/} +## Componentes: Elementos básicos para construir UIs {/*components-ui-building-blocks*/} -On the Web, HTML lets us create rich structured documents with its built-in set of tags like `

` and `
  • `: +En la Web, HTML nos permite crear documentos estructurados con su conjunto integrado de etiquetas como `

    ` y `
  • `: ```html
    @@ -31,11 +31,11 @@ On the Web, HTML lets us create rich structured documents with its built-in set
    ``` -This markup represents this article `
    `, its heading `

    `, and an (abbreviated) table of contents as an ordered list `
      `. Markup like this, combined with CSS for style, and JavaScript for interactivity, lies behind every sidebar, avatar, modal, dropdown—every piece of UI you see on the Web. +Este marcado representa este artículo `
      `, su encabezado `

      `, y una tabla de contenidos (abreviada) representada como una lista ordenada `
        `. 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 lets you combine your markup, CSS, and JavaScript into custom "components," **reusable UI elements for your app.** The table of contents code you saw above could be turned into a `` component you could render on every page. Under the hood, it still uses the same HTML tags like `
        `, `

        `, etc. +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. -Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components: +De la misma forma 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: ```js @@ -51,11 +51,10 @@ Just like with HTML tags, you can compose, order and nest components to design w ``` -As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with ``! You can even jumpstart your project with the thousands of components shared by the React open source community like [Chakra UI](https://chakra-ui.com/) and [Material UI](https://material-ui.com/). +En la medida en que tu proyecto crece, notarás que muchos de tus diseños se pueden componer mediante la reutilización de componentes que ya escribiste, acelerando el desarrollo. ¡Nuestra tabla de contenido de arriba podría añadirse a cualquier pantalla con ``! Incluso puedes montar tu proyecto con los miles de componentes compartidos por la comunidad de código abierto de React como [Chakra UI](https://chakra-ui.com/) y [Material UI](https://material-ui.com/). +## Definir un componente {/*defining-a-component*/} -## Defining a component {/*defining-a-component*/} - -Traditionally when creating web pages, web developers marked up their content and then added interaction by sprinkling on some JavaScript. This worked great when interaction was a nice-to-have on the web. Now it is expected for many sites and all apps. React puts interactivity first while still using the same technology: **a React component is a JavaScript function that you can _sprinkle with markup_**. Here's what that looks like (you can edit the example below): +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): @@ -76,9 +75,9 @@ img { height: 200px; } -And here's how to build a component: +Y aquí veremos cómo construir un componente: -### Step 1: Export the component {/*step-1-export-the-component*/} +### Paso 1: Exporta el componente {/*step-1-export-the-component*/} The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!) diff --git a/beta/src/sidebarLearn.json b/beta/src/sidebarLearn.json index 73724d54a..1e5c555e3 100644 --- a/beta/src/sidebarLearn.json +++ b/beta/src/sidebarLearn.json @@ -43,7 +43,7 @@ "path": "/learn/describing-the-ui", "routes": [ { - "title": "Your First Component", + "title": "Tu primer componente", "path": "/learn/your-first-component" }, { From df020251eeba43f8c209ee70b7491a06cc37a220 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Mon, 11 Apr 2022 18:30:52 -0400 Subject: [PATCH 2/4] finish page --- .../components/MDX/Challenges/Challenges.tsx | 20 ++-- beta/src/components/MDX/ExpandableCallout.tsx | 4 +- beta/src/components/MDX/Recap.tsx | 2 +- beta/src/pages/learn/your-first-component.md | 92 +++++++++---------- 4 files changed, 59 insertions(+), 59 deletions(-) diff --git a/beta/src/components/MDX/Challenges/Challenges.tsx b/beta/src/components/MDX/Challenges/Challenges.tsx index c6513cbbf..c5e31d873 100644 --- a/beta/src/components/MDX/Challenges/Challenges.tsx +++ b/beta/src/components/MDX/Challenges/Challenges.tsx @@ -72,7 +72,7 @@ const parseChallengeContents = ( export function Challenges({ children, isRecipes, - titleText = isRecipes ? 'Try out some examples' : 'Try out some challenges', + titleText = isRecipes ? 'Prueba algunos ejemplos' : 'Prueba algunos desafíos', titleId = isRecipes ? 'examples' : 'challenges', }: ChallengesProps) { const challenges = parseChallengeContents(children); @@ -143,8 +143,8 @@ export function Challenges({

        - {isRecipes ? 'Example' : 'Challenge'} {currentChallenge.order}{' '} - of {challenges.length} + {isRecipes ? 'Ejemplo' : 'Desafío'} {currentChallenge.order} of{' '} + {challenges.length} :
        {currentChallenge.name} @@ -156,14 +156,14 @@ export function Challenges({
        ) : ( @@ -173,7 +173,7 @@ export function Challenges({ onClick={toggleSolution} active={showSolution}> {' '} - {showSolution ? 'Hide solution' : 'Show solution'} + {showSolution ? 'Ocultar solución' : 'Mostrar solución'} ) )} @@ -190,7 +190,7 @@ export function Challenges({ setShowSolution(false); }} active> - Next {isRecipes ? 'Example' : 'Challenge'} + Próximo {isRecipes ? 'ejemplo' : 'desafío'}

        - Solution + Solución

        {currentChallenge.solution}
        {nextChallenge && (

        ``` -Este marcado representa este artículo `
        `, su encabezado `

        `, y una tabla de contenidos (abreviada) representada como una lista ordenada `
          `. 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 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. 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. @@ -79,7 +79,7 @@ Y aquí veremos cómo construir un componente: ### Paso 1: Exporta el componente {/*step-1-export-the-component*/} -El prefijo `export default` es parte de la sintaxis [estándar de Javascript](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (no es específico de React). Te permite marcar la función principal en un archivo para que lue puedas importarlas en otros archivos. (¡Más sobre importar en [Importar y exportar componentes](/learn/importing-and-exporting-components)!). +El prefijo `export default` es parte de la sintaxis [estándar de Javascript](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (no es específico de React). Te permite marcar la función principal en un archivo para que luego puedas importarlas en otros archivos. (¡Más sobre importar en [Importar y exportar componentes](/learn/importing-and-exporting-components)!). ### Paso 2: Define la función {/*step-2-define-the-function*/} @@ -171,13 +171,13 @@ 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 una 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. -Tu aplicación de React comienza un componente «raíz». Usualmente, se crea automáticamente cuando inicias un nuevo proyecto. Por ejemplo, si utilizas [CodeSandbox](https://codesandbox.io/) o [Create React App](https://create-react-app.dev/), el componente raíz se define en `src/App.js`. Si utilizas el framework [Next.js](https://nextjs.org/), el componente raíz se define en `pages/index.js`. En estos ejemplos, has estado exportando componentes raíces. +Tu aplicación de React comienza en un componente «raíz». Usualmente, se crea automáticamente cuando inicias un nuevo proyecto. Por ejemplo, si utilizas [CodeSandbox](https://codesandbox.io/) o [Create React App](https://create-react-app.dev/), el componente raíz se define en `src/App.js`. Si utilizas el framework [Next.js](https://nextjs.org/), el componente raíz se define en `pages/index.js`. En estos ejemplos, has estado exportando componentes raíces. La mayoría de las aplicaciones de React utilizan componentes de arriba a abajo. Esto significa que no solo usarás componentes para las piezas reutilizables como los botones, pero también para piezas más grandes como barras laterales, listas, ¡y en última instancia, páginas completas! Los componentes son una forma útil de organizar código de UI y marcado, incluso cuando algunos de ellos solo se utilicen una vez. @@ -325,7 +325,7 @@ img { height: 180px; } ### Detecta el error {/*spot-the-mistake*/} -Hay algo mal con cómo se declara y usar el componente `Profile`. ¿Puedes detectar el error? (¡Trata de recordar cómo distingue React los componentes de las etiquetas regulares de HTML!). +Hay algo mal con cómo se declara y usa el componente `Profile`. ¿Puedes detectar el error? (¡Trata de recordar cómo distingue React los componentes de las etiquetas regulares de HTML!). From 085f471c960acb8144956d75f305e6bad85c8f6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rainer=20Mart=C3=ADnez=20Fraga?= Date: Mon, 11 Apr 2022 19:26:53 -0400 Subject: [PATCH 4/4] fix line number --- beta/src/pages/learn/your-first-component.md | 1 + 1 file changed, 1 insertion(+) diff --git a/beta/src/pages/learn/your-first-component.md b/beta/src/pages/learn/your-first-component.md index 222f4fbc8..535adaf28 100644 --- a/beta/src/pages/learn/your-first-component.md +++ b/beta/src/pages/learn/your-first-component.md @@ -52,6 +52,7 @@ De la misma forma que con las etiquetas HTML, puedes componer, ordenar y anidar ``` En la medida en que tu proyecto crece, notarás que muchos de tus diseños se pueden componer mediante la reutilización de componentes que ya escribiste, acelerando el desarrollo. ¡Nuestra tabla de contenido de arriba podría añadirse a cualquier pantalla con ``! Incluso puedes montar tu proyecto con los miles de componentes compartidos por la comunidad de código abierto de React como [Chakra UI](https://chakra-ui.com/) y [Material UI](https://material-ui.com/). + ## 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):