1P Maios 6to

Submódulo2 -Desarrolla aplicaciones móviles para IOS
Contenido
Carga inicial ............................................................................................................................................................................. 2

Para preparar el proyecto: .................................................................................................................................................. 3
Practica 1 ................................................................................................................................................................................. 4
Objetivo:.............................................................................................................................................................................. 4
Practica 2 ............................................................................................................................................................................... 11
Objetivo............................................................................................................................................................................. 11
Practica 3 ............................................................................................................................................................................... 14
Objetivo:............................................................................................................................................................................ 14
Actividad 1: ....................................................................................................................................................................... 22
Practica 4 ............................................................................................................................................................................... 22
Objetivo............................................................................................................................................................................. 22
Practica 5 ............................................................................................................................................................................... 32
Actividad 2: ....................................................................................................................................................................... 49
Prof. Tamara Raquel Martínez Martínez. Pág. 1

Contenido utilizado de manera didáctica.
Carga inicial
1. Instalamos node js con el ejecutable enviado como material de clase.
2. Abrimos el cmd de Windows
3. Revisamos su versión con el comando:
a. Node -v
4. Revisamos que estén cargados npm y npx con los comandos
a. Npm -v
b. Npx -v
1. Insertamos nuestra unidad USB y Crearemos una carpeta en la que trabajaremos este semestre (se sugiere el
nombre REACT)
2. Dentro de la carpeta creamos una carpeta con el nombre practica1
3. Abrimos Visual Studio Code
4. Abrimos la ruta de la carpeta anteriormente mencionada (REACT)
a. File/Open Folder/React
5. Abrimos una terminal

6. Colocamos el código
a. npx create-react-app practica1

7. Esperamos a que se instalen las bibliotecas
8. Mensaje de salida al término de la instalación:
Para preparar el proyecto:

a. Borraremos todo lo que contega setupTest.js, reportWebVitals.js y AppTest.js
b. Modificaremos index.js para que quede de la siguente manera:
c. Modificaremos App.js

d. Dejaremos la pantalla del navegador en blanco:
e. Modificaremos App.css, borrado todo lo que contiene:
Practica 1
Página “Resumen de libros”
Objetivo: Verificar la funcionalidad de react para la manipulación de contenedores propios.
1. Mostraremos lo siguiente en el navegador
2. Aparecerán las siguientes carpetas dentro de la carpeta practica1

3. Abriremos la terminal de VSC y ejecutaremos el servidor de desarrollo con el comando npm start en la terminal
desde la carpeta preestablecida
4. Ejecutamos el comando npm start (Recuerda anotar las direcciones IP para futuras revisiones o utilizar en
comando ipconfig)
5. Abrimos el navegador de internet Google Chrome, escribiremos en la barra de navegación localhost:3000

6. En la carpeta src crearemos un nuevo folder con boten derecho al que le llamaremos componentes

7. Dentro de la capeta de componentes crearemos un archivo nuevo con el nombre Descripciones (Recuerda que
los componentes se escriben con la primera letra en mayuscula)
8. Cambia dos espacios la indentacion de 4 a 2 espacios
9. Escribiremos el siguiente código:

10. Crearemos otra carpeta en src con el nombre de imágenes y arrastraremos desde el panel donde tengamos las
imágenes a mostrar
11.- Iniciaremos con la contruccion del primer repositorio, modificando el codigo anterior:
12.- Regresamos al componente y agregaremos las siguientes líneas de código:
11. Insertar la importación del componente y modificar como se muestra a continuación:

12. Agregamos la exportación en el componente en Descripciones.css
13. Mostrándose lo siguiente en el navegador:
14. Asignaremos estilo con css

a. Crearemos un nuevo folder en la carpeta de src con el nombre de hojas-estilo
b. Crearemos en la carpeta de hojas-estilo un archivo de nombre Descripciones.css

c. Abriremos el archivo App.css, cambiaremos a 2 el espacio como en el paso 8 y colocaremos el siguiente
código:
a. Se mostrara el navegador de la siguiente manera:

d. Agregaremos un título, iremos a App.js y agregaremos el título en la aplicación inicial:
e. Quedando así el navegador
f. Agregaremos lo siguiente en el archivo App.css:

