feat: add 'back/front end' in curriculum (#42596)

* chore: rename APIs and Microservices to include "Backend" (#42515)

* fix typo

* fix typo

* undo change

* Corrected grammar mistake

Corrected a grammar mistake by removing a comma.

* change APIs and Microservices cert title

* update title

* Change APIs and Microservices certi title

* Update translations.json

* update title

* feat(curriculum): rename apis and microservices cert

* rename folder structure

* rename certificate

* rename learn Markdown

* apis-and-microservices -> back-end-development-and-apis

* update backend meta

* update i18n langs and cypress test

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* fix: add development to front-end libraries (#42512)

* fix: added-the-word-Development-to-front-end-libraries

* fix/added-the-word-Development-to-front-end-libraries

* fix/added-word-development-to-front-end-libraries-in-other-related-files

* fix/added-the-word-Development-to-front-end-and-all-related-files

* fix/removed-typos-from-last-commit-in-index.md

* fix/reverted-changes-that-i-made-to-dependecies

* fix/removed xvfg

* fix/reverted changes that i made to package.json

* remove unwanted changes

* front-end-development-libraries changes

* rename backend certSlug and README

* update i18n folder names and keys

* test: add legacy path redirect tests

This uses serve.json from the client-config repo, since we currently use
that in production

* fix: create public dir before moving serve.json

* fix: add missing script

* refactor: collect redirect tests

* test: convert to cy.location for stricter tests

* rename certificate folder to 00-certificates

* change crowdin config to recognise new certificates location

* allow translations to be used

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* add forwards slashes to path redirects

* fix cypress path tests again

* plese cypress

* fix: test different challenge

Okay so I literally have no idea why this one particular challenge
fails in Cypress Firefox ONLY. Tom and I paired and spun a full build
instance and confirmed in Firefox the page loads and redirects as
expected. Changing to another bootstrap challenge passes Cypress firefox
locally. Absolutely boggled by this.

AAAAAAAAAAAAAAA

* fix: separate the test

Okay apparently the test does not work unless we separate it into
a different `it` statement.

>:( >:( >:( >:(

Co-authored-by: Sujal Gupta <55016909+heysujal@users.noreply.github.com>
Co-authored-by: Noor Fakhry <65724923+NoorFakhry@users.noreply.github.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

curriculum/challenges/espanol/03-front-end-development-libraries/react/access-props-using-this.props.md

@@ -0,0 +1,165 @@
+---
+id: 5a24c314108439a4d403616e
+title: Accede a propiedades "props" usando this.props
+challengeType: 6
+forumTopicId: 301375
+dashedName: access-props-using-this-props
+---
+
+# --description--
+
+Los últimos desafíos cubrieron las formas básicas de pasar propiedades a un componente hijo. Pero, ¿qué pasa si el componente hijo al que se le pasa una propiedad es un componente de clase ES6, en lugar de un componente funcional sin estado? Los componentes de clase ES6 usan una convención un poco diferente para acceder a las propiedades.
+
+Cada vez que se hace referencia a un componente de clase en sí mismo, se utiliza la palabra clave `this`. Para acceder a las propiedades dentro de un componente de clase, se antepone al código que se utiliza para acceder a él con `this`. Por ejemplo, si un componente de clase de ES6 tiene una propiedad llamada `data`, se escribirá `{this.props.data}` en JSX.
+
+# --instructions--
+
+Renderiza una instancia del componente `ReturnTempPassword` en el componente padre `ResetPassword`. Aquí, dale a `ReturnTempPassword` una propiedad de `tempPassword` y asígnale un valor de una cadena que tenga al menos 8 caracteres. Dentro del componente hijo, `ReturnTempPassword`, accede a la propiedad `tempPassword` dentro de las etiquetas `strong` para asegurarte que el usuario vea una contraseña temporal.
+
+# --hints--
+
+El componente `ResetPassword` debe devolver un único elemento `div`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ResetPassword));
+    return mockedComponent.children().type() === 'div';
+  })()
+);
+```
+
+El cuarto componente hijo de `ResetPassword` debe ser el componente `ReturnTempPassword`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ResetPassword));
+    return (
+      mockedComponent.children().childAt(3).name() === 'ReturnTempPassword'
+    );
+  })()
+);
+```
+
+El componente `ReturnTempPassword` debe tener una propiedad llamada `tempPassword`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ResetPassword));
+    return mockedComponent.find('ReturnTempPassword').props().tempPassword;
+  })()
+);
+```
+
+La propiedad `tempPassword` de `ReturnTempPassword` debe ser igual a una cadena de al menos 8 caracteres.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ResetPassword));
+    const temp = mockedComponent.find('ReturnTempPassword').props()
+      .tempPassword;
+    return typeof temp === 'string' && temp.length >= 8;
+  })()
+);
+```
+
+El componente `ReturnTempPassword` debe mostrar la contraseña creada en la propiedad `tempPassword` dentro de las etiquetas `strong`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ResetPassword));
+    return (
+      mockedComponent.find('strong').text() ===
+      mockedComponent.find('ReturnTempPassword').props().tempPassword
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<ResetPassword />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class ReturnTempPassword extends React.Component {
+  constructor(props) {
+    super(props);
+
+  }
+  render() {
+    return (
+        <div>
+            { /* Change code below this line */ }
+            <p>Your temporary password is: <strong></strong></p>
+            { /* Change code above this line */ }
+        </div>
+    );
+  }
+};
+
+class ResetPassword extends React.Component {
+  constructor(props) {
+    super(props);
+
+  }
+  render() {
+    return (
+        <div>
+          <h2>Reset Password</h2>
+          <h3>We've generated a new temporary password for you.</h3>
+          <h3>Please reset this password from your account settings ASAP.</h3>
+          { /* Change code below this line */ }
+
+          { /* Change code above this line */ }
+        </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class ReturnTempPassword extends React.Component {
+  constructor(props) {
+    super(props);
+
+  }
+  render() {
+    return (
+        <div>
+            <p>Your temporary password is: <strong>{this.props.tempPassword}</strong></p>
+        </div>
+    );
+  }
+};
+
+class ResetPassword extends React.Component {
+  constructor(props) {
+    super(props);
+
+  }
+  render() {
+    return (
+        <div>
+          <h2>Reset Password</h2>
+          <h3>We've generated a new temporary password for you.</h3>
+          <h3>Please reset this password from your account settings ASAP.</h3>
+          { /* Change code below this line */ }
+          <ReturnTempPassword tempPassword="serrPbqrPnzc" />
+          { /* Change code above this line */ }
+        </div>
+    );
+  }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/add-comments-in-jsx.md

@@ -0,0 +1,82 @@
+---
+id: 5a24bbe0dba28a8d3cbd4c5e
+title: Agrega comentarios en JSX
+challengeType: 6
+forumTopicId: 301376
+dashedName: add-comments-in-jsx
+---
+
+# --description--
+
+JSX es una sintaxis que se compila en JavaScript válido. A veces, para facilitar la lectura, es necesario añadir comentarios al código. Como la mayoría de los lenguajes de programación, JSX tiene su propia manera de hacerlo.
+
+Para agregar comentarios dentro de JSX, se utiliza la sintaxis `{/* */}` para envolver el texto del comentario.
+
+# --instructions--
+
+El editor de código tiene un elemento JSX similar al que creaste en el último desafío. Agrega un comentario en algún lugar dentro del elemento `div`, sin modificar los elementos `h1` o `p`.
+
+# --hints--
+
+La constante `JSX` debe devolver un elemento `div`.
+
+```js
+assert(JSX.type === 'div');
+```
+
+El elemento `div` debe contener una etiqueta `h1` como primer elemento.
+
+```js
+assert(JSX.props.children[0].type === 'h1');
+```
+
+El elemento `div` debe contener una etiqueta `p` como segundo elemento.
+
+```js
+assert(JSX.props.children[1].type === 'p');
+```
+
+Los elementos `h1` y `p` existentes no deben ser modificados.
+
+```js
+assert(
+  JSX.props.children[0].props.children === 'This is a block of JSX' &&
+    JSX.props.children[1].props.children === "Here's a subtitle"
+);
+```
+
+El elemento`JSX` debe usar una sintaxis de comentario válida.
+
+```js
+assert(/<div>[\s\S]*{\s*\/\*[\s\S]*\*\/\s*}[\s\S]*<\/div>/.test(code));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(JSX, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const JSX = (
+  <div>
+    <h1>This is a block of JSX</h1>
+    <p>Here's a subtitle</p>
+  </div>
+);
+```
+
+# --solutions--
+
+```jsx
+const JSX = (
+<div>
+  <h1>This is a block of JSX</h1>
+  { /* this is a JSX comment */ }
+  <p>Here's a subtitle</p>
+</div>);
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/add-event-listeners.md

@@ -0,0 +1,179 @@
+---
+id: 5a24c314108439a4d403617e
+title: Agrega detector de eventos (Event Listeners)
+challengeType: 6
+forumTopicId: 301377
+dashedName: add-event-listeners
+---
+
+# --description--
+
+El método `componentDidMount()` es también el mejor lugar para adjuntar cualquier detector de eventos que necesites agregar para una funcionalidad específica. React proporciona un sistema de eventos sintético que envuelve el sistema de eventos nativo presente en los navegadores. Esto significa que el sistema de eventos sintético se comporta exactamente igual independientemente del navegador del usuario, incluso si los eventos nativos se comportan diferentes entre diferentes navegadores.
+
+Ya has estado usando algunos de estos controladores de eventos sintéticos como `onClick()`. El sistema de eventos sintéticos de React es excelente para usar en la mayoría de las interacciones que administrarás en elementos DOM. Sin embargo, si quieres adjuntar un controlador de eventos al documento o objetos de la ventana, debes hacerlo directamente.
+
+# --instructions--
+
+Agrega un detector de eventos en el método `componentDidMount()` para los eventos `keydown` y haz que estos eventos ejecuten el callback `handleKeyPress()`. Puedes usar `document.addEventListener()` el cual toma el evento (en comillas) como primer argumento y el callback como segundo argumento.
+
+Posteriormente, en `componentWillUnmount()`, remueve este mismo detector de eventos. Puedes pasar los mismos argumentos al `document.removeEventListener()`. Es buena práctica usar este método del ciclo de vida para hacer cualquier limpieza en un componente de React antes de que estos sean desmontados y destruidos. Removiendo los detectores de eventos es un ejemplo de una limpieza de este tipo.
+
+# --hints--
+
+`MyComponent` debe mostrar un elemento `div` el cual envuelva una etiqueta `h1`.
+
+```js
+assert(
+  (() => {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    return mockedComponent.find('div').children().find('h1').length === 1;
+  })()
+);
+```
+
+Un detector `keydown` debe ser agregado al documento en `componentDidMount`.
+
+```js
+assert(
+  (() => {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    const didMountString = mockedComponent
+      .instance()
+      .componentDidMount.toString();
+    return new RegExp(
+      'document.addEventListener(.|\n|\r)+keydown(.|\n|\r)+this.handleKeyPress'
+    ).test(didMountString);
+  })()
+);
+```
+
+Un detector `keydown` debe ser removido del documento en `componentWillUnmount`.
+
+```js
+assert(
+  (() => {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    const willUnmountString = mockedComponent
+      .instance()
+      .componentWillUnmount.toString();
+    return new RegExp(
+      'document.removeEventListener(.|\n|\r)+keydown(.|\n|\r)+this.handleKeyPress'
+    ).test(willUnmountString);
+  })()
+);
+```
+
+Una vez que el componente se ha montado, pulsando `enter` debe actualizar el estado y renderizar la etiqueta `h1`.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const beforeState = mockedComponent.state('message');
+  const beforeText = mockedComponent.find('h1').text();
+  const pressEnterKey = () => {
+    mockedComponent.instance().handleKeyPress({ keyCode: 13 });
+    return waitForIt(() => {
+      mockedComponent.update();
+      return {
+        state: mockedComponent.state('message'),
+        text: mockedComponent.find('h1').text()
+      };
+    });
+  };
+  const afterKeyPress = await pressEnterKey();
+  assert(
+    beforeState !== afterKeyPress.state && beforeText !== afterKeyPress.text
+  );
+};
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      message: ''
+    };
+    this.handleEnter = this.handleEnter.bind(this);
+    this.handleKeyPress = this.handleKeyPress.bind(this);
+  }
+  // Change code below this line
+  componentDidMount() {
+
+  }
+  componentWillUnmount() {
+
+  }
+  // Change code above this line
+  handleEnter() {
+    this.setState((state) => ({
+      message: state.message + 'You pressed the enter key! '
+    }));
+  }
+  handleKeyPress(event) {
+    if (event.keyCode === 13) {
+      this.handleEnter();
+    }
+  }
+  render() {
+    return (
+      <div>
+        <h1>{this.state.message}</h1>
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      message: ''
+    };
+    this.handleKeyPress = this.handleKeyPress.bind(this);
+    this.handleEnter = this.handleEnter.bind(this);  }
+  componentDidMount() {
+    // Change code below this line
+    document.addEventListener('keydown', this.handleKeyPress);
+    // Change code above this line
+  }
+  componentWillUnmount() {
+    // Change code below this line
+    document.removeEventListener('keydown', this.handleKeyPress);
+    // Change code above this line
+  }
+  handleEnter() {
+    this.setState((state) => ({
+      message: state.message + 'You pressed the enter key! '
+    }));
+  }
+  handleKeyPress(event) {
+    if (event.keyCode === 13) {
+      this.handleEnter();
+    }
+  }
+  render() {
+    return (
+      <div>
+        <h1>{this.state.message}</h1>
+      </div>
+    );
+  }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/add-inline-styles-in-react.md

@@ -0,0 +1,112 @@
+---
+id: 5a24c314108439a4d4036182
+title: Agrega inline styles en React
+challengeType: 6
+forumTopicId: 301378
+dashedName: add-inline-styles-in-react
+---
+
+# --description--
+
+Es posible que hayas notado en el último desafío que había otras diferencias de sintaxis con respecto a los "inline styles" de HTML, además del atributo `style` establecido en un objeto de JavaScript. En primer lugar, los nombres de ciertas propiedades de estilo CSS utilizan camel case. Por ejemplo, el último desafío establece el tamaño de la fuente con `fontSize` en lugar de `font-size`. Palabras que incluyen guion como `font-size` son sintaxis inválidas para propiedades de objetos de JavaScript, por lo que React utiliza camel case. Como regla, cualquier propiedad de estilo que usa guion se escribe usando camel case en JSX.
+
+Todas las unidades de longitud del valor de la propiedad (como `height`, `width`, y `fontSize`) se supone que están en `px` a menos que se especifique lo contrario. Si quieres utilizar `em`, por ejemplo, debes envolver el valor y las unidades entre comillas, como `{fontSize: "4em"}`. Aparte de los valores de longitud que por defecto son `px`, todos los demás valores de las propiedades deben estar envueltos entre comillas.
+
+# --instructions--
+
+Si tienes una gran cantidad de estilos, puedes asignar un `object` de estilos a una constante para mantener tu código organizado. Declara tu constante "styles" como una variable global al principio del archivo. Inicializa la constante `styles` y asígnale un `object` con tres propiedades de estilo y sus valores. Dale al `div` un color `purple`, un tamaño de fuente de `40` y un borde `2px solid purple`. Luego asigna al atributo `style` la constante `styles`.
+
+# --hints--
+
+La variable `styles` debe ser un `object` con tres propiedades.
+
+```js
+assert(Object.keys(styles).length === 3);
+```
+
+La variable `styles` debe contener una propiedad `color` con el valor de `purple`.
+
+```js
+assert(styles.color === 'purple');
+```
+
+La variable `styles` debe contener una propiedad `fontSize` con el valor de `40`.
+
+```js
+assert(styles.fontSize === 40);
+```
+
+La variable `styles` debe contener una propiedad `border` con el valor de `2px solid purple`.
+
+```js
+assert(styles.border === '2px solid purple');
+```
+
+El componente debe renderizar un elemento `div`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.shallow(React.createElement(Colorful));
+    return mockedComponent.type() === 'div';
+  })()
+);
+```
+
+El elemento `div` debe tener sus estilos definidos en el objeto `styles`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.shallow(React.createElement(Colorful));
+    return (
+      mockedComponent.props().style.color === 'purple' &&
+      mockedComponent.props().style.fontSize === 40 &&
+      mockedComponent.props().style.border === '2px solid purple'
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<Colorful />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+// Change code above this line
+class Colorful extends React.Component {
+  render() {
+    // Change code below this line
+    return (
+      <div style={{color: "yellow", fontSize: 24}}>Style Me!</div>
+    );
+    // Change code above this line
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+const styles = {
+  color: "purple",
+  fontSize: 40,
+  border: "2px solid purple"
+};
+// Change code above this line
+class Colorful extends React.Component {
+  render() {
+    // Change code below this line
+    return (
+      <div style={styles}>Style Me!</div>
+    );
+    // Change code above this line
+  }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/bind-this-to-a-class-method.md

@@ -0,0 +1,136 @@
+---
+id: 5a24c314108439a4d4036174
+title: Vincula 'this' a un método de clase
+challengeType: 6
+forumTopicId: 301379
+dashedName: bind-this-to-a-class-method
+---
+
+# --description--
+
+Además de configurar y actualizar `state`, también puedes definir métodos para tu componente de clase. Un método de clase normalmente necesita usar la palabra clave `this` para que pueda acceder a propiedades de la clase (como `state` y `props`) dentro del ámbito del método. Hay algunas maneras de permitir que los métodos de tu clase accedan a `this`.
+
+Una forma común es enlazar explícitamente `this` en el constructor para que `this` se vincule a los métodos de clase cuando el componente es inicializado. Habrás notado que el último desafío utilizó `this.handleClick = this.handleClick.bind(this)` para su método `handleClick` en el constructor. Luego, cuando llamas a una función como `this.setState()` dentro de su método de clase, `this` se refiere a la clase y no será `undefined`.
+
+**Nota:** La palabra clave `this` es uno de los aspectos más confusos de JavaScript pero juega un papel importante en React. Aunque su comportamiento aquí es totalmente normal, estas lecciones no son el lugar para una revisión a profundidad de `this`, así que por favor, ¡consulta otras lecciones si lo anterior es confuso!
+
+# --instructions--
+
+El editor de código tiene un componente con un `state` que mantiene un seguimiento del texto. También tiene un método que le permite establecer el texto a `You clicked!`. Sin embargo, el método no funciona porque está utilizando la palabra clave `this` que no está definida. Arréglalo explícitamente ligando `this` al método `handleClick()` en el constructor del componente.
+
+A continuación, añade un click handler al elemento `button` en el método render. Debes activar el método `handleClick()` cuando el botón recibe un evento de clic. Recuerda que el método que pasas al `onClick` handler necesita llaves porque debe ser interpretado directamente como JavaScript.
+
+Una vez que completes los pasos anteriores debes poder hacer clic en el botón y ver `You clicked!`.
+
+# --hints--
+
+`MyComponent` debe devolver un elemento `div` que envuelve dos elementos, un botón y un elemento `h1`, en ese orden.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(MyComponent)).find('div').length === 1 &&
+    Enzyme.mount(React.createElement(MyComponent))
+      .find('div')
+      .childAt(0)
+      .type() === 'button' &&
+    Enzyme.mount(React.createElement(MyComponent))
+      .find('div')
+      .childAt(1)
+      .type() === 'h1'
+);
+```
+
+El estado de `MyComponent` debe inicializarse con el par de clave valor `{ text: "Hello" }`.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(MyComponent)).state('text') === 'Hello'
+);
+```
+
+Al hacer clic en el botón `button` se debe ejecutar el método `handleClick` y establecer el estado `text` en `You clicked!`.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const first = () => {
+    mockedComponent.setState({ text: 'Hello' });
+    return waitForIt(() => mockedComponent.state('text'));
+  };
+  const second = () => {
+    mockedComponent.find('button').simulate('click');
+    return waitForIt(() => mockedComponent.state('text'));
+  };
+  const firstValue = await first();
+  const secondValue = await second();
+  assert(firstValue === 'Hello' && secondValue === 'You clicked!');
+};
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      text: "Hello"
+    };
+    // Change code below this line
+
+    // Change code above this line
+  }
+  handleClick() {
+    this.setState({
+      text: "You clicked!"
+    });
+  }
+  render() {
+    return (
+      <div>
+        { /* Change code below this line */ }
+        <button>Click Me</button>
+        { /* Change code above this line */ }
+        <h1>{this.state.text}</h1>
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      text: "Hello"
+    };
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick() {
+    this.setState({
+      text: "You clicked!"
+    });
+  }
+  render() {
+    return (
+      <div>
+        <button onClick = {this.handleClick}>Click Me</button>
+        <h1>{this.state.text}</h1>
+      </div>
+    );
+  }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/change-inline-css-conditionally-based-on-component-state.md

@@ -0,0 +1,176 @@
+---
+id: 5a24c314108439a4d4036189
+title: Cambia el CSS inline condicionalmente según el estado del componente
+challengeType: 6
+forumTopicId: 301380
+dashedName: change-inline-css-conditionally-based-on-component-state
+---
+
+# --description--
+
+Hasta ahora has visto varias aplicaciones de renderizado condicional y el uso de inline styles. Aquí va un ejemplo más que combina los dos temas. También puedes renderizar CSS condicionalmente según el estado de un componente de React. Para hacer esto, tienes que verificar una condición, y si esa condición se cumple, modificas el objeto de estilos que está asignado a los elementos JSX del método render.
+
+Este paradigma es importante entenderlo porque es un cambio dramático del enfoque más tradicional de aplicar estilos modificando elementos del DOM directamente (muy común con jQuery, por ejemplo). Con ese enfoque, debes hacer un seguimiento de cuándo cambian los elementos y también hacer una manipulación real directa. Puede resultar difícil hacer un seguimiento de los cambios, lo que podría hacer que tu interfaz de usuario sea impredecible. Cuando configuras un objeto de estilo en función de una condición, estás describiendo cómo debería verse la interfaz de usuario en función del estado de la aplicación. Existe un flujo claro de información que sólo se mueve en una dirección. Este es el método preferido para escribir aplicaciones con React.
+
+# --instructions--
+
+El editor de código tiene un simple componente de entrada controlado, con un estilo de borde. Quieres aplicar un estilo rojo a este borde si el usuario escribe más de 15 caracteres de texto en la casilla de entrada. Agrega una condición para verificarlo y, si la condición es válida, establece el estilo del borde de la casilla de entrada como `3px solid red`. Puedes probarlo introduciendo texto en la casilla de entrada.
+
+# --hints--
+
+El componente `GateKeeper` debe renderizar un elemento `div`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(GateKeeper));
+    return mockedComponent.find('div').length === 1;
+  })()
+);
+```
+
+El componente `GateKeeper` debe inicializarse con una clave de estado `input` establecida con una cadena vacía.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(GateKeeper));
+    return mockedComponent.state().input === '';
+  })()
+);
+```
+
+El componente `GateKeeper` debe renderizar una etiqueta `h3` y una etiqueta `input`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(GateKeeper));
+    return (
+      mockedComponent.find('h3').length === 1 &&
+      mockedComponent.find('input').length === 1
+    );
+  })()
+);
+```
+
+La etiqueta `input`, inicialmente debe tener un estilo `1px solid black` para la propiedad `border`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(GateKeeper));
+    return (
+      mockedComponent.find('input').props().style.border === '1px solid black'
+    );
+  })()
+);
+```
+
+La etiqueta `input` debe tener un estilo de borde de `3px solid red` si el valor de entrada en el estado tiene más de 15 caracteres.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
+  const mockedComponent = Enzyme.mount(React.createElement(GateKeeper));
+  const simulateChange = (el, value) =>
+    el.simulate('change', { target: { value } });
+  let initialStyle = mockedComponent.find('input').props().style.border;
+  const state_1 = () => {
+    mockedComponent.setState({ input: 'this is 15 char' });
+    return waitForIt(() => mockedComponent.find('input').props().style.border);
+  };
+  const state_2 = () => {
+    mockedComponent.setState({
+      input: 'A very long string longer than 15 characters.'
+    });
+    return waitForIt(() => mockedComponent.find('input').props().style.border);
+  };
+  const style_1 = await state_1();
+  const style_2 = await state_2();
+  assert(
+    initialStyle === '1px solid black' &&
+      style_1 === '1px solid black' &&
+      style_2 === '3px solid red'
+  );
+};
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<GateKeeper />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class GateKeeper extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: ''
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleChange(event) {
+    this.setState({ input: event.target.value })
+  }
+  render() {
+    let inputStyle = {
+      border: '1px solid black'
+    };
+    // Change code below this line
+
+    // Change code above this line
+    return (
+      <div>
+        <h3>Don't Type Too Much:</h3>
+        <input
+          type="text"
+          style={inputStyle}
+          value={this.state.input}
+          onChange={this.handleChange} />
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class GateKeeper extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: ''
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleChange(event) {
+    this.setState({ input: event.target.value })
+  }
+  render() {
+    let inputStyle = {
+      border: '1px solid black'
+    };
+    if (this.state.input.length > 15) {
+      inputStyle.border = '3px solid red';
+    };
+    return (
+      <div>
+        <h3>Don't Type Too Much:</h3>
+        <input
+          type="text"
+          style={inputStyle}
+          value={this.state.input}
+          onChange={this.handleChange} />
+      </div>
+    );
+  }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/compose-react-components.md

@@ -0,0 +1,199 @@
+---
+id: 5a24c314108439a4d4036166
+title: Compón componentes de React
+challengeType: 6
+forumTopicId: 301381
+dashedName: compose-react-components
+---
+
+# --description--
+
+A medida que los desafíos continúan utilizando composiciones más complejas con componentes de React y JSX, hay un una cosa importante a tener en cuenta. Renderizar componentes de clase de estilo ES6 dentro de otros componentes es igual que renderizar los componentes simples que usaste en los últimos desafíos. Puedes renderizar elementos JSX, componentes funcionales sin estado y componentes de clase ES6, dentro de otros componentes.
+
+# --instructions--
+
+En el editor de código, el componente `TypesOfFood` ya está incluyendo (renderizando) un componente llamado `Vegetables`. Además, también está el componente `Fruits` del último desafío.
+
+Anida dos componentes dentro de `Fruits` - primero `NonCitrus` y luego `Citrus`. Ambos componentes se te proporcionan en segundo plano. A continuación, anida el componente de clase `Fruits` en el componente `TypesOfFood`, debajo del encabezado (header) `h1` y encima de `Vegetables`. El resultado debe ser una serie de componentes anidados, que utiliza dos tipos de componentes diferentes.
+
+# --hints--
+
+El componente `TypesOfFood` debe devolver un solo elemento `div`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
+    return mockedComponent.children().type() === 'div';
+  })()
+);
+```
+
+El componente `TypesOfFood` debe devolver el componente `Fruits`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
+    return mockedComponent.children().childAt(1).name() === 'Fruits';
+  })()
+);
+```
+
+El componente `Fruits` debe devolver el componente `NonCitrus` y el componente `Citrus`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
+    return (
+      mockedComponent.find('Fruits').children().find('NonCitrus').length ===
+        1 &&
+      mockedComponent.find('Fruits').children().find('Citrus').length === 1
+    );
+  })()
+);
+```
+
+El componente `TypesOfFood` debe devolver el componente `Vegetables` debajo del componente `Fruits`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
+    return mockedComponent.children().childAt(2).name() === 'Vegetables';
+  })()
+);
+```
+
+# --seed--
+
+## --before-user-code--
+
+```jsx
+class NonCitrus extends React.Component {
+  render() {
+    return (
+      <div>
+        <h4>Non-Citrus:</h4>
+        <ul>
+          <li>Apples</li>
+          <li>Blueberries</li>
+          <li>Strawberries</li>
+          <li>Bananas</li>
+        </ul>
+      </div>
+    );
+  }
+};
+class Citrus extends React.Component {
+  render() {
+    return (
+      <div>
+        <h4>Citrus:</h4>
+        <ul>
+          <li>Lemon</li>
+          <li>Lime</li>
+          <li>Orange</li>
+          <li>Grapefruit</li>
+        </ul>
+      </div>
+    );
+  }
+};
+class Vegetables extends React.Component {
+  render() {
+    return (
+      <div>
+        <h2>Vegetables:</h2>
+        <ul>
+          <li>Brussel Sprouts</li>
+          <li>Broccoli</li>
+          <li>Squash</li>
+        </ul>
+      </div>
+    );
+     }
+};
+```
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<TypesOfFood />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class Fruits extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h2>Fruits:</h2>
+        { /* Change code below this line */ }
+
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+
+class TypesOfFood extends React.Component {
+  constructor(props) {
+     super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h1>Types of Food:</h1>
+        { /* Change code below this line */ }
+
+        { /* Change code above this line */ }
+        <Vegetables />
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class Fruits extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h2>Fruits:</h2>
+        { /* Change code below this line */ }
+        <NonCitrus />
+        <Citrus />
+        { /* Change code above this line */ }
+      </div>
+    )
+  }
+}
+
+class TypesOfFood extends React.Component {
+  constructor(props) {
+     super(props);
+  }
+    render() {
+      return (
+        <div>
+        <h1>Types of Food:</h1>
+          { /* Change code below this line */ }
+          <Fruits />
+          { /* Change code above this line */ }
+          <Vegetables />
+        </div>
+      );
+    }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/create-a-complex-jsx-element.md

@@ -0,0 +1,110 @@
+---
+id: 5a24bbe0dba28a8d3cbd4c5d
+title: Crea un elemento JSX complejo
+challengeType: 6
+forumTopicId: 301382
+dashedName: create-a-complex-jsx-element
+---
+
+# --description--
+
+El último desafío fue un ejemplo sencillo de JSX, pero JSX también puede representar HTML más complejo.
+
+Una cosa importante que debes saber sobre JSX anidado es que debe devolver un solo elemento.
+
+Este elemento principal contendría a todos los demás niveles de elementos anidados.
+
+Por ejemplo, varios elementos JSX escritos al mismo nivel sin elemento contenedor principal no se transpilarán.
+
+Aquí va un ejemplo:
+
+**JSX válido:**
+
+```jsx
+<div>
+  <p>Paragraph One</p>
+  <p>Paragraph Two</p>
+  <p>Paragraph Three</p>
+</div>
+```
+
+**JSX inválido:**
+
+```jsx
+<p>Paragraph One</p>
+<p>Paragraph Two</p>
+<p>Paragraph Three</p>
+```
+
+# --instructions--
+
+Define una nueva constante `JSX` que renderice un `div` que contenga los siguientes elementos en orden:
+
+Un `h1`, un `p` y una lista desordenada que contiene tres elementos `li`. Puedes incluir cualquier texto que desees dentro de cada elemento.
+
+**Nota: **Al renderizar varios elementos de esta forma, puedes envolverlos todos entre paréntesis, pero no es estrictamente necesario. Observa también que este desafío usa una etiqueta `div` para envolver a todos los elementos hijos dentro de un solo elemento principal. Si eliminas el `div`, JSX ya no se podrá transpilar. Ten esto en cuenta, ya que también será así cuando devuelvas elementos JSX en los componentes de React.
+
+# --hints--
+
+La constante `JSX` debe devolver un elemento `div`.
+
+```js
+assert(JSX.type === 'div');
+```
+
+El `div` debe contener una etiqueta `h1` como primer elemento.
+
+```js
+assert(JSX.props.children[0].type === 'h1');
+```
+
+El `div` debe contener una etiqueta `p` como segundo elemento.
+
+```js
+assert(JSX.props.children[1].type === 'p');
+```
+
+El `div` debe contener una etiqueta `ul` como tercer elemento.
+
+```js
+assert(JSX.props.children[2].type === 'ul');
+```
+
+El `ul` debe contener tres elementos `li`.
+
+```js
+assert(
+  JSX.props.children
+    .filter((ele) => ele.type === 'ul')[0]
+    .props.children.filter((ele) => ele.type === 'li').length === 3
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(JSX, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+
+```
+
+# --solutions--
+
+```jsx
+const JSX = (
+<div>
+  <h1>Hello JSX!</h1>
+  <p>Some info</p>
+  <ul>
+    <li>An item</li>
+    <li>Another item</li>
+    <li>A third item</li>
+  </ul>
+</div>);
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/create-a-component-with-composition.md

@@ -0,0 +1,134 @@
+---
+id: 5a24c314108439a4d4036164
+title: Crear un componente con composición
+challengeType: 6
+forumTopicId: 301383
+dashedName: create-a-component-with-composition
+---
+
+# --description--
+
+Ahora veremos cómo podemos componer múltiples componentes de React juntos. Imagina que estás construyendo una aplicación y has creado tres componentes: un `Navbar`, `Dashboard` y `Footer`.
+
+Para componer estos componentes juntos, se podría crear un componente `App` *parent* que renderiza cada uno de estos tres componentes como *children*. Para renderizar un componente como hijo en un componente React, se incluye el nombre del componente escrito como una etiqueta HTML personalizada en el JSX. Por ejemplo, en el método `render` se puede escribir:
+
+```jsx
+return (
+ <App>
+  <Navbar />
+  <Dashboard />
+  <Footer />
+ </App>
+)
+```
+
+Cuando React encuentra una etiqueta HTML personalizada que hace referencia a otro componente (un nombre de componente envuelto en `< />` como en este ejemplo), renderiza el marcado de ese componente en la ubicación de la etiqueta. Esto debería ilustrar la relación padre/hijo entre el componente `App` y `Navbar`, `Dashboard`, y `Footer`.
+
+# --instructions--
+
+En el editor de código, hay un componente funcional simple llamado `ChildComponent` y un componente de clase llamado `ParentComponent`. Compón los dos juntos renderizando el `ChildComponent` dentro del `ParentComponent`. Asegúrate de cerrar la etiqueta `ChildComponent` con una barra diagonal.
+
+**Nota:** `ChildComponent` se define con una función de flecha ES6 porque es una práctica muy común al usar React. Sin embargo, has de saber que se trata de una función simple. Si no estás familiarizado con la sintaxis de la función flecha, consulta la sección de JavaScript.
+
+# --hints--
+
+El componente React debe devolver un único elemento `div`.
+
+```js
+assert(
+  (function () {
+    var shallowRender = Enzyme.shallow(React.createElement(ParentComponent));
+    return shallowRender.type() === 'div';
+  })()
+);
+```
+
+El componente debe devolver dos elementos anidados.
+
+```js
+assert(
+  (function () {
+    var shallowRender = Enzyme.shallow(React.createElement(ParentComponent));
+    return shallowRender.children().length === 2;
+  })()
+);
+```
+
+El componente debe devolver el `ChildComponent` como un segundo hijo.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ParentComponent));
+    return (
+      mockedComponent.find('ParentComponent').find('ChildComponent').length ===
+      1
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<ParentComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const ChildComponent = () => {
+  return (
+    <div>
+      <p>I am the child</p>
+    </div>
+  );
+};
+
+class ParentComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h1>I am the parent</h1>
+        { /* Change code below this line */ }
+
+
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+const ChildComponent = () => {
+  return (
+    <div>
+      <p>I am the child</p>
+    </div>
+  );
+};
+
+class ParentComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h1>I am the parent</h1>
+        { /* Change code below this line */ }
+        <ChildComponent />
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/create-a-controlled-form.md

@@ -0,0 +1,220 @@
+---
+id: 5a24c314108439a4d4036179
+title: Crea un formulario controlado
+challengeType: 6
+forumTopicId: 301384
+dashedName: create-a-controlled-form
+---
+
+# --description--
+
+El último desafío mostró que React puede controlar el estado interno de ciertos elementos como `input` y `textarea`, lo que los hace componentes controlados. Esto también se aplica a otros elementos del formulario, incluyendo el elemento regular HTML `form`.
+
+# --instructions--
+
+El componente `MyForm` está configurado con un `form` vacío, con un manejador de envío. El manejador de envío será llamado cuando se envíe el formulario.
+
+Hemos añadido un botón que envía el formulario. Puedes ver que tiene el `type` establecido en `submit` indicando que es el botón que controla el formulario. Añade el elemento `input` en el formulario `form` y establece sus atributos `value` y `onChange()` como el último desafío. A continuación, debes completar el método `handleSubmit` para que establezca la propiedad de estado del componente `submit` al valor de entrada actual en el `state` local.
+
+**Nota:** También debes llamar a `event.preventDefault()` en el controlador de envío, para evitar el comportamiento predeterminado de envío de formulario que actualizará la página web. Para la comodidad de los campistas, el comportamiento predeterminado se ha desactivado aquí para evitar que las actualizaciones restablezcan el código de desafío.
+
+Por último, crea una etiqueta `h1` después del `form` que renderiza el valor de `submit` del `state` del componente. A continuación, puedes escribir en el formulario y hacer clic en el botón (o pulsar intro), y deberías ver tu entrada renderizada en la página.
+
+# --hints--
+
+`MyForm` debe retornar un elemento `div` que contiene un `form` y una etiqueta `h1`. El formulario debe incluir un `input` y un `button`.
+
+```js
+assert(
+  (() => {
+    const mockedComponent = Enzyme.mount(React.createElement(MyForm));
+    return (
+      mockedComponent.find('div').children().find('form').length === 1 &&
+      mockedComponent.find('div').children().find('h1').length === 1 &&
+      mockedComponent.find('form').children().find('input').length === 1 &&
+      mockedComponent.find('form').children().find('button').length === 1
+    );
+  })()
+);
+```
+
+El estado de `MyForm` debe inicializar con propiedades `input` y `submit`, ambos establecidos a cadenas vacías.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(MyForm)).state('input') === '' &&
+    Enzyme.mount(React.createElement(MyForm)).state('submit') === ''
+);
+```
+
+Escribir en el elemento `input` debe actualizar la propiedad `input` del estado del componente.
+
+```js
+(() => {
+  const mockedComponent = Enzyme.mount(React.createElement(MyForm));
+  const _1 = () => {
+    mockedComponent.setState({ input: '' });
+    return mockedComponent.state('input');
+  };
+  const _2 = () => {
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: 'TestInput' } });
+    return {
+      state: mockedComponent.state('input'),
+      inputVal: mockedComponent.find('input').props().value
+    };
+  };
+  const before = _1();
+  const after = _2();
+  assert(
+    before === '' &&
+      after.state === 'TestInput' &&
+      after.inputVal === 'TestInput'
+  );
+})();
+```
+
+El envío del formulario debe ejecutar `handleSubmit`, el cual debe establecer la propiedad `submit` en estado igual a la entrada actual.
+
+```js
+(() => {
+  const mockedComponent = Enzyme.mount(React.createElement(MyForm));
+  const _1 = () => {
+    mockedComponent.setState({ input: '' });
+    mockedComponent.setState({ submit: '' });
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: 'SubmitInput' } });
+    return mockedComponent.state('submit');
+  };
+  const _2 = () => {
+    mockedComponent.find('form').simulate('submit');
+    return mockedComponent.state('submit');
+  };
+  const before = _1();
+  const after = _2();
+  assert(before === '' && after === 'SubmitInput');
+})();
+```
+
+`handleSubmit` debe llamar a `event.preventDefault`
+
+```js
+assert(
+  __helpers.isCalledWithNoArgs(
+    'event.preventDefault',
+    MyForm.prototype.handleSubmit.toString()
+  )
+);
+```
+
+El encabezado `h1` debe renderizar el valor del campo `submit` del estado del componente.
+
+```js
+(() => {
+  const mockedComponent = Enzyme.mount(React.createElement(MyForm));
+  const _1 = () => {
+    mockedComponent.setState({ input: '' });
+    mockedComponent.setState({ submit: '' });
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: 'TestInput' } });
+    return mockedComponent.find('h1').text();
+  };
+  const _2 = () => {
+    mockedComponent.find('form').simulate('submit');
+    return mockedComponent.find('h1').text();
+  };
+  const before = _1();
+  const after = _2();
+  assert(before === '' && after === 'TestInput');
+})();
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyForm />, document.getElementById('root'));
+```
+
+## --seed-contents--
+
+```jsx
+class MyForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: '',
+      submit: ''
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+  handleChange(event) {
+    this.setState({
+      input: event.target.value
+    });
+  }
+  handleSubmit(event) {
+    // Change code below this line
+
+    // Change code above this line
+  }
+  render() {
+    return (
+      <div>
+        <form onSubmit={this.handleSubmit}>
+          {/* Change code below this line */}
+
+          {/* Change code above this line */}
+          <button type='submit'>Submit!</button>
+        </form>
+        {/* Change code below this line */}
+
+        {/* Change code above this line */}
+      </div>
+    );
+  }
+}
+```
+
+# --solutions--
+
+```jsx
+class MyForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: '',
+      submit: ''
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+  handleChange(event) {
+    this.setState({
+      input: event.target.value
+    });
+  }
+  handleSubmit(event) {
+    event.preventDefault();
+    this.setState(state => ({
+      submit: state.input
+    }));
+  }
+  render() {
+    return (
+      <div>
+        <form onSubmit={this.handleSubmit}>
+          <input value={this.state.input} onChange={this.handleChange} />
+          <button type='submit'>Submit!</button>
+        </form>
+        <h1>{this.state.submit}</h1>
+      </div>
+    );
+  }
+}
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/create-a-controlled-input.md

@@ -0,0 +1,150 @@
+---
+id: 5a24c314108439a4d4036178
+title: Crea una entrada controlada
+challengeType: 6
+forumTopicId: 301385
+dashedName: create-a-controlled-input
+---
+
+# --description--
+
+Tu aplicación puede tener interacciones más complejas entre `state` y la interfaz de usuario renderizada. Por ejemplo, elementos de control de formulario para la entrada de texto, tales como `input` y `textarea`, mantienen su propio estado en el DOM como los tipos de usuario. Con React, puedes mover este estado mutable hacia el `state` de un componente de React. La entrada del usuario se convierte en parte del `state` de la aplicación, así que React controla el valor de ese campo de entrada. Por lo general, si tienes componentes de React con campos de entrada en los que el usuario puede escribir, será un formulario de entrada controlado.
+
+# --instructions--
+
+El editor de código tiene el esqueleto de un componente llamado `ControlledInput` para crear un elemento `input` controlado. El `state` del componente ya está inicializado con una propiedad `input` que contiene una cadena vacía. Este valor representa el texto que un usuario escribe en el campo `input`.
+
+Primero, crea un método llamado `handleChange()` que tiene un parámetro llamado `event`. Cuando el método es llamado, este recibe un objeto `event` que contiene una cadena de texto del elemento `input`. Puedes acceder a esta cadena con `event.target.value` dentro del método. Actualiza la propiedad `input` del `state` del componente con esta nueva cadena.
+
+En el método `render`, crea el elemento `input` encima de la etiqueta `h4`. Añade un atributo `value` que es igual a la propiedad `input` del `state` del componente. Luego añade un manejador de eventos `onChange()` establecido al método `handleChange()`.
+
+Cuando escribes en el cuadro de entrada, ese texto es procesado por el método `handleChange()`, establecido como la propiedad `input` en el `state` local, y renderizado como el valor en el cuadro `input` de la página. El `state` del componente es la única fuente de verdad con respecto a los datos de entrada.
+
+Por último, pero no menos importante, no olvides añadir los enlaces necesarios en el constructor.
+
+# --hints--
+
+`ControlledInput` debe devolver un elemento `div` que contiene un `input` y una etiqueta `p`.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(ControlledInput))
+    .find('div')
+    .children()
+    .find('input').length === 1 &&
+    Enzyme.mount(React.createElement(ControlledInput))
+      .find('div')
+      .children()
+      .find('p').length === 1
+);
+```
+
+El estado de `ControlledInput` debe inicializarse con una propiedad `input` establecida a una cadena vacía.
+
+```js
+assert.strictEqual(
+  Enzyme.mount(React.createElement(ControlledInput)).state('input'),
+  ''
+);
+```
+
+Escribir en el elemento de entrada debe actualizar el estado y el valor de la entrada, y el elemento `p` debe renderizar este estado a medida que escribas.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(ControlledInput));
+  const _1 = () => {
+    mockedComponent.setState({ input: '' });
+    return waitForIt(() => mockedComponent.state('input'));
+  };
+  const _2 = () => {
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: 'TestInput' } });
+    return waitForIt(() => ({
+      state: mockedComponent.state('input'),
+      text: mockedComponent.find('p').text(),
+      inputVal: mockedComponent.find('input').props().value
+    }));
+  };
+  const before = await _1();
+  const after = await _2();
+  assert(
+    before === '' &&
+      after.state === 'TestInput' &&
+      after.text === 'TestInput' &&
+      after.inputVal === 'TestInput'
+  );
+};
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<ControlledInput />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class ControlledInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: ''
+    };
+    // Change code below this line
+
+    // Change code above this line
+  }
+  // Change code below this line
+
+  // Change code above this line
+  render() {
+    return (
+      <div>
+        { /* Change code below this line */}
+
+        { /* Change code above this line */}
+        <h4>Controlled Input:</h4>
+        <p>{this.state.input}</p>
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class ControlledInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: ''
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleChange(event) {
+    this.setState({
+      input: event.target.value
+    });
+  }
+  render() {
+    return (
+      <div>
+        <input
+          value={this.state.input}
+          onChange={this.handleChange} />
+        <h4>Controlled Input:</h4>
+
+        <p>{this.state.input}</p>
+      </div>
+    );
+  }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/create-a-react-component.md

@@ -0,0 +1,102 @@
+---
+id: 5a24c314108439a4d4036163
+title: Crea un componente de React
+challengeType: 6
+forumTopicId: 301386
+dashedName: create-a-react-component
+---
+
+# --description--
+
+La otra forma de definir un componente React es con la sintaxis de clase de ES6 `class`. En el siguiente ejemplo, `Kitten` hereda de `React.Component`:
+
+```jsx
+class Kitten extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <h1>Hi</h1>
+    );
+  }
+}
+```
+
+Esto crea una clase de ES6 `Kitten` que hereda de la clase `React.Component`. Así que la clase `Kitten` ahora tiene acceso a muchas características útiles de React, como el estado local y el ciclo de vida de los "hooks". No te preocupes si aún no estás familiarizado con estos términos, ya que se tratarán con más detalle en los desafíos posteriores. También ten en cuenta que la clase `Kitten` tiene un `constructor` definido dentro de ella que llama a `super()`. Utiliza `super()` para llamar al constructor de la clase padre, en este caso `React.Component`. El constructor es un método especial utilizado durante la inicialización de objetos que se crean con la palabra clave `class`. Es una mejor práctica llamar al `constructor` de un componente con `super`, y pasar sus propiedades `props` a ambos. Esto asegura que el componente esté inicializado correctamente. Por ahora, sepan que es estándar que se incluya este código. Pronto verás otros usos para el constructor, así como las `props`.
+
+# --instructions--
+
+`MyComponent` está definido en el editor de código usando la sintaxis de clase. Termina de escribir el método `render` para que devuelva un elemento `div` que contiene un `h1` con el texto `Hello React!`.
+
+# --hints--
+
+El componente React debe devolver un único elemento `div`.
+
+```js
+assert(Enzyme.shallow(React.createElement(MyComponent)).type() === 'div');
+```
+
+El `div` retornado debe renderizar un encabezado `h1` dentro de él.
+
+```js
+assert(
+  /<div><h1>.*<\/h1><\/div>/.test(
+    Enzyme.shallow(React.createElement(MyComponent)).html()
+  )
+);
+```
+
+El encabezado `h1` debe contener la cadena `Hello React!`.
+
+```js
+assert(
+  Enzyme.shallow(React.createElement(MyComponent)).html() ===
+    '<div><h1>Hello React!</h1></div>'
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    // Change code below this line
+
+
+
+    // Change code above this line
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    // Change code below this line
+    return (
+      <div>
+        <h1>Hello React!</h1>
+      </div>
+    );
+    // Change code above this line
+  }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/create-a-simple-jsx-element.md

@@ -0,0 +1,57 @@
+---
+id: 587d7dbc367417b2b2512bb1
+title: Crea un elemento JSX simple
+challengeType: 6
+forumTopicId: 301390
+dashedName: create-a-simple-jsx-element
+---
+
+# --description--
+
+React es una librería de vistas de código abierto creada y mantenida por Facebook. Es una gran herramienta para hacer la interfaz de usuario (UI) de aplicaciones web modernas.
+
+React usa una extensión de sintaxis de JavaScript llamada JSX que te permite escribir HTML directamente dentro de JavaScript. Esto tiene muchos beneficios. Te permite utilizar el poder programático completo de JavaScript dentro de HTML, y ayuda a mantener tu código legible. En su mayor parte, JSX es similar al HTML que ya has aprendido. Sin embargo, hay algunas diferencias clave que se abordarán a lo largo de estos desafíos.
+
+Por ejemplo, dado que JSX es una extensión sintáctica de JavaScript, se puede escribir JavaScript directamente dentro de JSX. Para hacer esto, simplemente incluye el código que deseas que sea tratado como JavaScript entre llaves: `{ 'this is treated as JavaScript code' }`. Ten esto en cuenta, ya que se utiliza en varios desafíos futuros.
+
+Sin embargo, debido a que JSX no es JavaScript válido, el código JSX debe ser compilado en JavaScript. El transpilador Babel es una herramienta muy popular para este proceso. Para tu comodidad, ya se ha añadido tras bambalinas para estos desafíos. Si escribes JSX no válido sintácticamente, verás que la primera prueba de estos desafíos falla.
+
+Vale la pena señalar que por debajo los desafíos están llamando `ReactDOM.render(JSX, document.getElementById('root'))`. Esta llamada de función es la que coloca tu JSX en la representación ligera del DOM de React. React entonces utiliza capturas instantáneas de su propio DOM para optimizar actualizando sólo partes específicas del DOM.
+
+# --instructions--
+
+El código actual utiliza JSX para asignar un elemento `div` a la constante `JSX`. Reemplaza el `div` por un elemento `h1` y añade el texto `Hello JSX!` dentro de él.
+
+# --hints--
+
+La constante `JSX` debe devolver un elemento `h1`.
+
+```js
+assert(JSX.type === 'h1');
+```
+
+La etiqueta `h1` debe incluir el texto `Hello JSX!`
+
+```js
+assert(Enzyme.shallow(JSX).contains('Hello JSX!'));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(JSX, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const JSX = <div></div>;
+```
+
+# --solutions--
+
+```jsx
+const JSX = <h1>Hello JSX!</h1>;
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/create-a-stateful-component.md

@@ -0,0 +1,134 @@
+---
+id: 5a24c314108439a4d4036170
+title: Crea un componente de estado
+challengeType: 6
+forumTopicId: 301391
+dashedName: create-a-stateful-component
+---
+
+# --description--
+
+Uno de los temas más importantes en React es `state`. El estado consiste en cualquier dato que tu aplicación necesite conocer y que pueda cambiar con el tiempo. Quieres que tus aplicaciones respondan a los cambios de estado y presenten una interfaz de usuario actualizada cuando sea necesario. React ofrece una buena solución para el manejo de estado de aplicaciones web modernas.
+
+Creas un estado en un componente de React declarando una propiedad `state` en la clase del componente en su `constructor`. Esto inicializa el componente con `state` cuando se crea. La propiedad `state` debe establecerse en un `object` de JavaScript. Declararlo se ve así:
+
+```jsx
+this.state = {
+
+}
+```
+
+Tienes acceso al objeto `state` a lo largo de la vida de tu componente. Puedes actualizarlo, renderizarlo en tu interfaz de usuario y pasarlo como propiedades a componentes hijos. El objeto `state` puede ser tan complejo o simple como lo necesites. Ten en cuenta que debes crear un componente de clase heredando `React.Component` para crear un `state` como este.
+
+# --instructions--
+
+Hay un componente en el editor de código que está intentando renderizar una propiedad `name` desde su `state`. Sin embargo, no hay ningún `state` definido. Inicializa el componente con `state` en el `constructor` y asigna tu nombre a una propiedad de `name`.
+
+# --hints--
+
+`StatefulComponent` debe existir y renderizar.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(
+      React.createElement(StatefulComponent)
+    );
+    return mockedComponent.find('StatefulComponent').length === 1;
+  })()
+);
+```
+
+`StatefulComponent` debe renderizar un `div` y un elemento `h1`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(
+      React.createElement(StatefulComponent)
+    );
+    return (
+      mockedComponent.find('div').length === 1 &&
+      mockedComponent.find('h1').length === 1
+    );
+  })()
+);
+```
+
+El estado de `StatefulComponent` debe inicializarse con una propiedad `name` establecida a una cadena.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(
+      React.createElement(StatefulComponent)
+    );
+    const initialState = mockedComponent.state();
+    return (
+      typeof initialState === 'object' && typeof initialState.name === 'string'
+    );
+  })()
+);
+```
+
+La propiedad `name` en el estado de `StatefulComponent` debe renderizarse en el elemento `h1`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(
+      React.createElement(StatefulComponent)
+    );
+    const initialState = mockedComponent.state();
+    return mockedComponent.find('h1').text() === initialState.name;
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<StatefulComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class StatefulComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    // Only change code below this line
+
+    // Only change code above this line
+  }
+  render() {
+    return (
+      <div>
+        <h1>{this.state.name}</h1>
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class StatefulComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: 'freeCodeCamp!'
+    }
+  }
+  render() {
+    return (
+      <div>
+        <h1>{this.state.name}</h1>
+      </div>
+    );
+  }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/create-a-stateless-functional-component.md

@@ -0,0 +1,102 @@
+---
+id: 5a24c314108439a4d4036162
+title: Crear un componente funcional sin estado
+challengeType: 6
+forumTopicId: 301392
+dashedName: create-a-stateless-functional-component
+---
+
+# --description--
+
+Los componentes son el núcleo de React. Todo en React es un componente y aquí aprenderás a crear uno.
+
+Hay dos maneras de crear un componente React. La primera forma es utilizar una función JavaScript. Definir un componente de esta manera crea un *componente funcional sin estado*. El concepto de estado en una solicitud se abordará en retos posteriores. Por ahora, piensa en un componente sin estado como uno que puede recibir datos y renderizarlos, pero no administra o rastrea los cambios en esos datos. (Cubriremos la segunda manera de crear un componente React en el siguiente desafío.)
+
+Para crear un componente con una función, simplemente escribe una función JavaScript que devuelva ya sea JSX o `null`. Una cosa importante a tener en cuenta es que React requiere que tu nombre de función comience con una letra mayúscula. Aquí hay un ejemplo de un componente funcional sin estado que asigna una clase HTML en JSX:
+
+```jsx
+const DemoComponent = function() {
+  return (
+    <div className='customClass' />
+  );
+};
+```
+
+Después de ser transpilado, el `<div>` tendrá una clase CSS de `customClass`.
+
+Debido a que un componente JSX representa HTML, podrías poner varios componentes juntos para crear una página HTML más compleja. Esta es una de las ventajas clave de la arquitectura de componentes que React proporciona. Te permite componer tu interfaz de usuario de muchos componentes separados y aislados. Esto hace más fácil construir y mantener complejas interfaces de usuario.
+
+# --instructions--
+
+El editor de código tiene una función llamada `MyComponent`. Completa esta función para que retorne un único elemento `div` que contiene alguna cadena de texto.
+
+**Nota:** El texto se considera hijo del elemento `div`, por lo que no podrás utilizar una etiqueta de autocierre.
+
+# --hints--
+
+`MyComponent` debe retornar JSX.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    return mockedComponent.length === 1;
+  })()
+);
+```
+
+`MyComponent` debe renderizar un elemento `div`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    return mockedComponent.children().type() === 'div';
+  })()
+);
+```
+
+El elemento `div` debe contener una cadena de texto.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    return mockedComponent.find('div').text() !== '';
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const MyComponent = function() {
+  // Change code below this line
+
+
+
+  // Change code above this line
+}
+```
+
+# --solutions--
+
+```jsx
+const MyComponent = function() {
+  // Change code below this line
+  return (
+    <div>
+      Demo Solution
+    </div>
+  );
+  // Change code above this line
+}
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/define-an-html-class-in-jsx.md

@@ -0,0 +1,62 @@
+---
+id: 5a24c314108439a4d4036160
+title: Define una clase HTML en JSX
+challengeType: 6
+forumTopicId: 301393
+dashedName: define-an-html-class-in-jsx
+---
+
+# --description--
+
+Ahora que te sientes cómodo escribiendo JSX, te preguntarás cuanto difiere de HTML.
+
+Hasta ahora, puede parecer que HTML y JSX son exactamente iguales.
+
+Una diferencia clave en JSX es que ya no puedes usar la palabra `class` para definir clases HTML. Esto es debido a que `class` es una palabra reservada en JavaScript. En su lugar, JSX utiliza `className`.
+
+De hecho, la convención de nomenclatura para todos los atributos HTML y referencias a eventos en JSX se convierte a camelCase. Por ejemplo, un evento de clic en JSX es `onClick`, en lugar de `onclick`. Del mismo modo, `onchange` se convierte en `onChange`. Si bien se trata de una diferencia sutil, es importante tenerlo en cuenta de ahora en adelante.
+
+# --instructions--
+
+Aplica una clase `myDiv` al `div` proporcionado en el código JSX.
+
+# --hints--
+
+La constante `JSX` debe devolver un elemento `div`.
+
+```js
+assert.strictEqual(JSX.type, 'div');
+```
+
+`div` debe tener una clase `myDiv`.
+
+```js
+assert.strictEqual(JSX.props.className, 'myDiv');
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(JSX, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const JSX = (
+  <div>
+    <h1>Add a class to this div</h1>
+  </div>
+);
+```
+
+# --solutions--
+
+```jsx
+const JSX = (
+<div className = 'myDiv'>
+  <h1>Add a class to this div</h1>
+</div>);
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/give-sibling-elements-a-unique-key-attribute.md

@@ -0,0 +1,147 @@
+---
+id: 5a24c314108439a4d403618b
+title: Proporciona a los elementos hermanos un atributo de clave única
+challengeType: 6
+forumTopicId: 301394
+dashedName: give-sibling-elements-a-unique-key-attribute
+---
+
+# --description--
+
+El último desafío mostró cómo el método `map` es usado para representar dinámicamente un número de elementos según la entrada del usuario. Sin embargo, faltaba una pieza importante de ese ejemplo. Cuando creas un arreglo de elementos, cada uno necesita un atributo `key` establecido en un valor único. React usa estas claves para realizar un seguimiento de los elementos que se agregan, cambian o eliminan. Esto ayuda a que el proceso de re-renderización sea más eficiente cuando la lista se modifica de alguna manera.
+
+**Nota:** Las claves solo necesitan ser únicas entre elementos hermanos, no es necesario que sean únicas globalmente en tu aplicación.
+
+# --instructions--
+
+El editor de código tiene un arreglo con algunos frameworks frontend y un componente funcional sin estado llamado `Frameworks()`. `Frameworks()` necesita mapear el arreglo a una lista desordenada, como en el último desafío. Finaliza la escritura del callback `map` para devolver un elemento `li` por cada framework en el arreglo `frontEndFrameworks`. Esta vez, debes asegurarte de dar a cada elemento `li` un atributo `key`, establecido a un valor único. Los elementos `li` también deben contener texto de `frontEndFrameworks`.
+
+Normalmente, deseas hacer que la clave sea algo que identifique de manera única el elemento que se está procesando. Como último recurso se puede utilizar el índice del arreglo, pero normalmente se debe intentar usar una identificación única.
+
+# --hints--
+
+El componente `Frameworks` debe de existir y renderizar a la página.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(Frameworks)).find('Frameworks').length === 1
+);
+```
+
+`Frameworks` debe renderizar un elemento `h1`.
+
+```js
+assert(Enzyme.mount(React.createElement(Frameworks)).find('h1').length === 1);
+```
+
+`Frameworks` debe renderizar un elemento `ul`.
+
+```js
+assert(Enzyme.mount(React.createElement(Frameworks)).find('ul').length === 1);
+```
+
+La etiqueta `ul` debe renderizar 6 elementos hijos `li`.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(Frameworks)).find('ul').children().length ===
+    6 &&
+    Enzyme.mount(React.createElement(Frameworks))
+      .find('ul')
+      .childAt(0)
+      .name() === 'li' &&
+    Enzyme.mount(React.createElement(Frameworks)).find('li').length === 6
+);
+```
+
+Cada elemento de la lista de elementos debe tener un atributo `key` único.
+
+```js
+assert(
+  (() => {
+    const ul = Enzyme.mount(React.createElement(Frameworks)).find('ul');
+    const keys = new Set([
+      ul.childAt(0).key(),
+      ul.childAt(1).key(),
+      ul.childAt(2).key(),
+      ul.childAt(3).key(),
+      ul.childAt(4).key(),
+      ul.childAt(5).key()
+    ]);
+    return keys.size === 6;
+  })()
+);
+```
+
+Cada elemento de la lista de elementos debe contener un texto de `frontEndFrameworks`.
+
+```js
+assert(
+  (() => {
+    const li = Enzyme.mount(React.createElement(Frameworks))
+      .find('ul')
+      .children();
+    return [...Array(5)].every((_, i) =>
+      frontEndFrameworks.includes(li.at(i).text())
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<Frameworks />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const frontEndFrameworks = [
+  'React',
+  'Angular',
+  'Ember',
+  'Knockout',
+  'Backbone',
+  'Vue'
+];
+
+function Frameworks() {
+  const renderFrameworks = null; // Change this line
+  return (
+    <div>
+      <h1>Popular Front End JavaScript Frameworks</h1>
+      <ul>
+        {renderFrameworks}
+      </ul>
+    </div>
+  );
+};
+```
+
+# --solutions--
+
+```jsx
+const frontEndFrameworks = [
+  'React',
+  'Angular',
+  'Ember',
+  'Knockout',
+  'Backbone',
+  'Vue'
+];
+
+function Frameworks() {
+  const renderFrameworks = frontEndFrameworks.map((fw, i) => <li key={i}>{fw}</li>);
+  return (
+    <div>
+      <h1>Popular Front End JavaScript Frameworks</h1>
+      <ul>
+        {renderFrameworks}
+      </ul>
+    </div>
+  );
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/introducing-inline-styles.md

@@ -0,0 +1,104 @@
+---
+id: 5a24c314108439a4d4036181
+title: Introducción a los estilos en línea
+challengeType: 6
+forumTopicId: 301395
+dashedName: introducing-inline-styles
+---
+
+# --description--
+
+Hay otros conceptos complejos que añaden poderosas capacidades a tu código de React. Pero tal vez te estés preguntando sobre el problema más sencillo de cómo dar estilo a esos elementos JSX que creas en React. Probablemente sepas que no será exactamente lo mismo que trabajar con HTML debido a [la manera en que aplicas clases a los elementos JSX](/learn/front-end-development-libraries/react/define-an-html-class-in-jsx).
+
+Si importas estilos desde una hoja de estilos, esto no es muy diferente. Aplica una clase a tu elemento JSX usando el atributo `className`, y aplica estilos a la clase en tu hoja de estilos. Otra opción es aplicar estilos en línea, los cuales son muy comunes en el desarrollo de ReactJS.
+
+Los estilos en línea se aplican a los elementos JSX de forma similar a como se hace en HTML, pero con algunas diferencias en JSX. Aquí hay un ejemplo de un estilo en línea en HTML:
+
+```jsx
+<div style="color: yellow; font-size: 16px">Mellow Yellow</div>
+```
+
+Los elementos JSX usan el atributo `style`, pero debido a la forma en que JSX es transpilado, no puede establecer el valor a un `string`. Es su lugar, lo establece igual a un `object` de JavaScript. Aquí un ejemplo:
+
+```jsx
+<div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div>
+```
+
+¿Notas cómo ponemos en camelCase la propiedad `fontSize`? Esto es porque React no aceptará claves kebab-case en el objeto de estilo. React aplicará el nombre correcto de la propiedad por nosotros en el HTML.
+
+# --instructions--
+
+Agrega un atributo `style` al `div` en el editor de código para darle al texto un color rojo y un tamaño de fuente de `72px`.
+
+Ten en cuenta que puedes establecer opcionalmente el tamaño de la fuente para que sea un número, omitiendo las unidades `px`, o escribirlo como `72px`.
+
+# --hints--
+
+El componente debe renderizar un elemento `div`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(Colorful));
+    return mockedComponent.children().type() === 'div';
+  })()
+);
+```
+
+El elemento `div` debe tener un color de `red`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(Colorful));
+    return mockedComponent.children().props().style.color === 'red';
+  })()
+);
+```
+
+El elemento `div` debe tener un tamaño de fuente de `72px`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(Colorful));
+    return (
+      mockedComponent.children().props().style.fontSize === 72 ||
+      mockedComponent.children().props().style.fontSize === '72' ||
+      mockedComponent.children().props().style.fontSize === '72px'
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<Colorful />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class Colorful extends React.Component {
+  render() {
+    return (
+      <div>Big Red</div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class Colorful extends React.Component {
+  render() {
+    return (
+      <div style={{color: "red", fontSize: 72}}>Big Red</div>
+    );
+  }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/learn-about-self-closing-jsx-tags.md

@@ -0,0 +1,75 @@
+---
+id: 5a24c314108439a4d4036161
+title: Aprende sobre las etiquetas JSX auto-cerradas
+challengeType: 6
+forumTopicId: 301396
+dashedName: learn-about-self-closing-jsx-tags
+---
+
+# --description--
+
+Hasta ahora, has visto cómo JSX difiere de HTML de una manera clave con el uso de `className` vs. `class` para definir clases HTML.
+
+Otra forma importante en la que JSX difiere de HTML está en la idea de la etiqueta de auto-cierre.
+
+En HTML, casi todas las etiquetas tienen una etiqueta de apertura y cierre: `<div></div>`; la etiqueta de cierre siempre tiene una barra inclinada antes del nombre de la etiqueta que está cerrando. Sin embargo, hay instancias especiales en HTML llamadas “etiquetas auto-cerradas”, o etiquetas que no requieren una etiqueta de apertura y cierre antes de que otra etiqueta pueda comenzar.
+
+Por ejemplo, la etiqueta salto de línea puede escribirse como `<br>` o como `<br />`, pero nunca debería escribirse como `<br></br>`, ya que no contiene ningún contenido.
+
+En JSX, las reglas son un poco diferentes. Cualquier elemento JSX se puede escribir con una etiqueta de auto-cierre, y cada elemento debe ser cerrado. La etiqueta de salto de línea, por ejemplo, siempre debe escribirse como `<br />` para ser un JSX válido que puede ser transpilado. Por otra parte, un `<div>` puede escribirse como `<div />` o `<div></div>`. La diferencia es que en la primera versión de sintaxis no hay forma de incluir nada en la `<div />`. Verás en desafíos posteriores que esta sintaxis es útil al renderizar componentes de React.
+
+# --instructions--
+
+Corrige los errores en el editor de código para que sea JSX válido y se transpile exitosamente. Asegúrate de no cambiar nada del contenido: sólo tienes que cerrar las etiquetas donde se necesite.
+
+# --hints--
+
+La constante `JSX` debe devolver un elemento `div`.
+
+```js
+assert.strictEqual(JSX.type, 'div');
+```
+
+El `div` debe contener una etiqueta `br`.
+
+```js
+assert(Enzyme.shallow(JSX).find('br').length === 1);
+```
+
+El `div` debe contener una etiqueta `hr`.
+
+```js
+assert(Enzyme.shallow(JSX).find('hr').length === 1);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(JSX, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const JSX = (
+  <div>
+    <h2>Welcome to React!</h2> <br >
+    <p>Be sure to close all tags!</p>
+    <hr >
+  </div>
+);
+```
+
+# --solutions--
+
+```jsx
+const JSX = (
+<div>
+  <h2>Welcome to React!</h2> <br />
+  <p>Be sure to close all tags!</p>
+  <hr />
+</div>
+);
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/optimize-re-renders-with-shouldcomponentupdate.md

@@ -0,0 +1,187 @@
+---
+id: 5a24c314108439a4d4036180
+title: Optimiza re-renderizadores con shouldComponentUpdate
+challengeType: 6
+forumTopicId: 301398
+dashedName: optimize-re-renders-with-shouldcomponentupdate
+---
+
+# --description--
+
+Hasta ahora, si cualquier componente recibe un nuevo `state` o un nuevo `props`, se vuelve a renderizar a sí mismo y a todos sus hijos. Normalmente, esto está bien. Pero React proporciona un método de ciclo de vida al que puedes llamar cuando los componentes hijos reciben nuevos `state` o `props`, y declarar específicamente si los componentes deben actualizarse o no. El método es `shouldComponentUpdate()`y toma `nextProps` y `nextState` como parámetros.
+
+Este método es una forma útil de optimizar el rendimiento. Por ejemplo, el comportamiento predeterminado es que el componente re-renderiza cuando recibe nuevos `props`, incluso si los `props` no han cambiado. Puedes usar `shouldComponentUpdate()` para evitar esto comparando los `props`. El método debe devolver un valor `boolean` que le diga a React si actualizar o no el componente. Puedes comparar los "props" actuales (`this.props`) a los siguientes "props" (`nextProps`) para determinar si necesita actualizar o no, y devuelve `true` o `false` en consecuencia.
+
+# --instructions--
+
+El método `shouldComponentUpdate()` se añade en un componente llamado `OnlyEvens`. Actualmente, este método devuelve `true`, así que `OnlyEvens` re-renderizar cada vez que recibe nuevos `props`. Modifica el método para que `OnlyEvens` se actualice sólo si el `value` de sus nuevos accesorios es par. Haz clic en el botón `Add` y observa el orden de los eventos en la consola de tu navegador mientras se activan los "hooks" del ciclo de vida.
+
+# --hints--
+
+El componente `Controller` debe renderizar el componente `OnlyEvens` como un componente hijo.
+
+```js
+assert(
+  (() => {
+    const mockedComponent = Enzyme.mount(React.createElement(Controller));
+    return (
+      mockedComponent.find('Controller').length === 1 &&
+      mockedComponent.find('OnlyEvens').length === 1
+    );
+  })()
+);
+```
+
+El método `shouldComponentUpdate` debe definirse en el componente `OnlyEvens`.
+
+```js
+assert(
+  (() => {
+    const child = React.createElement(OnlyEvens)
+      .type.prototype.shouldComponentUpdate.toString()
+      .replace(/s/g, '');
+    return child !== 'undefined';
+  })()
+);
+```
+
+El componente `OnlyEvens` debe devolver una etiqueta `h1` que renderiza el valor de `this.props.value`.
+
+```js
+(() => {
+  const mockedComponent = Enzyme.mount(React.createElement(Controller));
+  const first = () => {
+    mockedComponent.setState({ value: 1000 });
+    return mockedComponent.find('h1').html();
+  };
+  const second = () => {
+    mockedComponent.setState({ value: 10 });
+    return mockedComponent.find('h1').html();
+  };
+  const firstValue = first();
+  const secondValue = second();
+  assert(firstValue === '<h1>1000</h1>' && secondValue === '<h1>10</h1>');
+})();
+```
+
+`OnlyEvens` debe re-renderizar sólo cuando `nextProps.value` sea par.
+
+```js
+(() => {
+  const mockedComponent = Enzyme.mount(React.createElement(Controller));
+  const first = () => {
+    mockedComponent.setState({ value: 8 });
+    return mockedComponent.find('h1').text();
+  };
+  const second = () => {
+    mockedComponent.setState({ value: 7 });
+    return mockedComponent.find('h1').text();
+  };
+  const third = () => {
+    mockedComponent.setState({ value: 42 });
+    return mockedComponent.find('h1').text();
+  };
+  const firstValue = first();
+  const secondValue = second();
+  const thirdValue = third();
+  assert(firstValue === '8' && secondValue === '8' && thirdValue === '42');
+})();
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<Controller />, document.getElementById('root'));
+```
+
+## --seed-contents--
+
+```jsx
+class OnlyEvens extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    console.log('Should I update?');
+    // Change code below this line
+    return true;
+    // Change code above this line
+  }
+  componentDidUpdate() {
+    console.log('Component re-rendered.');
+  }
+  render() {
+    return <h1>{this.props.value}</h1>;
+  }
+}
+
+class Controller extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: 0
+    };
+    this.addValue = this.addValue.bind(this);
+  }
+  addValue() {
+    this.setState(state => ({
+      value: state.value + 1
+    }));
+  }
+  render() {
+    return (
+      <div>
+        <button onClick={this.addValue}>Add</button>
+        <OnlyEvens value={this.state.value} />
+      </div>
+    );
+  }
+}
+```
+
+# --solutions--
+
+```jsx
+class OnlyEvens extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    console.log('Should I update?');
+    // Change code below this line
+    return nextProps.value % 2 === 0;
+    // Change code above this line
+  }
+  componentDidUpdate() {
+    console.log('Component re-rendered.');
+  }
+  render() {
+    return <h1>{this.props.value}</h1>;
+  }
+}
+
+class Controller extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: 0
+    };
+    this.addValue = this.addValue.bind(this);
+  }
+  addValue() {
+    this.setState(state => ({
+      value: state.value + 1
+    }));
+  }
+  render() {
+    return (
+      <div>
+        <button onClick={this.addValue}>Add</button>
+        <OnlyEvens value={this.state.value} />
+      </div>
+    );
+  }
+}
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/override-default-props.md

@@ -0,0 +1,112 @@
+---
+id: 5a24c314108439a4d403616c
+title: Reemplaza las "props" predeterminadas
+challengeType: 6
+forumTopicId: 301399
+dashedName: override-default-props
+---
+
+# --description--
+
+La capacidad de establecer valores por defecto para las props es una característica útil en React. La manera de reemplazar las props predeterminadas es establecer explícitamente los valores de las props para un componente.
+
+# --instructions--
+
+El componente `ShoppingCart` ahora renderiza un componente hijo `Items`. Este componente `Items` tiene una prop predeterminada `quantity` establecida al entero `0`. Reemplaza la prop predeterminada pasando un valor de `10` para `quantity`.
+
+**Nota:** Recuerda que la sintaxis para agregar una prop a un componente se parece a la sintaxis para agregar atributos en un elemento HTML. Sin embargo, dado que el valor de `quantity` es un entero, no irá entre comillas pero debe estar envuelto entre llaves. Por ejemplo, `{100}`. Esta sintaxis le dice a JSX que interprete el valor dentro de las llaves directamente como JavaScript.
+
+# --hints--
+
+El componente `ShoppingCart` debe renderizarse.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart));
+    return mockedComponent.find('ShoppingCart').length === 1;
+  })()
+);
+```
+
+El componente `Items` debe renderizarse.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart));
+    return mockedComponent.find('Items').length === 1;
+  })()
+);
+```
+
+El componente `Items` debe tener una prop de `{ quantity: 10 }` heredada desde el componente `ShoppingCart`.
+
+```js
+(getUserInput) =>
+  assert(
+    (function () {
+      const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart));
+      return (
+        mockedComponent.find('Items').props().quantity == 10 &&
+        getUserInput('index')
+          .replace(/ /g, '')
+          .includes('<Itemsquantity={10}/>')
+      );
+    })()
+  );
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<ShoppingCart />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const Items = (props) => {
+  return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
+}
+
+Items.defaultProps = {
+  quantity: 0
+}
+
+class ShoppingCart extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    { /* Change code below this line */ }
+    return <Items />
+    { /* Change code above this line */ }
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+const Items = (props) => {
+  return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
+}
+
+Items.defaultProps = {
+  quantity: 0
+}
+
+class ShoppingCart extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    { /* Change code below this line */ }
+    return <Items quantity = {10} />
+    { /* Change code above this line */ }
+  }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/pass-a-callback-as-props.md

