You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
12
+
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.
13
13
14
-
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.
14
+
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.
15
15
16
16
## ES6, ES2015, ES2016, etc
17
17
18
-
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).
18
+
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).
19
19
20
-
## Compiladores
20
+
## Compilers
21
21
22
-
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.
22
+
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.
23
23
24
24
## Bundlers
25
25
26
-
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/).
26
+
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/).
27
27
28
-
## Package managers
28
+
## Package Managers
29
29
30
-
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.
30
+
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.
31
31
32
32
## CDN
33
33
34
-
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.
34
+
CDN stands for Content Delivery Network. CDNs deliver cached, static content from a network of servers across the globe.
35
35
36
36
## JSX
37
37
38
-
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).
38
+
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).
39
39
40
-
*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:
40
+
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:
41
41
42
42
```js
43
43
constname='Clementine';
@@ -47,26 +47,27 @@ ReactDOM.render(
47
47
);
48
48
```
49
49
50
-
## [Elementos](/docs/rendering-elements.html)
50
+
## [Elements](/docs/rendering-elements.html)
51
51
52
-
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.
52
+
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.
53
53
54
54
```js
55
-
constelement=<h1>Hola, mundo</h1>;
55
+
constelement=<h1>Hello, world</h1>;
56
56
```
57
57
58
-
Normalmente, los elementos no se utilizan directamente, si no que se devuelven desde los components.
58
+
Typically, elements are not used directly, but get returned from components.
59
59
60
-
## [Componentes](/docs/components-and-props.html)
60
+
## [Components](/docs/components-and-props.html)
61
61
62
-
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:
62
+
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:
63
63
64
64
```js
65
65
functionWelcome(props) {
66
66
return<h1>Hello, {props.name}</h1>;
67
67
}
68
68
```
69
-
Los componentes también pueden ser clases de ES6:
69
+
70
+
Components can also be ES6 classes:
70
71
71
72
```js
72
73
classWelcomeextendsReact.Component {
@@ -76,37 +77,38 @@ class Welcome extends React.Component {
76
77
}
77
78
```
78
79
79
-
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.
80
+
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.
80
81
81
82
### [`props`](/docs/components-and-props.html)
82
83
83
-
`props`son entradas de un componente de React. Son información que es pasada desde un componente padre a un componente hijo.
84
+
`props`are inputs to a React component. They are data passed down from a parent component to a child component.
84
85
85
-
Recuerda que los `props`son de sólo lectura. No deben ser modificados de ninguna forma:
86
+
Remember that `props`are readonly. They should not be modified in any way:
86
87
87
88
```js
88
-
//Incorrecto!
89
+
//Wrong!
89
90
props.number=42;
90
91
```
91
92
92
-
Si necesitas moficiar algún valor en respuesta de una entrada del usuario o una respuesta de red, usa`state`en su lugar.
93
+
If you need to modify some value in response to user input or a network response, use`state`instead.
93
94
94
95
### `props.children`
95
96
96
-
`props.children`está disponible en cada componente. Contiene el contenido ubicado entre las etiquetas de apertura y cierre de un componente. Por ejemplo:
97
+
`props.children`is available on every component. It contains the content between the opening and closing tags of a component. For example:
97
98
98
99
```js
99
100
<Welcome>Hello world!</Welcome>
100
101
```
101
102
102
-
La cadena de texto `Hello world!`está disponible en`props.children`en el componente `Welcome`:
103
+
The string `Hello world!`is available in`props.children`in the `Welcome` component:
103
104
104
105
```js
105
106
functionWelcome(props) {
106
107
return<p>{props.children}</p>;
107
108
}
108
109
```
109
-
Para los componentes definidos como clases, usa `this.props.children`:
110
+
111
+
For components defined as classes, use `this.props.children`:
110
112
111
113
```js
112
114
classWelcomeextendsReact.Component {
@@ -118,49 +120,47 @@ class Welcome extends React.Component {
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.
123
+
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.
122
124
123
-
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*.
125
+
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.
124
126
125
-
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.
127
+
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.
126
128
127
-
## [Métodos de ciclo de vida](/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class)
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*.
131
+
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.
130
132
131
133
## [Controlled](/docs/forms.html#controlled-components) vs. [Uncontrolled Components](/docs/uncontrolled-components.html)
132
134
133
-
React tiene dos enfoques distintos para tratar con las entradas de formularios.
134
-
135
-
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.
135
+
React has two different approaches to dealing with form inputs.
136
136
137
-
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.
137
+
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.
138
138
139
139
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.
140
140
141
-
En la mayoría de los casos debes usar *controlled components*.
141
+
In most cases you should use controlled components.
142
142
143
143
## [Keys](/docs/lists-and-keys.html)
144
144
145
-
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.
145
+
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.
146
146
147
-
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.
147
+
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.
148
148
149
-
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`.
149
+
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`.
150
150
151
151
## [Refs](/docs/refs-and-the-dom.html)
152
152
153
-
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.
153
+
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.
154
154
155
-
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).
155
+
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).
156
156
157
-
## [Eventos](/docs/handling-events.html)
157
+
## [Events](/docs/handling-events.html)
158
158
159
-
El manejo de eventos con elementos de React tiene algunas diferencias sintácticas:
159
+
Handling events with React elements has some syntactic differences:
160
160
161
-
*Los manejadores de eventos en React son nombrados usando *camelCase*, en lugar de *lowercase*.
162
-
*Con JSX pasas una función como manejador de eventos, en lugar de una cadena de texto.
161
+
*React event handlers are named using camelCase, rather than lowercase.
162
+
*With JSX you pass a function as the event handler, rather than a string.
163
163
164
-
## [Reconciliación](/docs/reconciliation.html)
164
+
## [Reconciliation](/docs/reconciliation.html)
165
165
166
-
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".
166
+
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".
0 commit comments