Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Glossary translation #16

Merged
merged 3 commits into from
Feb 12, 2019
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 49 additions & 49 deletions content/docs/reference-glossary.md
Original file line number Diff line number Diff line change
@@ -1,43 +1,43 @@
---
id: glossary
title: Glossary of React Terms
title: Glosario de términos de React
layout: docs
category: Reference
permalink: docs/glossary.html

---

## Single-page Application
## Aplicación de página única

A single-page application is an application that loads a single HTML page and all the necessary assets (such as JavaScript and CSS) required for the application to run. Any interactions with the page or subsequent pages do not require a round trip to the server which means the page is not reloaded.
Una aplicación de página única (single-page application) es una aplicación que carga una única página HTML y todos los componentes necesarios (tales como JavaScript y CSS) para que se ejecute la aplicación. Cualquier interacción con la página o páginas subsecuentes no requiere hacer solicitudes al servidor lo que significa que la página no es recargada.

Though you may build a single-page application in React, it is not a requirement. React can also be used for enhancing small parts of existing websites with additional interactivity. Code written in React can coexist peacefully with markup rendered on the server by something like PHP, or with other client-side libraries. In fact, this is exactly how React is being used at Facebook.
Aún cuando puedes construir una aplicación de página única en React, esto no es un requerimiento. React también puede ser utilizado para mejorar pequeñas partes de sitios web existentes con interactividad adicional. Código escrito en React puede coexistir pacíficamente con páginas renderizadas de lado del servidor por lenguajes como PHP, ó cualquier otra librería de lado del cliente. De hecho, así es como React está siendo utilizado en Facebook.

## ES6, ES2015, ES2016, etc

