UCSM Esc. Prof.

de Ingeniería de Sistemas INFORME DE PRÁCTICAS

Octubre - 2022 DESARROLLO DE
APLICACIONES

Práctica N° 07:
React – Router y Context
Elaborado por:

© IEEE 2013 The Institute of Electrical and Electronics Engineers, Inc.

Práctica N° 07: ReactRouter y Context

GRUPO N° 4

PRÁCTICAS DE DESARROLLO DE APLICACIONES

Presentado por:
0000000000 APELLIDOS , NOMBRES
1111111111 APELLIDOS , NOMBRES
2222222222 APELLIDOS , NOMBRES

ii
Práctica N° 07: ReactRouter y Context

RECONOCIMIENTOS

Los autores de este trabajo reconocen con gratitud a los creadores de ReactRouter …..

PALABRAS CLAVES

ReactRouter, enrutamiento,

iii
Práctica N° 07: ReactRouter y Context

ÍNDICE

1. RESÚMEN 1
2. INTRODUCCIÓN.......................................................................................................1
3. MARCO TEÓRICO.....................................................................................................1
3.1 REACT ROUTER..............................................................................................1
3.2 ANIDAMIENTO en ReactRouter........................................................................1
3.3 ENRUTAMIENTO DINÁMICO en ReactRouter.................................................1
3.4 REACT CONTEXT............................................................................................1
4. EXPERIENCIAS DE PRÁCTICA................................................................................1
4.1 React Router (2 ejemplos).................................................................................1
4.2 React Context (2 ejemplos)...............................................................................2
5. CONCLUSIONES DE LA PRÁCTICA:........................................................................2
6. CUESTIONARIO........................................................................................................2
7. BIBLIOGRAFÍA.......................................................................................................... 2
8. ENLACES DE REUNIONES GRUPALES PARA REALIZAR INFORME....................3

iv
Práctica N° 07: ReactRouter y Context

ÍNDICE DE TABLAS Y FIGURAS ( las más resaltantes del Marco Teórico)

Ilustración 1.........................................................................................................................1
Ilustración 2.........................................................................................................................2

v
Práctica N° 07: ReactRouter y Context

1. RESÚMEN

2. INTRODUCCIÓN

Colocar aquí la introducción general a los conceptos, herramientas o tecnologías más importantes
abordados en este informe.

1
Práctica N° 07: ReactRouter y Context

3. MARCO TEÓRICO
3.1 REACT ROUTER
Responde a las preguntas: ¿Qué es? ¿Cúando se usa? ¿Cómo se configura y se instala? ¿Cómo se
crea una aplicación? Puede incluir tablas o figuras si es pertinente.

3.2 ANIDAMIENTO en ReactRouter

Responde a las preguntas: ¿Qué es? ¿Cómo se declara? ¿Cúando se usa? Puede incluir tablas o
figuras si es pertinente. [1]

Ilustración 1

3.3 ENRUTAMIENTO DINÁMICO en ReactRouter

Responde a las preguntas: ¿Qué es? ¿Cómo se declara? ¿Cúando se usa? ¿Qué tipos de
componentes hay? Puede incluir tablas o figuras si es pertinente.

3.4 REACT CONTEXT

Responde a las preguntas: ¿Qué es? ¿Cómo se declara? ¿Cúando se usa? Puede incluir tablas o
figuras si es pertinente.

4. EXPERIENCIAS DE PRÁCTICA
4.1 React Router (2 ejemplos)
a) ANIDAMIENTO
b) ENRUTAMIENTO DINÁMICO

Colocar código documentado

1
Práctica N° 07: ReactRouter y Context

Colocar captura de pantalla del resultado en el navegador

4.2 React Context (2 ejemplos)

Colocar código documentado

Colocar captura de pantalla del resultado en el navegador

5. CONCLUSIONES DE LA PRÁCTICA:
a) .
b) .
c) .
d) .
e) .

6. CUESTIONARIO
1. ¿Qué es React Router?
2. ¿Cuál es la última versión de Reac Router?
3. ¿Cuál es la manera más eficiente de pasar estados entre componentes y por qué?
4. ¿Hasta cuantos niveles de anidamiento se puedes crear con React Router?
5. ¿Cuál es la forma para poder redirigir a una página de error cuando el usuario ingresa de
manera incorrecta una ruta o URL?
6. ¿Cuál es el componente que reemplaza a la etiqueta <a> de HTML al momento de crear
enrutamientos?
7. ¿Para poder realizar enrutamiento dinámico el patrón que debe utilizarse para reemplazar el
contenido dinámico es :userId o puede ser otro?
8. ¿Cuándo trabajamos con React Context qué significa o a qué se refiere con el término
“props drilling” ?
9. ¿Cuál es la máxima cantidad de niveles entre componentes en que se puede pasar una
variable o valor a través de un estado?
10. ¿En qué casos es posible tener componentes <Route> anidados?¿Para que nos serviría?

7. BIBLIOGRAFÍA

[2] «Sass,» [En línea]. Available: https://sass-lang.com/documentation/. [Último acceso: 2022].

2
Práctica N° 07: ReactRouter y Context

[3] «W3schools,» [En línea]. Available: https://www.w3schools.com/sass/sass_intro.php. [Último

acceso: 2022].

8. ENLACES DE REUNIONES GRUPALES PARA REALIZAR

INFORME
N URL Fecha
°