15. Trabajaremos con el estilo del componente:
a. Enmarcaremos la información en un rectángulo por lo que colocaremos lo siguiente en el archivo
Descripciones.css

16. Importaremos el archivo Descripciones.css al archivo principal Descripciones.js agregando la siguiente liga
Practica 2
Objetivo: Asignación y manejo de las props.
Aplicación terminada:
Desarrollo
1. Cargaremos lo trabajado en la practica 1

2. Abrimos Descripciones.js, remplazando el texto fijo con la palabra props, como se muestra a continuación:

3. Pasaremos los props a un componente, por medio de argumentos, agregando los argumentos en App.js, como a
continuación se muestra:
4. Para la imagen, la adjuntaremos en el archivo Descripciones.js utilizando plantillas de JavaScript modificando la

siguiente línea:

5. Agregaremos el argumento de la imagen en el archivo App.js

6. Crearemos los diferentes elementos (instancias) para cada elemento
7. Colocaremos un poco de diseño poniendo los nombres de los libros en negrita, modificando el componente con
la función strong agregando lo siguiente en App.js
Practica 3
Objetivo: Crear dinámica en los componentes con acciones denominados clics así como en el uso de hooks y
fortalecimiento de los props
Mostraremos lo siguiente como aplicación final:

1. Abrimos cmd de Windows
2. Nos colocamos en la ruta donde guardamos la carpeta REACT
3. Colocamos el comando
4. Abrimos Visual Studio Code en el folder creado anteriormente.

5. En una terminal escribimos lo siguiente:
6. Preparamos el proyecto con el paso 12 de la practica1.

7. Crearemos en la carpeta src una nueva carpeta de nombre imágenes y dentro de ella arrastraremos la imagen
que servirá de logo.
8. Iniciamos con App.js importando la imagen que usaremos por lo que anotaremos lo siguiente:
9. Crearemos el estilo en el archivo Apps.css para darle formato al logo.

10. Utilizaremos 2 componentes, uno para cada botón (Clic y Reiniciar) por lo que crearemos en la carpeta de src
una carpeta de nombre componentes
11. Iniciaremos creando el boton de clic por lo que en la carpeta componente crearemos un archivo de nombre
Boton.js
12. En el componente Boton.js escribiremos el siguiente código:
Props con desestructuración
Acción de condicional
Event Listener (oyente de

eventos): es la acción que genera
con eventos.
13. Para crear físicamente los botones, consideraremos en Apps.js los 3 props creados en boton.js e incluiremos las
siguientes líneas de código:
Definiremos las
acciones para
mandarlos a llamar
en las acciones
asignadas a los
props por medio de
las funciones. El
mensaje en la
consola es solo
para hacer las
pruebas
Colocaremos las
funciones asignadas al
prop
14. Para asignar formato a los botones crearemos en la carpeta src una carpeta de nombre Hojas-estilo y dentro de
ella un archivo de nombre Boton.css
15. En este archivo escribiremos lo siguiente:
16. Importaremos la hoja de estilos en el componente Boton.js

17. Para el siguiente componente que es el contador; en la siguiente ruta src/componentes crearemos Contador.js
Escribiremos el siguiente código en Contador.js
18. Agregaremos el contador al archivo Ass.js con el siguiente código:
Antes de hacerlo
dinámico
colocaremos a
numClics con el
número 5 para
poder crearle el
estilo e
importaremos el
componente del
contador

19. En la carpeta de hojas de estilo crearemos un archivo de nombre contador.css
20. Y escribiremos el siguiente código:
21. Importaremos el archivo contador.css en el archivo contador.js
22. Implementaremos el estilo del contenedor principal en App.css agregando lo siguiente:

23. Para agregar las herramientas de react, actualizaremos el contador, para ellos realizaremos lo siguiente:
24. En App.js crearemos Hooks en este caso usaremos (useState para manejar estados de las funciones), agregando
lo siguiente:
Aplicación del Hooks
Modificar el
argumento de
manejoClic

