From 7c112af1c9672559241000a2266c6e71374b598b Mon Sep 17 00:00:00 2001 From: Adiel Hercules Date: Wed, 6 Feb 2019 22:23:43 -0600 Subject: [PATCH 01/17] Translate: React without ES6 --- content/docs/react-without-es6.md | 64 +++++++++++++++---------------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/content/docs/react-without-es6.md b/content/docs/react-without-es6.md index 8cb01c6f3..6a066151e 100644 --- a/content/docs/react-without-es6.md +++ b/content/docs/react-without-es6.md @@ -1,10 +1,10 @@ --- id: react-without-es6 -title: React Without ES6 +title: React sin ES6 permalink: docs/react-without-es6.html --- -Normally you would define a React component as a plain JavaScript class: +Normalmente definirías un componente de React cómo una clase plana de JavaScript: ```javascript class Greeting extends React.Component { @@ -14,7 +14,7 @@ class Greeting extends React.Component { } ``` -If you don't use ES6 yet, you may use the `create-react-class` module instead: +Si tú aún no utilizas ES6, puedes utilizar el módulo `create-react-class`: ```javascript @@ -26,11 +26,11 @@ var Greeting = createReactClass({ }); ``` -The API of ES6 classes is similar to `createReactClass()` with a few exceptions. +La API de clases en ES6 es similar a `createReactClass()` con algunas excepciones. -## Declaring Default Props +## Declarando _Props_ por Defecto -With functions and ES6 classes `defaultProps` is defined as a property on the component itself: +Con functiones y clases de ES6 `defaultProps` es definido como una propiedad del componente: ```javascript class Greeting extends React.Component { @@ -42,7 +42,7 @@ Greeting.defaultProps = { }; ``` -With `createReactClass()`, you need to define `getDefaultProps()` as a function on the passed object: +Con `createReactClass()`, es necesario que tú definas `getDefaultProps()` como una función en el objeto pasado a `createReactClass()`: ```javascript var Greeting = createReactClass({ @@ -57,9 +57,9 @@ var Greeting = createReactClass({ }); ``` -## Setting the Initial State +## Configurando el Estado Inicial -In ES6 classes, you can define the initial state by assigning `this.state` in the constructor: +En clases de ES6, puedes definir el estado inicial al asignar `this.state` en el constructor: ```javascript class Counter extends React.Component { @@ -71,7 +71,7 @@ class Counter extends React.Component { } ``` -With `createReactClass()`, you have to provide a separate `getInitialState` method that returns the initial state: +Con `createReactClass()`, tú debes proveer un método adicional `getInitialState` que retorna el estado inicial: ```javascript var Counter = createReactClass({ @@ -84,14 +84,14 @@ var Counter = createReactClass({ ## Autobinding -In React components declared as ES6 classes, methods follow the same semantics as regular ES6 classes. This means that they don't automatically bind `this` to the instance. You'll have to explicitly use `.bind(this)` in the constructor: +En componentes de React declarados como clases de ES6, los métodos se rigen por la misma semántica que las clases regulares de ES6. Esto significa que no vinculan `this` automomáticamente a la instancia. Debes utilizar `.bind(this)` explícitamente en el constructor: ```javascript class SayHello extends React.Component { constructor(props) { super(props); this.state = {message: 'Hello!'}; - // This line is important! + // Esta linea es importante! this.handleClick = this.handleClick.bind(this); } @@ -100,7 +100,7 @@ class SayHello extends React.Component { } render() { - // Because `this.handleClick` is bound, we can use it as an event handler. + // Porque `this.handleClick` está vinculada, podemos utilizarla como un event handler return (