Merge pull request #2567 from Juanescacha/part7

[es] Part7 Update

Author: mluukkai

src/content/7/en/part7e.md

@@ -254,7 +254,7 @@ However, MVC architecture is not usually mentioned when talking about React appl
 
 Because both React and [Flux](https://facebook.github.io/flux/docs/in-depth-overview) were created at Facebook, one could say that using React only as a UI library is the intended use case. Following the Flux architecture adds some overhead to the application, and if we're talking about a small application or prototype, it might be a good idea to use React "wrong", since [over-engineering](https://en.wikipedia.org/wiki/Overengineering) rarely yields an optimal result.
 
-Part 6 [last chapter](/part6/react_query_use_reducer_ja_contex) covers the newer trends of state management in React. React's hook functions <i>useReducer</i> and <i>useContext</i> provide a kind of lightweight version of Redux. <i>React Query</i>, on the other hand, is a library that solves many of the problems associated with handling state on the server, eliminating the need for a React application to store data retrieved from the server directly in frontend state.
+Part 6 [last chapter](/en/part6/react_query_use_reducer_and_the_context) covers the newer trends of state management in React. React's hook functions <i>useReducer</i> and <i>useContext</i> provide a kind of lightweight version of Redux. <i>React Query</i>, on the other hand, is a library that solves many of the problems associated with handling state on the server, eliminating the need for a React application to store data retrieved from the server directly in frontend state.
 
 ### React/node-application security
 

src/content/7/en/part7f.md

@@ -35,9 +35,7 @@ Take Prettier to use in your app and configure it to work with your editor.
 
 #### 7.10: Redux, step1
 
-Refactor the application from using the internal React component state to using Redux for the application's state management.
-
-Change the application's notifications to use Redux at this point of the exercise set.
+Refactor the application to use Redux to manage the notification data.
 
 #### 7.11: Redux, step2
 

src/content/7/es/part7d.md

@@ -738,20 +738,17 @@ Guardemos el siguiente contenido en el archivo <i>db.json</i>:
 }
 ```
 
-
 Nuestro objetivo es configurar la aplicación con webpack de tal manera que, cuando se use localmente, la aplicación use el servidor json disponible en el puerto 3001 como su backend.
 
+El archivo empaquetado se configurará para usar el backend disponible en la URL <https://notes2023.fly.dev/api/notes>.
 
-El archivo empaquetado se configurará para usar el backend disponible en la URL <https://blooming-atoll-75500.herokuapp.com/api/notes>.
-
-
-Instalaremos <i>axios</i>, iniciaremos el json-server y luego realizaremos los cambios necesarios en la aplicación. Con el fin de cambiar las cosas, obtendremos las notas del backend con nuestro [hook personalizado](/en/part7/custom_hooks) llamado _useNotes_:
+Instalaremos <i>axios</i>, iniciaremos el json-server y luego realizaremos los cambios necesarios en la aplicación. Con el fin de cambiar las cosas, obtendremos las notas del backend con nuestro [hook personalizado](/es/part7/hooks_personalizados) llamado _useNotes_:
 
 ```js
+// highlight-start
 import React, { useState, useEffect } from 'react'
 import axios from 'axios'
 
