0:00 Bueno, como siempre, para comenzar, abriremos nuestro archivo index.html, donde podremos ver los estilos predefinidos para este ejercicio, y nos encontramos con la descripción de cada uno de nuestros pasos a seguir. Lo primero es que crearemos una lista de elementos utilizando este componente llamado UL.

0:21 En este componente nos indica que aquí debe ir la prop para recibir estilos, prop que tenemos que pasar como argumentos, la llamaremos clase y la pasaremos dentro de la prop classname. También deberemos recibir la lista que queremos renderizar, la llamaremos lista, hacemos un map sobre la lista y simplemente renderizamos elementos li. Los elementos de la lista deben usar un estilo en línea, los agregaremos manualmente, style y le diremos font size, tamaño 18 pixeles. Es hora de renderizar esto en pantalla, para eso cambiaremos lo que tenemos aquí en nuestro elemento list y diremos UL que es el componente que creamos, le pasamos la lista de items a la prop prop, a la prop lista y la clase list a la prop clase.

1:18 Necesitamos nuestro localhost 3000 y tenemos nuestros elementos de lista, podemos revisar que es lo que se renderizó y tenemos aquí que cumplimos con que la lista tiene una clase list y cada uno de los elementos tiene un inline style. No olvidemos que cuando trabajamos con arreglos tenemos que manejar la prop key, en este caso la prop no cambia y el único valor invariable que tenemos puede ser el índice del mismo arreglo, lo obtenemos utilizando el segundo argumento del método ArrayMap, luego ya tenemos nuestra lista renderizada.

1:50 Nuestro segundo ejercicio dice que tenemos que crear un componente que usa una prop para recibir el estilo en línea en cada uno de los items, la definición de este estilo en línea debe serse fuera del componente, es decir, el componente item tiene que recibir
una prop y pasarla como estilo en línea, les comentamos aquí, nuestro componente item no es más que un li, aquí va la definición del estilo en línea, renderizamos children y aquí en la prop agregamos la prop style para el inline style y le pasaremos una prop que recibiremos que se llamará simplemente style, ahora donde usamos este componente lo utilizamos en nuestra lista dentro de nuestro componente ul, en vez de renderizar li directamente renderizaremos item y ya le estamos pasando la prop style así que cumplimos con el ejercicio, esa prop style pasa directamente al componente item y pasará como inline style.

2:46 Lo podemos revisar aquí, tenemos los inline style, ahora podemos revisar los componentes con react dev tools y veremos que tenemos item renderizado, el ejercicio 3 nos propone que podamos manipular diferentes tamaños de fuentes a través de los estilos y para eso utilizaremos algunos trucos con array map, una de las condiciones es que estos estilos en líneas deben pasar como prop al componente item, lo que haremos será crear un arreglo de tamaños de fuentes 16 pixeles, 20 pixeles, los pasaremos como prop a nuestra lista font sizes, nuestro elemento ul, nuestra lista tendrá que recibir estas props y volver a pasarlas al componente item que es donde serán utilizadas, es decir haremos un llamado prop forwarding y aquí utilizaremos font size index, así variará el tamaño de la fuente y podemos ver en nuestro código fuente que nuestros diferentes tamaños han sido utilizados, vamos a cambiar el tamaño para hacerlo más notorio, perfecto.

3:55 Hora de enfrentar nuestro crédito extra, además de usar estilos en línea utilizaremos la clase item en cada item y permitiremos que el componente item reciba una prop para modificar la clase CSS base, tenemos algunos estilos predefinidos y que ahora necesitamos usar dentro del componente item, para eso simplemente pasamos class name item y vemos el resultado inmediatamente en pantalla.

4:16 Ahora lo que necesitamos hacer es que este componente reciba una prop que nos permita modificar la clase base, es decir utilizar una de estas, red, blue o purple, para eso utilizaremos una nueva prop que llamaremos color y de alguna forma tenemos que pasarla dentro del class name para poder modificar lo que estamos usando, para eso crearemos una nueva variable llamada class name y haremos algunas presunciones, asumiremos que color puede solo ser los valores red, blue y purple, por ahora solo lo asumiremos, no haremos alguna revisión de aquello, correspondería utilizar algún switch o if o si usas typescript mucho mejor, pero por ahora lo haremos con presumir que esto es correcto, por lo tanto ahora class name utilizaremos template literal para interpolar el nombre item y el nombre de la clase, item guion color, ahora pasaremos este class name nuevo directamente en la prop, guardamos y ocurre un typo aquí, agregaremos un valor por defecto con item red y agregaremos el guion que faltó al definir el nombre de la clase.

5:30 Por defecto todos los elementos toman el valor red que lo acabamos de pasar en la prop, ahora tenemos que hacer que estos valores se modifiquen, para eso utilizaremos la misma técnica que usamos con font size, crearemos un arreglo de colores y lo pasaremos a nuestro componente ul para que sea el componente ul quien se lo pasa al componente item, vamos a nuestro componente ul, recibimos esta nueva prop y ahora debemos pasársela al componente item y le diremos que color es el que está utilizando, para eso utilizaremos nuevamente el índice provisto por el método map, color es igual a colors index, vamos a nuestro componente item y ya tenemos definida la propiedad color, así que lo vemos en pantalla, con esto hemos cumplido con nuestro crédito extra.

6:18 Pero en base a lo que hemos aprendido podemos notar que aquí hay algo extraño o algo que se puede hacer de mejor manera, estamos pasando props a través del componente ul para que sean utilizados por el componente item, estamos haciendo un problema de prop drilling, podemos hacer esto de manera más sencilla o más directa sin estar pasando props para allá y para acá, si podemos hacerlo utilizando composición, eliminaremos de aquí algunos valores que son pasados al componente item y eliminaremos por completo este trozo de código permitiendo que ul solo renderice children, ahora lo que tenemos que hacer es cambiar la forma en que usamos ul y pasarle como children nuestro map de la lista utilizando el componente item, ahora las props pasan directamente al componente que si las usa en vez de pasar por el componente ul y el resultado sigue siendo el mismo, pero la declaración utiliza colocación.