Actividad 1: Con lo aprendido, realice una aplicación que genere likes de 3 fotografias, reutilice el código.
Practica 4
Objetivo Manejar de objetos, eventos y almacenamiento de datos en variables por medio de una calculadora.
Aplicación terminada
1. Cargaremos el proyecto utilizando los pasos del 1 al 12 de la practica 1

2. Para cargar la imagen inicial crear una carpeta nueva dentro de src y en ella arrastraremos la imagen que
utilizaremos para mostrar en la aplicación:
3. Para cargar la imagen la importaremos con el siguiente código en el archivo de App.js:

4. Asignaremos el estilo en el archivo App.css
5. En el archivo App.js incluiremos el div para utilizar la clase del marco principal:

6. Para crear el marco principal de la calculadora utilizaremos el siguiente código dentro de App.css
7. Iniciaremos el funcionamiento de la calculadora asignando su espacio en el marco principal por medio de filas
enmarcadas por div:
8. Para mostrarlo le crearemos su estilo en el archivo .css:
9. Generaremos los componentes, iniciando con la creación de una carpeta en src con el nombre de componentes
y el ella un archivo que se llamara Boton.js

10. Al crearlo escribiremos lo siguiente:
11. E importaremos el componente en el archivo App.js
12. Para asignarle un estilo a los botones crearemos una carpeta en src de nombre estilos y en ella crearemos un
archivo de nombre Boton.css en el que asignaremos a operador y a botón-contenedor, colocando el siguiente
diseño

13. Adicional colocaremos la propiedad de hover para la seudoclase para que los botones cambien de color para
que cuando pase el cursor, será con el siguiente código en el archivo Boton .css
14. Después de crear el estilo importaremos en el archivo de App.js el archivo Boton.js
15. Para generar la estructura de la calculadora modificaremos el archivo App.js y agregaremos el contenido de los
botones con el siguiente código:

16. Para crear el componente de donde se mostrarán los datos crearemos en la carpeta src/componentes un nuevo
archivo de nombre Datos.js
17. En el archivo de Datos.js crearemos el componente con un valor flecha
18. En el archivo App.js modificaremos la estructura del marco principal para mandar a llamar el componente de los
Datos e importar el archivo Datos.js

19. Para mostrar el componente de los datos necesitamos generar su estilo, por lo que en la carpeta src/hoja-estilo
crearemos el archivo Datos.css y en el escribiremos lo siguiente:
20. Importamos el archivo en el componente Datos.js
21. Para el botón de limpiar, crearemos un nuevo componente con el nombre de BotonLimpiar.js y le agregaremos
el siguiente código:

22. Sigue importar este archivo en App.js
23. En el mismo archivo App.js adjuntaremos el componente:
24. Para darle Formato a este componente (BotonLimpiar) crearemos un archivo en la ruta src/hojas-estilo un
nuevo archivo de nombre botonLimpiar.css en el que agregaremos el siguiente código:

25. Al terminarlo lo importaremos en el archivo BotonLimpiar.js
Ya tenemos el diseño terminado, para iniciar la lógica de la calculadora, realizaremos lo siguiente:
26. Utilizaremos un Hook y lo agregaremos por medio de un useState, agregándolo en el archivo App.js
27. Modificaremos el archivo Boton.js para cargar el documento pasar los eventos

28. En el archivo de App.js agregaremos las siguientes ligas para ejecutar las funciones declaradas anteriormente:
29. Para que haga los cálculos utilizaremos la función Math.js adjuntando la biblioteca en el encabezado de App.js,
abrimos la terminal e instalamos la biblioteca con el comando:

30. Para el botón de limpiar realizaremos la modificación en el archivo Apps.js
Practica 5
Objetivo: Manejar concepto como fragmentos y movimientos de estados
Aplicación terminada:
1. Abrimos Visual Studio Cade y en una terminal crearemos los archivos por medio del comando:
2. Esperamos a que se carguen los archivos

