Skip to content

Commit

Permalink
Merge pull request #10 from EzequielMonforte/translate-components-props
Browse files Browse the repository at this point in the history 
Components and Props translation
  • Loading branch information
@alejandronanez
alejandronanez committed Feb 2, 2019
2 parents ba2b8a8 + 263de97 commit a4efd8e
Showing 1 changed file with 49 additions and 48 deletions.
97 changes: 49 additions & 48 deletions content/docs/components-and-props.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
id: components-and-props
title: Components and Props
title: Componentes y Propiedades
permalink: docs/components-and-props.html
redirect_from:
- "docs/reusable-components.html"
Expand All @@ -15,24 +15,25 @@ redirect_from:
prev: rendering-elements.html
next: state-and-lifecycle.html
---
Los componentes permiten separar la UI en piezas independientes, reutilizables y pensar en cada pieza de forma aislada.Esta página proporciona una introducción a la idea de los componentes.
Puedes encontrar una [API detallada sobre componentes aqui](/docs/react-component.html).

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. You can find a [detailed component API reference here](/docs/react-component.html).
Conceptualmente, los componentes son como las funciones de JavaScript. Aceptan entradas arbitrarias (llamadas "props") y devuelven a React elementos que describen lo que debe aparecer en la pantalla.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen.
## Componentes Funcionales y de Clase

## Function and Class Components

The simplest way to define a component is to write a JavaScript function:
La forma más sencilla de definir un componente es escribir una función de JavaScript:

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

This function is a valid React component because it accepts a single "props" (which stands for properties) object argument with data and returns a React element. We call such components "function components" because they are literally JavaScript functions.
Esta función es un componente de React válido porque acepta un solo argumento de objeto "props" (que proviene de propiedades) con datos y devuelve un elemento de React. Llamamos a dichos componentes "funcionales" porque literalmente son funciones JavaScript.

También puedes utilizar una [clase de ES6](https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Classes) para definir un componente:

You can also use an [ES6 class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) to define a component:

```js
class Welcome extends React.Component {
Expand All @@ -42,27 +43,27 @@ class Welcome extends React.Component {
}
```

The above two components are equivalent from React's point of view.
Los dos componentes anteriores son equivalentes desde el punto de vista de React.

Classes have some additional features that we will discuss in the [next sections](/docs/state-and-lifecycle.html). Until then, we will use function components for their conciseness.
Las clases tienen algunas características adicionales que veremos en las [próximas secciones](/docs/state-and-lifecycle.html). Hasta entonces, usaremos componentes funcionales por su brevedad.

## Rendering a Component
## Renderizando un Componente

Previously, we only encountered React elements that represent DOM tags:
Anteriormente, sólo encontramos elementos de React que representan las etiquetas del DOM:

```js
const element = <div />;
```

However, elements can also represent user-defined components:
Sin embargo, los elementos también pueden representar componentes definidos por el usuario:

```js
const element = <Welcome name="Sara" />;
```

When React sees an element representing a user-defined component, it passes JSX attributes to this component as a single object. We call this object "props".
Cuando React ve representando un componente definido por el usuario, pasa atributos JSX a este componente como un solo objeto. Llamamos a este objeto "props".

For example, this code renders "Hello, Sara" on the page:
Por ejemplo, este código muestra "Hello, Sara" en la página:

```js{1,5}
function Welcome(props) {
Expand All @@ -78,24 +79,24 @@ ReactDOM.render(

[](codepen://components-and-props/rendering-a-component)

Let's recap what happens in this example:
Recapitulemos lo que sucede en este ejemplo:

1. We call `ReactDOM.render()` with the `<Welcome name="Sara" />` element.
2. React calls the `Welcome` component with `{name: 'Sara'}` as the props.
3. Our `Welcome` component returns a `<h1>Hello, Sara</h1>` element as the result.
4. React DOM efficiently updates the DOM to match `<h1>Hello, Sara</h1>`.
1. Llamamos a `ReactDOM.render()` con el elemento `<Welcome name="Sara" />`.
2. React llama al componente `Welcome` con `{name: 'Sara'}` como "props".
3. Nuestro componente `Welcome` devuelve un elemento `<h1>Hello, Sara</h1>` como resultado.
4. React DOM actualiza eficientemente el DOM para que coincida con `<h1>Hello, Sara</h1>`.

>**Note:** Always start component names with a capital letter.
>
>React treats components starting with lowercase letters as DOM tags. For example, `<div />` represents an HTML div tag, but `<Welcome />` represents a component and requires `Welcome` to be in scope.
>
>You can read more about the reasoning behind this convention [here.](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)
> **Nota:** Comienza siempre los nombres de componentes con una letra mayúscula.
>
>React trata los componentes que empiezan con letras minúsculas como etiquetas del DOM. Por ejemplo, `<div />` representa una etiqueta div HTML pero `<Welcome />` representa un componente y requiere que `Welcome` esté en scope.
>
> Puedes leer mas sobre el razonamiento detras de esta convención [aquí.](/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized)
## Composing Components
## Composición de Componentes

Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.
Los componentes pueden referirse a otros componentes en su salida. Esto nos permite utilizar la misma abstracción de componente para cualquier nivel de detalle. Un botón, un cuadro de diálogo, un formulario, una pantalla: en aplicaciones de React, todos son expresados comunmente como componentes.

For example, we can create an `App` component that renders `Welcome` many times:
Por ejemplo, podemos crear un componente `App` que renderiza `Welcome` muchas veces:

```js{8-10}
function Welcome(props) {
Expand All @@ -120,13 +121,13 @@ ReactDOM.render(

[](codepen://components-and-props/composing-components)

Typically, new React apps have a single `App` component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like `Button` and gradually work your way to the top of the view hierarchy.
Por lo general, las aplicaciones de React nuevas tienen un único componente `App` en lo más alto. Sin embargo, si se integra React en una aplicación existente, se podría empezar de abajo hacia arriba con un pequeño componente como `Button` y poco a poco trabajar el camino a la cima de la jerarquía de la vista.

## Extracting Components
## Extracción de Componentes

Don't be afraid to split components into smaller components.
No tengas miedo de dividir los componentes en otros más pequeños.

For example, consider this `Comment` component:
Por ejemplo, considera este componente `Comment`:

```js
function Comment(props) {
Expand Down Expand Up @@ -154,11 +155,11 @@ function Comment(props) {

[](codepen://components-and-props/extracting-components)

It accepts `author` (an object), `text` (a string), and `date` (a date) as props, and describes a comment on a social media website.
Acepta `author` (un objeto), `text` (un string), y `date` (una fecha) como props, y describe un comentario en una web de redes sociales.

This component can be tricky to change because of all the nesting, and it is also hard to reuse individual parts of it. Let's extract a few components from it.
Este componente puede ser difícil de cambiar debido a todo el anidamiento, y támbien es difícil reusar partes individuales de él. Vamos a extraer algunos componentes del mismo.

First, we will extract `Avatar`:
Primero, vamos a extraer `Avatar`:

```js{3-6}
function Avatar(props) {
Expand All @@ -171,11 +172,11 @@ function Avatar(props) {
}
```

The `Avatar` doesn't need to know that it is being rendered inside a `Comment`. This is why we have given its prop a more generic name: `user` rather than `author`.
El `Avatar` no necesita saber que está siendo renderizado dentro de un `Comment`. Esto es por lo que le dimos a su propiedad un nombre más genérico: `user` en vez de `author`.

We recommend naming props from the component's own point of view rather than the context in which it is being used.
Recomendamos nombrar las props desde el punto de vista del componente, en vez de la del contexto en el que se va a utilizar.

We can now simplify `Comment` a tiny bit:
Ahora podemos simplificar `Comment` un poquito:

```js{5}
function Comment(props) {
Expand All @@ -198,7 +199,7 @@ function Comment(props) {
}
```

Next, we will extract a `UserInfo` component that renders an `Avatar` next to the user's name:
A continuacion, vamos a extraer un componente `UserInfo` que renderiza un `Avatar` al lado del nombre del usuario:

```js{3-8}
function UserInfo(props) {
Expand All @@ -213,7 +214,7 @@ function UserInfo(props) {
}
```

This lets us simplify `Comment` even further:
Esto nos permite simplificar `Comment` aun más:

```js{4}
function Comment(props) {
Expand All @@ -233,30 +234,30 @@ function Comment(props) {

[](codepen://components-and-props/extracting-components-continued)

Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. 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.
Extraer componentes puede parecer un trabajo pesado al principio, pero tener una paleta de componentes reutilizables vale la pena en aplicaciones más grandes. Una buena regla en general es que si una parte de su UI se usa varias veces (`Button`, `Panel`, `Avatar`), o es lo suficientemente compleja por si misma (`App`, `FeedStory`, `Comment`), es buen candidato para ser un componente reutilizable.

## Props are Read-Only
## Las props son de solo lectura

Whether you declare a component [as a function or a class](#function-and-class-components), it must never modify its own props. Consider this `sum` function:
Ya sea que declares un componente [como una función o como una clase](#function-and-class-components), este nunca debe modificar sus props. Considera esta función `sum` :

```js
function sum(a, b) {
return a + b;
}
```

Such functions are called ["pure"](https://en.wikipedia.org/wiki/Pure_function) because they do not attempt to change their inputs, and always return the same result for the same inputs.
Tales funciones son llamadas ["puras"](https://en.wikipedia.org/wiki/Pure_function) por que no tratan de cambiar sus entradas, y siempre devuelven el mismo resultado para las mismas entradas.

In contrast, this function is impure because it changes its own input:
En contraste, esta función es impura por que cambia su propia entrada:

```js
function withdraw(account, amount) {
account.total -= amount;
}
```

React is pretty flexible but it has a single strict rule:
React es bastante flexible pero tiene una sola regla estricta:

**All React components must act like pure functions with respect to their props.**
**Todos los componentes de React deben actuar como funciones puras con respecto a sus props.**

Of course, application UIs are dynamic and change over time. In the [next section](/docs/state-and-lifecycle.html), we will introduce a new concept of "state". State allows React components to change their output over time in response to user actions, network responses, and anything else, without violating this rule.
Por supuesto, las UI de las aplicaciones son dinámicas y cambian con el tiempo. En la [siguiente sección](/docs/state-and-lifecycle.html), introduciremos un nuevo concepto de "estado". El estado le permite a los componentes de React cambiar su salida a lo largo del tiempo en respuesta a acciones del usuario, respuestas de red y cualquier otra cosa, sin violar esta regla.

0 comments on commit a4efd8e

Please sign in to comment.