These acronyms all refer to the most recent versions of the ECMAScript Language Specification standard, which the JavaScript language is an implementation of. The ES6 version (also known as ES2015) includes many additions to the previous versions such as: arrow functions, classes, template literals, `let` and `const` statements. You can learn more about specific versions [here](https://en.wikipedia.org/wiki/ECMAScript#Versions).
Estos acrónimos se refieren a las mas recientes versiones del estándar de Especificación de Lenguaje ECMAScript, del cual JavaScript es una implementación. La versión ES6 (también conocida como ES2015) incluye muchas adiciones a las versiones previas tales como: *arrow functions*, clases, *template literals*, declaraciones de variables con `let` y `const`. Puedes aprender más sobre versiones específicas [aquí](https://en.wikipedia.org/wiki/ECMAScript#Versions).

## Compilers
## Compiladores

A JavaScript compiler takes JavaScript code, transforms it and returns JavaScript code in a different format. The most common use case is to take ES6 syntax and transform it into syntax that older browsers are capable of interpreting. [Babel](https://babeljs.io/) is the compiler most commonly used with React.
Un compilador de JavaScript toma el código JavaScript, lo transforma y regresa el código en un formato diferente. El caso de uso más común es tomar código JavaScript con sintáxis ES6 y transformarlo en código que navegadores más antiguos puedan interpretar. [Babel](https://babeljs.io/) es el compilador más usado con React.

## Bundlers

Bundlers take JavaScript and CSS code written as separate modules (often hundreds of them), and combine them together into a few files better optimized for the browsers. Some bundlers commonly used in React applications include [Webpack](https://webpack.js.org/) and [Browserify](http://browserify.org/).
Los *bundlers* toman el código JavaScript y CSS escrito como módulos separados (frecuentemente cientos de ellos), y los combina en unos cuantos archivos mejor optimizados para los navegadores. Algunos *bundlers* comúnmente usandos en aplicaciones de React son [Webpack](https://webpack.js.org/) y [Browserify](http://browserify.org/).

## Package Managers
## Package managers

Package managers are tools that allow you to manage dependencies in your project. [npm](https://www.npmjs.com/) and [Yarn](http://yarnpkg.com/) are two package managers commonly used in React applications. Both of them are clients for the same npm package registry.
Los *package managers* son herramientas que te permiten administrar las dependencias de tu proyecto. [npm](https://www.npmjs.com/) y [Yarn](http://yarnpkg.com/) son dos *package managers* comúnmente usados en aplicaciones de React. Ambos son clientes para el mismo registro de paquetes npm.

## CDN

CDN stands for Content Delivery Network. CDNs deliver cached, static content from a network of servers across the globe.
CDN son las siglas de *Content Delivery Network* (Red de Entrega de Contenido). Los *CDN* entregan contenido estático en caché desde una red de servidores alrededor del mundo.

## JSX

JSX is a syntax extension to JavaScript. It is similar to a template language, but it has full power of JavaScript. JSX gets compiled to `React.createElement()` calls which return plain JavaScript objects called "React elements". To get a basic introduction to JSX [see the docs here](/docs/introducing-jsx.html) and find a more in-depth tutorial on JSX [here](/docs/jsx-in-depth.html).
JSX es una extensión de sintáxis para JavaScript. Es similar a un *template language*, pero tiene todo el poder de JavaScript. JSX es compilado a llamadas `React.createElement()` que regresan simples objetos de JavaScript llamados *"React elements"*. Puedes encontrar una introducción básica a JSX en la documentación [aquí](/docs/introducing-jsx.html) y un tutorial más completo de JSX [aquí](/docs/jsx-in-depth.html).

React DOM uses camelCase property naming convention instead of HTML attribute names. For example, `tabindex` becomes `tabIndex` in JSX. The attribute `class` is also written as `className` since `class` is a reserved word in JavaScript:
*React DOM* usa una convención de nombres en *camelCase* para las propiedades en lugar de nombres de atributos HTML. Por ejemplo, `tabindex` se vuelve `tabIndex` en JSX. El atributo `class` se escribe como `className` ya que `class` es una palabra reservada en JavaScript:

```js
const name = 'Clementine';
Expand All @@ -47,27 +47,26 @@ ReactDOM.render(
);
```

## [Elements](/docs/rendering-elements.html)
## [Elementos](/docs/rendering-elements.html)

React elements are the building blocks of React applications. One might confuse elements with a more widely known concept of "components". An element describes what you want to see on the screen. React elements are immutable.
Los elementos de React son los bloques de construcción de una aplicación de React. Uno podría confundir los elementos con el concepto más ampliamente conocido de "componentes". Un elemento describe lo que quieres ver en pantalla. Los elementos de React son immutables.

```js
const element = <h1>Hello, world</h1>;
const element = <h1>Hola, mundo</h1>;
```

Typically, elements are not used directly, but get returned from components.
Normalmente, los elementos no se utilizan directamente, si no que se devuelven desde los components.

## [Components](/docs/components-and-props.html)
## [Componentes](/docs/components-and-props.html)

React components are small, reusable pieces of code that return a React element to be rendered to the page. The simplest version of React component is a plain JavaScript function that returns a React element:
Los componentes de React son pequeños y reutilizables fragmentos de código que devuelven un elemento de React para ser renderizado en una página. La versión más simple de un componente de React es una función en simple JavaScript que regrese un elemento de React:

```js
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
```

Components can also be ES6 classes:
Los componentes también pueden ser clases de ES6:

```js
class Welcome extends React.Component {
Expand All @@ -77,38 +76,37 @@ class Welcome extends React.Component {
}
```

Components can be broken down into distinct pieces of functionality and used within other components. Components can return other components, arrays, strings and numbers. A good rule of thumb is that if a part of your UI is used several times (Button, Panel, Avatar), or is complex enough on its own (App, FeedStory, Comment), it is a good candidate to be a reusable component. Component names should also always start with a capital letter (`<Wrapper/>` **not** `<wrapper/>`). See [this documentation](/docs/components-and-props.html#rendering-a-component) for more information on rendering components.
Los componentes pueden ser divididos en distintas piezas de funcionalidad y usados en otros componentes. Los componentes pueden regresar otros componentes, arreglos, cadenas de texto y números. Una buena regla es que si una parte de tu interfaz es usada varias veces (Botón, Panel, Avatar), o es lo suficientemente compleja (App, Noticias, Comentario), es un buen candidato para ser un componente reusable. Los nombres de los componentes deberían también comenzar con una letra mayúscula (`<Wrapper/>` **not** `<wrapper/>`). Consulte [esta documentación](/docs/components-and-props.html#rendering-a-component) para obtener más información sobre el renderizado de componentes.

### [`props`](/docs/components-and-props.html)

`props` are inputs to a React component. They are data passed down from a parent component to a child component.
`props` son entradas de un componente de React. Son información que es pasada desde un componente padre a un componente hijo.

Remember that `props` are readonly. They should not be modified in any way:
Recuerda que los `props` son de sólo lectura. No deben ser modificados de ninguna forma:

```js
// Wrong!
// Incorrecto!
props.number = 42;
```

If you need to modify some value in response to user input or a network response, use `state` instead.
Si necesitas moficiar algún valor en respuesta de una entrada del usuario o una respuesta de red, usa `state` en su lugar.

### `props.children`

`props.children` is available on every component. It contains the content between the opening and closing tags of a component. For example:
`props.children` está disponible en cada componente. Contiene el contenido ubicado entre las etiquetas de apertura y cierre de un componente. Por ejemplo:

```js
<Welcome>Hello world!</Welcome>
```

The string `Hello world!` is available in `props.children` in the `Welcome` component:
La cadena de texto `Hello world!` está disponible en `props.children` en el componente `Welcome`:

```js
function Welcome(props) {
return <p>{props.children}</p>;
}
```

For components defined as classes, use `this.props.children`:
Para los componentes definidos como clases, usa `this.props.children`:

```js
class Welcome extends React.Component {
Expand All @@ -120,47 +118,49 @@ class Welcome extends React.Component {

### [`state`](/docs/state-and-lifecycle.html#adding-local-state-to-a-class)

A component needs `state` when some data associated with it changes over time. For example, a `Checkbox` component might need `isChecked` in its state, and a `NewsFeed` component might want to keep track of `fetchedPosts` in its state.
Un componente necesita `state` cuando algunos datos asociados a el cambian con el tiempo. Por ejemplo, un componente `Checkbox` tal vez necesite `isChecked` en su *state* , y un componente `NewsFeed` tal vez necesite mantener un registro de `fetchedPosts` en su estado.

The most important difference between `state` and `props` is that `props` are passed from a parent component, but `state` is managed by the component itself. A component cannot change its `props`, but it can change its `state`. To do so, it must call `this.setState()`. Only components defined as classes can have state.
La diferencia más importante entre `state` y `props` es que los `props` son pasados desde un componente padre, pero el `state` es manejado por el propio componente. Un componente no puede cambiar sus `props`, pero puede cambiar su `state`. Para hacerlo, debe llamar a `this.setState()`. Sólo los componentes definidos como clases pueden tener *state*.

For each particular piece of changing data, there should be just one component that "owns" it in its state. Don't try to synchronize states of two different components. Instead, [lift it up](/docs/lifting-state-up.html) to their closest shared ancestor, and pass it down as props to both of them.
Para cada pieza particular de datos cambiantes, debería existir solo un componente que lo "posea" en su *state*. No intentes sincronizar *states* de dos componentes distintos. En su lugar, [elévalo](/docs/lifting-state-up.html) a su ancestro compartido más cercano, y pásalo como *props* en ambos.

## [Lifecycle Methods](/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class)
## [Métodos de ciclo de vida](/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class)

Lifecycle methods are custom functionality that gets executed during the different phases of a component. There are methods available when the component gets created and inserted into the DOM ([mounting](/docs/react-component.html#mounting)), when the component updates, and when the component gets unmounted or removed from the DOM.
Los métodos de ciclo de vida son funcionalidad personalizada que se ejecutan durante las diferentes fases de un componente. Existen métodos disponibles cuando el componente se crea y se inserta en el *DOM* ([*mounting*](/docs/react-component.html#mounting)), cuando el componente se actualiza, y cuando el componente es desmontado o removido del *DOM*.

## [Controlled](/docs/forms.html#controlled-components) vs. [Uncontrolled Components](/docs/uncontrolled-components.html)

React has two different approaches to dealing with form inputs.
React tiene dos enfoques distintos para tratar con las entradas de formularios.

Un elemento de entrada de un formulario cuyo valor está controlado por React es llamado *controlled component*. Cuando un usuario introduce información en un *controlled component* se activa un manejador de eventos de cambio y el código decide si la entrada es válida (volviendo a renderizar con el valor actualizado). Si no se vuelve a renderizar, el elemento del formulario permanecerá sin cambios.

An input form element whose value is controlled by React is called a *controlled component*. When a user enters data into a controlled component a change event handler is triggered and your code decides whether the input is valid (by re-rendering with the updated value). If you do not re-render then the form element will remain unchanged.
Un *uncontrolled component* funciona como los elementos de un formulario fuera de React. Cuando un usuario introduce información en un campo del formulario (una caja de texto, una lista de selección, etc) la información actualizada es reflejada sin que React tenga que hacer nada. Sin embargo, esto también significa que no se puede forzar al campo a que tenga un valor determinado.

An *uncontrolled component* works like form elements do outside of React. When a user inputs data into a form field (an input box, dropdown, etc) the updated information is reflected without React needing to do anything. However, this also means that you can't force the field to have a certain value.

In most cases you should use controlled components.
En la mayoría de los casos debes usar *controlled components*.

## [Keys](/docs/lists-and-keys.html)

A "key" is a special string attribute you need to include when creating arrays of elements. Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside an array to give the elements a stable identity.
Una *"key"* es un atributo especial (cadena de texto) de que necesitas incluir cuando creas un arreglo de elementos. Las *keys* ayudan a React a identificar que elementos han cambiado, han sido agregados o removidos. Las *keys* deben asignarse a los elementos dentro de un arreglo para darles una identidad estable.

Keys only need to be unique among sibling elements in the same array. They don't need to be unique across the whole application or even a single component.
Las *keys* sólo tienen que ser únicas entre elementos hermanos en el mismo arreglo. No necesitan ser únicos en toda la aplicación o incluso en el mismo componente.

Don't pass something like `Math.random()` to keys. It is important that keys have a "stable identity" across re-renders so that React can determine when items are added, removed, or re-ordered. Ideally, keys should correspond to unique and stable identifiers coming from your data, such as `post.id`.
No pases algo como `Math.random()` a las *keys*. Es importante que las *keys* tengan una "indentidad estable" a través de múltiples renderizados así React puede determinar cuales elementos fueron agregados, removidos o re-ordenados. Idealmente, las *keys* deberían corresponder a un identificador único y estable que venga desde los datos, por ejemplo: `post.id`.

## [Refs](/docs/refs-and-the-dom.html)

React supports a special attribute that you can attach to any component. The `ref` attribute can be an object created by [`React.createRef()` function](/docs/react-api.html#reactcreateref) or a callback function, or a string (in legacy API). When the `ref` attribute is a callback function, the function receives the underlying DOM element or class instance (depending on the type of element) as its argument. This allows you to have direct access to the DOM element or component instance.
React admite un atributo especial que se puede agregar a cualquier componente. El atributo `ref` puede ser un objeto creado por [la función `React.createRef()`](/docs/react-api.html#reactcreateref) o una función *callback*, o una cadena de texto (en la API antigua). Cuando el atributo `ref` es una función de *callback*, la función recibe el elemento *DOM* subyacente o la instancia de clase (dependiendo del tipo de elemento) como argumento. Esto permite tener acceso directo al *DOM* del elemento o a la instancia del componente.

Use refs sparingly. If you find yourself often using refs to "make things happen" in your app, consider getting more familiar with [top-down data flow](/docs/lifting-state-up.html).
Usa los *refs* con moderación. Si te encuentras frecuentemente haciendo uso de los *refs* para "hacer que las cosas sucedan" en tu aplicación, considera familiarizarte más con [flujos de datos de arriba hacia abajo](/docs/lifting-state-up.html).

## [Events](/docs/handling-events.html)
## [Eventos](/docs/handling-events.html)

Handling events with React elements has some syntactic differences:
El manejo de eventos con elementos de React tiene algunas diferencias sintácticas:

* React event handlers are named using camelCase, rather than lowercase.
* With JSX you pass a function as the event handler, rather than a string.
* Los manejadores de eventos en React son nombrados usando *camelCase*, en lugar de *lowercase*.
* Con JSX pasas una función como manejador de eventos, en lugar de una cadena de texto.

## [Reconciliation](/docs/reconciliation.html)
## [Reconciliación](/docs/reconciliation.html)

When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called "reconciliation".
Cuando las *props* o el *state* de un componente de React cambia, React decide si una actualización al *DOM* es necesaria comparando el elemento recién devuelto con el renderizado previamente. Cuando no son iguales, React actualizará el *DOM*. Este proceso es llamado "reconcilización".