Skip to content

Commit 6ab309d

Browse files
authored
Update part7b.md (ES)
1 parent dffd792 commit 6ab309d

File tree

1 file changed

+13
-20
lines changed

1 file changed

+13
-20
lines changed

src/content/7/es/part7b.md

Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -7,29 +7,23 @@ lang: es
77

88
<div class="content">
99

10-
11-
Los ejercicios de esta parte son un poco diferentes a los ejercicios de las partes anteriores. Los ejercicios de la parte anterior y los ejercicios de esta parte [tratan sobre la teoría presentada en esta parte](/es/part7/custom_hooks#exercises-7-4-7-8).
12-
13-
14-
Esta parte también contiene una [serie de ejercicios](/es/part7/exercises_extending_the_bloglist) en los que modificamos la aplicación Bloglist de las partes 4 y 5 para ensayar y aplicar las habilidades que hemos aprendido.
15-
1610
### Hooks
1711

1812
React ofrece 10 [hooks incorporados](https://reactjs.org/docs/hooks-reference.html) diferentes, de los cuales los más populares son los hooks [useState](https://reactjs.org/docs/hooks-reference.html#usestate) y [useEffect](https://reactjs.org/docs/hooks-reference.html#useeffect), que ya hemos estado usando ampliamente.
1913

20-
En la [parte 5](/es/part5/props_children_and_proptypes#references-to-components-with-ref) usamos el hhok [useImperativeHandle](https://reactjs.org/docs/hooks-reference.html#useimperativehandle) que permite que los componentes proporcionen sus funciones a otros componentes.
14+
En la [parte 5](/es/part5/props_children_y_proptypes#referencias-a-componentes-con-ref) usamos el hook [useImperativeHandle](https://reactjs.org/docs/hooks-reference.html#useimperativehandle) que permite que los componentes proporcionen sus funciones a otros componentes.
2115

22-
Durante el último año, muchas librerías React han comenzado a ofrecer apis basadas en hooks. En la [parte 6](/es/part6/flux_architecture_and_redux) usamos los hooks [useSelector](https://react-redux.js.org/api/hooks#useselector) y [useDispatch](https://react-redux.js.org/api/hooks#usedispatch) de la librería react-redux para compartir nuestra función redux-store y dispatch a nuestros componentes. La api basada en hooks de Redux es mucho más fácil de usar que la más antigua, aún disponible, [connect](/es/part6/connect) -api.
16+
Durante el último año, muchas librerías React han comenzado a ofrecer apis basadas en hooks. En la [parte 6](/es/part6/flux_architecture_y_redux) usamos los hooks [useSelector](https://react-redux.js.org/api/hooks#useselector) y [useDispatch](https://react-redux.js.org/api/hooks#usedispatch) de la librería react-redux para compartir nuestra función redux-store y dispatch a nuestros componentes.
2317

24-
La api de [React-router](https://reactrouter.com/en/main/start/tutorial) que presentamos en la [parte anterior](/es/part7/react_router) también se basa parcialmente en [hooks](https://reacttraining.com/react-router/web/api/Hooks). Sus hooks se pueden usar para acceder a los parámetros de la URL y al objeto history, lo que permite manipular la URL del navegador mediante programación.
18+
La API de [React-Router](https://reactrouter.com/en/main/start/tutorial) que presentamos en la [parte anterior](/es/part7/react_router) también se basa parcialmente en [hooks](https://reacttraining.com/react-router/web/api/Hooks). Sus hooks se pueden usar para acceder a los parámetros de la URL y al objeto history, lo que permite manipular la URL del navegador mediante programación.
2519

26-
Como se mencionó en la [parte 1](/es/part1/a_more_complex_state_debugging_react_apps#rules-of-hooks), los hooks no son funciones normales y cuando los usamos tenemos que cumplir con ciertas [reglas o limitaciones](https://reactjs.org/docs/hooks-rules.html). Recapitulemos las reglas del uso de hooks, copiadas literalmente de la documentación oficial de React:
20+
Como se mencionó en la [parte 1](/es/part1/un_estado_mas_complejo_depurando_aplicaciones_react#reglas-de-los-hooks), los hooks no son funciones normales y cuando los usamos tenemos que cumplir con ciertas [reglas o limitaciones](https://reactjs.org/docs/hooks-rules.html). Recapitulemos las reglas del uso de hooks, copiadas literalmente de la documentación oficial de React:
2721

2822
**No llame a Hooks dentro de bucles, condiciones o funciones anidadas.** En su lugar, utilice siempre Hooks en el nivel superior de su función React.
2923

3024
**No llame a Hooks desde funciones regulares de JavaScript.** En su lugar, puede:
3125

32-
- Llame a Hooks desde los componentes funcionales de React.
26+
- Llamar a Hooks desde los componentes funcionales de React.
3327
- Llamar a Hooks desde Hooks personalizados
3428

3529
Existe una regla de [ESlint](https://www.npmjs.com/package/eslint-plugin-react-hooks) que se puede usar para verificar que la aplicación usa los hooks correctamente.
@@ -124,7 +118,7 @@ const App = (props) => {
124118
```
125119

126120

127-
Al hacer esto, podemos extraer el estado del componente _App_ y su manipulación por completo en el hook _useCounter_ . La gestión del estado y la lógica del contador ahora es responsabilidad del hook personalizado.
121+
Al hacer esto, podemos extraer el estado del componente _App_ y su manipulación por completo en el hook _useCounter_. La gestión del estado y la lógica del contador ahora es responsabilidad del hook personalizado.
128122

129123
El mismo hook podría <i>reutilizarse</i> en la aplicación que realizaba un seguimiento de la cantidad de clics realizados en los botones izquierdo y derecho:
130124

@@ -313,7 +307,7 @@ Internet está comenzando a llenarse con más y más material útil relacionado
313307

314308
### Ejercicios 7.4.-7.8.
315309

316-
Continuaremos con la aplicación de los [ejercicios](/es/part7/react_router#exercises-7-1-7-3) del capítulo [react router](/es/part7/react_router).
310+
Continuaremos con la aplicación de los [ejercicios](/es/part7/react_router#ejercicios-7-1-7-3) del capítulo [react router](/es/part7/react_router).
317311

318312
#### 7.4: anécdotas y hooks paso 1
319313

@@ -415,10 +409,9 @@ Una solución simple sería no usar la sintaxis de propagación y escribir todos
415409

416410
Si hiciéramos esto, perderíamos gran parte del beneficio proporcionado por el hook <i>useField</i>. En su lugar, busque una solución que solucione el problema, pero que aún sea fácil de usar con la sintaxis de propagación.
417411

418-
### 7.7: hook de campo
412+
#### 7.7: hook de campo
419413

420-
Let's return to the exercises [2.12-14](/es/part2/getting_data_from_server#exercises-2-11-2-14).
421-
Volvamos a los ejercicios [2.12-14].
414+
Volvamos a los ejercicios [2.12-14](/es/part2/obteniendo_datos_del_servidor#ejercicios-2-11-2-14).
422415

423416
Utilice el código de https://github.com/fullstack-hy2020/country-hook como punto de partida.
424417

@@ -432,11 +425,11 @@ Si no se encuentra el país, se muestra un mensaje al usuario
432425

433426
Por lo demás, la aplicación está completa, pero en este ejercicio debe implementar un hook personalizado _useCountry_, que se puede usar para buscar los detalles del país dado al hook como parámetro.
434427

435-
Use el endpoint [name](https://studies.cs.helsinki.fi/restcountries/) de la api para obtener los detalles del país en un hook _useEffect_ dentro de su hook personalizado.
428+
Use el endpoint [name](https://studies.cs.helsinki.fi/restcountries/) de la API para obtener los detalles del país en un hook _useEffect_ dentro de su hook personalizado.
436429

437430
Tenga en cuenta que en este ejercicio es esencial utilizar el [segundo parámetro](https://reactjs.org/docs/hooks-reference.html#conditionally-firing-an-effect) de useEffect para controlar cuándo se ejecuta la función de efecto.
438431

439-
### 7.8: hooks definitivos
432+
#### 7.8: hooks definitivos
440433

441434
El código de la aplicación responsable de comunicarse con el backend de la aplicación de notas de las partes anteriores se ve así:
442435

@@ -472,7 +465,7 @@ const update = (id, newObject) => {
472465
export default { getAll, create, update, setToken }
473466
```
474467

475-
Notamos que el código no es específico del hecho de que nuestra aplicación se ocupa de notas. Excluyendo el valor de la variable _baseUrl_, el mismo código podría reutilizarse en la aplicación de publicación de blog para tratar la comunicación con el backend.
468+
Notamos que el código no especifica que nuestra aplicación gestiona notas. Excluyendo el valor de la variable _baseUrl_, el mismo código podría reutilizarse en la aplicación de publicación de blog para tratar la comunicación con el backend.
476469

477470
Extraiga el código para comunicarse con el backend en su propio hook _useResource_. Es suficiente implementar la búsqueda de todos los recursos y la creación de un nuevo recurso.
478471

@@ -518,7 +511,7 @@ const App = () => {
518511
}
519512
```
520513

521-
El hook personalizado _useResource_ devuelve un array de dos elementos al igual que los hooks de estado. El primer elemento del array contiene todos los recursos individuales y el segundo elemento del array es un objeto que se puede usar para manipular la colección de recursos, como crear nuevos.
514+
El hook personalizado _useResource_ devuelve un array de dos elementos al igual que los hooks de estado. El primer elemento del array contiene todos los recursos individuales y el segundo elemento del array es un objeto que se puede usar para manipular la colección de recursos y crear nuevos.
522515

523516
Si implementa el hook correctamente, se puede usar tanto para notas como para números de teléfono (inicie el servidor con el comando _npm run server_ en el puerto 3005).
524517

0 commit comments

Comments
 (0)