3. Cargamos la carpeta creada anteriormente en VSC (practica 5)
4. Preparamos el proyecto con los pasos vistos en la sección de carga inicial.
5. Iniciamos la ejecución del localhost con el comando npm en una nueva terminal y esperamos a que la pagina
inicial este totalmente en blanco.
6. Para insertar el logotipo de Cbtis crearemos una carpeta en src con el nombre de imágenes y arrastraremos a
ella la imagen que usaremos:
7. Modificaremos el archivo de App.js para que agregue a la aplicación el logo:

8. Para el estilo de la imagen y general crearemos su estilo en el archivo Apps.css
9. Crearemos el contenedor de la lista de actividades es decir donde se enlisten los datos por lo modificaremos el
archivo App.js

10. Asignaremos el estilo del contenedor de las actividades en el archivo App.css
11. Para el componente de las actividades crea una carpeta en src de nombre componentes y en el un archivo de
nombre Actividades.css
12. Ajustamos el formato del componente por medio del archivo Actividades.css así que crearemos una carpeta en
el archivo src de nombre estilos y en ella crearemos este archivo css.

Para que el formato se visualice en el componente debemos de importar el estilo en el componente
13. Mandaremos a llamar el props de texto en el componente principal App.js
React icons
14. En esta actividad no apoyaremos en un paquete externo de nombre React icons, en una terminal nueva
ejecutaremos el comando que nos solicita la página:

15. En la página buscaremos el icono que nos gustaría implementar en nuestro proyecto
16. Seleccionamos el icono que usaremos y adjuntaremos en el encabezado del archivo Actividades.js e insertamos
el icono por medio de una clase.
17. Utilizaremos un prop para que la aplicación muestre cuando la actividad sea terminada modificando el archivo
Actividades.js con el siguiente código:

18. Para el estilo de la tarea se vera de la siguiente manera en el archivo de Actividades.css
19. Crearemos el segundo componente de nombre Lista-Actividades.js creando su carpeta en src y en ella crear
archivo con ese nombre, así como crear el folder de estilo en la ruto src/Estilos con el nombre Lista-
Actividades.css y editaremos como se muestra :
20. Al termino de estos dos archivos imporaremos el componente en el archivo Lista-Actividades.js
21. Para presentarlo en el componente principal realizaremos los siguientes cambios:

22. Tendremos un nuevo componente que ayudara a guardar todas las actividades guardadas por lo que crearemos
en src/componente el archivo Contenedor-Tareas.js
23. Dentro de este componente colocaremos el siguiente código en el archivo css y para el estilo crearemos en la
carpeta de estilos el archivo Contenedor. Css en el que modificadores el archivo de la siguiente manera:
E importaremos el archivo .css al archivo .js con la siguiente línea en el Contenedor-Tareas.js
24. En el archivo App.js trabajaremos lo siguiente:
Dos componentes
implementados en
uno

25. Asignaremos pops para que los datos se almacenen en las actividades con 5 elementos a almacenar (como sus
campos) con el siguiente código:
26. Modificaremos la lista de actividades para que tome los cambios del componente de actividades
Aquí realizaremos
las pruebas con
los complementos
Google Chrome

27. Si las pruebas en consola funcionaron seguimos con la modificación del mismo archivo:
Nueva
función
28. Para que trabajen los Id necesitaremos el paquete de uuid por lo que de manera inicial tendremos que instalarla
con una terminal nueva, donde colocaremos el comando
29. Y colocaremos en el encabezado la importación del paquete

Hasta este momento
revisa el navegador y
realizamos las pruebas
en la consola
30. Para que funcione usaremos Hooks en el archivo Contenedor-Tareas.js revisemos que usa nuevas funciones
como:
• Trim:____________________________
• Arreglo: _________________________________________
• Operador Spread______________________________
• Map________________________________________
• Metodo filter:______________________________________________

Consideraremos al
elemento del id
Se busca que Necesitamos darles

se marque el orden a las actividades
texto de la por lo que asignaremos
actividad los props que usaran
las llaves primarias
31. Para darle formato de degradado en la asignación de las actividades colocaremos los siguientes colores en el
archivo Actividades.css
Las pruebas en el navegador en

este punto deben de dar la
asignación de las tareas y el
icono debe funcionar
correctamente
Actividad 2: Implementa lo aprendido con lo que ya has

manejado y crea una aplicación que me permita por medio
paneles y menús mostrar los proyectos anteriores.

