-
Notifications
You must be signed in to change notification settings - Fork 15
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Ejemplo Historial Académico #52
base: master
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Muchas gracias Tocayo Inge :), excelente ejemplo. Apenas me estoy poniendo al corriente con PRs. Solo agregué unos cuantos comentarios para corregir antes de hacer merge.
### 6.1. Transformación de listas en Javascript | ||
* Una de las funciones comúnmente empleadas para manejar listas de componentes es la función `map`. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Posiblemente tu editor te cambió el estilo de las viñetas.
En los documentos siempre uso "" en lugar de "-" Me gustaría que se siguiera respetando la convención. Si esto no te representa un problema, ¿podrias usar los "" ?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
En efecto, el editor modificó el formato el estilo del archivo, pero parece que ya lo corregí
reactjs/docs/modulo06.md
Outdated
); | ||
|
||
- Solución: | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
¿hay alguna razón por la cual se agregó esta línea vacía ?
reactjs/docs/modulo06.md
Outdated
``` | ||
* Notar que el código javascript dentro del código JSX se escribe entre `{}`. | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
¿hay alguna razón por la cual se agregó esta línea vacía ?
reactjs/docs/modulo06.md
Outdated
``` javascript | ||
|
||
- Al ejecutar el código anterior se obtendrá el siguiente warning: | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
¿hay alguna razón por la cual se agregó esta línea vacía ?
reactjs/docs/modulo06.md
Outdated
* Cada elemento de la lista debe contar con valor *único* asignado como *key*. Típicamente su valor corresponde con algún identificador o id. | ||
* Los valores deben ser únicos entre elementos de la misma lista, es decir, los valores se pueden repetir pero en listas diferentes. | ||
* Se emplea el atributo `key` para especificar su valor. | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
¿hay alguna razón por la cual se agregó esta línea vacía ?
reactjs/docs/modulo06.md
Outdated
#### 6.3 Generación de objetos JSX con keys. | ||
* La asignación de la *key* a cada elemento de la lista se debe realizar cuando se escribe el elemento JSX en lugar de hacerlo con los elementos HTML estándar. | ||
* Por ejemplo, suponer que se tiene un componente `ListItem` que define a un elemento `<li>valor</li>`, la definición del atributo key debe asignarse al usar `<ListItem>` en lugar de hacerlo con el elemento `<li>` | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
¿hay alguna razón por la cual se agregó esta línea vacía ?
reactjs/docs/modulo06.md
Outdated
|
||
##### Ejemplo: | ||
|
||
- Crear una página que muestre el historial académico de un alumno para un semestre en específico (se debe incluir el nombre del alumno, el semestre y una tabla con los datos de las materias cursadas y sus correspondientes calificaciones). Si alguna calificación es menor a siete se debe resaltar el texto en color rojo. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sugiero mejorar la redacción asi:
Crear una página web que simule una consulta de un historial académico de un alumno para un semestre en....
document.getElementById("root") | ||
); | ||
``` | ||
|
||
##### Fin de módulo. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Muchas gracias. El ejemplo esta genial !.
Sugiero agregar una explicación general para explicar la estrategia de solución, por ejemplo, explicar que la página se ha dividido en N componentes y describirlos muy brevemente.
document.getElementById("root") | ||
); | ||
``` | ||
|
||
##### Fin de módulo. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Un favor: Al final de un ejemplo siempre agrego 2 ligas para que puedan realizar lo siguiente:
- Ver el código completo de la página (apuntando al archivo html)
- Liga que permite mostrar el render. Para ello me auxilio del sitio web que genera GitHub en forma automática. La liga no funcionaría hasta que se haga merge.
En resumen, lo que se tendría que agregar sería:
* El código completo puede consultarse [aquí.](../ejemplos/modulo06/historialAlumnos.html)
* El resultado del ejemplo se puede visualizar [aquí.](https://jorgerdc.github.io/tutoriales/reactjs/ejemplos/modulo06/historialAlumnos.html)
¿Me podrías apoyar agregando estos 2 links?
Como lo mencioné, la segunda liga seguramente no va a funcionar porque aun no hacemos merge.
Cualquier duda me avisas porfa.
Gracias :)
344e920
to
a32e489
Compare
Agrego el ejercicio de tarea de la clase pasada sobre el historial académico de un alumno.