You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* Notar que el código javascript dentro del código JSX se escribe entre `{}`.
42
+
43
+
- Notar que el código javascript dentro del código JSX se escribe entre `{}`.
44
+
37
45
##### Ejemplo:
38
-
* Crear un componente llamado `<NumberList>`.
39
-
* El componente recibirá un arreglo de números como parámetro y deberá generar una salida similar al ejemplo anterior.
46
+
47
+
- Crear un componente llamado `<NumberList>`.
48
+
- El componente recibirá un arreglo de números como parámetro y deberá generar una salida similar al ejemplo anterior.
40
49
41
50
```jsx
42
51
functionNumberList(props){
@@ -55,61 +64,81 @@ ReactDOM.render(
55
64
document.getElementById('root');
56
65
);
57
66
```
58
-
* Al ejecutar el código anterior se obtendrá el siguiente warning:
59
-
```javascript
67
+
68
+
- Al ejecutar el código anterior se obtendrá el siguiente warning:
69
+
70
+
```javascript
60
71
Warning: Each child in a list should have a unique "key" prop.
61
72
```
62
-
* Una llave o key hace referencia a un atributo especial que se requiere agregar a los componentes JSX cuando se generan listas.
73
+
74
+
- Una llave o key hace referencia a un atributo especial que se requiere agregar a los componentes JSX cuando se generan listas.
75
+
63
76
#### 6.2 Keys
64
-
* Las Keys ayudan a ReactJS a identificar si alguno de los elementos de dicha lista ha cambiado o si alguno de sus elementos ha sido eliminado.
65
-
* Cada elemento de la lista debe contar con valor *único* asignado como *key*. Típicamente su valor corresponde con algún identificador o id.
66
-
* Los valores deben ser únicos entre elementos de la misma lista, es decir, los valores se pueden repetir pero en listas diferentes.
67
-
* Se emplea el atributo `key` para especificar su valor.
77
+
78
+
- Las Keys ayudan a ReactJS a identificar si alguno de los elementos de dicha lista ha cambiado o si alguno de sus elementos ha sido eliminado.
79
+
- Cada elemento de la lista debe contar con valor _único_ asignado como _key_. Típicamente su valor corresponde con algún identificador o id.
80
+
- Los valores deben ser únicos entre elementos de la misma lista, es decir, los valores se pueden repetir pero en listas diferentes.
81
+
- Se emplea el atributo `key` para especificar su valor.
82
+
68
83
##### Ejemplo:
84
+
69
85
```jsx
70
-
constnumeros= [1,2,3,4,5];
71
-
constitems=numeros.map((numero)=>
72
-
<Item key={numero.toString()} value={numero}/>
73
-
);
86
+
constnumeros= [1,2, 3, 4, 5];
87
+
constitems=numeros.map((numero)=> (
88
+
<Item key={numero.toString()} value={numero}/>
89
+
));
74
90
```
75
-
* En caso de no contar con algún Id propio, o estos no sean únicos, se puede emplear el índice de la propia lista que se proporciona como parte de los argumentos del método `map`.
91
+
92
+
- En caso de no contar con algún Id propio, o estos no sean únicos, se puede emplear el índice de la propia lista que se proporciona como parte de los argumentos del método `map`.
93
+
76
94
```jsx
77
-
constnumeros= [1,1,2,2,2];
78
-
constitems=numeros.map((numero,index)=>
79
-
<Item key={index} value={index +1 }/>
80
-
);
95
+
constnumeros= [1,1, 2, 2, 2];
96
+
constitems=numeros.map((numero,index)=> (
97
+
<Item key={index} value={index +1} />
98
+
));
81
99
```
82
-
* Ojo: No emplear índices si el orden de los elementos de la lista cambia.
100
+
101
+
- Ojo: No emplear índices si el orden de los elementos de la lista cambia.
102
+
83
103
#### 6.3 Generación de objetos JSX con keys.
84
-
* 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.
85
-
* 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>`
104
+
105
+
- 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.
106
+
- 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>`
* Notar que en el componente `Producto` se incluye su `key`, así como su nombre y un atributo llamado `numProducto`.
109
-
* Observar que este último atributo también contiene al valor de la `key`.
110
-
* Este atributo es necesario cuando se desee mostrar en el componente el valor de la `key`.
111
-
* El atributo `key` es empleado por ReactJS para detectar cambios, pero este no está disponible como property. Si se desea mostrarlo, se usa otro property con nombre diferente, en este caso al atributo `numProducto`.
112
-
* Una forma más compacta de hacer uso de la función `map` es emplearla directamente en la instrucción `return` y evitar así la declaración de la variable `productosJsx`
135
+
136
+
- Notar que en el componente `Producto` se incluye su `key`, así como su nombre y un atributo llamado `numProducto`.
137
+
- Observar que este último atributo también contiene al valor de la `key`.
138
+
- Este atributo es necesario cuando se desee mostrar en el componente el valor de la `key`.
139
+
- El atributo `key` es empleado por ReactJS para detectar cambios, pero este no está disponible como property. Si se desea mostrarlo, se usa otro property con nombre diferente, en este caso al atributo `numProducto`.
140
+
- Una forma más compacta de hacer uso de la función `map` es emplearla directamente en la instrucción `return` y evitar así la declaración de la variable `productosJsx`
141
+
113
142
```jsx
114
143
functionOrdenCompra(props){
115
144
constproductos=props.productos;
@@ -120,6 +149,112 @@ function OrdenCompra(props){
120
149
}</ul>
121
150
}
122
151
```
123
-
* Tener cuidado ya que esto puede generar código complicado de leer.
124
-
* Ver la carpeta `ejemplos` para revisar el código fuente.
152
+
153
+
- Tener cuidado ya que esto puede generar código complicado de leer.
154
+
- Ver la carpeta `ejemplos` para revisar el código fuente.
155
+
156
+
##### Ejemplo:
157
+
158
+
- 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.
0 commit comments