Skip to content

Commit 03781f8

Browse files
authored
translate Describing the UI (beta docs) (#514)
* translate Describing the UI (beta docs) * use translated titles in sidebar * use UI instead of IU for User Interface * translate Learn More card * translate navigation * make some tweaks
1 parent ebdd031 commit 03781f8

10 files changed

+73
-74
lines changed

beta/src/components/Layout/Nav/MobileNav.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,12 @@ export function MobileNav() {
4444
<TabButton
4545
isActive={section === 'home'}
4646
onClick={() => setSection('home')}>
47-
Home
47+
Inicio
4848
</TabButton>
4949
<TabButton
5050
isActive={section === 'learn'}
5151
onClick={() => setSection('learn')}>
52-
Learn
52+
Aprende
5353
</TabButton>
5454
<TabButton
5555
isActive={section === 'apis'}

beta/src/components/Layout/Nav/Nav.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -177,10 +177,10 @@ export default function Nav() {
177177
</div>
178178
<div className="px-0 pt-2 w-full 2xl:max-w-xs hidden lg:flex items-center self-center border-b-0 lg:border-b border-border dark:border-border-dark">
179179
<NavLink href="/" isActive={section === 'home'}>
180-
Home
180+
Inicio
181181
</NavLink>
182182
<NavLink href="/learn" isActive={section === 'learn'}>
183-
Learn
183+
Aprende
184184
</NavLink>
185185
<NavLink href="/apis" isActive={section === 'apis'}>
186186
API

beta/src/components/MDX/MDXComponents.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -111,16 +111,16 @@ function LearnMore({
111111
<section className="p-8 mt-16 mb-16 flex flex-row shadow-inner justify-between items-center bg-card dark:bg-card-dark rounded-lg">
112112
<div className="flex-col">
113113
<h2 className="text-primary dark:text-primary-dark font-bold text-2xl leading-tight">
114-
Ready to learn this topic?
114+
¿Listo para aprender este tema?
115115
</h2>
116116
{children}
117117
{path ? (
118118
<ButtonLink
119119
className="mt-1"
120-
label="Read More"
120+
label="Lee más"
121121
href={path}
122122
type="primary">
123-
Read More
123+
Lee más
124124
<IconNavArrow displayDirection="right" className="inline ml-1" />
125125
</ButtonLink>
126126
) : null}

beta/src/pages/learn/add-react-to-a-website.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ Sin embargo, React también ofrece una opción para usar [JSX](/learn/writing-ma
134134
return <button onClick={() => setLiked(true)}>Like</button>;
135135
```
136136

137-
Estos dos fragmentos de código son equivalentes. JSX es una sintaxis popular para describir marcado en JavaScript. Muchas personas lo encuentran familiar y útil para escribir código de IU--tanto con React como con otras bibliotecas. ¡Puede que veas «marcado esparcido por tu JavaScript» en otros proyectos!
137+
Estos dos fragmentos de código son equivalentes. JSX es una sintaxis popular para describir marcado en JavaScript. Muchas personas lo encuentran familiar y útil para escribir código de UI--tanto con React como con otras bibliotecas. ¡Puede que veas «marcado esparcido por tu JavaScript» en otros proyectos!
138138

139139
> Puedes interactuar con la transformación de marcado HTML en JSX usando este [convertir en línea](https://babeljs.io/en/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=DwIwrgLhD2B2AEcDCAbAlgYwNYF4DeAFAJTw4B88EAFmgM4B0tAphAMoQCGETBe86WJgBMAXJQBOYJvAC-RGWQBQ8FfAAyaQYuAB6cFDhkgA&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.3).
140140

beta/src/pages/learn/describing-the-ui.md

+45-46
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
---
2-
title: Describing the UI
2+
title: Describir la UI
33
---
44

55
<Intro>
66

7-
React is a JavaScript library for rendering user interfaces (UI). UI is built from small units like buttons, text, and images. React lets you combine them into reusable, nestable *components.* From web sites to phone apps, everything on the screen can be broken down into components. In this chapter, you'll learn to create, customize, and conditionally display React components.
7+
React es una biblioteca de JavaScript para renderizar interfaces de usuario (UI por sus siglas en inglés). La UI se construye a partir de pequeñas unidades como botones, texto e imágenes. React te permite combinarlas en *componentes* reutilizables y anidables. Desde sitios web hasta aplicaciones de teléfonos, todo en la pantalla se puede descomponer en componentes. En este capítulo aprenderás a crear, adaptar y mostrar de forma condicional componentes de React.
88

99
</Intro>
1010

1111
<YouWillLearn isChapter={true}>
1212

13-
* [How to write your first React component](/learn/your-first-component)
14-
* [When and how to create multi-component files](/learn/importing-and-exporting-components)
15-
* [How to add markup to JavaScript with JSX](/learn/writing-markup-with-jsx)
16-
* [How to use curly braces with JSX to access JavaScript functionality from your components](/learn/javascript-in-jsx-with-curly-braces)
17-
* [How to configure components with props](/learn/passing-props-to-a-component)
18-
* [How to conditionally render components](/learn/conditional-rendering)
19-
* [How to render multiple components at a time](/learn/rendering-lists)
20-
* [How to avoid confusing bugs by keeping components pure](/learn/keeping-components-pure)
13+
* [Cómo escribir tu primer componente de React](/learn/your-first-component)
14+
* [Cuándo y cómo crear archivos con múltiples componentes](/learn/importing-and-exporting-components)
15+
* [Cómo añadir marcado a JavaScript con JSX](/learn/writing-markup-with-jsx)
16+
* [Cómo añadir llaves con JSX para acceder a funcionalidades de JavaScript desde tus componentes](/learn/javascript-in-jsx-with-curly-braces)
17+
* [Cómo configurar componentes con props](/learn/passing-props-to-a-component)
18+
* [Cómo renderizar componentes condicionalmente](/learn/conditional-rendering)
19+
* [Cómo renderizar múltiples componentes a la vez](/learn/rendering-lists)
20+
* [Cómo evitar errores confusos manteniendo los componentes puros](/learn/keeping-components-pure)
2121

2222
</YouWillLearn>
2323

24-
## Your first component {/*your-first-component*/}
24+
## Tu primer componente {/*your-first-component*/}
2525

26-
React applications are built from isolated pieces of UI called "components". A React component is a JavaScript function that you can sprinkle with markup. Components can be as small as a button, or as large as an entire page. Here is a `Gallery` component rendering three `Profile` components:
26+
Las aplicaciones de React se construyen a partir de piezas independientes de UI llamadas «componentes». Un componente de React es una función de JavaScript a la que le puedes agregar un poco de marcado (*markup*). Los componentes pueden ser tan pequeños como un botón, o tan grandes como una página entera. Aquí vemos un componente `Gallery` que renderiza tres components `Profile`:
2727

2828
<Sandpack>
2929

@@ -57,14 +57,13 @@ img { margin: 0 10px 10px 0; height: 90px; }
5757

5858
<LearnMore path="/learn/your-first-component">
5959

60-
Read **[Your First Component](/learn/your-first-component)** to learn how to declare and use React components.
60+
Lee **[Tu primer componente](/learn/your-first-component)** para que aprendas cómo declarar y utilizar componentes de React.
6161

6262
</LearnMore>
6363

64-
## Importing and exporting components {/*importing-and-exporting-components*/}
65-
66-
You can declare many components in one file, but large files can get difficult to navigate. To solve this, you can *export* a component into its own file, and then *import* that component from another file:
64+
## Importar y exportar componentes {/*importing-and-exporting-components*/}
6765

66+
Es posible declarar muchos componentes en un archivo, pero los archivos grandes pueden resultar difíciles de navegar. Como solución, puedes *exportar* un componente a su propio archivo, y luego *importar* ese componente desde otro archivo:
6867

6968
<Sandpack>
7069

@@ -112,15 +111,15 @@ img { margin: 0 10px 10px 0; }
112111

113112
<LearnMore path="/learn/importing-and-exporting-components">
114113

115-
Read **[Importing and Exporting Components](/learn/importing-and-exporting-components)** to learn how to split components into their own files.
114+
Lee **[Importar y exportar componentes](/learn/importing-and-exporting-components)** para que aprendas como dividir componentes en archivos propios.
116115

117116
</LearnMore>
118117

119-
## Writing markup with JSX {/*writing-markup-with-jsx*/}
118+
## Escribir marcado con JSX {/*writing-markup-with-jsx*/}
120119

121-
Each React component is a JavaScript function that may contain some markup that React renders into the browser. React components use a syntax extension called JSX to represent that markup. JSX looks a lot like HTML, but it is a bit stricter and can display dynamic information.
120+
Cada componente de React es una función de JavaScript que puede contener algo de marcado que React renderiza en el navegador. Los componentes de React utilizan una sintaxis extendida que se llama JSX para representar ese marcado. JSX se parece muchísimo a HTML, pero es un poco más estricto y puede mostrar información dinámica.
122121

123-
If we paste existing HTML markup into a React component, it won't always work:
122+
Si pegamos marcado existente HTML en un componente de React, no funcionará siempre:
124123

125124
<Sandpack>
126125

@@ -149,7 +148,7 @@ img { height: 90px; }
149148
150149
</Sandpack>
151150
152-
If you have existing HTML like this, you can fix it using a [converter](https://transform.tools/html-to-jsx):
151+
Si tienes HTML existente como este, puedes arreglarlo usando un [convertidor](https://transform.tools/html-to-jsx):
153152
154153
<Sandpack>
155154
@@ -181,13 +180,13 @@ img { height: 90px; }
181180

182181
<LearnMore path="/learn/writing-markup-with-jsx">
183182

184-
Read **[Writing Markup with JSX](/learn/writing-markup-with-jsx)** to learn how to write valid JSX.
183+
Lee **[Escribir marcado con JSX](/learn/writing-markup-with-jsx)** para aprender cómo escribir JSX válido.
185184

186185
</LearnMore>
187186

188-
## JavaScript in JSX with curly braces {/*javascript-in-jsx-with-curly-braces*/}
187+
## JavaScript en JSX con llaves {/*javascript-in-jsx-with-curly-braces*/}
189188

190-
JSX lets you write HTML-like markup inside a JavaScript file, keeping rendering logic and content in the same place. Sometimes you will want to add a little JavaScript logic or reference a dynamic property inside that markup. In this situation, you can use curly braces in your JSX to "open a window" to JavaScript:
189+
JSX te permite escribir marcado similar a HTML dentro de un archivo JavaScript, manteniendo la lógica de renderizado y el contenido en el mismo lugar. En ocasiones será deseable añadir un poco de lógica en JavaScript o referenciar una propiedad dinámica dentro del marcado. En esta situación, puedes utilizar llaves en tu JSX para «abrir una ventana» hacia JavaScript:
191190

192191
<Sandpack>
193192

@@ -229,13 +228,13 @@ body > div > div { padding: 20px; }
229228
230229
<LearnMore path="/learn/javascript-in-jsx-with-curly-braces">
231230
232-
Read **[JavaScript in JSX with Curly Braces](/learn/javascript-in-jsx-with-curly-braces)** to learn how to access JavaScript data from JSX.
231+
Lee **[JavaScript y JSX con llaves](/learn/javascript-in-jsx-with-curly-braces)** para aprender cómo acceder a JavaScript desde JSX.
233232
234233
</LearnMore>
235234
236-
## Passing props to a component {/*passing-props-to-a-component*/}
235+
## Pasar props a un componente {/*passing-props-to-a-component*/}
237236
238-
React components use *props* to communicate with each other. Every parent component can pass some information to its child components by giving them props. Props might remind you of HTML attributes, but you can pass any JavaScript value through them, including objects, arrays, functions, and even JSX!
237+
Los componentes de React utilizan *props* para comunicarse entre ellos. Cada componente padre puede pasar alguna información a sus componentes hijos dándoles props. Las props pueden recodarte a los atributos de HTML, pero puedes pasar cualquier valor de JavaScript con ellas, incluyendo objetos, arreglos, funciones, ¡e incluso JSX!
239238
240239
<Sandpack>
241240
@@ -310,15 +309,15 @@ export function getImageUrl(person, size = 's') {
310309

311310
<LearnMore path="/learn/passing-props-to-a-component">
312311

313-
Read **[Passing Props to a Component](/learn/passing-props-to-a-component)** to learn how to pass and read props.
312+
Lee **[Pasar props a un componente](/learn/passing-props-to-a-component)** para aprender cómo pasar y leer props.
314313

315314
</LearnMore>
316315

317-
## Conditional rendering {/*conditional-rendering*/}
316+
## Renderizado condicional {/*conditional-rendering*/}
318317

319-
Your components will often need to display different things depending on different conditions. In React, you can conditionally render JSX using JavaScript syntax like `if` statements, `&&`, and `? :` operators.
318+
Tus componentes a menudo necesitarán mostrar algo distinto en diferentes condiciones. En React, puedes renderizar JSX de forma condicional usando sintaxis de JavaScript como las sentencias `if`, y los operadores `&&` y `? :`.
320319

321-
In this example, the JavaScript `&&` operator is used to conditionally render a checkmark:
320+
En este ejemplo, el operador `&&` se utiliza para renderizar condicionalmente una marca:
322321

323322
<Sandpack>
324323

@@ -358,15 +357,15 @@ export default function PackingList() {
358357
359358
<LearnMore path="/learn/conditional-rendering">
360359
361-
Read **[Conditional Rendering](/learn/conditional-rendering)** to learn the different ways to render content conditionally.
360+
Lee **[Renderizado condicional](/learn/conditional-rendering)** para aprender las diferentes formas de renderizar contenido condicionalmente.
362361
363362
</LearnMore>
364363
365-
## Rendering lists {/*rendering-lists*/}
364+
## Renderizado de listas {/*rendering-lists*/}
366365
367-
You will often want to display multiple similar components from a collection of data. You can use JavaScript's `filter()` and `map()` with React to filter and transform your array of data into an array of components.
366+
A menudo querrás mostrar múltiples componentes similares a partir de una colección de datos. Puedes utilizar `filter()` y `map()` de JavaScript junto con React para filtrar y transformar tus arreglos de datos en un arreglo de componentes.
368367
369-
For each array item, you will need to specify a `key`. Usually, you will want to use an ID from the database as a `key`. Keys let React keep track of each item's place in the list even if the list changes.
368+
Para cada elemento del arreglo, deberás especificar una llave (la prop `key`). Usualmente, querrás usar un ID de la base de datos como `key`. Las llaves le permiten a React seguir el lugar de cada elemento en la lista aún cuando la lista cambie.
370369
371370
<Sandpack>
372371
@@ -458,18 +457,18 @@ h2 { font-size: 20px; }
458457

459458
<LearnMore path="/learn/rendering-lists">
460459

461-
Read **[Rendering Lists](/learn/rendering-lists)** to learn how to render a list of components, and how to choose a key.
460+
Lee **[Renderizado de listas](/learn/rendering-lists)** para aprender cómo renderizar una lista de componentes, y cómo elegir una llave.
462461

463462
</LearnMore>
464463

465-
## Keeping components pure {/*keeping-components-pure*/}
464+
## Mantener los componentes puros {/*keeping-components-pure*/}
466465

467-
Some JavaScript functions are “pure.” A pure function:
466+
Algunas funciones de JavaScript son «puras». Una función pura:
468467

469-
* **Minds its own business.** It does not change any objects or variables that existed before it was called.
470-
* **Same inputs, same output.** Given the same inputs, a pure function should always return the same result.
468+
* **Se ocupa de sus propios asuntos.** No cambia ningún objeto o variable que haya existido antes de ser llamada.
469+
* **Misma entrada, misma salida.** Dada la misma entrada, una función pura debería devolver siempre el mismo resultado.
471470

472-
By strictly only writing your components as pure functions, you can avoid an entire class of baffling bugs and unpredictable behavior as your codebase grows. Here is an example of an impure component:
471+
Si de forma estricta solo escribes tus componentes como funciones puras, puedes evitar toda una clase de errores desconcertantes y comportamientos impredecibles a medida que tu base de código crece. Aquí hay un ejemplo de un componente impuro:
473472

474473
<Sandpack>
475474

@@ -495,7 +494,7 @@ export default function TeaSet() {
495494

496495
</Sandpack>
497496

498-
You can make this component pure by passing a prop instead of modifying a preexisting variable:
497+
Puedes hacer este componente puro pasando una prop en lugar de modificar una variable ya existente:
499498

500499
<Sandpack>
501500

@@ -519,12 +518,12 @@ export default function TeaSet() {
519518

520519
<LearnMore path="/learn/keeping-components-pure">
521520

522-
Read **[Keeping Components Pure](/learn/keeping-components-pure)** to learn how to write components as pure, predictable functions.
521+
Lee **[Mantener los componentes puros](/learn/keeping-components-pure)** para aprender a escribir componentes como funciones puras y predecibles.
523522

524523
</LearnMore>
525524

526-
## What's next? {/*whats-next*/}
525+
## ¿Qué sigue? {/*whats-next*/}
527526

528-
Head over to [Your First Component](/learn/your-first-component) to start reading this chapter page by page!
527+
¡Dirígete a [Tu primer componente](/learn/your-first-component) para que comiences a leer este capítulo página por página!
529528

530-
Or, if you're already familiar with these topics, why not read about [Adding Interactivity](/learn/adding-interactivity)?
529+
O, si ya te resultan familiares estos temas, ¿por qué no leer sobre cómo [Añadir interactividad](/learn/adding-interactivity)?

beta/src/pages/learn/index.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ title: Inicio rápido
2121

2222
## Crear y anidar componentes {/*components*/}
2323

24-
Las aplicaciones de React están hechas a partir de componentes. Un componente es una pieza de IU (interfaz de usuario) que tiene su propia lógica y apariencia. Un componente puede ser tan pequeño como un botón, o tan grande como toda una página.
24+
Las aplicaciones de React están hechas a partir de componentes. Un componente es una pieza de UI (siglas en inglés de interfaz de usuario) que tiene su propia lógica y apariencia. Un componente puede ser tan pequeño como un botón, o tan grande como toda una página.
2525

2626
Los componentes de React son funciones de JavaScript que retornan marcado (*markup*):
2727

@@ -535,4 +535,4 @@ button {
535535
536536
¡En este punto ya conoces los elementos básicos de como escribir código en React!
537537
538-
Dirígete a [Pensar en React](/learn/thinking-in-react) para que veas como se siente en la práctica construir una IU con React.
538+
Dirígete a [Pensar en React](/learn/thinking-in-react) para que veas como se siente en la práctica construir una interfaz de usuario con React.

beta/src/pages/learn/installation.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -52,4 +52,4 @@ Si estás listo para [iniciar un proyecto completamente](/learn/start-a-new-reac
5252

5353
## Próximos pasos {/*next-steps*/}
5454

55-
¡Por dónde comiences depende de cómo te gusta aprender, qué necesitas lograr y adónde quieres dirigirte luego! ¿Por qué no leer [Pensar en React](/learn/thinking-in-react)--nuestro tutorial introductorio? O puedes saltar a [Describir la IU](/learn/describing-the-ui) para jugar con más ejemplos y aprender cada tema paso a paso. ¡No hay una forma incorrecta de aprender React!
55+
¡Por dónde comiences depende de cómo te gusta aprender, qué necesitas lograr y adónde quieres dirigirte luego! ¿Por qué no leer [Pensar en React](/learn/thinking-in-react)--nuestro tutorial introductorio? O puedes saltar a [Describir la UI](/learn/describing-the-ui) para jugar con más ejemplos y aprender cada tema paso a paso. ¡No hay una forma incorrecta de aprender React!

beta/src/pages/learn/start-a-new-react-project.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Si estás aprendiendo React o estás considerando añadirlo a un proyecto existe
1010

1111
## Escoge tu propia aventura {/*choose-your-own-adventure*/}
1212

13-
React es una biblioteca que te permite organizar código de IU al separarla en piezas que se nombran componentes. React no se preocupa por el enrutamiento o el manejo de datos. Para estas funcionalidades necesitarás usar bibliotecas de terceros o escribir tus propias soluciones. Esto significa que hay varias formas de comenzar un proyecto en React:
13+
React es una biblioteca que te permite organizar código de UI al separarla en piezas que se nombran componentes. React no se preocupa por el enrutamiento o el manejo de datos. Para estas funcionalidades necesitarás usar bibliotecas de terceros o escribir tus propias soluciones. Esto significa que hay varias formas de comenzar un proyecto en React:
1414

1515
* Comenzar con una **configuración mínima con solo una cadena de herramientas (_toolchain_)** y añadir funcionalidades a tu proyecto mientras se hagan necesarias.
1616
* Comenzar con un **framework más rígido** con funcionalidades comunes ya incluidas.

0 commit comments

Comments
 (0)