@@ -0,0 +1,217 @@
+---
+id: 5a24c314108439a4d403617b
+title: Pasa un callback como "props"
+challengeType: 6
+forumTopicId: 301400
+dashedName: pass-a-callback-as-props
+---
+
+# --description--
+
+Puedes pasar `state` como "props" a los componentes hijos, pero no estás limitado a pasar datos. También puedes pasar funciones manejadoras o cualquier método que se defina en un componente React a un componente hijo. Así es como tú permites que los componentes hijos interactúen con sus componentes padres. Pasas métodos a un hijo igual que un "prop" normal. Se le asigna un nombre y tienes acceso a ese nombre de método en `this.props` en el componente hijo.
+
+# --instructions--
+
+Hay tres componentes descritos en el editor de código. El componente `MyApp` es el padre que renderizará los componentes hijos `GetInput` y `RenderInput`. Añade el componente `GetInput` al método de renderizar en `MyApp`, luego pásale un "prop" llamado `input` asignado a `inputValue` desde el estado `state` de `MyApp`. También crea un "prop" llamado `handleChange` y pasa el controlador de entrada `handleChange` a este.
+
+A continuación, añade `RenderInput` al método de renderizar en `MyApp`, luego crea un "prop" llamado `input` y pasa él `inputValue` desde el estado `state` a este. Una vez que hayas terminado podrás escribir en el campo `input` en el componente `GetInput`, que luego llama al método manejador en su padre a través de "props". Esto actualiza la entrada en el `state` del padre, que se pasa como "props" a ambos hijos. Observa cómo fluyen los datos entre los componentes y cómo la única fuente de verdad sigue siendo el `state` del componente padre. Es cierto que este ejemplo es un poco inventado, pero debe servir para ilustrar cómo los datos y los callbacks pueden ser pasados entre componentes React.
+
+# --hints--
+
+El componente `MyApp` debe renderizarse.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyApp));
+    return mockedComponent.find('MyApp').length === 1;
+  })()
+);
+```
+
+El componente `GetInput` debe renderizarse.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyApp));
+    return mockedComponent.find('GetInput').length === 1;
+  })()
+);
+```
+
+El componente `RenderInput` debe renderizarse.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyApp));
+    return mockedComponent.find('RenderInput').length === 1;
+  })()
+);
+```
+
+El componente `GetInput` debe recibir la propiedad de estado `MyApp` `inputValue` como "props" y contener un elemento `input` que modifica el estado de `MyApp`.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyApp));
+  const state_1 = () => {
+    mockedComponent.setState({ inputValue: '' });
+    return waitForIt(() => mockedComponent.state());
+  };
+  const state_2 = () => {
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: 'TestInput' } });
+    return waitForIt(() => mockedComponent.state());
+  };
+  const updated_1 = await state_1();
+  const updated_2 = await state_2();
+  assert(updated_1.inputValue === '' && updated_2.inputValue === 'TestInput');
+};
+```
+
+El componente `RenderInput` debe recibir la propiedad de estado `MyApp` `inputValue` como "props".
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyApp));
+  const state_1 = () => {
+    mockedComponent.setState({ inputValue: 'TestName' });
+    return waitForIt(() => mockedComponent);
+  };
+  const updated_1 = await state_1();
+  assert(updated_1.find('p').text().includes('TestName'));
+};
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyApp />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class MyApp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      inputValue: ''
+    }
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleChange(event) {
+    this.setState({
+      inputValue: event.target.value
+    });
+  }
+  render() {
+    return (
+       <div>
+        { /* Change code below this line */ }
+
+        { /* Change code above this line */ }
+       </div>
+    );
+  }
+};
+
+class GetInput extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h3>Get Input:</h3>
+        <input
+          value={this.props.input}
+          onChange={this.props.handleChange}/>
+      </div>
+    );
+  }
+};
+
+class RenderInput extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h3>Input Render:</h3>
+        <p>{this.props.input}</p>
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class MyApp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      inputValue: ''
+    }
+  this.handleChange = this.handleChange.bind(this);
+  }
+  handleChange(event) {
+    this.setState({
+      inputValue: event.target.value
+    });
+  }
+  render() {
+    return (
+       <div>
+         <GetInput
+           input={this.state.inputValue}
+           handleChange={this.handleChange}/>
+         <RenderInput
+           input={this.state.inputValue}/>
+       </div>
+    );
+  }
+};
+
+class GetInput extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h3>Get Input:</h3>
+        <input
+          value={this.props.input}
+          onChange={this.props.handleChange}/>
+      </div>
+    );
+  }
+};
+
+class RenderInput extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h3>Input Render:</h3>
+        <p>{this.props.input}</p>
+      </div>
+    );
+  }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/pass-an-array-as-props.md

