Merge pull request #10 from EzequielMonforte/translate-components-props

Components and Props translation

Author: alejandronanez

content/docs/components-and-props.md

@@ -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"
@@ -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 {
@@ -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) {
@@ -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) {
@@ -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) {
@@ -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) {
@@ -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) {
@@ -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) {
@@ -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) {
@@ -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.