-// highlight-start
 const useNotes = (url) => {
   const [notes, setNotes] = useState([])
 
@@ -768,7 +765,7 @@ const useNotes = (url) => {
 const App = () => {
   const [counter, setCounter] = useState(0)
   const [values, setValues] = useState([])
-  const url = 'https://blooming-atoll-75500.herokuapp.com/api/notes'
+  const url = 'https://notes2023.fly.dev/api/notes' // highlight-line
   const notes = useNotes(url) // highlight-line
 
   const handleClick = () => {
@@ -779,7 +776,7 @@ const App = () => {
   return (
     <div className="container">
       hello webpack {counter} clicks
-      <button onClick={handleClick} >press</button>
+      <button onClick={handleClick}>press</button>
       <div>{notes.length} notes on server {url}</div> // highlight-line
     </div>
   )
@@ -788,39 +785,24 @@ const App = () => {
 export default App
 ```
 
-
 La dirección del servidor backend está actualmente hardcodeada en el código de la aplicación. ¿Cómo podemos cambiar la dirección de forma controlada para que apunte al servidor de backend de producción cuando el código está empaquetado para producción?
 
-
-Cambiemos el objeto de configuración en el archivo <i>webpack.config.js</i> para que sea una función en lugar de un objeto:
+La función de configuración de webpack tiene dos parámetros, <i>env</i> y <i>argv</i>. Podemos usar el segundo para averiguar el <i>modo</i> definido en el script npm:
 
 ```js
-const path = require('path');
+const path = require('path')
 
-const config = (env, argv) => {
+const config = (env, argv) => { // highlight-line
+  console.log('argv.mode:', argv.mode)
   return {
-    entry: './src/index.js',
-    output: {
-      // ...
-    },
-    devServer: {
-      // ...
-    },
-    devtool: 'source-map',
-    module: {
-      // ...
-    },
-    plugins: [
-      // ...
-    ],
+    // ...
   }
 }
 
 module.exports = config
 ```
 
-La definición sigue siendo casi exactamente la misma, excepto por el hecho de que la función ahora devuelve el objeto de configuración. La función recibe los dos parámetros, <i>env</i> y <i>argv</i>, el segundo de los cuales se puede utilizar para acceder al <i>modo</i> definido en el script npm.
-
+Ahora bien, si queremos, podemos configurar webpack para que funcione de manera diferente dependiendo de si el entorno de operación de la aplicación, o <i>mode</i>, está configurado para producción o desarrollo.
 
 También podemos usar [DefinePlugin](https://webpack.js.org/plugins/define-plugin/) de webpack para definir <i>constantes predeterminadas globales</i> que se pueden usar en el código incluido. Definamos una nueva constante global <i>BACKEND\_URL</i>, que obtiene un valor diferente según el entorno para el que se empaqueta el código:
 
@@ -833,8 +815,8 @@ const config = (env, argv) => {
 
   // highlight-start
   const backend_url = argv.mode === 'production'
-    ? 'https://blooming-atoll-75500.herokuapp.com/api/notes'
-    : 'http://localhost:3001/api/notes'
+    ? 'https://notes2023.fly.dev/api/notes'
+    : 'http://localhost:3001/notes'
   // highlight-end
 
   return {
@@ -844,7 +826,7 @@ const config = (env, argv) => {
       filename: 'main.js'
     },
     devServer: {
-      contentBase: path.resolve(__dirname, 'build'),
+      static: path.resolve(__dirname, 'build'),
       compress: true,
       port: 3000,
     },
@@ -865,7 +847,6 @@ const config = (env, argv) => {
 module.exports = config
 ```
 
-
 La constante global se usa de la siguiente manera en el código:
 
 ```js
@@ -885,23 +866,20 @@ const App = () => {
 }
 ```
 
-
 Si la configuración para el desarrollo y la producción difiere mucho, puede ser una buena idea [separar la configuración](https://webpack.js.org/guides/production/) de los dos en sus propios archivos.
 
+Ahora, si la aplicación se inicia con el comando _npm start_ en modo de desarrollo, obtiene las notas de la dirección http://localhost:3001/notes. La versión empaquetada con el comando _npm run build_ usa la dirección https://notes2023.fly.dev/api/notes para obtener la lista de notas.
 
-Podemos inspeccionar la versión de producción empaquetada de la aplicación localmente ejecutando el siguiente comando en el directorio de <i>compilación</i>:
+Podemos inspeccionar la versión de producción empaquetada de la aplicación localmente ejecutando el siguiente comando en el directorio de <i>compilación/build</i>:
 
 ```js
 npx static-server
 ```
 
-
 De forma predeterminada, la aplicación incluida estará disponible en <http://localhost:9080>.
 
-
 ### Polyfill
 
-
 Nuestra aplicación está terminada y funciona con todas las versiones relativamente recientes de los navegadores modernos, con la excepción de Internet Explorer. La razón de esto es que debido a _axios_, nuestro código usa [Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise), y ninguna versión existente de IE las admite:
 
 ![](../../images/7/29.png)