@@ -0,0 +1,186 @@
+---
+id: 5a24c314108439a4d403616a
+title: Pasa un arreglo como props
+challengeType: 6
+forumTopicId: 301401
+dashedName: pass-an-array-as-props
+---
+
+# --description--
+
+El último desafío demostró cómo pasar información desde un componente padre a un componente hijo como `props` o propiedades. Este desafío busca demostrar cómo se pueden pasar arreglos como `props`. Para pasar un arreglo a un elemento JSX, debe ser tratado como JavaScript y envolverlo entre llaves.
+
+```jsx
+<ParentComponent>
+  <ChildComponent colors={["green", "blue", "red"]} />
+</ParentComponent>
+```
+
+El componente hijo entonces tiene acceso a la propiedad del arreglo `colors`. Los métodos de arreglo, como `join()` pueden ser usados al acceder a la propiedad. `const ChildComponent = (props) => <p>{props.colors.join(', ')}</p>` Esto unirá a todos elementos `colors` del arreglo en una cadena separada por comas y se convertirá en: `<p>green, blue, red</p>` Más tarde, aprenderemos sobre otros métodos comunes para representar arreglos de datos en React.
+
+# --instructions--
+
+Están los componentes `List` y `ToDo` en el editor de código. Al renderizar cada `List` del componente `ToDo`, pasa una propiedad `tasks` asignada a un arreglo de tareas pendientes, por ejemplo `["walk dog", "workout"]`. Luego, accede a este arreglo de `tasks` en el componente `List`, mostrando su valor dentro del elemento `p`. Usa `join(", ")` para mostrar el arreglo `props.tasks` en el elemento `p` como una lista separada por comas. La lista de hoy debe tener al menos 2 tareas y la de mañana debe tener al menos 3 tareas.
+
+# --hints--
+
+El componente `ToDo` debe devolver un solo elemento `div`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ToDo));
+    return mockedComponent.children().first().type() === 'div';
+  })()
+);
+```
+
+El tercer hijo del componente `ToDo` debe ser una instancia del componente `List`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ToDo));
+    return mockedComponent.children().first().childAt(2).name() === 'List';
+  })()
+);
+```
+
+El quinto hijo del componente `ToDo` debe ser una instancia del componente `List`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ToDo));
+    return mockedComponent.children().first().childAt(4).name() === 'List';
+  })()
+);
+```
+
+Ambas instancias del componente `List` deben tener una propiedad llamada `tasks` y `tasks` debe ser de tipo arreglo.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ToDo));
+    return (
+      Array.isArray(mockedComponent.find('List').get(0).props.tasks) &&
+      Array.isArray(mockedComponent.find('List').get(1).props.tasks)
+    );
+  })()
+);
+```
+
+El primer componente `List` que representa las tareas de hoy debe tener 2 o más elementos.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ToDo));
+    return mockedComponent.find('List').get(0).props.tasks.length >= 2;
+  })()
+);
+```
+
+El segundo componente `List` que representa las tareas para mañana debe tener 3 o más elementos.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ToDo));
+    return mockedComponent.find('List').get(1).props.tasks.length >= 3;
+  })()
+);
+```
+
+El componente `List` debe renderizar el valor del prop `tasks` en la etiqueta `p`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ToDo));
+    return (
+      mockedComponent
+        .find('p')
+        .get(0)
+        .props.children.replace(/\s*,\s*/g, ',') ===
+        mockedComponent
+          .find('List')
+          .get(0)
+          .props.tasks.join(',')
+          .replace(/\s*,\s*/g, ',') &&
+      mockedComponent
+        .find('p')
+        .get(1)
+        .props.children.replace(/\s*,\s*/g, ',') ===
+        mockedComponent
+          .find('List')
+          .get(1)
+          .props.tasks.join(',')
+          .replace(/\s*,\s*/g, ',')
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<ToDo />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const List = (props) => {
+  { /* Change code below this line */ }
+  return <p>{}</p>
+  { /* Change code above this line */ }
+};
+
+class ToDo extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h1>To Do Lists</h1>
+        <h2>Today</h2>
+        { /* Change code below this line */ }
+        <List/>
+        <h2>Tomorrow</h2>
+        <List/>
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+const List= (props) => {
+  return <p>{props.tasks.join(', ')}</p>
+};
+
+class ToDo extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h1>To Do Lists</h1>
+        <h2>Today</h2>
+        <List tasks={['study', 'exercise']} />
+        <h2>Tomorrow</h2>
+        <List tasks={['call Sam', 'grocery shopping', 'order tickets']} />
+      </div>
+    );
+  }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/pass-props-to-a-stateless-functional-component.md

@@ -0,0 +1,164 @@
+---
+id: 5a24c314108439a4d4036169
+title: Pasa props a un componente funcional sin estado
+challengeType: 6
+forumTopicId: 301402
+dashedName: pass-props-to-a-stateless-functional-component
+---
+
+# --description--
+
+Los desafíos anteriores cubrieron varios casos de creación y composición de elementos de JSX, componentes funcionales y componentes de clase estilo ES6 en React. Con estos cimientos, ha llegado la hora de observar otro patrón de uso muy común en React: **props**. En React, se pueden pasar props, o propiedades a componentes hijos. Digamos, que tienes un componente `App` que devuelve un componente hijo llamado `Welcome`, el cual es un componente funcional sin estado. Puedes pasarle una propiedad llamada `user` a `Welcome` escribiendo:
+
+```jsx
+<App>
+  <Welcome user='Mark' />
+</App>
+```
+
+Puedes utilizar **atributos personalizados de HTML** creados por ti y soportados por React para ser pasados por props a tu componente. En este caso, la propiedad creada `user` es pasada como atributo al componente `Welcome`. Dado que `Welcome` es un componente funcional sin estado, tiene acceso a este valor de la siguiente manera:
+
+```jsx
+const Welcome = (props) => <h1>Hello, {props.user}!</h1>
+```
+
+Este valor es llamado `props` por convención y, cuando se trata de componentes funcionales sin estado, se lo considera como un argumento pasado a una función que retorna JSX. Puedes acceder el valor del argumento en el cuerpo de la función. En los componentes de clase, verás que esto es un poco diferente.
+
+# --instructions--
+
+Hay componentes `Calendar` y `CurrentDate` en el editor de código. Al prensentar `CurrentDate` desde el componente `Calendar`, pasa una propiedad de `date` asignada a la fecha actual desde el objeto `Date` de JavaScript. Luego, accede a este `prop` dentro del componente `CurrentDate`, mostrando su valor dentro de las etiquetas `p`. Tenga en cuenta que los valores `prop` se evalúen como JavaScript, deben estar encerrados dentro de corchetes, por ejemplo `date={Date()}`.
+
+# --hints--
+
+El componente `Calendar` debe retornar un único elemento `div`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(Calendar));
+    return mockedComponent.children().type() === 'div';
+  })()
+);
+```
+
+El segundo componente hijo del componente `Calendar` debe ser el componente `CurrentDate`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(Calendar));
+    return mockedComponent.children().childAt(1).name() === 'CurrentDate';
+  })()
+);
+```
+
+El componente `CurrentDate` debe tener una propiedad llamada `date`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(Calendar));
+    return mockedComponent.children().childAt(1).props().date;
+  })()
+);
+```
+
+La propiedad `date` del componente `CurrentDate` debe contener una cadena de texto.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(Calendar));
+    const prop = mockedComponent.children().childAt(1).props().date;
+    return typeof prop === 'string' && prop.length > 0;
+  })()
+);
+```
+
+La propiedad `date` debe ser generada invocando el método `Date()`
+
+```js
+assert(/<CurrentDatedate={Date\(\)}\/>/.test(__helpers.removeWhiteSpace(code)));
+```
+
+El componente `CurrentDate` debe mostrar el valor del prop `date` dentro de la etiqueta `p`.
+
+```js
+let date = 'dummy date';
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(
+      React.createElement(CurrentDate, { date })
+    );
+    return mockedComponent.find('p').html().includes(date);
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<Calendar />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const CurrentDate = (props) => {
+  return (
+    <div>
+      { /* Change code below this line */ }
+      <p>The current date is: </p>
+      { /* Change code above this line */ }
+    </div>
+  );
+};
+
+class Calendar extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h3>What date is it?</h3>
+        { /* Change code below this line */ }
+        <CurrentDate />
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+const CurrentDate = (props) => {
+  return (
+    <div>
+      { /* Change code below this line */ }
+      <p>The current date is: {props.date}</p>
+      { /* Change code above this line */ }
+    </div>
+  );
+};
+
+class Calendar extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h3>What date is it?</h3>
+        { /* Change code below this line */ }
+        <CurrentDate date={Date()} />
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/pass-state-as-props-to-child-components.md

@@ -0,0 +1,145 @@
+---
+id: 5a24c314108439a4d403617a
+title: Pasa el estado como "props" a componentes hijos
+challengeType: 6
+forumTopicId: 301403
+dashedName: pass-state-as-props-to-child-components
+---
+
+# --description--
+
+Has visto varios ejemplos de como pasar props a elementos JSX hijos y a componentes React hijos en desafíos anteriores. Te preguntarás de dónde vienen esos props. Un patrón común es tener un componente con estado que contenga el `state` importante para tu aplicación, que luego renderiza los componentes hijos. Quieres que estos componentes tengan acceso a algunas partes de ese `state`, el cual se pasa como props.
+
+Por ejemplo, tal vez tengas un componente `App` que renderiza una `Navbar`, entre otros componentes. En tu `App`, tienes un `state` que contiene mucha información del usuario, pero la `Navbar` sólo necesita acceder al nombre de usuario para poder mostrarlo. Pasas esa parte del `state` al componente `Navbar` como prop.
+
+Este patrón ilustra algunos paradigmas importantes en React. El primero es *unidirectional data flow*. El componente de estado fluye en una sola dirección descendiendo en el árbol de componentes de tu aplicación, desde el componente padre hasta los componentes hijos. Los componentes hijos únicamente reciben los datos del componente de estado que ellos necesitan. La segunda es que las aplicaciones con estado pueden ser divididas en solo algunos, o tal vez un solo, componente con estado. El resto de tus componentes simplemente reciben el estado del padre como props, y renderizan la interfaz de usuario a partir de ese estado. Esto comienza a crear una separación donde la administración de estado es manejada en una parte del código y la renderización de la interfaz de usuario en otra. Este principio de separar la lógica de estado de la lógica de la interfaz de usuario es uno de los principios clave de React. Cuando se utiliza correctamente, hace que el diseño de aplicaciones complejas y de estado sea mucho más fácil de gestionar.
+
+# --instructions--
+
+El componente `MyApp` es de estado y renderiza un componente `Navbar` como un componente hijo. Pasa la propiedad `name` en su `state` al componente hijo, luego muestra el `name` en la etiqueta `h1` que es parte del método de renderizado de `Navbar`. `name` debe aparecer luego del texto `Hello, my name is:`.
+
+# --hints--
+
+El componente `MyApp` debe renderizare con un componente `Navbar` dentro.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyApp));
+    return (
+      mockedComponent.find('MyApp').length === 1 &&
+      mockedComponent.find('Navbar').length === 1
+    );
+  })()
+);
+```
+
+El componente `Navbar` debe recibir la propiedad de estado `name` de `MyApp` como props.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyApp));
+  const setState = () => {
+    mockedComponent.setState({ name: 'TestName' });
+    return waitForIt(() => mockedComponent.find('Navbar').props());
+  };
+  const navProps = await setState();
+  assert(navProps.name === 'TestName');
+};
+```
+
+El elemento `h1` en `Navbar` debe renderizar el prop `name`.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyApp));
+  const navH1Before = mockedComponent.find('Navbar').find('h1').text();
+  const setState = () => {
+    mockedComponent.setState({ name: 'TestName' });
+    return waitForIt(() => mockedComponent.find('Navbar').find('h1').text());
+  };
+  const navH1After = await setState();
+  assert(new RegExp('TestName').test(navH1After) && navH1After !== navH1Before);
+};
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyApp />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class MyApp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: 'CamperBot'
+    }
+  }
+  render() {
+    return (
+       <div>
+         {/* Change code below this line */}
+         <Navbar />
+         {/* Change code above this line */}
+       </div>
+    );
+  }
+};
+
+class Navbar extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+    <div>
+      {/* Change code below this line */}
+      <h1>Hello, my name is: </h1>
+      {/* Change code above this line */}
+    </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class MyApp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: 'CamperBot'
+    }
+  }
+  render() {
+    return (
+       <div>
+         <Navbar name={this.state.name}/>
+       </div>
+    );
+  }
+};
+class Navbar extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+    <div>
+      <h1>Hello, my name is: {this.props.name}</h1>
+    </div>
+    );
+  }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/render-a-class-component-to-the-dom.md

@@ -0,0 +1,159 @@
+---
+id: 5a24c314108439a4d4036167
+title: Renderiza un componente de clase al DOM
+challengeType: 6
+forumTopicId: 301404
+dashedName: render-a-class-component-to-the-dom
+---
+
+# --description--
+
+Puede que recuerdes haber usado la API ReactDOM en un desafío anterior para renderizar elementos JSX al DOM. El proceso para renderizar los componentes de React será muy similar. Los últimos desafíos se centraron en los componentes y la composición, por lo que el renderizado se ha realizado tras bambalinas. Sin embargo, ninguna parte de código de React que escribas se procesará en el DOM sin realizar una llamada a la API de ReactDOM.
+
+Aquí va un recordatorio de la sintaxis: `ReactDOM.render(componentToRender, targetNode)`. El primer argumento es el componente de React que deseas renderizar. El segundo argumento es el nodo del DOM en el que deseas renderizar ese componente.
+
+Los componentes de React se pasan a `ReactDOM.render()` de manera un poco diferente a como se hace con los elementos JSX. Para los elementos JSX, pasas el nombre del elemento que deseas representar. Sin embargo, para los componentes de React, debes usar la misma sintaxis que si estuvieras renderizando un componente anidado, por ejemplo, `ReactDOM.render(<ComponentToRender />, targetNode)`. Se utiliza esta sintaxis tanto para los componentes de clase ES6 como para los componentes funcionales.
+
+# --instructions--
+
+Los componentes `Fruits` y `Vegetables` se definen por ti tras bambalinas. Renderiza ambos componentes como hijos del componente `TypesOfFood`, y luego renderiza `TypesOfFood` al DOM. Hay un `div` con `id='challenge-node'` disponible para que lo uses.
+
+# --hints--
+
+El componente `TypesOfFood` debe devolver un solo elemento `div`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
+    return mockedComponent.children().type() === 'div';
+  })()
+);
+```
+
+El componente `TypesOfFood` debe renderizar el componente `Fruits` después del elemento `h1`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
+    return mockedComponent.children().childAt(1).name() === 'Fruits';
+  })()
+);
+```
+
+El componente `TypesOfFood` debe renderizar el componente `Vegetables` después de `Fruits`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
+    return mockedComponent.children().childAt(2).name() === 'Vegetables';
+  })()
+);
+```
+
+El componente `TypesOfFood` debe renderizarse al DOM dentro del `div` con el id `challenge-node`.
+
+```js
+assert(
+  (function () {
+    const html = document.getElementById('challenge-node').childNodes[0]
+      .innerHTML;
+    return (
+      html.includes(
+        '<div><h2>Fruits:</h2><h4>Non-Citrus:</h4><ul><li>Apples</li><li>Blueberries</li><li>Strawberries</li><li>Bananas</li></ul><h4>Citrus:</h4><ul><li>Lemon</li><li>Lime</li><li>Orange</li><li>Grapefruit</li></ul></div>'
+      ) &&
+      html.includes(
+        '<div><h2>Vegetables:</h2><ul><li>Brussel Sprouts</li><li>Broccoli</li><li>Squash</li></ul></div>'
+      )
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --before-user-code--
+
+```jsx
+const Fruits = () => {
+  return (
+    <div>
+      <h2>Fruits:</h2>
+      <h4>Non-Citrus:</h4>
+        <ul>
+          <li>Apples</li>
+          <li>Blueberries</li>
+          <li>Strawberries</li>
+          <li>Bananas</li>
+        </ul>
+      <h4>Citrus:</h4>
+        <ul>
+          <li>Lemon</li>
+          <li>Lime</li>
+          <li>Orange</li>
+          <li>Grapefruit</li>
+        </ul>
+    </div>
+  );
+};
+const Vegetables = () => {
+  return (
+    <div>
+      <h2>Vegetables:</h2>
+      <ul>
+        <li>Brussel Sprouts</li>
+        <li>Broccoli</li>
+        <li>Squash</li>
+      </ul>
+    </div>
+  );
+};
+```
+
+## --seed-contents--
+
+```jsx
+class TypesOfFood extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h1>Types of Food:</h1>
+        {/* Change code below this line */}
+
+        {/* Change code above this line */}
+      </div>
+    );
+  }
+};
+
+// Change code below this line
+```
+
+# --solutions--
+
+```jsx
+class TypesOfFood extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h1>Types of Food:</h1>
+        {/* Change code below this line */}
+          <Fruits />
+           <Vegetables />
+         {/* Change code above this line */}
+      </div>
+    );
+  }
+};
+
+// Change code below this line
+ReactDOM.render(<TypesOfFood />, document.getElementById('challenge-node'));
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/render-conditionally-from-props.md

@@ -0,0 +1,303 @@
+---
+id: 5a24c314108439a4d4036188
+title: Renderiza condicionalmente a partir de "props"
+challengeType: 6
+forumTopicId: 301405
+dashedName: render-conditionally-from-props
+---
+
+# --description--
+
+Hasta ahora, has visto cómo utilizar `if/else`, `&&`, y el operador ternario (`condition ? expressionIfTrue : expressionIfFalse`) para tomar decisiones condicionales sobre qué renderizar y cuándo. Sin embargo, queda un tema importante por discutir que te permite combinar cualquier o todos estos conceptos con otra poderosa característica de React: los props. El uso de props para renderizar condicionalmente el código es muy común entre los desarrolladores de React, es decir, utilizan el valor de una prop dada para automáticamente tomar decisiones sobre qué renderizar.
+
+En este desafío, configurarás un componente hijo para tomar decisiones de renderizado basadas en props. También usarás el operador ternario, pero puedes ver cómo varios de los otros conceptos que se cubrieron en los últimos desafíos podrían ser igual de útiles en este contexto.
+
+# --instructions--
+
+El editor de código tiene dos componentes que están parcialmente definidos para ti: un padre llamado `GameOfChance`, y un hijo llamado `Results`. Se utilizan para crear un juego sencillo en el que el usuario presiona un botón para ver si gana o pierde.
+
+Primero, necesitarás una expresión simple que devuelva al azar un valor diferente cada vez que se ejecute. Puedes usar `Math.random()`. Este método devuelve un valor entre `0` (inclusivo) y `1` (exclusivo) cada vez que se llama. Así que para las probabilidades de 50/50, usa `Math.random() >= .5` en tu expresión. Estadísticamente hablando, esta expresión devolverá `true` 50% de las veces, y `false` el otro 50%. En el método de renderizado, reemplaza `null` con la expresión anterior para completar la declaración de variables.
+
+Ahora tienes una expresión que puedes usar para tomar una decisión aleatoria en el código. A continuación, debes implementar esto. Renderiza el componente `Results` como hijo de `GameOfChance`, y pásalo a `expression` como un prop llamado `fiftyFifty`. En el componente `Results`, escribe una expresión ternaria para renderizar el elemento `h1` con el texto `You Win!` o `You Lose!` basado en el prop `fiftyFifty` que está siendo pasado desde `GameOfChance`. Finalmente, asegúrate de que el método `handleClick()` está contando correctamente cada turno para que el usuario sepa cuántas veces ha jugado. Esto también sirve para que el usuario sepa que el componente se ha actualizado en caso de que gane o pierda dos veces seguidas.
+
+# --hints--
+
+El componente `GameOfChance` debe existir y renderizarse en la página.
+
+```js
+assert.strictEqual(
+  Enzyme.mount(React.createElement(GameOfChance)).find('GameOfChance').length,
+  1
+);
+```
+
+`GameOfChance` debe devolver un solo elemento `button`.
+
+```js
+assert.strictEqual(
+  Enzyme.mount(React.createElement(GameOfChance)).find('button').length,
+  1
+);
+```
+
+`GameOfChance` debe devolver una sola instancia del componente `Results`, que tiene un prop llamado `fiftyFifty`.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(GameOfChance)).find('Results').length ===
+    1 &&
+    Enzyme.mount(React.createElement(GameOfChance))
+      .find('Results')
+      .props()
+      .hasOwnProperty('fiftyFifty') === true
+);
+```
+
+El estado de `GameOfChance` debe inicializarse con la propiedad `counter` establecida en valor `1`.
+
+```js
+assert.strictEqual(
+  Enzyme.mount(React.createElement(GameOfChance)).state().counter,
+  1
+);
+```
+
+Cuando el componente `GameOfChance` es renderizado por primera vez en el DOM, un elemento `p` debe ser devuelto con el texto interno `Turn: 1`.
+
+```js
+assert.strictEqual(
+  Enzyme.mount(React.createElement(GameOfChance)).find('p').text(),
+  'Turn: 1'
+);
+```
+
+Cada vez que se hace clic en el botón, el contador debe incrementarse por un valor de 1, y un único elemento `p` debe ser renderizado al DOM que contiene el texto `Turn: N`, donde `N` es el valor del contador.
+
+```js
+(() => {
+  const comp = Enzyme.mount(React.createElement(GameOfChance));
+  const simulate = () => {
+    comp.find('button').simulate('click');
+  };
+  const result = () => ({
+    count: comp.state('counter'),
+    text: comp.find('p').text()
+  });
+  const _1 = () => {
+    simulate();
+    return result();
+  };
+  const _2 = () => {
+    simulate();
+    return result();
+  };
+  const _3 = () => {
+    simulate();
+    return result();
+  };
+  const _4 = () => {
+    simulate();
+    return result();
+  };
+  const _5 = () => {
+    simulate();
+    return result();
+  };
+  const _1_val = _1();
+  const _2_val = _2();
+  const _3_val = _3();
+  const _4_val = _4();
+  const _5_val = _5();
+  assert(
+    _1_val.count === 2 &&
+      _1_val.text === 'Turn: 2' &&
+      _2_val.count === 3 &&
+      _2_val.text === 'Turn: 3' &&
+      _3_val.count === 4 &&
+      _3_val.text === 'Turn: 4' &&
+      _4_val.count === 5 &&
+      _4_val.text === 'Turn: 5' &&
+      _5_val.count === 6 &&
+      _5_val.text === 'Turn: 6'
+  );
+})();
+```
+
+Cuando el componente `GameOfChance` se monta por primera vez en el DOM y cada vez que se hace clic en el botón, un solo elemento `h1` debe ser devuelto, el cual renderiza aleatoriamente `You Win!` o `You Lose!`.
+
+```js
+(() => {
+  const comp = Enzyme.mount(React.createElement(GameOfChance));
+  const simulate = () => {
+    comp.find('button').simulate('click');
+  };
+  const result = () => ({
+    h1: comp.find('h1').length,
+    text: comp.find('h1').text()
+  });
+  const _1 = result();
+  const _2 = () => {
+    simulate();
+    return result();
+  };
+  const _3 = () => {
+    simulate();
+    return result();
+  };
+  const _4 = () => {
+    simulate();
+    return result();
+  };
+  const _5 = () => {
+    simulate();
+    return result();
+  };
+  const _6 = () => {
+    simulate();
+    return result();
+  };
+  const _7 = () => {
+    simulate();
+    return result();
+  };
+  const _8 = () => {
+    simulate();
+    return result();
+  };
+  const _9 = () => {
+    simulate();
+    return result();
+  };
+  const _10 = () => {
+    simulate();
+    return result();
+  };
+  const _2_val = _2();
+  const _3_val = _3();
+  const _4_val = _4();
+  const _5_val = _5();
+  const _6_val = _6();
+  const _7_val = _7();
+  const _8_val = _8();
+  const _9_val = _9();
+  const _10_val = _10();
+  const __text = new Set([
+    _1.text,
+    _2_val.text,
+    _3_val.text,
+    _4_val.text,
+    _5_val.text,
+    _6_val.text,
+    _7_val.text,
+    _8_val.text,
+    _9_val.text,
+    _10_val.text
+  ]);
+  const __h1 = new Set([
+    _1.h1,
+    _2_val.h1,
+    _3_val.h1,
+    _4_val.h1,
+    _5_val.h1,
+    _6_val.h1,
+    _7_val.h1,
+    _8_val.h1,
+    _9_val.h1,
+    _10_val.h1
+  ]);
+  assert(__text.size === 2 && __h1.size === 1);
+})();
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<GameOfChance />, document.getElementById('root'));
+```
+
+## --seed-contents--
+
+```jsx
+class Results extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    {/* Change code below this line */}
+    return <h1></h1>;
+    {/* Change code above this line */}
+  }
+}
+
+class GameOfChance extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      counter: 1
+    };
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick() {
+    this.setState(prevState => {
+      // Complete the return statement:
+      return {
+        counter: prevState
+      }
+    });
+  }
+  render() {
+    const expression = null; // Change this line
+    return (
+      <div>
+        <button onClick={this.handleClick}>Play Again</button>
+        {/* Change code below this line */}
+
+        {/* Change code above this line */}
+        <p>{'Turn: ' + this.state.counter}</p>
+      </div>
+    );
+  }
+}
+```
+
+# --solutions--
+
+```jsx
+class Results extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return <h1>{this.props.fiftyFifty ? 'You Win!' : 'You Lose!'}</h1>;
+  }
+}
+
+class GameOfChance extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      counter: 1
+    };
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick() {
+    this.setState(prevState => {
+      return {
+        counter: prevState.counter + 1
+      }
+    });
+  }
+  render() {
+    const expression = Math.random() >= 0.5;
+    return (
+      <div>
+        <button onClick={this.handleClick}>Play Again</button>
+        <Results fiftyFifty={expression} />
+        <p>{'Turn: ' + this.state.counter}</p>
+      </div>
+    );
+  }
+}
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/render-html-elements-to-the-dom.md

@@ -0,0 +1,75 @@
+---
+id: 5a24bbe0dba28a8d3cbd4c5f
+title: Renderiza elementos HTML al DOM
+challengeType: 6
+forumTopicId: 301406
+dashedName: render-html-elements-to-the-dom
+---
+
+# --description--
+
+Hasta ahora, has aprendido que JSX es una herramienta conveniente para escribir HTML legible dentro de JavaScript. Con React, podemos renderizar este JSX directamente al DOM HTML usando la API de renderizado de React conocida como ReactDOM.
+
+ReactDOM ofrece un método simple para renderizar elementos React al DOM que se ve así: `ReactDOM.render(componentToRender, targetNode)`, donde el primer argumento es el elemento o componente React que deseas renderizar, y el segundo argumento es el nodo DOM al que se quiere renderizar el componente.
+
+Como era de esperarse, `ReactDOM.render()` debe llamarse después de las declaraciones de los elementos JSX, al igual que hay que declarar las variables antes de usarlas.
+
+# --instructions--
+
+El editor de código tiene un componente JSX simple. Usa el método `ReactDOM.render()` para renderizar este componente a la página. Puedes pasar elementos JSX definidos directamente como el primer argumento y utilizar `document.getElementById()` para seleccionar el nodo DOM al que renderizar. Hay un `div` con `id='challenge-node'` disponible para que lo uses. Asegúrate de no cambiar la constante `JSX`.
+
+# --hints--
+
+La constante `JSX` debe devolver un elemento `div`.
+
+```js
+assert(JSX.type === 'div');
+```
+
+El `div` debe contener una etiqueta `h1` como primer elemento.
+
+```js
+assert(JSX.props.children[0].type === 'h1');
+```
+
+El elemento `div` debe contener una etiqueta `p` como segundo elemento.
+
+```js
+assert(JSX.props.children[1].type === 'p');
+```
+
+El elemento JSX proporcionado debe renderizarse al nodo DOM con id `challenge-node`.
+
+```js
+assert(
+  document.getElementById('challenge-node').childNodes[0].innerHTML ===
+    '<h1>Hello World</h1><p>Lets render this to the DOM</p>'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```jsx
+const JSX = (
+  <div>
+    <h1>Hello World</h1>
+    <p>Lets render this to the DOM</p>
+  </div>
+);
+// Change code below this line
+```
+
+# --solutions--
+
+```jsx
+const JSX = (
+<div>
+  <h1>Hello World</h1>
+  <p>Lets render this to the DOM</p>
+</div>
+);
+// Change code below this line
+ReactDOM.render(JSX, document.getElementById('challenge-node'));
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/render-react-on-the-server-with-rendertostring.md

@@ -0,0 +1,76 @@
+---
+id: 5a24c314108439a4d403618d
+title: Renderiza React en el servidor con renderToString
+challengeType: 6
+forumTopicId: 301407
+dashedName: render-react-on-the-server-with-rendertostring
+---
+
+# --description--
+
+Hasta ahora, has estado renderizando componentes React en el cliente. Normalmente, esto es lo que siempre harás. Sin embargo, hay algunos casos de uso donde tiene sentido renderizar un componente React en el servidor. Dado que React es una biblioteca de vistas de JavaScript y se puede ejecutar JavaScript en el servidor con Node, esto es posible. De hecho, React proporciona un método `renderToString()` que puedes usar para este propósito.
+
+Hay dos razones clave por las que el renderizado en el servidor puede ser usado en una aplicación del mundo real. Primero, sin hacer esto, tus aplicaciones de React consistirían en un archivo HTML relativamente vacío y un gran paquete de JavaScript cuando se carga inicialmente en el navegador. Esto puede no ser ideal para motores de búsqueda que intentan indexar el contenido de tus páginas para que la gente pueda encontrarte. Si renderizas el código HTML inicial en el servidor y lo envía al cliente, la carga de la página inicial contiene todo el código de la página que los motores de búsqueda pueden rastrear. Segundo, esto crea una experiencia de carga de página inicial más rápida porque el HTML renderizado es más pequeño que el código JavaScript de toda la aplicación. React aún podrá reconocer tu aplicación y administrarla después de la carga inicial.
+
+# --instructions--
+
+El método `renderToString()` se proporciona en `ReactDOMServer`, el cual está disponible aquí como un objeto global. El método toma un argumento que es un elemento React. Usa esto para renderizar `App` a una cadena.
+
+# --hints--
+
+El componente `App` debe renderizar a una cadena usando `ReactDOMServer.renderToString`.
+
+```js
+(getUserInput) =>
+  assert(
+    getUserInput('index')
+      .replace(/ /g, '')
+      .includes('ReactDOMServer.renderToString(<App/>)') &&
+      Enzyme.mount(React.createElement(App)).children().name() === 'div'
+  );
+```
+
+# --seed--
+
+## --before-user-code--
+
+```jsx
+var ReactDOMServer = { renderToString(x) { return null; } };
+```
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return <div/>
+  }
+};
+
+// Change code below this line
+```
+
+# --solutions--
+
+```jsx
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return <div/>
+  }
+};
+
+// Change code below this line
+ReactDOMServer.renderToString(<App/>);
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/render-state-in-the-user-interface-another-way.md

@@ -0,0 +1,119 @@
+---
+id: 5a24c314108439a4d4036172
+title: Otra manera de renderizar el estado en la interfaz de usuario
+challengeType: 6
+forumTopicId: 301408
+dashedName: render-state-in-the-user-interface-another-way
+---
+
+# --description--
+
+Hay otra manera de acceder al `state` de un componente. En el método `render()`, antes de la sentencia `return`, se puede escribir JavaScript directamente. Por ejemplo, puedes declarar funciones, acceder a datos de `state` o `props`, realizar cálculos sobre estos datos, etc. Luego, puedes asignar cualquier dato a las variables, a las que tienes acceso en la sentencia `return`.
+
+# --instructions--
+
+En el método de renderización de `MyComponent`, define una `const` llamada `name` y ponlo igual al valor del nombre en el `state` del componente. Debido a que puedes escribir JavaScript directamente en esta parte del código, no tienes que incluir esta referencia entre llaves.
+
+A continuación, en la sentencia return, renderiza este valor en una etiqueta `h1` usando la variable `name`. Recuerda, necesitas usar la sintaxis JSX (llaves para JavaScript) en la sentencia return.
+
+# --hints--
+
+`MyComponent` debe tener una clave `name` con valor `freeCodeCamp` almacenado en su estado.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(MyComponent)).state('name') ===
+    'freeCodeCamp'
+);
+```
+
+`MyComponent` debe renderizar un encabezado `h1` incluido en un solo `div`.
+
+```js
+assert(
+  /<div><h1>.*<\/h1><\/div>/.test(
+    Enzyme.mount(React.createElement(MyComponent)).html()
+  )
+);
+```
+
+La etiqueta `h1` renderizada debe incluir una referencia a `{name}`.
+
+```js
+(getUserInput) =>
+  assert(/<h1>\n*\s*\{\s*name\s*\}\s*\n*<\/h1>/.test(getUserInput('index')));
+```
+
+El encabezado `h1` renderizado debe contener texto renderizado desde el state del componente.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const first = () => {
+    mockedComponent.setState({ name: 'TestName' });
+    return waitForIt(() => mockedComponent.html());
+  };
+  const firstValue = await first();
+  assert(firstValue === '<div><h1>TestName</h1></div>');
+};
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: 'freeCodeCamp'
+    }
+  }
+  render() {
+    // Change code below this line
+
+    // Change code above this line
+    return (
+      <div>
+        { /* Change code below this line */ }
+
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: 'freeCodeCamp'
+    }
+  }
+  render() {
+    // Change code below this line
+    const name = this.state.name;
+    // Change code above this line
+    return (
+      <div>
+        { /* Change code below this line */ }
+        <h1>{name}</h1>
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/render-state-in-the-user-interface.md

@@ -0,0 +1,113 @@
+---
+id: 5a24c314108439a4d4036171
+title: Renderizar estado en la interfaz de usuario
+challengeType: 6
+forumTopicId: 301409
+dashedName: render-state-in-the-user-interface
+---
+
+# --description--
+
+Una vez que se define el estado inicial de un componente, se puede mostrar cualquier parte del mismo en la interfaz de usuario que se renderiza. Si un componente tiene estado, siempre tendrá acceso a los datos en `state` en su método `render()`. Puedes acceder a los datos con `this.state`.
+
+Si quieres acceder a un valor de estado dentro del `return` del método de renderización, tienes que encerrar el valor entre llaves.
+
+`state` es una de las características más poderosas de los componentes de React. Esto te permite realizar un seguimiento de los datos importantes en tu aplicación y generar una interfaz de usuario en respuesta a los cambios en estos datos. Si tus datos cambian, tu interfaz de usuario cambiará. React usa lo que se llama un DOM virtual, para realizar un seguimiento de los cambios detrás de escena. Cuando se actualizan los datos de estado, activa un re-renderizado de los componentes usando esos datos - incluyendo componentes hijos que recibieron los datos como un prop. React actualiza el DOM actual, pero solo cuando sea necesario. Esto significa que no tienes que preocuparte por cambiar el DOM. Tú simplemente declara cómo debe verse la UI.
+
+Ten en cuenta que si creas un componente con estado, ningún otro componente es consciente de su `state`. Su `state` está completamente encapsulado, o local a ese componente, a menos que pases datos de estado a un componente hijo como `props`. Esta noción de `state` encapsulado, es muy importante porque te permite escribir cierta lógica, luego tener esa lógica contenida y aislada en un lugar de tu código.
+
+# --instructions--
+
+En el editor de código, `MyComponent` ya tiene estado. Define una etiqueta `h1` en el método de renderizado del componente que renderiza el valor del `name` desde el estado del componente.
+
+**Note:** El `h1` solo debe renderizar el valor de `state` y nada más. En JSX, cualquier código que escribas con llaves `{ }` será tratado como JavaScript. Así que para acceder al valor desde él `state` solo hay que encerrar la referencia entre llaves.
+
+# --hints--
+
+`MyComponent` debe tener un `name` clave con valor `freeCodeCamp` almacenado en su estado.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(MyComponent)).state('name') ===
+    'freeCodeCamp'
+);
+```
+
+`MyComponent` debe renderizar un encabezado `h1` incluido en un solo `div`.
+
+```js
+assert(
+  /<div><h1>.*<\/h1><\/div>/.test(
+    Enzyme.mount(React.createElement(MyComponent)).html()
+  )
+);
+```
+
+El encabezado renderizado `h1` sólo debe contener texto renderizado del estado del componente.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const first = () => {
+    mockedComponent.setState({ name: 'TestName' });
+    return waitForIt(() => mockedComponent.html());
+  };
+  const firstValue = await first();
+  const getValue = firstValue.replace(/\s/g, '');
+  assert(getValue === '<div><h1>TestName</h1></div>');
+};
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: 'freeCodeCamp'
+    }
+  }
+  render() {
+    return (
+      <div>
+        { /* Change code below this line */ }
+
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: 'freeCodeCamp'
+    }
+  }
+  render() {
+    return (
+      <div>
+        { /* Change code below this line */ }
+        <h1>{this.state.name}</h1>
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/render-with-an-if-else-condition.md

@@ -0,0 +1,155 @@
+---
+id: 5a24c314108439a4d4036184
+title: Renderizar con una condición If-Else
+challengeType: 6
+forumTopicId: 301410
+dashedName: render-with-an-if-else-condition
+---
+
+# --description--
+
+Otra aplicación de uso de JavaScript para controlar su vista renderizada es vincular los elementos que son renderizados a una condición. Cuando la condición es verdadera (true), se renderiza una vista. Cuando es falso (false), es una vista diferente. Puedes hacer esto con una sentencia estándar `if/else` en el método `render()` de un componente React.
+
+# --instructions--
+
+MyComponent contiene un `boolean` en su estado que rastrea si deseas mostrar algún elemento en la interfaz de usuario o no. Él `button` alterna el estado de este valor. Actualmente, renderiza la misma UI cada vez. Reescribir el método `render()` con una sentencia `if/else` de modo que si `display` es `true`, devuelvas el marcado actual. De lo contrario, devuelve el marcado sin el elemento `h1`.
+
+**Note:** Debes escribir un `if/else` para pasar las pruebas. El uso del operador ternario no pasará aquí.
+
+# --hints--
+
+`MyComponent` debe existir y renderizar.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    return mockedComponent.find('MyComponent').length === 1;
+  })()
+);
+```
+
+Cuando `display` se establece en `true`, un `div`, `button`, y `h1` deben renderizarse.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const state_1 = () => {
+    mockedComponent.setState({ display: true });
+    return waitForIt(() => mockedComponent);
+  };
+  const updated = await state_1();
+  assert(
+    mockedComponent.find('div').length === 1 &&
+      mockedComponent.find('div').children().length === 2 &&
+      mockedComponent.find('button').length === 1 &&
+      mockedComponent.find('h1').length === 1
+  );
+};
+```
+
+Cuando `display` se establece en `false`, solo un `div` y un `button` deben renderizarse.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const state_1 = () => {
+    mockedComponent.setState({ display: false });
+    return waitForIt(() => mockedComponent);
+  };
+  const updated = await state_1();
+  assert(
+    mockedComponent.find('div').length === 1 &&
+      mockedComponent.find('div').children().length === 1 &&
+      mockedComponent.find('button').length === 1 &&
+      mockedComponent.find('h1').length === 0
+  );
+};
+```
+
+El método renderizado debe usar una sentencia `if/else` para comprobar la condición de `this.state.display`.
+
+```js
+(getUserInput) =>
+  assert(
+    getUserInput('index').includes('if') &&
+      getUserInput('index').includes('else')
+  );
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      display: true
+    }
+    this.toggleDisplay = this.toggleDisplay.bind(this);
+  }
+  toggleDisplay() {
+    this.setState((state) => ({
+      display: !state.display
+    }));
+  }
+  render() {
+    // Change code below this line
+
+    return (
+       <div>
+         <button onClick={this.toggleDisplay}>Toggle Display</button>
+         <h1>Displayed!</h1>
+       </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      display: true
+    }
+ this.toggleDisplay = this.toggleDisplay.bind(this);
+ }
+  toggleDisplay() {
+    this.setState((state) => ({
+      display: !state.display
+    }));
+  }
+  render() {
+    // Change code below this line
+    if (this.state.display) {
+      return (
+         <div>
+           <button onClick={this.toggleDisplay}>Toggle Display</button>
+           <h1>Displayed!</h1>
+         </div>
+      );
+    } else {
+      return (
+        <div>
+           <button onClick={this.toggleDisplay}>Toggle Display</button>
+         </div>
+      );
+    }
+  }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/review-using-props-with-stateless-functional-components.md

