Merge branch 'source' into patch-1

Author: EdwardNavarro

src/content/0/es/part0a.md

@@ -140,7 +140,7 @@ Al enviar al menos 24 de 29 ejercicios de la parte 9 del curso, TypeScript, pued
 
 #### Part 10 - Desarrollo Web Full Stack: React Native (2 crédito, CSM14111)
 
-Al enviar ejercicios 25 ejercicios para la parte 10 del curso, React Native, puedes obtener dos créditos adicionales. Puedes encontrar más información sobre los requisitos previos de esta parte, el envío de ejercicios y los créditos en la [parte 10](/es/part10/introduccion_a_react_native).
+Al enviar 25 ejercicios para la parte 10 del curso, React Native, puedes obtener dos créditos adicionales. Puedes encontrar más información sobre los requisitos previos de esta parte, el envío de ejercicios y los créditos en la [parte 10](/es/part10/introduccion_a_react_native).
 
 - Envía al menos 25 ejercicios para la parte 10.
 - [Inscríbete en la parte 10 a través de la Open University](https://www.avoin.helsinki.fi/palvelut/esittely.aspx?s=otm-ec172afe-bc01-46ab-af23-694311f1950a).

src/content/1/es/part1c.md

@@ -1,11 +1,11 @@
---- 
+---
 mainImage: ../../../images/part-1.svg
 part: 1
 letter: c
 lang: es
---- 
+---
 
-<div class="content"> 
+<div class="content">
 
 Volvamos a trabajar con React.
 
@@ -212,7 +212,7 @@ El componente de la aplicación recibe el valor del contador a través de la pro
 counter += 1
 ```
 
-el componente no volverá a renderizarse. Podemos hacer que el componente se vuelva a renderizar llamando al método _ReactDOM.render_ por segunda vez, por ejemplo, de la siguiente manera: 
+el componente no volverá a renderizarse. Podemos hacer que el componente se vuelva a renderizar llamando al método _ReactDOM.render_ por segunda vez, por ejemplo, de la siguiente manera:
 
 ```js
 let counter = 1
@@ -230,7 +230,7 @@ counter += 1
 refresh()
 ```
 
-El comando de re-renderizado se ha envuelto dentro de la función _refresh_ para reducir la cantidad de código copiado y pegado. 
+El comando de re-renderizado se ha envuelto dentro de la función _refresh_ para reducir la cantidad de código copiado y pegado.
 
 Ahora el componente <i>se renderiza tres veces</i>, primero con el valor 1, luego 2 y finalmente 3. Sin embargo, los valores 1 y 2 se muestran en la pantalla durante un período de tiempo tan corto que pueden no ser notados.
 
@@ -249,9 +249,9 @@ Hacer llamadas repetidas al método _ReactDOM.render_ no es la forma recomendada
 
 Todos nuestros componentes hasta ahora han sido simples en el sentido de que no contienen ningún estado que pueda cambiar durante el ciclo de vida del componente.
 
-A continuación, agregaremos estado al componente <i>App</i> con la ayuda del [hook de estado](https://es.legacy.reactjs.org/docs/hooks-state.html) de React.
+A continuación, agreguemos estado al componente <i>App</i> de nuestra aplicación con la ayuda del [hook de estado](https://es.react.dev/reference/react/useState) de React.
 
-Cambiaremos la aplicación a lo siguiente. <i>main.jsx</i> regresa a
+Cambiaremos la aplicación a lo siguiente:
 
 ```js
 import ReactDOM from 'react-dom/client'
@@ -364,7 +364,7 @@ Es fácil de seguir y rastrear las llamadas realizadas a la <i>App</i> función
 
 ![](../../images/1/4e.png)
 
-### Manejo de eventos 
+### Manejo de eventos
 
 Ya hemos mencionado <i>controladores de eventos</i> algunas veces en la [parte 0](/es/part0), que están registrados para ser llamados cuando ocurren eventos específicos. Por ejemplo, la interacción de un usuario con los diferentes elementos de una página web puede provocar que se active una colección de diferentes tipos de eventos.
 
@@ -441,7 +441,7 @@ const App = () => {
         plus
       </button>
       // highlight-start
-      <button onClick={() => setCounter(0)}> 
+      <button onClick={() => setCounter(0)}>
         zero
       </button>
       // highlight-end
@@ -462,50 +462,50 @@ Definimos los controladores de eventos para nuestros botones donde declaramos su
 </button>
 ```
 
-¿Qué pasaría si intentáramos definir los controladores de eventos de una forma más simple? 
+¿Qué pasaría si intentáramos definir los controladores de eventos de una forma más simple?
 
 ```js
-<button onClick={setCounter(counter + 1)}> 
+<button onClick={setCounter(counter + 1)}>
   plus
 </button>
 ```
 
 Esto rompería completamente nuestra aplicación:
 
 ![Captura de pantalla de un error de re-renderizado](../../images/1/5b.png)
- 
+
 ¿Qué está pasando? Se supone que un controlador de eventos es una <i>función</i> o una <i>referencia de función</i>, y cuando escribimos
 
 ```js
 <button onClick={setCounter(counter + 1)}>
 ```
 
-el controlador de eventos es en realidad una <i>llamada a la función</i>. En muchas situaciones esto está bien, pero no en esta situación particular. Al principio, el valor de la variable <i>counter</i> es 0. Cuando React renderiza el componente por primera vez, ejecuta la llamada de función <em>setCounter(0 + 1)</em> y cambia el valor del estado del componente en 1. 
+el controlador de eventos es en realidad una <i>llamada a la función</i>. En muchas situaciones esto está bien, pero no en esta situación particular. Al principio, el valor de la variable <i>counter</i> es 0. Cuando React renderiza el componente por primera vez, ejecuta la llamada de función <em>setCounter(0 + 1)</em> y cambia el valor del estado del componente en 1.
 Esto hará que el componente se vuelva a renderizar, react ejecutará la llamada a la función setCounter nuevamente, y el estado cambiará dando lugar a otra repetición...
 
 Definamos los controladores de eventos como lo hicimos antes
 
 ```js
-<button onClick={() => setCounter(counter + 1)}> 
+<button onClick={() => setCounter(counter + 1)}>
   plus
 </button>
 ```
 
-Ahora el atributo del botón que define lo que sucede cuando se hace clic en el botón - <i>onClick</i> - tiene el valor _() => setCounter (counter + 1)_. 
-La función setCounter se llama solo cuando un usuario hace clic en el botón. 
+Ahora el atributo del botón que define lo que sucede cuando se hace clic en el botón - <i>onClick</i> - tiene el valor _() => setCounter (counter + 1)_.
+La función setCounter se llama solo cuando un usuario hace clic en el botón.
 
 Por lo general, definir controladores de eventos dentro de las plantillas JSX no es una buena idea.
 Aquí está bien, porque nuestros controladores de eventos son muy simples.
 
-Vamos a separar a los controladores de eventos en funciones separadas de todas formas: 
+Vamos a separar a los controladores de eventos en funciones separadas de todas formas:
 
 ```js
 const App = () => {
   const [ counter, setCounter ] = useState(0)
 
 // highlight-start
   const increaseByOne = () => setCounter(counter + 1)
-  
+
   const setToZero = () => setCounter(0)
   // highlight-end
 
@@ -525,7 +525,7 @@ const App = () => {
 Aquí los controladores de eventos se han definido correctamente. El valor del atributo <i>onClick</i> es una variable que contiene una referencia a una función:
 
 ```js
-<button onClick={increaseByOne}> 
+<button onClick={increaseByOne}>
   plus
 </button>
 ```
@@ -534,11 +534,11 @@ Aquí los controladores de eventos se han definido correctamente. El valor del a
 
 Se recomienda escribir componentes de React que sean pequeños y reutilizables en toda la aplicación e incluso en proyectos. Refactoricemos nuestra aplicación para que esté compuesta por tres componentes más pequeños, un componente para mostrar el contador y dos componentes para los botones.
 
-Primero implementemos un componente <i>Display</i> que es responsable de mostrar el valor del contador. 
+Primero implementemos un componente <i>Display</i> que es responsable de mostrar el valor del contador.
 
 Una de las mejores prácticas en React es [levantar el estado](https://es.legacy.reactjs.org/docs/lifting-state-up.html) en la jerarquía de componentes. La documentación dice:
 
-> <i>A menudo, varios componentes deben reflejar los mismos datos cambiantes. Recomendamos elevar el estado compartido a su ancestro común más cercano.</i> 
+> <i>A menudo, varios componentes deben reflejar los mismos datos cambiantes. Recomendamos elevar el estado compartido a su ancestro común más cercano.</i>
 
 Así que coloquemos el estado de la aplicación en el componente <i>App</i> y pasémoslo al componente <i>Display</i> a través de <i>props</i>:
 
@@ -550,7 +550,7 @@ const Display = (props) => {
 }
 ```
 
-Usar el componente es sencillo, ya que solo necesitamos pasarle el estado del _counter_: 
+Usar el componente es sencillo, ya que solo necesitamos pasarle el estado del _counter_:
 
 ```js
 const App = () => {
@@ -565,7 +565,7 @@ const App = () => {
       <button onClick={increaseByOne}>
         plus
       </button>
-      <button onClick={setToZero}> 
+      <button onClick={setToZero}>
         zero
       </button>
     </div>
@@ -608,11 +608,11 @@ const App = () => {
       <Button
         handleClick={setToZero}
         text='zero'
-      />     
+      />
       <Button
         handleClick={decreaseByOne}
         text='minus'
-      />           
+      />
       // highlight-end
     </div>
   )
@@ -627,10 +627,10 @@ El controlador de eventos se pasa al componente <i>Button</i> a través de la pr
 
 Repasemos los principios fundamentales de cómo funciona una aplicación una vez más.
 
-Cuando se inicia la aplicación, se ejecuta el código en _App_. Este código usa un hook [useState](https://es.legacy.reactjs.org/docs/hooks-reference.html#usestate) para crear el estado de la aplicación, estableciendo un valor inicial de la variable _counter_.
-Este componente contiene el componente _Display_, – que muestra el valor del contador, 0 – y tres componentes _Button_. Todos los botones tienen controladores de eventos, que se utilizan para cambiar el estado del contador.
+Cuando se inicia la aplicación, se ejecuta el código en _App_. Este código usa un hook [useState](https://es.react.dev/reference/react/useState) para crear el estado de la aplicación, estableciendo un valor inicial de la variable _counter_.
+Este componente contiene el componente _Display_, que muestra el valor del contador, 0, y tres componentes _Button_. Todos los botones tienen controladores de eventos, que se utilizan para cambiar el estado del contador.
 
-Cuando se hace clic en uno de los botones, se ejecuta el controlador de eventos. El controlador de eventos cambia el estado del componente _App_ con la función _setCounter_. 
+Cuando se hace clic en uno de los botones, se ejecuta el controlador de eventos. El controlador de eventos cambia el estado del componente _App_ con la función _setCounter_.
 **Llamar a una función que cambia el estado hace que el componente se vuelva a procesar.**
 
 Entonces, si un usuario hace clic en el botón <i>plus</i>, el controlador de eventos del botón cambia el valor de _counter_ a 1, y el componente _App_ se vuelve a generar.
@@ -667,7 +667,7 @@ const App = () => {
       <Button onClick={decreaseByOne} text="minus" />
     </div>
   )
-} 
+}
 ```
 
 Dejanos ahora ver que se imprime en la consola cuando se hace clic en los botones plus, zero y minus:

src/content/1/es/part1d.md

@@ -126,7 +126,7 @@ const handleRightClick = () => {
 }
 ```
 
-La sintaxis puede parecer un poco extraña al principio. En la práctica, <em>{...clicks}</em> crea un nuevo objeto que tiene copias de todas las propiedades del objeto _clicks_. Cuando especificamos una propiedad en particular, por ejemplo, <i>right</i> en <em>{...clics, right: 1}</em>, el valor de la propiedad _right_ en el nuevo objeto será 1.
+La sintaxis puede parecer un poco extraña al principio. En la práctica, <em>{...clicks}</em> crea un nuevo objeto que tiene copias de todas las propiedades del objeto _clicks_. Cuando especificamos una propiedad en particular, por ejemplo, <i>right</i> en <em>{...clicks, right: 1}</em>, el valor de la propiedad _right_ en el nuevo objeto será 1.
 
 En el ejemplo anterior, esto:
 

src/content/3/en/part3c.md

@@ -371,6 +371,8 @@ Let's get a quick start by copy-pasting the Mongoose definitions to the <i>index
 ```js
 const mongoose = require('mongoose')
 
+const password = process.argv[2]
+
 // DO NOT SAVE YOUR PASSWORD TO GITHUB!!
 const url =
   `mongodb+srv://fullstack:${password}@cluster0.o1opl.mongodb.net/?retryWrites=true&w=majority`

src/content/5/en/part5c.md

@@ -186,7 +186,7 @@ test('renders content', () => {
 })
 ```
 
-**NB:** A better method of selecting elements for testing, is setting id-attributes that are inserted into the code specifically for testing purposes. We can then use a selector like [getByTestId](https://testing-library.com/docs/queries/bytestid/), that looks for elements based on the specified id-attribute (named `data-testid` in this case).
+**NB:** A more consistent way of selecting elements is using a [data attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*) that is specifically defined for testing purposes. Using _react-testing-library_, we can leverage the [getByTestId](https://testing-library.com/docs/queries/bytestid/) method to select elements with a specified _data-testid_ attribute.
 
 ### Debugging tests
 

src/content/6/en/part6d.md

@@ -266,9 +266,11 @@ const App = () => {
     },
   })
 
+  // highlight-start
   const toggleImportance = (note) => {
     updateNoteMutation.mutate({...note, important: !note.important })
   }
+  // highlight-end
 
   // ...
 }
@@ -363,7 +365,7 @@ Most React applications need not only a way to temporarily store the served data
 
 ### Exercises 6.20.-6.22.
 
-Now let's make a new version of the anecdote application that uses the React Query library. Take [this project](https://github.com/fullstack-hy2020/query-anecdotes) as your starting point. The project has a ready-installed JSON Server, the operation of which has been slightly modified. Start the server with <i>npm run server</i>.
+Now let's make a new version of the anecdote application that uses the React Query library. Take [this project](https://github.com/fullstack-hy2020/query-anecdotes) as your starting point. The project has a ready-installed JSON Server, the operation of which has been slightly modified (Review the _server.js_ file for more details. Make sure you're connecting to the correct _PORT_). Start the server with <i>npm run server</i>.
 
 #### Exercise 6.20
 

src/content/6/es/part6b.md

@@ -413,9 +413,9 @@ Hay un pequeño defecto cosmético en nuestra aplicación. Aunque el filtro est
 
 #### 6.9 Mejores anécdotas, paso 7
 
-Implementa filtros para las anecdotas que se muestran al usuario. Se recomienda crear un nuevo reducer, action creators y un reducer commbinado para la store usando la función <i>combineReducers</i>.
+Implementa filtros para las anécdotas que se muestran al usuario. Se recomienda crear un nuevo reducer, action creators y un reducer combinado para la store usando la función <i>combineReducers</i>.
 
-Crea un nuevo componente <i>Filter</i> para mostrar los filtros. Puedes utilizar el suigiente código como punto de partida:
+Crea un nuevo componente <i>Filter</i> para mostrar los filtros. Puedes utilizar el siguiente código como punto de partida:
 
 ```js
 const Filter = () => {
@@ -716,11 +716,11 @@ Continuemos trabajando en la aplicación de anécdotas que comenzamos en el ejer
 
 #### 6.10 Mejores anécdotas, paso 8
 
-Instale Redux Toolkit en el proyecto. Mueva la creacion de la store de redux a su propio archivo <i>store.js</i> y use la función <em>configureStore</em> para crear la store.
+Instale Redux Toolkit en el proyecto. Mueva la creación de la store de redux a su propio archivo <i>store.js</i> y use la función <em>configureStore</em> para crear la store.
 
 Cambie la definición del <i>Filter reducer y creación de acciones</i> para usar la función <em>createSlice</em> de Redux Toolkit.
 
-Tambien, empiece a usar los Redux DevTools para depurar el estado de la aplicación facilmente.
+También, empiece a usar los Redux DevTools para depurar el estado de la aplicación fácilmente.
 
 #### 6.11 Mejores anécdotas, paso 9
 

src/content/6/es/part6d.md

@@ -205,7 +205,7 @@ newNoteMutation.mutate({ content, important: true })
 
 Nuestra solución es buena. Excepto que no funciona. La nueva nota se guarda en el servidor, pero no se actualiza en la pantalla.
 
-Para renderizar una nueva nota, debemos decirle a React Query que el resultado antiguo de la consulta cuya clave es el sring <i>notes</i> debe ser [invalidado](https://react-query-v3.tanstack.com/guides/invalidations-from-mutations).
+Para renderizar una nueva nota, debemos decirle a React Query que el resultado antiguo de la consulta cuya clave es el string <i>notes</i> debe ser [invalidado](https://react-query-v3.tanstack.com/guides/invalidations-from-mutations).
 
 Afortunadamente, la invalidación es fácil, se puede hacer definiendo la función de devolución de llamada <i>onSuccess</i> apropiada para la mutación:
 
@@ -256,9 +256,11 @@ const App = () => {
     },
   })
 
+  // highlight-start
   const toggleImportance = (note) => {
     updateNoteMutation.mutate({...note, important: !note.important })
   }
+  // highlight-end
 
   // ...
 }
@@ -359,7 +361,7 @@ La aplicación debe funcionar de tal manera que si hay problemas para comunicars
 
 ![](../../images/6/65new.png)
 
-Puede encontra [aquí](https://react-query-v3.tanstack.com/guides/queries) información sobre cómo detectar posibles errores.
+Puede encontrar [aquí](https://react-query-v3.tanstack.com/guides/queries) información sobre cómo detectar posibles errores.
 
 Puede simular un problema con el servidor apagando el servidor JSON. Tenga en cuenta que en una situación problemática, la consulta primero está en el estado <i>isLoading</i> durante un tiempo, porque si una solicitud falla, React Query intenta la solicitud varias veces antes de que indique que la solicitud no es exitosa. Opcionalmente, puede especificar que no se realizan reintentos: