Ejemplo Historial Académico#52
Conversation
jorgerdc
left a comment
jorgerdc
left a comment
There was a problem hiding this comment.
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. Lists, Keys | ||
|
|
||
| ### 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.
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.
En efecto, el editor modificó el formato el estilo del archivo, pero parece que ya lo corregí
| ); | ||
|
|
||
| - Solución: | ||
|
|
There was a problem hiding this comment.
¿hay alguna razón por la cual se agregó esta línea vacía ?
| ReactDOM.render(<ul>{componentes}</ul>, document.getElementById("root")); | ||
| ``` | ||
| * Notar que el código javascript dentro del código JSX se escribe entre `{}`. | ||
|
|
There was a problem hiding this comment.
¿hay alguna razón por la cual se agregó esta línea vacía ?
| ``` javascript | ||
|
|
||
| - Al ejecutar el código anterior se obtendrá el siguiente warning: | ||
|
|
There was a problem hiding this comment.
¿hay alguna razón por la cual se agregó esta línea vacía ?
| * 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.
¿hay alguna razón por la cual se agregó esta línea vacía ?
| #### 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.
¿hay alguna razón por la cual se agregó esta línea vacía ?
|
|
||
| ##### 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.
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....
| ); | ||
| ``` | ||
|
|
||
| ##### Fin de módulo. |
There was a problem hiding this comment.
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.
| ); | ||
| ``` | ||
|
|
||
| ##### Fin de módulo. |
There was a problem hiding this comment.
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
4 participants
Agrego el ejercicio de tarea de la clase pasada sobre el historial académico de un alumno.