part1 a

Author: pablo-maff

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/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 = ... {