Merge pull request #2551 from Juanescacha/part7

mluukkai · web-flow · commit 9cc96a60fc56 · 2023-02-13T16:14:01.000+02:00
[es] part7 updates and intro of parts updates
diff --git a/src/content/1/es/part1.md b/src/content/1/es/part1.md
@@ -8,4 +8,7 @@ lang: es
 
 En esta parte, nos familiarizaremos con la librería React, que usaremos para escribir el código que se ejecuta en el navegador. También veremos algunas características de JavaScript que son importantes para comprender React.
 
+<i>Parte actualizada 10 de enero de 2023</i>
+- <i>No hay cambios importantes</i>
+
 </div>
diff --git a/src/content/1/es/part1a.md b/src/content/1/es/part1a.md
@@ -11,6 +11,8 @@ 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 [create-react-app](https://github.com/facebook/create-react-app). Es posible (pero no necesario) instalar <i>create-react-app</i> en su máquina si la herramienta <i>npm</i> que se instaló junto con Node tiene un número de versión de al menos <i>5.3</i>.
 
+> <i>Tu también puedes usar la nueva herramienta de generación frontend [Vite](https://vitejs.dev/) en este curso si lo deseas. La herramienta create-react-app sigue siendo la herramienta recomendada por el equipo de React y es por eso que sigue siendo la herramienta predeterminada para configurar un proyecto React en este curso. Lee [aquí](https://github.com/reactjs/reactjs.org/pull/5487#issuecomment-1409720741) cómo el equipo de React ve el futuro de las herramientas de React.</i>
+
 Creemos una aplicación llamada <i>part1</i> y naveguemos hasta su directorio.
 
 ```bash
diff --git a/src/content/2/es/part2.md b/src/content/2/es/part2.md
@@ -7,4 +7,7 @@ lang: es
 <div class="intro">
 
 Continuemos nuestra introducción a React. Primero, veremos cómo representar una colección de datos, como una lista de nombres, en la pantalla. Después de esto, inspeccionaremos cómo un usuario puede enviar datos a una aplicación React utilizando formularios HTML. A continuación, nuestro enfoque se centra en ver cómo el código JavaScript en el navegador puede obtener y manejar los datos almacenados en un servidor backend remoto. Por último, echaremos un vistazo rápido a algunas formas sencillas de agregar estilos CSS a nuestras aplicaciones React.
+
+<i>Parte actualizada 18 de enero de 2023</i>
+- <i>Numeración de ejercicios actualizada, los ejercicios 2.11-13 fueron movidos al final de la parte</i>
 </div>
diff --git a/src/content/3/es/part3.md b/src/content/3/es/part3.md
@@ -8,4 +8,7 @@ lang: es
 
 En esta parte, nuestro enfoque se desplaza hacia el backend, es decir, hacia la implementación de la funcionalidad en el lado del servidor. Implementaremos una API REST simple en Node.js utilizando la biblioteca Express, y los datos de la aplicación se almacenarán en una base de datos MongoDB. Al final de esta parte, implementaremos nuestra aplicación en Internet.
 
+<i>Parte actualizada 19 de enero de 2023</i>
+- <i>Agregadas instrucciones para la plataforma de alojamiento [https://render.com](https://render.com/)</i>
+
 </div>
diff --git a/src/content/4/es/part4.md b/src/content/4/es/part4.md
@@ -8,4 +8,7 @@ lang: es
 
 En esta parte, continuaremos nuestro trabajo en el backend . Nuestro primer tema principal será escribir pruebas de unidad e integración para el backend. Una vez que hayamos cubierto las pruebas, analizaremos la implementación de la autenticación y autorización de usuario.
 
+<i>Parte actualizada 22 de enero de 2023</i>
+- <i>No hay cambios importantes</i>
+
 </div>
diff --git a/src/content/5/es/part5.md b/src/content/5/es/part5.md
@@ -8,4 +8,7 @@ lang: es
 
 En esta parte volvemos al frontend, primero mirando diferentes posibilidades para probar el código React. También implementaremos la autenticación basada en tokens que permitirá a los usuarios iniciar sesión en nuestra aplicación.
 
+<i>Parte actualizada 25 de enero de 2023</i>
+- <i>No hay cambios importantes</i>
+
 </div>
diff --git a/src/content/6/es/part6.md b/src/content/6/es/part6.md
@@ -10,4 +10,7 @@ Hasta ahora, hemos colocado el estado de la aplicación y la lógica de estado d
 
 Aprenderemos sobre la version ligera de Redux compatible directamente con React, es decir el contexto de React y el hook useRedux, así como sobre la libreria React Query que simplifica la gestión de estados de la aplicación.
 
+<i>Parte actualizada 30 de enero de 2023</i>
+- <i>Una nueva sección sobre React Query, useReducer y React context reemplazó la sección sobre Redux connect</i>
+
 </div>
diff --git a/src/content/7/en/part7b.md b/src/content/7/en/part7b.md
@@ -410,7 +410,7 @@ If we were to do this, we would lose much of the benefit provided by the <i>useF
 
 #### 7.7: country hook
 
-Let's return to exercises [2.18-20](/en/part2/getting_data_from_server#exercises-2-18-2-20).
+Let's return to exercises [2.18-2.20](/en/part2/adding_styles_to_react_app#exercises-2-18-2-20).
 
 Use the code from https://github.com/fullstack-hy2020/country-hook as your starting point.
 
diff --git a/src/content/7/en/part7c.md b/src/content/7/en/part7c.md
@@ -48,7 +48,7 @@ When we reload the application, we notice that it already looks a bit more styli
 
 ![browser notes app with bootstrap](../../images/7/5ea.png)
 
-In Bootstrap, all of the contents of the application are typically rendered inside a [container](https://getbootstrap.com/docs/4.1/layout/overview/#containers) (https://getbootstrap.com/docs/4.1/layout/overview/#containers). In practice this is accomplished by giving the root _div_ element of the application the  _container_ class attribute:
+In Bootstrap, all of the contents of the application are typically rendered inside a [container](https://getbootstrap.com/docs/4.1/layout/overview/#containers). In practice this is accomplished by giving the root _div_ element of the application the  _container_ class attribute:
 
 ```js
 const App = () => {
@@ -66,7 +66,7 @@ We notice that this already affected the appearance of the application. The cont
 
 ![browser notes app with margin spacing](../../images/7/6ea.png)
 
-#### Table
+#### Tables
 
 Next, let's make some changes to the <i>Notes</i> component so that it renders the list of notes as a [table](https://getbootstrap.com/docs/4.1/content/tables/). React Bootstrap provides a built-in [Table](https://react-bootstrap.github.io/components/table/) component for this purpose, so there is no need to define CSS classes separately.
 
@@ -500,13 +500,15 @@ Here are some other UI frameworks for your consideration. If you do not see your
 - <https://semantic-ui.com/>
 - <https://mantine.dev/>
 - <https://react.fluentui.dev/>
+- - <https://storybook.js.org>
 - <https://www.primefaces.org/primereact/>
 - <https://v2.grommet.io>
 - <https://blueprintjs.com>
 - <https://evergreen.segment.com>
 - <https://www.radix-ui.com/>
 - <https://react-spectrum.adobe.com/react-aria/index.html>
 - <https://master.co/>
+- <https://www.radix-ui.com/>
 - <https://nextui.org/>
 
 ### Styled components
@@ -568,7 +570,7 @@ const Login = (props) => {
 }
 ```
 
-Let's create a few more components for styling that application which will be styled versions of <i>div</i> elements:
+Let's create a few more components for styling this application which will be styled versions of <i>div</i> elements:
 
 ```js
 const Page = styled.div`
diff --git a/src/content/7/en/part7d.md b/src/content/7/en/part7d.md
@@ -591,7 +591,6 @@ const App = () => {
 }
 ```
 
-
 The application no longer works and the console will display the following error:
 
 ![devtools console cannot concat on undefined in handleClick](../../images/7/25.png)
diff --git a/src/content/7/es/part7.md b/src/content/7/es/part7.md
@@ -8,4 +8,7 @@ lang: es
 
 La séptima parte del curso aborda varios temas diferentes. Primero, nos familiarizaremos con React router. React router nos ayuda a dividir la aplicación en diferentes vistas que se muestran según la URL en la barra de direcciones del navegador. Después de esto, veremos algunas formas más de agregar estilos CSS a las aplicaciones React. Durante todo el curso hemos utilizado create-react-app para generar el cuerpo de nuestras aplicaciones. En esta ocasión echaremos un vistazo bajo el capó: aprenderemos cómo funciona Webpack y cómo podemos usarlo para configurar la aplicación nosotros mismos. También veremos las funciones hook y cómo definir un hook personalizado.
 
+<i>Parte actualizada 1 de febrero de 2023</i>
+- <i>Version alternativa de los ejercicios 7.10-7.13 que utilizan React Query y Context en lugar de Redux</i>
+
 </div>
diff --git a/src/content/7/es/part7a.md b/src/content/7/es/part7a.md
@@ -34,8 +34,8 @@ La barra de navegación y una aplicación que contiene múltiples vistas son muy
 He aquí una forma:
 
 ```js
-import React, { useState } from 'react'
-import ReactDOM from 'react-dom'
+import { useState }  from 'react'
+import ReactDOM from 'react-dom/client'
 
 const Home = () => (
   <div> <h2>TKTL notes app</h2> </div>
@@ -52,7 +52,7 @@ const Users = () => (
 const App = () => {
   const [page, setPage] = useState('home')
 
- const toPage = (page) => (event) => {
+  const toPage = (page) => (event) => {
     event.preventDefault()
     setPage(page)
   }
@@ -90,7 +90,7 @@ const App = () => {
   )
 }
 
-ReactDOM.render(<App />, document.getElementById('root'))
+ReactDOM.createRoot(document.getElementById('root')).render(<App />)
 ```
 
 Cada vista se implementa como su propio componente. Almacenamos la información del componente de vista en el estado de la aplicación llamado <i>page</i>. Esta información nos dice qué componente, que representa una vista, debe mostrarse debajo de la barra de menú.
@@ -136,7 +136,7 @@ const App = () => {
       </Routes>
 
       <div>
-        <i>Note app, Department of Computer Science 2022</i>
+        <i>Note app, Department of Computer Science 2023</i>
       </div>
     </Router>
   )
@@ -196,7 +196,7 @@ La aplicación ahora contiene cinco vistas diferentes cuya pantalla está contro
 
 <i>Home</i> y <i>Users</i> no han cambiado con respecto al ejercicio anterior. <i>Notes</i> es un poco más complicado. Muestra la lista de notas que se le pasan como props de tal manera que se puede hacer clic en el nombre de cada nota.
 
-![](../../images/7/3ea.png)
+![notes app, mostrando que las notas se pueden clickear](../../images/7/3ea.png)
 
 La capacidad de hacer clic en un nombre se implementa con el componente <i>Link</i>, y hacer clic en el nombre de una nota cuya identificación es 3 desencadenaría un evento que cambia la dirección del navegador a <i>notes/3</i>:
 
@@ -286,7 +286,7 @@ La opción para navegar a la vista de <i>Login</i> se representa de forma condic
 
 Entonces, si el usuario ya ha iniciado sesión, en lugar de mostrar el enlace <i>Login</i>, mostramos el nombre de usuario del usuario:
 
-![](../../images/7/4a.png)
+![app de notas mostrando usuario logeado](../../images/7/4a.png)
 
 El código del componente que maneja la funcionalidad de inicio de sesión es el siguiente:
 
diff --git a/src/content/7/es/part7c.md b/src/content/7/es/part7c.md
@@ -31,14 +31,14 @@ Instalemos el paquete con el comando:
 npm install react-bootstrap
 ```
 
-Luego agreguemos un link para cargar la hoja de estilo CSS para Bootstrap dentro de la etiqueta <i>head</i> en el archivo <i>public/index.html</i> de la aplicación:
+Luego agreguemos un [link para cargar la hoja de estilo CSS](https://react-bootstrap.github.io/getting-started/introduction#stylesheets) para Bootstrap dentro de la etiqueta <i>head</i> en el archivo <i>public/index.html</i> de la aplicación:
 
 ```js
 <head>
   <link
     rel="stylesheet"
-    href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
-    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
+    href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
+    integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
     crossorigin="anonymous"
   />
   // ...
@@ -68,6 +68,7 @@ Notamos que esto ya tiene un efecto en la apariencia de la aplicación. El conte
 
 ![](../../images/7/6ea.png)
 
+#### Tablas
 
 A continuación, hagamos algunos cambios en el componente <i>Notes</i>, para que muestre la lista de notas como una [tabla](https://getbootstrap.com/docs/4.1/content/tables/). React Bootstrap proporciona un componente [Table](https://react-bootstrap.github.io/components/table/) integrado para este propósito, por lo que no es necesario definir clases CSS por separado.
 
@@ -105,11 +106,11 @@ Tenga en cuenta que los componentes de React Bootstrap deben importarse por sepa
 import { Table } from 'react-bootstrap'
 ```
 
-### Formularios
+#### Formularios
 
 Mejoremos el formulario en la vista de inicio de sesión con la ayuda de [formularios](https://getbootstrap.com/docs/4.1/components/forms/) Bootstrap.
 
-React Bootstrap proporciona [componentes](https://react-bootstrap.github.io/components/forms/) integrados para crear formularios (aunque falta un poco la documentación para ellos):
+React Bootstrap proporciona [componentes](https://react-bootstrap.github.io/forms/overview/) integrados para crear formularios (aunque falta un poco la documentación para ellos):
 
 ```js
 let Login = (props) => {
@@ -239,31 +240,21 @@ Las herramientas para desarrolladores de Chrome permiten simular el uso de nuest
 
 Puede encontrar el código completo de la aplicación [aquí](https://github.com/fullstack-hy2020/misc/blob/master/notes-bootstrap.js).
 
-### UI de material
+### Material UI
 
-Como segundo ejemplo, veremos la librería [MaterialUI](https://mui.com/) React, que implementa el lenguaje visual de [Material design](https://material.io/) desarrollado por Google.
+Como segundo ejemplo, veremos la librería de React de [MaterialUI](https://mui.com/), que implementa el lenguaje visual de [Material design](https://material.io/) desarrollado por Google.
 
 Instale la librería con el comando
 
 ```bash
 npm install @mui/material @emotion/react @emotion/styled
 ```
-
-Luego agregue la siguiente línea a la etiqueta <i>head</i> en el archivo <i>public/index.html</i>. La línea carga la fuente Roboto de Google.
-
-```js
-<head>
-  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />
-  // ...
-</head>
-```
-
 Ahora usemos MaterialUI para hacer las mismas modificaciones al código que hicimos anteriormente con bootstrap.
 
 Renderice el contenido de toda la aplicación dentro de un [Container](https://mui.com/material-ui/react-container/):
 
 ```js
-import Container from '@mui/material/Container'
+import { Container } from '@mui/material'
 
 const App = () => {
   // ...
@@ -275,6 +266,8 @@ const App = () => {
 }
 ```
 
+#### Tabla
+
 Comencemos con el componente de <i>Notes</i>. Representaremos la lista de notas como una [tabla](https://mui.com/material-ui/react-table/#simple-table):
 
 ```js
@@ -363,7 +356,7 @@ MaterialUI, a diferencia de Bootstrap, no proporciona un componente para el form
 
 Recuerde importar todos los componentes utilizados en el formulario.
 
-### Notificación
+#### Notificación
 
 La notificación que se muestra al iniciar sesión se puede hacer usando el componente [Alert](https://mui.com/material-ui/react-alert/), que es bastante similar al componente equivalente de bootstrap:
 
@@ -427,9 +420,7 @@ Definiendo
 </Button>
 ```
 
-<!-- the _Button_ component is rendered so, that its root component is react-router-dom _Link_ which receives its path as prop field _to_. -->
-
-el componente _Button_ se renderiza de tal manera, que de su componente raíz react-router-dom _Link_ recibe su ruta como campo de prop _to_.
+el componente _Button_ se renderiza de tal manera, que de su componente raíz _Link_ de react-router-dom recibe su ruta como campo de prop _to_.
 
 ```js
 <AppBar position="static">
@@ -487,14 +478,12 @@ El beneficio de usar la librería React Bootstrap no es tan evidente en este eje
 
 Además de hacer que el código del frontend sea más compacto y legible, otro beneficio de usar las librerías del UI framework de React es que incluyen el JavaScript que se necesita para que los componentes específicos funcionen. Algunos componentes de Bootstrap requieren algunas [dependencias de JavaScript](https://getbootstrap.com/docs/4.1/getting-started/introduction/#js) desagradables que preferiríamos no incluir en nuestras aplicaciones React.
 
-Algunas posibles desventajas de usar UI frameworks a través de librerías de integración en lugar de usarlos "directamente" son que las librerías de integración pueden tener API inestables y documentación deficiente. La situación con [Semantic UI React](https://react.semantic-ui.com) es mucho mejor que con muchos otros UI frameworks, ya que es una librería de integración oficial de React.
-
-También está la cuestión de si las librerías de UI framework deben usarse en primer lugar. Depende de cada uno formarse su propia opinión, pero para las personas que carecen de conocimientos en CSS y diseño web, son herramientas muy útiles.
+Algunas posibles desventajas de usar frameworks UI a través de librerías de integración en lugar de usarlos "directamente" son que las librerías de integración pueden tener API inestables y documentación deficiente. La situación con [Semantic UI React](https://react.semantic-ui.com) es mucho mejor que con muchos otros UI frameworks, ya que es una librería de integración oficial de React.
 
+También está la cuestión de si las librerías de framework UI deben usarse en primer lugar. Depende de cada uno formarse su propia opinión, pero para las personas que carecen de conocimientos en CSS y diseño web, son herramientas muy útiles.
 
 ### Otros UI frameworks
 
-
 Aquí hay algunos otros UI frameworks para su consideración. Si no ve su UI framework favorito en la lista, haga un pull request al material del curso.
 
 - <https://bulma.io/>
@@ -514,12 +503,13 @@ Aquí hay algunos otros UI frameworks para su consideración. Si no ve su UI fra
 - <https://react-spectrum.adobe.com/react-aria/index.html>
 - <https://master.co/>
 - <https://www.radix-ui.com/>
+- <https://nextui.org/>
 
 ### Styled components
 
 También hay [otras formas](https://blog.bitsrc.io/5-ways-to-style-react-components-in-2019-30f1ccc2b5b) de diseñar aplicaciones React que aún no hemos analizado.
 
-La librería [styled components](https://www.styled-components.com/) ofrece un enfoque interesante para definir estilos a través [tagged template literals](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Template_literals#plantillas_etiquetadas) que se introdujeron en ES6.
+La librería [styled components](https://www.styled-components.com/) ofrece un enfoque interesante para definir estilos a través de [plantillas literales etiquetadas](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Template_literals#plantillas_etiquetadas) que se introdujeron en ES6.
 
 Hagamos algunos cambios en los estilos de nuestra aplicación con la ayuda de styled components. Primero, instale el paquete con el comando:
 
@@ -574,7 +564,7 @@ const Login = (props) => {
 }
 ```
 
-Creemos algunos componentes más para diseñar esa aplicación, que son versiones con estilo de elementos <i>div</i>:
+Creemos algunos componentes más para estilizar esta aplicación, que serán versiones con estilo de elementos <i>div</i>:
 
 ```js
 const Page = styled.div`
@@ -652,7 +642,7 @@ Los Styled components han experimentado un crecimiento constante en popularidad
 ### Ejercicios
 
 
-Los ejercicios relacionados con los temas presentados aquí se pueden encontrar al final de esta sección de material del curso en el conjunto de ejercicios [para extender la aplicación de lista de blogs](/es/part7/exercises_extending_the_bloglist).
+Los ejercicios relacionados con los temas presentados aquí se pueden encontrar al final de esta sección de material del curso en el conjunto de ejercicios [para extender la aplicación de lista de blogs](/es/part7/ejercicios_ampliar_la_lista_de_blogs).
 
 </div>
 
diff --git a/src/content/7/es/part7d.md b/src/content/7/es/part7d.md

Original file line number	Diff line number	Diff line change
`@@ -591,7 +591,6 @@ const App = () => {`
`591`	`591`	`}`
`592`	`592`	```
`593`	`593`
`594`		`-`
`595`	`594`	`The application no longer works and the console will display the following error:`
`596`	`595`
`597`	`596`	`![devtools console cannot concat on undefined in handleClick](../../images/7/25.png)`