1P Maios 6to

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

1P Maios 6to

Cargado por

Copyright:

Formatos disponibles

Submódulo2 -Desarrolla aplicaciones móviles para IOS

Carga inicial ............................................................................................................................................................................. 2

Prof. Tamara Raquel Martínez Martínez. Pág. 1

5. Abrimos una terminal

Prof. Tamara Raquel Martínez Martínez. Pág. 2

8. Mensaje de salida al término de la instalación:

Para preparar el proyecto:

Prof. Tamara Raquel Martínez Martínez. Pág. 3

e. Modificaremos App.css, borrado todo lo que contiene:

2. Aparecerán las siguientes carpetas dentro de la carpeta practica1

Prof. Tamara Raquel Martínez Martínez. Pág. 4

5. Abrimos el navegador de internet Google Chrome, escribiremos en la barra de navegación localhost:3000

Prof. Tamara Raquel Martínez Martínez. Pág. 5

8. Cambia dos espacios la indentacion de 4 a 2 espacios

9. Escribiremos el siguiente código:

Prof. Tamara Raquel Martínez Martínez. Pág. 6

12.- Regresamos al componente y agregaremos las siguientes líneas de código:

11. Insertar la importación del componente y modificar como se muestra a continuación:

13. Mostrándose lo siguiente en el navegador:

14. Asignaremos estilo con css

b. Crearemos en la carpeta de hojas-estilo un archivo de nombre Descripciones.css

Prof. Tamara Raquel Martínez Martínez. Pág. 8

a. Se mostrara el navegador de la siguiente manera:

e. Quedando así el navegador

f. Agregaremos lo siguiente en el archivo App.css:

Prof. Tamara Raquel Martínez Martínez. Pág. 9

Prof. Tamara Raquel Martínez Martínez. Pág. 10

1. Cargaremos lo trabajado en la practica 1

Prof. Tamara Raquel Martínez Martínez. Pág. 11

4. Para la imagen, la adjuntaremos en el archivo Descripciones.js utilizando plantillas de JavaScript modificando la

Prof. Tamara Raquel Martínez Martínez. Pág. 12

Prof. Tamara Raquel Martínez Martínez. Pág. 13

Mostraremos lo siguiente como aplicación final:

Prof. Tamara Raquel Martínez Martínez. Pág. 14

4. Abrimos Visual Studio Code en el folder creado anteriormente.

6. Preparamos el proyecto con el paso 12 de la practica1.

Prof. Tamara Raquel Martínez Martínez. Pág. 15

9. Crearemos el estilo en el archivo Apps.css para darle formato al logo.

Prof. Tamara Raquel Martínez Martínez. Pág. 16

12. En el componente Boton.js escribiremos el siguiente código:

Props con desestructuración

Event Listener (oyente de

15. En este archivo escribiremos lo siguiente:

16. Importaremos la hoja de estilos en el componente Boton.js

Prof. Tamara Raquel Martínez Martínez. Pág. 18

Escribiremos el siguiente código en Contador.js

18. Agregaremos el contador al archivo Ass.js con el siguiente código:

Prof. Tamara Raquel Martínez Martínez. Pág. 19

20. Y escribiremos el siguiente código:

21. Importaremos el archivo contador.css en el archivo contador.js

22. Implementaremos el estilo del contenedor principal en App.css agregando lo siguiente:

Prof. Tamara Raquel Martínez Martínez. Pág. 20

Aplicación del Hooks

Prof. Tamara Raquel Martínez Martínez. Pág. 21

1. Cargaremos el proyecto utilizando los pasos del 1 al 12 de la practica 1

3. Para cargar la imagen la importaremos con el siguiente código en el archivo de App.js:

Prof. Tamara Raquel Martínez Martínez. Pág. 22

Prof. Tamara Raquel Martínez Martínez. Pág. 23

8. Para mostrarlo le crearemos su estilo en el archivo .css:

Prof. Tamara Raquel Martínez Martínez. Pág. 24

11. E importaremos el componente en el archivo App.js

Prof. Tamara Raquel Martínez Martínez. Pág. 25