Merge pull request #3405 from pablo-maff/update-spanish-version

Part 1 reviewed

Author: mluukkai

src/content/1/en/part1a.md

@@ -9,8 +9,7 @@ lang: en
 
 We will now start getting familiar with probably the most important topic of this course, namely the [React](https://react.dev/) library. Let's start by making a simple React application as well as getting to know the core concepts of React.
 
-The easiest way to get started by far is by using a tool called 
-[Vite](https://vitejs.dev/).
+The easiest way to get started by far is by using a tool called [Vite](https://vitejs.dev/).
 
 Let's create an application called <i>part1</i>, navigate to its directory and install the libraries:
 
@@ -35,13 +34,13 @@ npm run dev
 
 The console says that the application has started on localhost port 5173, i.e. the address <http://localhost:5173/>:
 
-![](../../images/1/1-vite1.png)
+![screenshot of the console running vite on localhost 5173](../../images/1/1-vite1.png)
 
 Vite starts the application [by default](https://vitejs.dev/config/server-options.html#server-port) on port 5173. If it is not free, Vite uses the next free port number.
 
 Open the browser and a text editor so that you can view the code as well as the webpage at the same time on the screen:
 
-![](../../images/1/1-vite4.png)
+![screenshot of vite initial webpage and file structure on vs code](../../images/1/1-vite4.png)
 
 The code of the application resides in the <i>src</i> folder. Let's simplify the default code such that the contents of the file main.jsx looks like this:
 
@@ -85,8 +84,7 @@ in contrast to Vite's
 npm run dev 
 ```
 
-
-The course is currently (11 August 2023) being updated to use Vite. Some brands may still use the application base created with create-react-app.
+The course is currently (11 August 2023) being updated to use Vite. Some parts may still use the application base created with create-react-app.
 
 ### Component
 
@@ -388,7 +386,7 @@ Software development is hard. It gets even harder if one is not using all the po
 
 Depending on the editor you are using, you may receive the following error message at this point:
 
-![](../../images/1/1-vite5.png)
+![screenshot of vs code showing eslint error: "name is missing in props validation"](../../images/1/1-vite5.png)
 
 It's not an actual error, but a warning caused by the [ESLint](https://eslint.org/) tool. You can silence the warning [react/prop-types](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prop-types.md) by adding to the file <i>.eslintrc .cjs</i> the next line
 

src/content/1/en/part1c.md

@@ -363,7 +363,7 @@ const App = () => {
 
 It's easy to follow and track the calls made to the <i>App</i> component's render function:
 
-![screenshot of render function with dev tools](../../images/1/4e.png)
+![screenshot of rendering log on dev tools](../../images/1/4e.png)
 
 Was your browser console open? If it wasn't, then promise that this was the last time you need to be reminded about it.
 
@@ -708,8 +708,7 @@ const Display = ({ counter }) => {
 }
 ```
 
-The function defining the component contains only the return statement, so
-we can define the function using the more compact form of arrow functions:
+The function defining the component contains only the return statement, so we can define the function using the more compact form of arrow functions:
 
 ```js
 const Display = ({ counter }) => <div>{counter}</div>

src/content/1/en/part1d.md

@@ -106,8 +106,7 @@ The following object is set as the new state of the application:
 
 The new value of the <i>left</i> property is now the same as the value of <i>left + 1</i> from the previous state, and the value of the <i>right</i> property is the same as the value of the <i>right</i> property from the previous state.
 
-We can define the new state object a bit more neatly by using the [object spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)
-syntax that was added to the language specification in the summer of 2018:
+We can define the new state object a bit more neatly by using the [object spread](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) syntax that was added to the language specification in the summer of 2018:
 
 ```js
 const handleLeftClick = () => {
@@ -227,8 +226,7 @@ const handleLeftClick = () => {
 
 However, __don't__ do this. As mentioned previously, the state of React components like _allClicks_ must not be mutated directly. Even if mutating state appears to work in some cases, it can lead to problems that are very hard to debug.
 
-Let's take a closer look at how the clicking
-is rendered to the page:
+Let's take a closer look at how the clicking is rendered to the page:
 
 ```js
 const App = () => {
@@ -475,7 +473,7 @@ Keep both your code and the web page open together **at the same time, all the t
 
 If and when your code fails to compile and your browser lights up like a Christmas tree:
 
-![screenshot of code](../../images/1/6x.png)
+![screenshot of error pointing at the code line where it has been generated](../../images/1/6x.png)
 
 don't write more code but rather find and fix the problem **immediately**. There has yet to be a moment in the history of coding where code that fails to compile would miraculously start working after writing large amounts of additional code. I highly doubt that such an event will transpire during this course either.
 
@@ -1134,8 +1132,7 @@ Programming is hard, that is why I will use all the possible means to make it ea
 
 <h3>Exercises 1.6.-1.14.</h3>
 
-Submit your solutions to the exercises by first pushing your code to GitHub and then marking the completed exercises into
-the "my submissions" tab of the [submission application](https://studies.cs.helsinki.fi/stats/courses/fullstackopen).
+Submit your solutions to the exercises by first pushing your code to GitHub and then marking the completed exercises into the "my submissions" tab of the [submission application](https://studies.cs.helsinki.fi/stats/courses/fullstackopen).
 
 Remember, submit **all** the exercises of one part **in a single submission**. Once you have submitted your solutions for one part, **you cannot submit more exercises to that part anymore**.
 

src/content/1/es/part1a.md

@@ -11,13 +11,13 @@ Ahora comenzaremos a familiarizarnos con probablemente el tema más importante d
 
 La forma más fácil de empezar es utilizando una herramienta llamada [Vite](https://es.vitejs.dev/).
 
-Comencemos creando una aplicación llamada <i>part1</i>, navegar a este direcctorio e instalando las librerias:
+Comencemos creando una aplicación llamada <i>part1</i>, navega a este directorio e instala las librerías:
 
 ```bash
 # npm 6.x (desactualizado, pero aun en uso por algunos):
 npm create vite@latest part1 --template react
 
-# npm 7+, el doble guión adicional es necesario:
+# npm 7+, el doble guion adicional es necesario:
 npm create vite@latest part1 -- --template react
 ```
 
@@ -34,13 +34,13 @@ npm run dev
 
 La consola indica que la aplicación ha iniciado en localhost, puerto 5173, es decir la dirección <http://localhost:5173/>:
 
-![](../../images/1/1-vite1.png)
+![Captura de pantalla de la consola ejecutando vite en localhost 5173](../../images/1/1-vite1.png)
 
 Vite inicia la aplicación [por defecto](https://es.vitejs.dev/config/server-options.html#server-port) en el puerto 5173. Si este no está libre, Vite utiliza el siguiente numero de puerto libre.
 
 Abre el navegador y un editor de código para que puedas ver el código y el navegador al mismo tiempo en la pantalla:
 
-![](../../images/1/1-vite4.png)
+![Captura de pantalla de la pagina inicial de vite y estructura de archivos en vs code](../../images/1/1-vite4.png)
 
 El código de la aplicación se encuentra en la carpeta <i>src</i>. Simplifiquemos el código predeterminado de tal modo que el archivo main.jsx se vea así:
 
@@ -84,9 +84,7 @@ en contraste con Vite
 npm run dev
 ```
 
-El curso actualmente (11 de agosto de 2023) está siendo actualizado para usar Vite. Algunas marcas aun usan la aplicación base creada con create-react-app.
-
-Creemos una aplicación llamada <i>part1</i> y naveguemos hasta su directorio.
+El curso actualmente (11 de agosto de 2023) está siendo actualizado para usar Vite. Algunas partes aun usan la aplicación base creada con create-react-app.
 
 ### Componente
 
@@ -129,7 +127,7 @@ const App = () => (
 )
 ```
 
-Como probablemente adivinaste, el componente se rendizará como una etiqueta <i>div</i>, que envuelve una etiqueta <i>p</i> que contiene el texto <i>Hello world</i>.
+Como probablemente adivinaste, el componente se renderiza como una etiqueta <i>div</i>, que envuelve una etiqueta <i>p</i> que contiene el texto <i>Hello world</i>.
 
 Técnicamente, el componente se define como una función de JavaScript. La siguiente es una función (que no recibe ningún parámetro):
 
@@ -220,11 +218,11 @@ export default App
 
 El export no se muestra en la mayoría de los ejemplos del material de este curso. Sin este export el componente y la aplicación completa se romperían.
 
-¿Reduerdas que prometiste dejar la consola abierta? ¿Qué se imprimió allí?
+¿Recuerdas que prometiste dejar la consola abierta? ¿Qué se imprimió allí?
 
 ### JSX
 
-Parece que los componentes de React están devolviendo marcado HTML. Sin embargo, éste no es el caso. El diseño de los componentes de React se escribe principalmente usando [JSX](https://es.legacy.reactjs.org/docs/introducing-jsx.html). Aunque JSX se parece a HTML, en realidad estamos tratando con una forma de escribir JavaScript. Bajo el capó, el JSX devuelto por los componentes de React se compila en JavaScript. 
+Parece que los componentes de React están devolviendo marcado HTML. Sin embargo, éste no es el caso. El diseño de los componentes de React se escribe principalmente usando [JSX](https://es.react.dev/learn/writing-markup-with-jsx). Aunque JSX se parece a HTML, en realidad estamos tratando con una forma de escribir JavaScript. Bajo el capó, el JSX devuelto por los componentes de React se compila en JavaScript. 
 
 Después de compilar, nuestra aplicación se ve así: 
 
@@ -376,19 +374,19 @@ const App = () => {
 
 Los props enviados por el componente <i>App</i> son los valores de las variables, el resultado de la evaluación de la expresión de suma y un string regular.
 
-El componente <i>Hello</i> tambien imprime en consola el valor del objeto props.
+El componente <i>Hello</i> también imprime en consola el valor del objeto props.
 
 Yo realmente espero que tu consola esté abierta. Si no es asi, recuerda tu promesa:
 
 > <i>Prometo dejar la consola abierta todo el tiempo</i> durante este curso, y por el resto de mi vida mientras esté haciendo desarrollo web.
 
-EL desarrollo de software es dificil. Este se vuelve aun más dificil si uno no está usando todas las herramientas disponibles como la consola de desarrollo e imprimiendo la depuración con _console.log_. Los profesionales usan ambas <i>todo el tiempo</i> y no hay una sola razón de porque un principiante no debería adoptar estos maravillosos métodos de ayuda que hacen la vida más fácil.
+EL desarrollo de software es difícil. Este se vuelve aun más difícil si uno no está usando todas las herramientas disponibles como la consola de desarrollo e imprimiendo la depuración con _console.log_. Los profesionales usan ambas <i>todo el tiempo</i> y no hay una sola razón de porque un principiante no debería adoptar estos maravillosos métodos de ayuda que hacen la vida más fácil.
 
 ### Posible mensaje de error
 
-Dependiendo del editor que estés usando, podrias recibir un mensaje de error en este punto:
+Dependiendo del editor que estés usando, podrías recibir un mensaje de error en este punto:
 
-![](../../images/1/1-vite5.png)
+![Captura de pantalla de vs code mostrando un error de eslint: "name is missing in props validation"](../../images/1/1-vite5.png)
 
 Este realmente no es un error, es una advertencia causada por la herramienta [ESLint](https://es.eslint.org/). Tu puedes silenciar la advertencia [react/prop-types](https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/prop-types.md) añadiendo la siguiente línea al archivo <i>.eslintrc.cjs</i>
 
@@ -424,7 +422,7 @@ React se ha configurado para generar mensajes de error bastante claros. A pesar
 
 **La consola siempre debe estar abierta**. Si el navegador reporta errores, no es recomendable seguir escribiendo más código, esperando milagros. En su lugar, debes intentar comprender la causa del error y, por ejemplo, volver al estado funcional anterior:
 
-![](../../images/1/2a.png)
+![Captura de pantalla de error de prop: undefined](../../images/1/2a.png)
 
 Es bueno recordar que en React es posible y vale la pena escribir comandos <em>console.log()</em> (que se imprimen en la consola) dentro de tu código.
 
@@ -585,6 +583,7 @@ y la edad
 ```js
 {friends[0].age}
 ```
+
 Después de corregir el error, tu deberías limpiar los mensajes de la consola presionando el botón 🚫 y luego recargando el contenido de la página, y asegurarte de que no se están mostrando mensajes de error.
 
 Una pequeña nota adicional a la anterior. React también permite renderizar arreglos <i>si</i> el arreglo contiene valores que son elegibles para renderizar (como números y cadenas). Así que el siguiente programa funcionaría, aunque el resultado no ser el que queremos:
@@ -629,7 +628,7 @@ part2
   countries
 ```
 
-Mira este [repositorio de ejemplo para el envio de ejercicios](https://github.com/fullstack-hy2020/example-submission-repository)! 
+Mira este [repositorio de ejemplo para el envío de ejercicios](https://github.com/fullstack-hy2020/example-submission-repository)! 
 
 Para cada parte del curso hay un directorio, que se ramifica en directorios que contienen una serie de ejercicios, como "unicafe" para la parte 1.
 
@@ -650,7 +649,8 @@ import App from './App'
 
 ReactDOM.createRoot(document.getElementById('root')).render(<App />)
 ```
-y <i>App.jsx</i> para que conincida con lo siguiente
+
+y <i>App.jsx</i> para que coincida con lo siguiente
 
 ```js
 const App = () => {
@@ -704,7 +704,7 @@ const App = () => {
 }
 ```
 
-**ADVERTENCIA** No trates de programar todos los componentes de corrido, porque esto podría ciertamente romper toda la aplicación. Procede en pequeños pasos, pprimero haz por ejemplo: el componente <i>Header</i> y solo cuando confirmes que funciona, podrás continuar con el siguiente componente.
+**ADVERTENCIA** No trates de programar todos los componentes de corrido, porque esto podría ciertamente romper toda la aplicación. Procede en pequeños pasos, primero haz por ejemplo: el componente <i>Header</i> y solo cuando confirmes que funciona, podrás continuar con el siguiente componente.
 
 El progreso cuidadoso y en pequeños pasos puede parecer lento, pero en realidad es <i>con diferencia la forma más rápida</i> de progresar. El famoso desarrollador de software Robert "Uncle Bob" Martin ha declarado
 
@@ -714,7 +714,7 @@ es decir, según Martin, avanzar con cuidado y con pequeños pasos es incluso la
 
 <h4>1.2: información del curso, paso 2</h4>
 
-Refactoriza el componente <i>Content</i> para que no renderice ningún nombre de partes o su número de ejercicios por sí mismo. En su lugar, solo representa tres componentes <i>Part</i> de los cuales cada uno representa el nombre y el número de ejercicios de una parte.
+Refactoriza el componente <i>Content</i> para que no muestre ningún nombre de partes o su número de ejercicios por sí mismo. En su lugar, solo representa tres componentes <i>Part</i> de los cuales cada uno representa el nombre y el número de ejercicios de una parte.
 
 ```js
 const Content = ... {

src/content/1/es/part1b.md

@@ -3,7 +3,7 @@ mainImage: ../../../images/part-1.svg
 part: 1
 letter: b
 lang: es
---- 
+---
 
 <div class="content">
 
@@ -486,7 +486,7 @@ Al llamar a <em>arto.greet.bind(arto)</em> se crea una nueva función donde _thi
 
 Usando [funciones de flecha](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Functions/Arrow_functions) es posible resolver algunos de los problemas relacionados con _this_. Sin embargo, no deben usarse como métodos para objetos porque entonces _this_ no funciona en absoluto. Más adelante volveremos al comportamiento de _this_ en relación con las funciones de flecha. 
 
-Si deseas obtener una mejor comprensión de cómo funciona _this_ en JavaScript, Internet está lleno de material sobre el tema, por ejemplo, la serie de screencasts [Comprender la palabra clave this de JavaScript en profundidad](https://egghead.io/courses/understand-javascript-s-this-keyword-in-depth) de [egghead.io](https://egghead.io) es muy recomendado.
+Si deseas obtener una mejor comprensión de cómo funciona _this_ en JavaScript, Internet está lleno de material sobre el tema, por ejemplo, la serie de screencasts [Comprender la palabra clave this de JavaScript en profundidad](https://egghead.io/courses/understand-javascript-s-this-keyword-in-depth) de [egghead.io](https://egghead.io) es muy recomendable.
 
 ### Clases
 
@@ -530,6 +530,10 @@ Si deseas conocer JavaScript en profundidad, hay una gran serie de libros gratui
 
 Otro gran recurso para aprender JavaScript es [javascript.info](https://es.javascript.info/).
 
+El libro gratuito [Eloquent JavaScript](https://eloquentjavascript.net) te lleva desde los conceptos básicos hasta temas interesantes rápidamente. Es una mezcla de teoría, proyectos y ejercicios, y abarca tanto la teoría general de programación como el lenguaje JavaScript.
+
+[Namaste 🙏 JavaScript](https://www.youtube.com/playlist?list=PLlasXeu85E9cQ32gLCvAvr9vNaUccPVNP) es otro excelente y altamente recomendado tutorial gratuito de JavaScript para entender cómo funciona JS bajo el capó. Namaste JavaScript es un curso puro y en profundidad de JavaScript lanzado de forma gratuita en YouTube. Cubrirá en detalle los conceptos fundamentales de JavaScript y todo acerca de cómo JS funciona detrás de escena dentro del motor de JavaScript.
+
 [egghead.io](https://egghead.io) tiene muchos screencasts de calidad sobre JavaScript, React y otros temas interesantes. Desafortunadamente, parte del material está detrás de un muro de pago.
 
 </div>