@@ -0,0 +1,145 @@
+---
+id: 5a24c314108439a4d403616f
+title: Revisa el uso de props con componentes funcionales sin estado
+challengeType: 6
+forumTopicId: 301411
+dashedName: review-using-props-with-stateless-functional-components
+---
+
+# --description--
+
+Excepto por el último desafío, has estado pasando props a componentes funcionales sin estado. Estos componentes actúan como funciones puras. Aceptan props como entrada y devuelven la misma vista cada vez que se les pasa el mismo props. Tal vez te estes preguntando que es estado, y el próximo desafío lo cubrirá con más detalle. Antes de eso, aquí hay una revisión de la terminología de los componentes.
+
+Un *componente funcional sin estado*, es cualquier función que escribas que acepte props y devuelva JSX. Un *componente sin estado*, por otra parte, es una clase que extiende `React.Component`, pero no usa el estado interno (que será cubierto en el siguiente desafío). Finalmente, un *componente con estado* es un componente de clase que mantiene su propio estado interno. Puedes ver componentes con estado referidos simplemente como componentes de React.
+
+Un patrón común es intentar minimizar el estado y crear componentes funcionales sin estado siempre que sea posible. Esto ayuda a contener tu administración de estado a un área específica de tu aplicación. A su vez, esto mejora el desarrollo y el mantenimiento de tu aplicación, haciendo más fácil seguir cómo los cambios en el estado afectan su comportamiento.
+
+# --instructions--
+
+El editor de código tiene un componente `CampSite` que renderiza un componente `Camper` como un componente hijo. Define el componente `Camper` y asigna los props predeterminados de `{ name: 'CamperBot' }`. Dentro del componente `Camper`, renderiza el código que quieras, pero asegúrate de tener un elemento `p` que incluya sólo el valor `name` que se pasa como un `prop`. Por último, define `propTypes` en el componente `Camper` para requerir que `name` sea proporcionado como un prop y verifique que sea de tipo `string`.
+
+# --hints--
+
+El `CampSite` debe renderizarse.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(CampSite));
+    return mockedComponent.find('CampSite').length === 1;
+  })()
+);
+```
+
+El componente `Camper` debe renderizarse.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(CampSite));
+    return mockedComponent.find('Camper').length === 1;
+  })()
+);
+```
+
+El componente `Camper` debe incluir props predeterminados que asignen la cadena `CamperBot` a la clave `name`.
+
+```js
+assert(
+  /Camper.defaultProps={name:(['"`])CamperBot\1,?}/.test(
+    __helpers.removeWhiteSpace(code)
+  )
+);
+```
+
+El componente `Camper` debe incluir tipos de prop que requieran que el prop `name` sea del tipo `string`.
+
+```js
+assert(
+  /Camper.propTypes={name:PropTypes.string.isRequired,?}/.test(
+    __helpers.removeWhiteSpace(code)
+  )
+);
+```
+
+El componente `Camper` debe contener un elemento `p` que contenga únicamente el texto del prop `name`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(CampSite));
+    return (
+      mockedComponent.find('p').text() ===
+      mockedComponent.find('Camper').props().name
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --before-user-code--
+
+```jsx
+var PropTypes = {
+   string: { isRequired: true }
+};
+```
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<CampSite />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class CampSite extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <Camper/>
+      </div>
+    );
+  }
+};
+// Change code below this line
+```
+
+# --solutions--
+
+```jsx
+class CampSite extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <Camper/>
+      </div>
+    );
+  }
+};
+// Change code below this line
+
+const Camper = (props) => {
+   return (
+     <div>
+       <p>{props.name}</p>
+     </div>
+   );
+};
+
+Camper.propTypes = {
+  name: PropTypes.string.isRequired
+};
+
+Camper.defaultProps = {
+  name: 'CamperBot'
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/set-state-with-this.setstate.md

@@ -0,0 +1,143 @@
+---
+id: 5a24c314108439a4d4036173
+title: Define el estado con this.setState
+challengeType: 6
+forumTopicId: 301412
+dashedName: set-state-with-this-setstate
+---
+
+# --description--
+
+Los desafíos anteriores cubrieron el componente `state` y cómo inicializar el state en el `constructor`. También hay una forma de cambiar el `state` del componente. React proporciona un método para actualizar el componente `state` llamado `setState`. El método `setState` dentro de tu clase de componente se llama así: `this.setState()`, pasando un objeto con pares clave-valor. Las claves son tus propiedades de estado y los valores son datos de estado actualizados. Por ejemplo, si estuviéramos almacenando un `username` en estado y quisiéramos actualizarlo, se vería así:
+
+```jsx
+this.setState({
+  username: 'Lewis'
+});
+```
+
+React espera que nunca modifiques `state` directamente. En su lugar, siempre usa `this.setState()` cuando ocurran cambios de estado. Además, ten en cuenta que React puede agrupar múltiples actualizaciones de estado con el fin de mejorar el rendimiento. Esto significa que las actualizaciones de estado a través del método `setState` pueden ser asíncronas. Existe una sintaxis alternativa para el método `setState` que proporciona una forma de evitar ese problema. Esto es raramente necesario, ¡pero es bueno tenerlo en cuenta! Por favor, consulte la [documentación de React](https://facebook.github.io/react/docs/state-and-lifecycle.html) para más información.
+
+# --instructions--
+
+Hay un elemento `button` en el editor de código que tiene un controlador `onClick()`. Este controlador es activado cuando el `button` recibe un evento clic en el navegador, y ejecuta el método `handleClick` definido en `MyComponent`. Dentro del método `handleClick`, actualiza el componente `state` usando `this.setState()`. Establece la propiedad `name` en el `state` para igualar la cadena `React Rocks!`.
+
+Haz clic en el botón y observa la actualización de estado renderizada. No te preocupes si no entiendes completamente cómo funciona el código del controlador de clics hasta ahora. Será cubierto en los siguientes desafíos.
+
+# --hints--
+
+El estado de `MyComponent` debe inicializarse con el par de valores clave `{ name: Initial State }`.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(MyComponent)).state('name') ===
+    'Initial State'
+);
+```
+
+`MyComponent` debe renderizar un encabezado `h1`.
+
+```js
+assert(Enzyme.mount(React.createElement(MyComponent)).find('h1').length === 1);
+```
+
+El encabezado `h1` renderizado debe contener texto renderizado desde el estado del componente.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const first = () => {
+    mockedComponent.setState({ name: 'TestName' });
+    return waitForIt(() => mockedComponent.html());
+  };
+  const firstValue = await first();
+  assert(/<h1>TestName<\/h1>/.test(firstValue));
+};
+```
+
+Llamar al método `handleClick` en `MyComponent` debe establecer la propiedad de nombre en estado igual a `React Rocks!`.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const first = () => {
+    mockedComponent.setState({ name: 'Before' });
+    return waitForIt(() => mockedComponent.state('name'));
+  };
+  const second = () => {
+    mockedComponent.instance().handleClick();
+    return waitForIt(() => mockedComponent.state('name'));
+  };
+  const firstValue = await first();
+  const secondValue = await second();
+  assert(firstValue === 'Before' && secondValue === 'React Rocks!');
+};
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: 'Initial State'
+    };
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick() {
+    // Change code below this line
+
+    // Change code above this line
+  }
+  render() {
+    return (
+      <div>
+        <button onClick={this.handleClick}>Click Me</button>
+        <h1>{this.state.name}</h1>
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: 'Initial State'
+    };
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick() {
+     // Change code below this line
+    this.setState({
+      name: 'React Rocks!'
+    });
+    // Change code above this line
+  }
+  render() {
+    return (
+      <div>
+        <button onClick = {this.handleClick}>Click Me</button>
+        <h1>{this.state.name}</h1>
+      </div>
+    );
+  }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/use--for-a-more-concise-conditional.md

@@ -0,0 +1,146 @@
+---
+id: 5a24c314108439a4d4036185
+title: Usa && para una condicional más concisa
+challengeType: 6
+forumTopicId: 301413
+dashedName: use--for-a-more-concise-conditional
+---
+
+# --description--
+
+Las sentencias `if/else` funcionaron en el último desafío, pero hay una manera más concisa de lograr el mismo resultado. Imagina que estás rastreando varias condiciones en un componente y deseas que diferentes elementos se rendericen dependiendo de cada una de estas condiciones. Si escribes un montón de sentencias `else if` para devolver UIs ligeramente diferentes, puedes repetir código que deja espacio para el error. En su lugar, puedes usar el operador lógico `&&` para realizar lógica condicional de una manera más concisa. Esto es posible porque quieres comprobar si una condición es `true`, y si es así, devuelve algún código. Aquí hay un ejemplo:
+
+```jsx
+{condition && <p>markup</p>}
+```
+
+Si la `condition` es `true`, el código será devuelto. Si la condición es `false`, la operación devolverá inmediatamente `false` después de evaluar la `condition` y no devolverá nada. Puedes incluir estas sentencias directamente en tu JSX y encadenar varias condiciones juntas escribiendo `&&` después de cada uno. Esto te permite manejar una lógica condicional más compleja en tu método `render()` sin repetir un montón de código.
+
+# --instructions--
+
+Resuelve el ejemplo anterior de nuevo, de este modo el `h1` solo renderiza si `display` es `true`, pero usa el operador lógico `&&` en lugar de una sentencia `if/else`.
+
+# --hints--
+
+`MyComponent` debe existir y renderizar.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    return mockedComponent.find('MyComponent').length;
+  })()
+);
+```
+
+Cuando `display` se establece en `true`, un `div`, `button`, y `h1` debe renderizarse.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const state_1 = () => {
+    mockedComponent.setState({ display: true });
+    return waitForIt(() => mockedComponent);
+  };
+  const updated = await state_1();
+  assert(
+    updated.find('div').length === 1 &&
+      updated.find('div').children().length === 2 &&
+      updated.find('button').length === 1 &&
+      updated.find('h1').length === 1
+  );
+};
+```
+
+Cuando `display` se establece en `false`, solo un `div` y un `button` debe renderizarse.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const state_1 = () => {
+    mockedComponent.setState({ display: false });
+    return waitForIt(() => mockedComponent);
+  };
+  const updated = await state_1();
+  assert(
+    updated.find('div').length === 1 &&
+      updated.find('div').children().length === 1 &&
+      updated.find('button').length === 1 &&
+      updated.find('h1').length === 0
+  );
+};
+```
+
+El método renderizador debe usar el operador lógico `&&` para comprobar la condición de `this.state.display`.
+
+```js
+(getUserInput) => assert(getUserInput('index').includes('&&'));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      display: true
+    }
+    this.toggleDisplay = this.toggleDisplay.bind(this);
+  }
+  toggleDisplay() {
+    this.setState(state => ({
+      display: !state.display
+    }));
+  }
+  render() {
+    // Change code below this line
+    return (
+       <div>
+         <button onClick={this.toggleDisplay}>Toggle Display</button>
+         <h1>Displayed!</h1>
+       </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      display: true
+    }
+ this.toggleDisplay = this.toggleDisplay.bind(this);
+  }
+  toggleDisplay() {
+    this.setState(state => ({
+      display: !state.display
+    }));
+  }
+  render() {
+    // Change code below this line
+    return (
+       <div>
+         <button onClick={this.toggleDisplay}>Toggle Display</button>
+         {this.state.display && <h1>Displayed!</h1>}
+       </div>
+    );
+  }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/use-a-ternary-expression-for-conditional-rendering.md

@@ -0,0 +1,280 @@
+---
+id: 5a24c314108439a4d4036187
+title: Utiliza una expresión ternaria para el renderizado condicional
+challengeType: 6
+forumTopicId: 301414
+dashedName: use-a-ternary-expression-for-conditional-rendering
+---
+
+# --description--
+
+Antes de pasar a técnicas de renderizado dinámico, hay una última forma de usar condicionales de JavaScript incorporados para representar lo que quieres: el <dfn>operador ternario</dfn>. El operador ternario a menudo es utilizado como un acceso directo para las sentencias `if/else` en JavaScript. No son tan robustas como las sentencias tradicionales `if/else`, pero son muy populares entre los desarrolladores de React. Una de las razones de esto es debido a cómo se compila JSX, las sentencias `if/else` no se pueden insertar directamente en el código JSX. Puede que hayas notado esto hace un par de desafíos, cuando se requirió una sentencia `if/else`, siempre estaba *fuera* de la sentencia `return`. Las expresiones ternarias pueden ser una excelente alternativa si deseas implementar lógica condicional dentro de tu JSX. Recuerda que un operador ternario tiene tres partes, pero puedes combinar varias expresiones ternarias juntas. Aquí está la sintaxis básica:
+
+```jsx
+condition ? expressionIfTrue : expressionIfFalse;
+```
+
+# --instructions--
+
+El editor de código tiene tres constantes definidas dentro del método `render()` del componente `CheckUserAge`. Estas se llaman `buttonOne`, `buttonTwo` y `buttonThree`. A cada una de estas se le asigna una expresión JSX simple que representa un elemento de botón. Primero, inicializa el estado de `CheckUserAge` con `input` y `userAge` ambos configurados a valores de una cadena vacía.
+
+Una vez que el componente está renderizando información a la página, los usuarios deberían tener una forma de interactuar con ella. Dentro de la declaración `return` del componente, configura una expresión ternaria que implementa la siguiente lógica: cuando la página carga por primera vez, renderiza el botón de envío, `buttonOne`, a la página. Luego, cuando un usuario ingrese su edad y haga clic en el botón, renderiza un botón diferente basado en la edad. Si un usuario introduce un número menor que `18`, renderiza `buttonThree`. Si un usuario introduce un número mayor o igual a `18`, renderiza `buttonTwo`.
+
+# --hints--
+
+El componente `CheckUserAge` debe renderizarse con un solo elemento `input` y un solo elemento `button`.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('input')
+    .length === 1 &&
+    Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('button')
+      .length === 1
+);
+```
+
+El estado del componente `CheckUserAge` debe inicializarse con una propiedad de `userAge` y una propiedad de `input`, ambos establecidos a un valor de una cadena vacía.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(CheckUserAge)).state().input === '' &&
+    Enzyme.mount(React.createElement(CheckUserAge)).state().userAge === ''
+);
+```
+
+Cuando el componente `CheckUserAge` es renderizado por primera vez en el DOM, el texto interno del `button` debe decir "Submit".
+
+```js
+assert(
+  Enzyme.mount(React.createElement(CheckUserAge)).find('button').text() ===
+    'Submit'
+);
+```
+
+Cuando se introduce un número menor de 18 en el elemento `input` y se hace clic en el `button`, el texto interno del `button` debe decir `You Shall Not Pass`.
+
+```js
+(() => {
+  const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge));
+  const initialButton = mockedComponent.find('button').text();
+  const enter3AndClickButton = () => {
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: '3' } });
+    mockedComponent.find('button').simulate('click');
+    mockedComponent.update();
+    return mockedComponent.find('button').text();
+  };
+  const enter17AndClickButton = () => {
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: '17' } });
+    mockedComponent.find('button').simulate('click');
+    mockedComponent.update();
+    return mockedComponent.find('button').text();
+  };
+  const userAge3 = enter3AndClickButton();
+  const userAge17 = enter17AndClickButton();
+  assert(
+    initialButton === 'Submit' &&
+      userAge3 === 'You Shall Not Pass' &&
+      userAge17 === 'You Shall Not Pass'
+  );
+})();
+```
+
+Cuando se introduce un número mayor o igual a 18 en el elemento `input` y se hace clic en el `button` el texto interno del `button` debe decir `You May Enter`.
+
+```js
+(() => {
+  const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge));
+  const initialButton = mockedComponent.find('button').text();
+  const enter18AndClickButton = () => {
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: '18' } });
+    mockedComponent.find('button').simulate('click');
+    mockedComponent.update();
+    return mockedComponent.find('button').text();
+  };
+  const enter35AndClickButton = () => {
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: '35' } });
+    mockedComponent.find('button').simulate('click');
+    mockedComponent.update();
+    return mockedComponent.find('button').text();
+  };
+  const userAge18 = enter18AndClickButton();
+  const userAge35 = enter35AndClickButton();
+  assert(
+    initialButton === 'Submit' &&
+      userAge18 === 'You May Enter' &&
+      userAge35 === 'You May Enter'
+  );
+})();
+```
+
+Una vez que un número ha sido enviado, y el valor del `input` se cambia una vez más, el `button` debe decir `Submit`.
+
+```js
+(() => {
+  const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge));
+  const enter18AndClickButton = () => {
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: '18' } });
+    mockedComponent.find('button').simulate('click');
+    mockedComponent.update();
+    return mockedComponent.find('button').text();
+  };
+  const changeInputDontClickButton = () => {
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: '5' } });
+    mockedComponent.update();
+    return mockedComponent.find('button').text();
+  };
+  const enter10AndClickButton = () => {
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: '10' } });
+    mockedComponent.find('button').simulate('click');
+    mockedComponent.update();
+    return mockedComponent.find('button').text();
+  };
+  const userAge18 = enter18AndClickButton();
+  const changeInput1 = changeInputDontClickButton();
+  const userAge10 = enter10AndClickButton();
+  const changeInput2 = changeInputDontClickButton();
+  assert(
+    userAge18 === 'You May Enter' &&
+      changeInput1 === 'Submit' &&
+      userAge10 === 'You Shall Not Pass' &&
+      changeInput2 === 'Submit'
+  );
+})();
+```
+
+Tu código no debe contener ninguna sentencia `if/else`.
+
+```js
+assert(
+  new RegExp(/(\s|;)if(\s|\()/).test(
+    Enzyme.mount(React.createElement(CheckUserAge)).instance().render.toString()
+  ) === false
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<CheckUserAge />, document.getElementById('root'));
+```
+
+## --seed-contents--
+
+```jsx
+const inputStyle = {
+  width: 235,
+  margin: 5
+};
+
+class CheckUserAge extends React.Component {
+  constructor(props) {
+    super(props);
+    // Change code below this line
+
+    // Change code above this line
+    this.submit = this.submit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleChange(e) {
+    this.setState({
+      input: e.target.value,
+      userAge: ''
+    });
+  }
+  submit() {
+    this.setState(state => ({
+      userAge: state.input
+    }));
+  }
+  render() {
+    const buttonOne = <button onClick={this.submit}>Submit</button>;
+    const buttonTwo = <button>You May Enter</button>;
+    const buttonThree = <button>You Shall Not Pass</button>;
+    return (
+      <div>
+        <h3>Enter Your Age to Continue</h3>
+        <input
+          style={inputStyle}
+          type='number'
+          value={this.state.input}
+          onChange={this.handleChange}
+        />
+        <br />
+        {/* Change code below this line */}
+
+        {/* Change code above this line */}
+      </div>
+    );
+  }
+}
+```
+
+# --solutions--
+
+```jsx
+const inputStyle = {
+  width: 235,
+  margin: 5
+};
+
+class CheckUserAge extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      userAge: '',
+      input: ''
+    };
+    this.submit = this.submit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleChange(e) {
+    this.setState({
+      input: e.target.value,
+      userAge: ''
+    });
+  }
+  submit() {
+    this.setState(state => ({
+      userAge: state.input
+    }));
+  }
+  render() {
+    const buttonOne = <button onClick={this.submit}>Submit</button>;
+    const buttonTwo = <button>You May Enter</button>;
+    const buttonThree = <button>You Shall Not Pass</button>;
+    return (
+      <div>
+        <h3>Enter Your Age to Continue</h3>
+        <input
+          style={inputStyle}
+          type='number'
+          value={this.state.input}
+          onChange={this.handleChange}
+        />
+        <br />
+        {this.state.userAge === ''
+          ? buttonOne
+          : this.state.userAge >= 18
+          ? buttonTwo
+          : buttonThree}
+      </div>
+    );
+  }
+}
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/use-advanced-javascript-in-react-render-method.md

@@ -0,0 +1,334 @@
+---
+id: 5a24c314108439a4d4036183
+title: Usa JavaScript avanzado en el método render de React
+challengeType: 6
+forumTopicId: 301415
+dashedName: use-advanced-javascript-in-react-render-method
+---
+
+# --description--
+
+En desafíos anteriores, aprendiste cómo inyectar código JavaScript en código JSX usando llaves, `{ }`, para tareas como acceder a props, pasar props, acceder al state, insertar comentarios en tu código y, más recientemente, diseñar tus componentes. Todos estos son casos de uso común para poner JavaScript en JSX, pero no son la única manera de utilizar código JavaScript en tus componentes React.
+
+También puedes escribir JavaScript directamente en los métodos `render`, antes de la sentencia `return`, ***sin*** insertarlo dentro de llaves. Esto es porque aún no está dentro del código JSX. Cuando quieras utilizar una variable en el código JSX *dentro* de la sentencia `return`, colocas el nombre de la variable dentro de llaves.
+
+# --instructions--
+
+En el código proporcionado, el método `render` tiene un arreglo que contiene 20 frases para representar las respuestas encontradas en el clásico juego "Magic Eight Ball" de los años ochenta. El evento clic del botón está vinculado al método `ask`, por lo que cada vez que se haga clic en el botón se generará un número aleatorio y se almacenará como el `randomIndex` en el state. En la línea 52, elimina la cadena `change me!` y reasigna la constante `answer` para que tu código acceda aleatoriamente a un índice diferente del arreglo `possibleAnswers` cada vez que se actualiza el componente. Finalmente, inserta la constante `answer` dentro de las etiquetas `p`.
+
+# --hints--
+
+El componente `MagicEightBall` debe existir y renderizarse en la página.
+
+```js
+assert.strictEqual(
+  Enzyme.mount(React.createElement(MagicEightBall)).find('MagicEightBall')
+    .length,
+  1
+);
+```
+
+El primer elemento hijo de `MagicEightBall` debe ser un elemento `input`.
+
+```js
+assert.strictEqual(
+  Enzyme.mount(React.createElement(MagicEightBall))
+    .children()
+    .childAt(0)
+    .name(),
+  'input'
+);
+```
+
+El tercer elemento hijo de `MagicEightBall` debe ser un elemento `button`.
+
+```js
+assert.strictEqual(
+  Enzyme.mount(React.createElement(MagicEightBall))
+    .children()
+    .childAt(2)
+    .name(),
+  'button'
+);
+```
+
+El estado de `MagicEightBall` debe inicializarse con una propiedad de `userInput` y una propiedad de `randomIndex` juntas establecidas como cadenas de texto vacías.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(MagicEightBall)).state('randomIndex') ===
+    '' &&
+    Enzyme.mount(React.createElement(MagicEightBall)).state('userInput') === ''
+);
+```
+
+Cuando `MagicEightBall` se monte por primera vez en el DOM, debe devolver un elemento `p` vacío.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(MagicEightBall)).find('p').length === 1 &&
+    Enzyme.mount(React.createElement(MagicEightBall)).find('p').text() === ''
+);
+```
+
+Cuando se introduce texto en el elemento `input` y se hace clic en el botón, el componente `MagicEightBall` debe devolver un elemento `p` que contiene un elemento aleatorio del arreglo `possibleAnswers`.
+
+```js
+(() => {
+  const comp = Enzyme.mount(React.createElement(MagicEightBall));
+  const simulate = () => {
+    comp.find('input').simulate('change', { target: { value: 'test?' } });
+    comp.find('button').simulate('click');
+  };
+  const result = () => comp.find('p').text();
+  const _1 = () => {
+    simulate();
+    return result();
+  };
+  const _2 = () => {
+    simulate();
+    return result();
+  };
+  const _3 = () => {
+    simulate();
+    return result();
+  };
+  const _4 = () => {
+    simulate();
+    return result();
+  };
+  const _5 = () => {
+    simulate();
+    return result();
+  };
+  const _6 = () => {
+    simulate();
+    return result();
+  };
+  const _7 = () => {
+    simulate();
+    return result();
+  };
+  const _8 = () => {
+    simulate();
+    return result();
+  };
+  const _9 = () => {
+    simulate();
+    return result();
+  };
+  const _10 = () => {
+    simulate();
+    return result();
+  };
+  const _1_val = _1();
+  const _2_val = _2();
+  const _3_val = _3();
+  const _4_val = _4();
+  const _5_val = _5();
+  const _6_val = _6();
+  const _7_val = _7();
+  const _8_val = _8();
+  const _9_val = _9();
+  const _10_val = _10();
+  const actualAnswers = [
+    _1_val,
+    _2_val,
+    _3_val,
+    _4_val,
+    _5_val,
+    _6_val,
+    _7_val,
+    _8_val,
+    _9_val,
+    _10_val
+  ];
+  const hasIndex = actualAnswers.filter(
+    (answer, i) => possibleAnswers.indexOf(answer) !== -1
+  );
+  const notAllEqual = new Set(actualAnswers);
+  assert(notAllEqual.size > 1 && hasIndex.length === 10);
+})();
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+var possibleAnswers = [
+  'It is certain',
+  'It is decidedly so',
+  'Without a doubt',
+  'Yes, definitely',
+  'You may rely on it',
+  'As I see it, yes',
+  'Outlook good',
+  'Yes',
+  'Signs point to yes',
+  'Reply hazy try again',
+  'Ask again later',
+  'Better not tell you now',
+  'Cannot predict now',
+  'Concentrate and ask again',
+  "Don't count on it",
+  'My reply is no',
+  'My sources say no',
+  'Outlook not so good',
+  'Very doubtful',
+  'Most likely'
+];
+ReactDOM.render(<MagicEightBall />, document.getElementById('root'));
+```
+
+## --seed-contents--
+
+```jsx
+const inputStyle = {
+  width: 235,
+  margin: 5
+};
+
+class MagicEightBall extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      userInput: '',
+      randomIndex: ''
+    };
+    this.ask = this.ask.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+  ask() {
+    if (this.state.userInput) {
+      this.setState({
+        randomIndex: Math.floor(Math.random() * 20),
+        userInput: ''
+      });
+    }
+  }
+  handleChange(event) {
+    this.setState({
+      userInput: event.target.value
+    });
+  }
+  render() {
+    const possibleAnswers = [
+      'It is certain',
+      'It is decidedly so',
+      'Without a doubt',
+      'Yes, definitely',
+      'You may rely on it',
+      'As I see it, yes',
+      'Outlook good',
+      'Yes',
+      'Signs point to yes',
+      'Reply hazy try again',
+      'Ask again later',
+      'Better not tell you now',
+      'Cannot predict now',
+      'Concentrate and ask again',
+      "Don't count on it",
+      'My reply is no',
+      'My sources say no',
+      'Most likely',
+      'Outlook not so good',
+      'Very doubtful'
+    ];
+    const answer = 'change me!'; // Change this line
+    return (
+      <div>
+        <input
+          type='text'
+          value={this.state.userInput}
+          onChange={this.handleChange}
+          style={inputStyle}
+        />
+        <br />
+        <button onClick={this.ask}>Ask the Magic Eight Ball!</button>
+        <br />
+        <h3>Answer:</h3>
+        <p>
+          {/* Change code below this line */}
+
+          {/* Change code above this line */}
+        </p>
+      </div>
+    );
+  }
+}
+```
+
+# --solutions--
+
+```jsx
+const inputStyle = {
+  width: 235,
+  margin: 5
+};
+
+class MagicEightBall extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      userInput: '',
+      randomIndex: ''
+    };
+    this.ask = this.ask.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+  ask() {
+    if (this.state.userInput) {
+      this.setState({
+        randomIndex: Math.floor(Math.random() * 20),
+        userInput: ''
+      });
+    }
+  }
+  handleChange(event) {
+    this.setState({
+      userInput: event.target.value
+    });
+  }
+  render() {
+    const possibleAnswers = [
+      'It is certain',
+      'It is decidedly so',
+      'Without a doubt',
+      'Yes, definitely',
+      'You may rely on it',
+      'As I see it, yes',
+      'Outlook good',
+      'Yes',
+      'Signs point to yes',
+      'Reply hazy try again',
+      'Ask again later',
+      'Better not tell you now',
+      'Cannot predict now',
+      'Concentrate and ask again',
+      "Don't count on it",
+      'My reply is no',
+      'My sources say no',
+      'Outlook not so good',
+      'Very doubtful',
+      'Most likely'
+    ];
+    const answer = possibleAnswers[this.state.randomIndex];
+    return (
+      <div>
+        <input
+          type='text'
+          value={this.state.userInput}
+          onChange={this.handleChange}
+          style={inputStyle}
+        />
+        <br />
+        <button onClick={this.ask}>Ask the Magic Eight Ball!</button>
+        <br />
+        <h3>Answer:</h3>
+        <p>{answer}</p>
+      </div>
+    );
+  }
+}
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/use-array.filter-to-dynamically-filter-an-array.md

@@ -0,0 +1,236 @@
+---
+id: 5a24c314108439a4d403618c
+title: Usa Array.filter() para filtrar dinámicamente un arreglo
+challengeType: 6
+forumTopicId: 301416
+dashedName: use-array-filter-to-dynamically-filter-an-array
+---
+
+# --description--
+
+El método de arreglo `map` es una potente herramienta que puedes usar a menudo al trabajar con React. Otro método relacionado con `map` es `filter`, que filtra el contenido de un arreglo basado en una condición, luego devuelve un nuevo arreglo. Por ejemplo, si tienes un arreglo de usuarios que todos tienen una propiedad `online` que puede establecerse en `true` o `false`, puedes filtrar sólo aquellos usuarios que estén en línea escribiendo:
+
+```js
+let onlineUsers = users.filter(user => user.online);
+```
+
+# --instructions--
+
+En el editor de código, el `state` de `MyComponent` es inicializado con un arreglo de usuarios. Algunos usuarios están conectados y otros no. Filtra el arreglo para que sólo veas a los usuarios que están en línea. Para hacer esto, primero usa `filter` para devolver un nuevo arreglo que contiene solo a los usuarios cuya propiedad `online` es `true`. Luego, en la variable `renderOnline`, asigna sobre el arreglo filtrado, y devuelve un elemento `li` para cada usuario que contiene el texto de su `username`. Asegúrate de incluir también una única `key`, como en los últimos desafíos.
+
+# --hints--
+
+`MyComponent` debe existir y renderizarse en la página.
+
+```js
+assert.strictEqual(
+  Enzyme.mount(React.createElement(MyComponent)).find('MyComponent').length,
+  1
+);
+```
+
+El estado de `MyComponent` debe inicializarse a un arreglo de seis usuarios.
+
+```js
+assert(
+  Array.isArray(
+    Enzyme.mount(React.createElement(MyComponent)).state('users')
+  ) === true &&
+    Enzyme.mount(React.createElement(MyComponent)).state('users').length === 6
+);
+```
+
+`MyComponent` debe devolver un `div`, un `h1`, y luego una lista desordenada que contiene elementos `li` para cada usuario cuyo estado de conexión se establece en `true`.
+
+```js
+(() => {
+  const comp = Enzyme.mount(React.createElement(MyComponent));
+  const users = (bool) => ({
+    users: [
+      { username: 'Jeff', online: bool },
+      { username: 'Alan', online: bool },
+      { username: 'Mary', online: bool },
+      { username: 'Jim', online: bool },
+      { username: 'Laura', online: bool }
+    ]
+  });
+  const result = () => comp.find('li').length;
+  const _1 = result();
+  const _2 = () => {
+    comp.setState(users(true));
+    return result();
+  };
+  const _3 = () => {
+    comp.setState(users(false));
+    return result();
+  };
+  const _4 = () => {
+    comp.setState({ users: [] });
+    return result();
+  };
+  const _2_val = _2();
+  const _3_val = _3();
+  const _4_val = _4();
+  assert(
+    comp.find('div').length === 1 &&
+      comp.find('h1').length === 1 &&
+      comp.find('ul').length === 1 &&
+      _1 === 4 &&
+      _2_val === 5 &&
+      _3_val === 0 &&
+      _4_val === 0
+  );
+})();
+```
+
+`MyComponent` debe renderizar elementos `li` que contienen el `username` de cada usuario en línea.
+
+```js
+(() => {
+  const comp = Enzyme.mount(React.createElement(MyComponent));
+  const users = (bool) => ({
+    users: [
+      { username: 'Jeff', online: bool },
+      { username: 'Alan', online: bool },
+      { username: 'Mary', online: bool },
+      { username: 'Jim', online: bool },
+      { username: 'Laura', online: bool }
+    ]
+  });
+  const ul = () => {
+    comp.setState(users(true));
+    return comp.find('ul').html();
+  };
+  const html = ul();
+  assert(
+    html ===
+      '<ul><li>Jeff</li><li>Alan</li><li>Mary</li><li>Jim</li><li>Laura</li></ul>'
+  );
+})();
+```
+
+Cada elemento de la lista debe tener un atributo `key` único.
+
+```js
+assert(
+  (() => {
+    const ul = Enzyme.mount(React.createElement(MyComponent)).find('ul');
+    console.log(ul.debug());
+    const keys = new Set([
+      ul.childAt(0).key(),
+      ul.childAt(1).key(),
+      ul.childAt(2).key(),
+      ul.childAt(3).key()
+    ]);
+    return keys.size === 4;
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'));
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      users: [
+        {
+          username: 'Jeff',
+          online: true
+        },
+        {
+          username: 'Alan',
+          online: false
+        },
+        {
+          username: 'Mary',
+          online: true
+        },
+        {
+          username: 'Jim',
+          online: false
+        },
+        {
+          username: 'Sara',
+          online: true
+        },
+        {
+          username: 'Laura',
+          online: true
+        }
+      ]
+    };
+  }
+  render() {
+    const usersOnline = null; // Change this line
+    const renderOnline = null; // Change this line
+    return (
+      <div>
+        <h1>Current Online Users:</h1>
+        <ul>{renderOnline}</ul>
+      </div>
+    );
+  }
+}
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      users: [
+        {
+          username: 'Jeff',
+          online: true
+        },
+        {
+          username: 'Alan',
+          online: false
+        },
+        {
+          username: 'Mary',
+          online: true
+        },
+        {
+          username: 'Jim',
+          online: false
+        },
+        {
+          username: 'Sara',
+          online: true
+        },
+        {
+          username: 'Laura',
+          online: true
+        }
+      ]
+    };
+  }
+  render() {
+    const usersOnline = this.state.users.filter(user => {
+      return user.online;
+    });
+    const renderOnline = usersOnline.map(user => {
+      return <li key={user.username}>{user.username}</li>;
+    });
+    return (
+      <div>
+        <h1>Current Online Users:</h1>
+        <ul>{renderOnline}</ul>
+      </div>
+    );
+  }
+}
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md

@@ -0,0 +1,265 @@
+---
+id: 5a24c314108439a4d403618a
+title: Utiliza Array.map() para renderizar dinámicamente los elementos
+challengeType: 6
+forumTopicId: 301417
+dashedName: use-array-map-to-dynamically-render-elements
+---
+
+# --description--
+
+El renderizado condicional es útil, pero es posible que necesites tus componentes para renderizar un número desconocido de elementos. A menudo en la programación reactiva, un programador no tiene forma de saber cuál es el estado de una aplicación hasta el tiempo de ejecución, porque mucho depende de la interacción de un usuario con ese programa. Los programadores necesitan escribir su código para manejar correctamente ese estado desconocido antes de tiempo. Usar `Array.map()` en React ilustra este concepto.
+
+Por ejemplo, crea una aplicación simple "To Do List". Como programador, no tienes forma de saber cuántos elementos puede tener un usuario en su lista. Necesitas configurar tu componente para renderizar dinámicamente el número correcto de elementos de la lista mucho antes de que alguien que use el programa decida que hoy es día de lavandería.
+
+# --instructions--
+
+El editor de código tiene la mayoría del componente `MyToDoList` configurado. Parte de este código debería parecer familiar si completaste el desafío de formulario controlado. Vas a notar un `textarea` y un `button`, junto con un par de métodos que rastrean sus estados, pero aún no se muestra nada a la página.
+
+Dentro del `constructor`, crea un objeto `this.state` y define dos estados: `userInput` que debe inicializarse como una cadena vacía, y `toDoList` que debe inicializarse como un arreglo vacío. Luego, elimina el comentario junto a la variable `items` del método `render()`. En su lugar, utiliza la función map() para recorrer el arreglo `toDoList` almacenado en el internal state del componente y renderizar un `li` por cada item. Intenta introducir la cadena `eat, code, sleep, repeat` dentro del `textarea`, haz clic en el botón y ve qué sucede.
+
+**Nota:** Puede que sepas que todos los elementos hijos hermanos creados por una operación map como ésta necesitan poseer un atributo `key` único. No te preocupes, este es el tema de nuestro próximo desafío.
+
+# --hints--
+
+El componente MyToDoList debe existir y mostrarse en la página.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyToDoList));
+    return mockedComponent.find('MyToDoList').length === 1;
+  })()
+);
+```
+
+El primer hijo de `MyToDoList` debe ser un elemento `textarea`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyToDoList));
+    return (
+      mockedComponent.find('MyToDoList').children().childAt(0).type() ===
+      'textarea'
+    );
+  })()
+);
+```
+
+El segundo hijo de `MyToDoList` debe ser un elemento `br`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyToDoList));
+    return (
+      mockedComponent.find('MyToDoList').children().childAt(1).type() === 'br'
+    );
+  })()
+);
+```
+
+El tercer hijo de `MyToDoList` debe ser un elemento `button`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyToDoList));
+    return (
+      mockedComponent.find('MyToDoList').children().childAt(2).type() ===
+      'button'
+    );
+  })()
+);
+```
+
+El estado de `MyToDoList` debe inicializarse con un arreglo vacío `toDoList`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyToDoList));
+    const initialState = mockedComponent.state();
+    return (
+      Array.isArray(initialState.toDoList) === true &&
+      initialState.toDoList.length === 0
+    );
+  })()
+);
+```
+
+El estado de `MyToDoList` debe ser inicializado con una cadena vacía `userInput`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyToDoList));
+    const initialState = mockedComponent.state();
+    return (
+      typeof initialState.userInput === 'string' &&
+      initialState.userInput.length === 0
+    );
+  })()
+);
+```
+
+Cuando el botón `Create List` es presionado, el componente `MyToDoList` debe devolver dinámicamente una lista desordenada que contenga un artículo por cada elemento de una lista separada por coma dentro del elemento `textarea`.
+
+```js
+(() => {
+  const mockedComponent = Enzyme.mount(React.createElement(MyToDoList));
+  const simulateChange = (el, value) =>
+    el.simulate('change', { target: { value } });
+  const state_1 = () => {
+    return mockedComponent.find('ul').find('li');
+  };
+  const setInput = () => {
+    return simulateChange(
+      mockedComponent.find('textarea'),
+      'testA, testB, testC'
+    );
+  };
+  const click = () => {
+    return mockedComponent.find('button').simulate('click');
+  };
+  const state_2 = () => {
+    const nodes = mockedComponent.find('ul').find('li');
+    return { nodes, text: nodes.reduce((t, n) => t + n.text().trim(), '') };
+  };
+  const setInput_2 = () => {
+    return simulateChange(
+      mockedComponent.find('textarea'),
+      't1, t2, t3, t4, t5, t6'
+    );
+  };
+  const click_1 = () => {
+    return mockedComponent.find('button').simulate('click');
+  };
+  const state_3 = () => {
+    const nodes = mockedComponent.find('ul').find('li');
+    return { nodes, text: nodes.reduce((t, n) => t + n.text().trim(), '') };
+  };
+  const awaited_state_1 = state_1();
+  const awaited_setInput = setInput();
+  const awaited_click = click();
+  const awaited_state_2 = state_2();
+  const awaited_setInput_2 = setInput_2();
+  const awaited_click_1 = click_1();
+  const awaited_state_3 = state_3();
+  assert(
+    awaited_state_1.length === 0 &&
+      awaited_state_2.nodes.length === 3 &&
+      awaited_state_3.nodes.length === 6 &&
+      awaited_state_2.text === 'testAtestBtestC' &&
+      awaited_state_3.text === 't1t2t3t4t5t6'
+  );
+})();
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyToDoList />, document.getElementById('root'));
+```
+
+## --seed-contents--
+
+```jsx
+const textAreaStyles = {
+  width: 235,
+  margin: 5
+};
+
+class MyToDoList extends React.Component {
+  constructor(props) {
+    super(props);
+    // Change code below this line
+
+    // Change code above this line
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleSubmit() {
+    const itemsArray = this.state.userInput.split(',');
+    this.setState({
+      toDoList: itemsArray
+    });
+  }
+  handleChange(e) {
+    this.setState({
+      userInput: e.target.value
+    });
+  }
+  render() {
+    const items = null; // Change this line
+    return (
+      <div>
+        <textarea
+          onChange={this.handleChange}
+          value={this.state.userInput}
+          style={textAreaStyles}
+          placeholder='Separate Items With Commas'
+        />
+        <br />
+        <button onClick={this.handleSubmit}>Create List</button>
+        <h1>My "To Do" List:</h1>
+        <ul>{items}</ul>
+      </div>
+    );
+  }
+}
+```
+
+# --solutions--
+
+```jsx
+const textAreaStyles = {
+  width: 235,
+  margin: 5
+};
+
+class MyToDoList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      toDoList: [],
+      userInput: ''
+    };
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleSubmit() {
+    const itemsArray = this.state.userInput.split(',');
+    this.setState({
+      toDoList: itemsArray
+    });
+  }
+  handleChange(e) {
+    this.setState({
+      userInput: e.target.value
+    });
+  }
+  render() {
+    const items = this.state.toDoList.map((item, i) => {
+      return <li key={i}>{item}</li>;
+    });
+    return (
+      <div>
+        <textarea
+          onChange={this.handleChange}
+          value={this.state.userInput}
+          style={textAreaStyles}
+          placeholder='Separate Items With Commas'
+        />
+        <br />
+        <button onClick={this.handleSubmit}>Create List</button>
+        <h1>My "To Do" List:</h1>
+        <ul>{items}</ul>
+      </div>
+    );
+  }
+}
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/use-default-props.md

@@ -0,0 +1,78 @@
+---
+id: 5a24c314108439a4d403616b
+title: Usa props predeterminadas
+challengeType: 6
+forumTopicId: 301418
+dashedName: use-default-props
+---
+
+# --description--
+
+React también tiene una opción para establecer props predeterminadas. Puedes asignar props predeterminadas a un componente como si fueran una propiedad dentro del propio componente y React asigna la prop predeterminada si es necesario. Esto te permite especificar cuál debe ser el valor de una prop si no se provee un valor específico. Por ejemplo, si declaras `MyComponent.defaultProps = { location: 'San Francisco' }`, has definido una prop de localización que se establece en la cadena `San Francisco`, a menos que especifiques lo contrario. React asigna props predeterminadas si estas no están definidas, pero si pasas el valor `null` como valor para una prop, este permanecerá `null`.
+
+# --instructions--
+
+El editor de código muestra un componente `ShoppingCart`. Define props predeterminadas en este componente que especifican una prop `items` con un valor de `0`.
+
+# --hints--
+
+El componente `ShoppingCart` debe renderizarse.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart));
+    return mockedComponent.find('ShoppingCart').length === 1;
+  })()
+);
+```
+
+El componente `ShoppingCart` debe tener una prop predeterminada de `{ items: 0 }`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart));
+    mockedComponent.setProps({ items: undefined });
+    return mockedComponent.find('ShoppingCart').props().items === 0;
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<ShoppingCart />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const ShoppingCart = (props) => {
+  return (
+    <div>
+      <h1>Shopping Cart Component</h1>
+    </div>
+  )
+};
+// Change code below this line
+```
+
+# --solutions--
+
+```jsx
+const ShoppingCart = (props) => {
+  return (
+    <div>
+      <h1>Shopping Cart Component</h1>
+    </div>
+  )
+};
+
+// Change code below this line
+ShoppingCart.defaultProps = {
+  items: 0
+}
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/use-proptypes-to-define-the-props-you-expect.md

@@ -0,0 +1,132 @@
+---
+id: 5a24c314108439a4d403616d
+title: Usa PropTypes para definir las props que esperas
+challengeType: 6
+forumTopicId: 301419
+dashedName: use-proptypes-to-define-the-props-you-expect
+---
+
+# --description--
+
+React proporciona características útiles de validación de tipos para verificar que los componentes reciban las props del tipo correcto. Por ejemplo, tu aplicación hace una llamada a un API para obtener datos que se esperan que sea un arreglo, el cual es pasado al componente como una prop. Puedes establecer `propTypes` en tu componente para que los datos sean de tipo `array`. Esto arrojará una advertencia útil cuando los datos sean de otro tipo.
+
+Se considera una muy buena práctica definir los `propTypes` cuando conoces el tipo de una propiedad con antelación. Puedes definir una propiedad `propTypes` para un componente de la misma manera que defines `defaultProps`. Al hacer esto, se validará que las props de una clave determinada están presentes con un tipo específico. Aquí hay un ejemplo para validar el tipo `function` para una prop llamada `handleClick`:
+
+```js
+MyComponent.propTypes = { handleClick: PropTypes.func.isRequired }
+```
+
+En el ejemplo anterior, la parte de `PropTypes.func` verifica que `handleClick` es una función. Añadir `isRequired` le dice a React que `handleClick` es una propiedad obligatoria para ese componente. Verás una advertencia si no se proporciona esa propiedad. También ten en cuenta que `func` representa `function`. Entre los siete tipos primitivos de JavaScript, `function` y `boolean` (escrito como `bool`) son los únicos dos que utilizan ortografía diferente. Además de los tipos primitivos, hay otros tipos disponibles. Por ejemplo, puedes validar si una prop es un elemento React. Por favor, consulta la [documentación](https://reactjs.org/docs/jsx-in-depth.html#specifying-the-react-element-type) para todas las opciones.
+
+**Nota:** A partir de React v15.5.0, `PropTypes` se importa de manera independiente de React, así: `import PropTypes from 'prop-types';`
+
+# --instructions--
+
+Define `propTypes` para el componente `Items` de tal manera que `quantity` sea una prop obligatoria y verificar que sea de tipo `number`.
+
+# --hints--
+
+El componente `ShoppingCart` debe renderizarse.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart));
+    return mockedComponent.find('ShoppingCart').length === 1;
+  })()
+);
+```
+
+El componente `Items` debe renderizarse.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart));
+    return mockedComponent.find('Items').length === 1;
+  })()
+);
+```
+
+El componente `Items` debe incluir una comprobación `propTypes` para requerir un valor para `quantity` y asegurar que su valor es un número.
+
+```js
+(getUserInput) =>
+  assert(
+    (function () {
+      const noWhiteSpace = __helpers.removeWhiteSpace(getUserInput('index'));
+      return (
+        noWhiteSpace.includes('quantity:PropTypes.number.isRequired') &&
+        noWhiteSpace.includes('Items.propTypes=')
+      );
+    })()
+  );
+```
+
+# --seed--
+
+## --before-user-code--
+
+```jsx
+var PropTypes = {
+  number: { isRequired: true }
+};
+```
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<ShoppingCart />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const Items = (props) => {
+  return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
+};
+
+// Change code below this line
+
+// Change code above this line
+
+Items.defaultProps = {
+  quantity: 0
+};
+
+class ShoppingCart extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return <Items />
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+const Items = (props) => {
+  return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
+};
+
+// Change code below this line
+Items.propTypes = {
+  quantity: PropTypes.number.isRequired
+};
+// Change code above this line
+
+Items.defaultProps = {
+  quantity: 0
+};
+
+class ShoppingCart extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return <Items />
+  }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/use-react-to-render-nested-components.md

@@ -0,0 +1,150 @@
+---
+id: 5a24c314108439a4d4036165
+title: Utiliza React para procesar componentes anidados
+challengeType: 6
+forumTopicId: 301420
+dashedName: use-react-to-render-nested-components
+---
+
+# --description--
+
+El último desafío mostró una manera simple de organizar dos componentes, pero hay muchas maneras diferentes de organizar componentes con React.
+
+La composición de componentes es una de las características más poderosas de React. Cuando trabajas con React, es importante comenzar a pensar en tu interfaz de usuario en términos de componentes, como el ejemplo App del último desafío. Debes dividir tu UI en sus bloques básicos de construcción, y esas piezas se convierten en los componentes. Esto ayuda a separar el código responsable de la interfaz de usuario del código responsable de manejar la lógica de tu aplicación. Esto puede simplificar enormemente el desarrollo y el mantenimiento de proyectos complejos.
+
+# --instructions--
+
+Hay dos componentes funcionales definidos en el editor de código, llamados `TypesOfFruit` y `Fruits`. Toma el componente `TypesOfFruit` y organízalo, o *anídalo*, dentro del componente `Fruits`. Luego toma el componente `Fruits` y anídalo dentro del componente `TypesOfFood`. El resultado debe ser un componente hijo, anidado dentro de un componente padre, ¡que a su vez está anidado dentro de un componente padre!
+
+# --hints--
+
+El componente `TypesOfFood` debe devolver un solo elemento `div`.
+
+```js
+assert(Enzyme.shallow(React.createElement(TypesOfFood)).type() === 'div');
+```
+
+El componente `TypesOfFood` debe devolver el componente `Fruits`.
+
+```js
+assert(
+  Enzyme.shallow(React.createElement(TypesOfFood)).props().children[1].type
+    .name === 'Fruits'
+);
+```
+
+El componente `Fruits` debe devolver el componente `TypesOfFruit`.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(TypesOfFood)).find('h2').html() ===
+    '<h2>Fruits:</h2>'
+);
+```
+
+El componente `TypesOfFruit` debe devolver los elementos `h2` y `ul`.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(TypesOfFood)).find('ul').text() ===
+    'ApplesBlueberriesStrawberriesBananas'
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<TypesOfFood />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const TypesOfFruit = () => {
+  return (
+    <div>
+      <h2>Fruits:</h2>
+      <ul>
+        <li>Apples</li>
+        <li>Blueberries</li>
+        <li>Strawberries</li>
+        <li>Bananas</li>
+      </ul>
+    </div>
+  );
+};
+
+const Fruits = () => {
+  return (
+    <div>
+      { /* Change code below this line */ }
+
+      { /* Change code above this line */ }
+    </div>
+  );
+};
+
+class TypesOfFood extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>Types of Food:</h1>
+        { /* Change code below this line */ }
+
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+const TypesOfFruit = () => {
+  return (
+    <div>
+      <h2>Fruits:</h2>
+      <ul>
+        <li>Apples</li>
+        <li>Blueberries</li>
+        <li>Strawberries</li>
+        <li>Bananas</li>
+      </ul>
+    </div>
+  );
+};
+
+const Fruits = () => {
+  return (
+    <div>
+      { /* Change code below this line */ }
+        <TypesOfFruit />
+      { /* Change code above this line */ }
+    </div>
+  );
+};
+
+class TypesOfFood extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>Types of Food:</h1>
+        { /* Change code below this line */ }
+        <Fruits />
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/use-state-to-toggle-an-element.md

@@ -0,0 +1,189 @@
+---
+id: 5a24c314108439a4d4036176
+title: Usa el estado para alternar un elemento
+challengeType: 6
+forumTopicId: 301421
+dashedName: use-state-to-toggle-an-element
+---
+
+# --description--
+
+A veces puedes necesitar conocer el estado anterior al actualizar el estado. Sin embargo, las actualizaciones del estado pueden ser asíncronas - esto significa que React puede procesar múltiples llamadas a `setState()` en una sola actualización. Esto significa que no puedes confiar en el valor anterior de `this.state` o `this.props` al calcular el siguiente valor. Por lo tanto, no debes usar código como este:
+
+```jsx
+this.setState({
+  counter: this.state.counter + this.props.increment
+});
+```
+
+En su lugar, debes pasar una función a `setState` que te permitirá acceder al estado y props. El usar una función con `setState` te garantiza que estás trabajando con los valores más actuales del estado y props. Esto significa que lo anterior debe reescribirse así:
+
+```jsx
+this.setState((state, props) => ({
+  counter: state.counter + props.increment
+}));
+```
+
+También puedes usar un formulario sin `props` si necesitas solo el `state`:
+
+```jsx
+this.setState(state => ({
+  counter: state.counter + 1
+}));
+```
+
+Ten en cuenta que tienes que encapsular el objeto literal entre paréntesis, de lo contrario JavaScript pensará que es un bloque de código.
+
+# --instructions--
+
+`MyComponent` tiene una propiedad `visibility` que se inicializa con el valor `false`. El método de renderización devuelve un resultado si el valor de `visibility` es verdadero, y un resultado diferente si es falso.
+
+Actualmente, no hay forma de actualizar la propiedad `visibility` en el `state` del componente. El valor debe cambiar entre verdadero y falso. Hay un manejador para el evento clic en el botón que activa un método de clase llamado `toggleVisibility()`. Pasa una función a `setState` para definir este método, de tal forma que el `state` de `visibility` cambie al valor opuesto cuando se llame el método. Si `visibility` es `false`, el método lo cambia a `true` y viceversa.
+
+Finalmente, haz clic en el botón para ver la renderizado condicional del componente basado en su `state`.
+
+**Pista:** ¡No olvides enlazar la palabra clave `this` al método en el `constructor`!
+
+# --hints--
+
+`MyComponent` debe devolver un elemento `div` el cual debe contener una etiqueta `button`.
+
+```js
+assert.strictEqual(
+  Enzyme.mount(React.createElement(MyComponent)).find('div').find('button')
+    .length,
+  1
+);
+```
+
+El estado de `MyComponent` debe inicializarse con una propiedad `visibility` establecida a `false`.
+
+```js
+assert.strictEqual(
+  Enzyme.mount(React.createElement(MyComponent)).state('visibility'),
+  false
+);
+```
+
+Al hacer clic en el botón se debe cambiar la propiedad `visibility` en el estado entre `true` y `false`.
+
+```js
+(() => {
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const first = () => {
+    mockedComponent.setState({ visibility: false });
+    return mockedComponent.state('visibility');
+  };
+  const second = () => {
+    mockedComponent.find('button').simulate('click');
+    return mockedComponent.state('visibility');
+  };
+  const third = () => {
+    mockedComponent.find('button').simulate('click');
+    return mockedComponent.state('visibility');
+  };
+  const firstValue = first();
+  const secondValue = second();
+  const thirdValue = third();
+  assert(!firstValue && secondValue && !thirdValue);
+})();
+```
+
+Una función anónima debe pasarse a `setState`.
+
+```js
+const paramRegex = '[a-zA-Z$_]\\w*(,[a-zA-Z$_]\\w*)?';
+assert(
+  new RegExp(
+    'this\\.setState\\((function\\(' +
+      paramRegex +
+      '\\){|([a-zA-Z$_]\\w*|\\(' +
+      paramRegex +
+      '\\))=>)'
+  ).test(__helpers.removeWhiteSpace(code))
+);
+```
+
+`this` no debe usarse dentro de `setState`
+
+```js
+assert(!/this\.setState\([^}]*this/.test(code));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'));
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visibility: false
+    };
+    // Change code below this line
+
+    // Change code above this line
+  }
+  // Change code below this line
+
+  // Change code above this line
+  render() {
+    if (this.state.visibility) {
+      return (
+        <div>
+          <button onClick={this.toggleVisibility}>Click Me</button>
+          <h1>Now you see me!</h1>
+        </div>
+      );
+    } else {
+      return (
+        <div>
+          <button onClick={this.toggleVisibility}>Click Me</button>
+        </div>
+      );
+    }
+  }
+}
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visibility: false
+    };
+    this.toggleVisibility = this.toggleVisibility.bind(this);
+  }
+  toggleVisibility() {
+    this.setState(state => ({
+      visibility: !state.visibility
+    }));
+  }
+  render() {
+    if (this.state.visibility) {
+      return (
+        <div>
+          <button onClick={this.toggleVisibility}>Click Me</button>
+          <h1>Now you see me!</h1>
+        </div>
+      );
+    } else {
+      return (
+        <div>
+          <button onClick={this.toggleVisibility}>Click Me</button>
+        </div>
+      );
+    }
+  }
+}
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/use-the-lifecycle-method-componentdidmount.md

@@ -0,0 +1,127 @@
+---
+id: 5a24c314108439a4d403617d
+title: Usa el método de ciclo de vida componentDidMount
+challengeType: 6
+forumTopicId: 301422
+dashedName: use-the-lifecycle-method-componentdidmount
+---
+
+# --description--
+
+La mayoría de los desarrolladores web, en algún momento, necesitan llamar al endpoint de un API para obtener datos. Si estás trabajando con React, es importante saber dónde realizar esta acción.
+
+La mejor práctica con React es ubicar las llamadas API o cualquier llamada a tu servidor en el método de ciclo de vida `componentDidMount()`. Este método se llama después de que un componente es montado (mounted) en el DOM. Cualquier llamada a `setState()` aquí desencadenará un re-renderizado de tu componente. Cuando se llame a una API en este método, y se modifique el estado con los datos que la API devuelve, automáticamente se ejecutará una actualización una vez que los datos sean recibidos.
+
+# --instructions--
+
+Hay una llamada simulada al API en `componentDidMount()`. Esta llamada modifica el estado después de 2.5 segundos para simular una llamada a un servidor para obtener datos. Este ejemplo consulta el total de usuarios activos actual para un sitio. En el método render, se renderiza el valor de `activeUsers` en el `h1` después del texto `Active Users:`. Mira lo que sucede en la vista previa, y siéntete libre de cambiar el tiempo de espera para ver los diferentes efectos.
+
+# --hints--
+
+`MyComponent` debe mostrar un elemento `div` el cual contiene una etiqueta `h1`.
+
+```js
+assert(
+  (() => {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    return (
+      mockedComponent.find('div').length === 1 &&
+      mockedComponent.find('h1').length === 1
+    );
+  })()
+);
+```
+
+El estado del componente debe actualizarse con una función timeout en `componentDidMount`.
+
+```js
+assert(
+  (() => {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    return new RegExp('setTimeout(.|\n)+setState(.|\n)+activeUsers').test(
+      String(mockedComponent.instance().componentDidMount)
+    );
+  })()
+);
+```
+
+La etiqueta `h1` debe renderizar el valor `activeUsers` del estado de `MyComponent`.
+
+```js
+(() => {
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const first = () => {
+    mockedComponent.setState({ activeUsers: 1237 });
+    return mockedComponent.find('h1').text();
+  };
+  const second = () => {
+    mockedComponent.setState({ activeUsers: 1000 });
+    return mockedComponent.find('h1').text();
+  };
+  assert(new RegExp('1237').test(first()) && new RegExp('1000').test(second()));
+})();
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'));
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeUsers: null
+    };
+  }
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState({
+        activeUsers: 1273
+      });
+    }, 2500);
+  }
+  render() {
+    return (
+      <div>
+        {/* Change code below this line */}
+        <h1>Active Users: </h1>
+        {/* Change code above this line */}
+      </div>
+    );
+  }
+}
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeUsers: null
+    };
+  }
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState({
+        activeUsers: 1273
+      });
+    }, 2500);
+  }
+  render() {
+    return (
+      <div>
+        <h1>Active Users: {this.state.activeUsers}</h1>
+      </div>
+    );
+  }
+}
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/use-the-lifecycle-method-componentwillmount.md

@@ -0,0 +1,87 @@
+---
+id: 5a24c314108439a4d403617c
+title: Usa el método de ciclo de vida componentWillMount
+challengeType: 6
+forumTopicId: 301423
+dashedName: use-the-lifecycle-method-componentwillmount
+---
+
+# --description--
+
+Los componentes React tienen varios métodos especiales que proporcionan oportunidades para realizar acciones en puntos específicos en el ciclo de vida de un componente. Estos se llaman métodos de ciclo de vida, o interceptores (hooks) de ciclo de vida, y te permiten interceptar componentes en determinados momentos del tiempo. Esto puede ser antes de que se rendericen, antes de que se actualicen, antes de que reciban las props, antes de que se desmonten, etc. Aquí hay una lista de algunos de los métodos principales del ciclo de vida: `componentWillMount()` `componentDidMount()` `shouldComponentUpdate()` `componentDidUpdate()` `componentWillUnmount()`. Las siguientes lecciones cubrirán algunos de los casos de uso básicos para estos métodos del ciclo de vida.
+
+**Nota:** El método de ciclo de vida `componentWillMount` se desaprobará en una versión futura de 16.X y se eliminará en la versión 17. [(Fuente)](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html)
+
+# --instructions--
+
+El método `componentWillMount()` es invocado antes del método `render()` cuando un componente está siendo montado en el DOM. Imprime algo en la consola dentro de `componentWillMount()` - puede que quieras tener la consola del navegador abierta para ver el resultado.
+
+# --hints--
+
+`MyComponent` debe renderizar un elemento `div`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    return mockedComponent.find('div').length === 1;
+  })()
+);
+```
+
+`console.log` debe ser llamado en `componentWillMount`.
+
+```js
+assert(
+  (function () {
+    const lifecycle = React.createElement(MyComponent)
+      .type.prototype.componentWillMount.toString()
+      .replace(/ /g, '');
+    return lifecycle.includes('console.log(');
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  componentWillMount() {
+    // Change code below this line
+
+    // Change code above this line
+  }
+  render() {
+    return <div />
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  componentWillMount() {
+    // Change code below this line
+    console.log('Component is mounting...');
+    // Change code above this line
+  }
+  render() {
+    return <div />
+  }
+};
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/write-a-react-component-from-scratch.md

@@ -0,0 +1,84 @@
+---
+id: 5a24c314108439a4d4036168
+title: Escribe un componente React desde cero
+challengeType: 6
+forumTopicId: 301424
+dashedName: write-a-react-component-from-scratch
+---
+
+# --description--
+
+Ahora que has aprendido los conceptos básicos de JSX y componentes React, es el momento de escribir un componente por tu cuenta. Los componentes React son el bloque de construcción principal de las aplicaciones React, por lo que es importante familiarizarse con cómo escribirlos. Recuerda, un componente típico de React es una `class` ES6 que hereda de `React.Component`. Tiene un método de render que retorna HTML (de JSX) o `null`. Esta es la estructura básica de un componente React. Una vez que tengas un buen entendimiento de esto, estarás preparado para empezar a construir proyectos React más complejos.
+
+# --instructions--
+
+Define una clase `MyComponent` que herede de `React.Component`. Su método render debe devolver un `div` que contenga una etiqueta `h1` con el texto: `My First React Component!` en él. Utiliza este texto de manera exacta, las mayúsculas, minúsculas y puntuación son importantes. También asegúrate de llamar el constructor de tu componente.
+
+Renderiza este componente al DOM usando `ReactDOM.render()`. Hay un `div` con `id='challenge-node'` disponible para que lo uses.
+
+# --hints--
+
+Debe existir un componente React llamado `MyComponent`.
+
+```js
+(getUserInput) =>
+  assert(
+    __helpers
+      .removeWhiteSpace(getUserInput('index'))
+      .includes('classMyComponentextendsReact.Component{')
+  );
+```
+
+`MyComponent` debe contener una etiqueta `h1` con texto `My First React Component!`. Las mayúsculas, minúsculas y puntuación son importantes.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    return mockedComponent.find('h1').text() === 'My First React Component!';
+  })()
+);
+```
+
+`MyComponent` debe renderizarse al DOM.
+
+```js
+assert(document.getElementById('challenge-node').childNodes.length === 1);
+```
+
+`MyComponent` debe tener un constructor invocando `super` con las `props`.
+
+```js
+assert(
+  MyComponent.toString().includes('MyComponent(props)') &&
+    MyComponent.toString().includes('_super.call(this, props)')
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```jsx
+// Change code below this line
+```
+
+# --solutions--
+
+```jsx
+// Change code below this line
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h1>My First React Component!</h1>
+      </div>
+    );
+  }
+};
+
+ReactDOM.render(<MyComponent />, document.getElementById('challenge-node'));
+```

curriculum/challenges/espanol/03-front-end-development-libraries/react/write-a-simple-counter.md

@@ -0,0 +1,146 @@
+---
+id: 5a24c314108439a4d4036177
+title: Escribe un contador simple
+challengeType: 6
+forumTopicId: 301425
+dashedName: write-a-simple-counter
+---
+
+# --description--
+
+Puedes diseñar un componente con un estado más complejo combinando los conceptos cubiertos hasta ahora. Estos incluyen inicializar el `state`, escribir métodos que establezcan `state` y asignar manejadores de eventos clic para activar estos métodos.
+
+# --instructions--
+
+El componente `Counter` mantiene un seguimiento de un valor `count` en el `state`. Hay dos botones que llaman a métodos `increment()` y `decrement()`. Escribe estos métodos para que el valor del contador sea incrementado o decrementado por 1 cuando se haga clic en el botón apropiado. También, crea un método `reset()` para que cuando se haga clic en el botón reset, el contador se establezca a 0.
+
+**Nota:** Asegúrate de no modificar el `className`de los botones. Además, recuerda agregar en el constructor los enlaces necesarios para los métodos recién creados.
+
+# --hints--
+
+`Counter` debe devolver un elemento `div` que contiene tres botones con contenido de texto en este orden `Increment!`, `Decrement!`, `Reset`.
+
+```js
+assert(
+  (() => {
+    const mockedComponent = Enzyme.mount(React.createElement(Counter));
+    return (
+      mockedComponent.find('.inc').text() === 'Increment!' &&
+      mockedComponent.find('.dec').text() === 'Decrement!' &&
+      mockedComponent.find('.reset').text() === 'Reset'
+    );
+  })()
+);
+```
+
+El estado de `Counter` debe inicializarse con una propiedad `count` establecida en `0`.
+
+```js
+const mockedComponent = Enzyme.mount(React.createElement(Counter));
+assert(mockedComponent.find('h1').text() === 'Current Count: 0');
+```
+
+Al hacer clic en el botón de incremento se incrementará el contador en `1`.
+
+```js
+const mockedComponent = Enzyme.mount(React.createElement(Counter));
+mockedComponent.find('.inc').simulate('click');
+assert(mockedComponent.find('h1').text() === 'Current Count: 1');
+```
+
+Al hacer clic en el botón de disminuir se reducirá el contador en `1`.
+
+```js
+const mockedComponent = Enzyme.mount(React.createElement(Counter));
+mockedComponent.find('.dec').simulate('click');
+assert(mockedComponent.find('h1').text() === 'Current Count: -1');
+```
+
+Al hacer clic en el botón reset se reiniciará el contador a `0`.
+
+```js
+const mockedComponent = Enzyme.mount(React.createElement(Counter));
+mockedComponent.setState({ count: 5 });
+const currentCountElement = mockedComponent.find('h1');
+assert(currentCountElement.text() === 'Current Count: 5');
+mockedComponent.find('.reset').simulate('click');
+assert(currentCountElement.text() === 'Current Count: 0');
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<Counter />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class Counter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      count: 0
+    };
+    // Change code below this line
+
+    // Change code above this line
+  }
+  // Change code below this line
+
+  // Change code above this line
+  render() {
+    return (
+      <div>
+        <button className='inc' onClick={this.increment}>Increment!</button>
+        <button className='dec' onClick={this.decrement}>Decrement!</button>
+        <button className='reset' onClick={this.reset}>Reset</button>
+        <h1>Current Count: {this.state.count}</h1>
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class Counter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      count: 0
+    };
+  this.increment = this.increment.bind(this);
+ this.decrement = this.decrement.bind(this);
+ this.reset = this.reset.bind(this);
+ }
+  reset() {
+    this.setState({
+      count: 0
+    });
+  }
+  increment() {
+    this.setState(state => ({
+      count: state.count + 1
+    }));
+  }
+  decrement() {
+    this.setState(state => ({
+      count: state.count - 1
+    }));
+  }
+  render() {
+    return (
+      <div>
+        <button className='inc' onClick={this.increment}>Increment!</button>
+        <button className='dec' onClick={this.decrement}>Decrement!</button>
+        <button className='reset' onClick={this.reset}>Reset</button>
+        <h1>Current Count: {this.state.count}</h1>
+      </div>
+    );
+  }
+};
+```