0:00 Ahora que ya revisamos que tenemos, podemos ponernos manos a la obra. Lo primero es importar estos archivos en nuestro componente App y ahora debemos renderizar el layout principal.

0:09 Queremos renderizar dos componentes. Para hacer esto necesitamos utilizar un componente padre que nos permita renderizar Sidebar y Main. Al hacer esto y guardarlo podemos ver algo en pantalla, pero se nos dice que utilicemos la clase "app" para definir el estilo global de la aplicación. Por lo tanto, agregamos className="app" y ya tenemos un layout definido en tres columnas.

0:31 Ahora revisemos lo que contiene Sidebar. Sidebar, revisamos, y tiene este listado de ítems que son elementos SVG y luego tiene aquí header. Tiene un listado de elementos, pero no se ve todo esto en pantalla.

0:47 Lo que tenemos en pantalla es este header y este botón que está aquí. Lo que nos falta es el menú completo, y este es el ejercicio. Dice, componente a renderizar es un elemento li. No olvides utilizar la prop key.

0:59 Renderizamos entonces los ítems. Para eso tenemos que abrir una interpolación items.map, elegimos uno de los items y retornamos entonces este elemento JSX. No olvidemos la key, que en este caso será item.text, ya que si revisamos el arreglo text es único, inicio, explorar, notificaciones, mensajes, etc. Guardamos y tenemos nuestro menú disponible en pantalla. Perfecto.

1:26 Vamos ahora al componente Main. En este componente, lo primero que tenemos que hacer es renderizar esta lista de imágenes del Toolbar. Para eso, tomamos el arreglo Images, abrimos una interpolación images.map.

1:39 Elegimos uno, dos elementos, pero ojo aquí. Nos dice que esta lista de imágenes son componentes React. Podemos ir a verlos, y tenemos varios componentes, Image, Gif, Poll, Emoticon. Por lo tanto, podemos renderizar los como tal y los componentes React se nombran con mayúscula, Component, y lo que retornaremos será el componente y una prop key.

2:03 ¿Pero de donde sacamos esta key? En este caso, ya que la toolbar o los elementos del arreglo no cambian, podemos utilizar el índice generado por map. Para eso, agregamos los paréntesis correspondientes y el segundo argumento llamado index. Lo guardamos.

2:18 Nada ha cambiado en pantalla aún, pero ya tenemos nuestra toolbar lista. ¿Por qué nada ha cambiado en pantalla? Porque primero debemos agregar los elementos dentro de nuestro componente Main. Toolbar es utilizado dentro de TweetForm.

2:28 TweetForm dice que debemos agregar un textarea, y aquí debemos renderizar el botón para "Twittear" y un botón simplemente será <button> Twittear</button>. Ahora debemos agregar el formulario TweetForm y nuestra lista de Tweets, TweetList. Guardamos.

2:45 Vemos el formulario, pero no la lista. ¿Por qué no vemos la lista si la tenemos acá? Revisemos qué es la lista y la lista recibe un argumento, una prop llamada tweets. Por lo tanto, tenemos que pasar esos tweets como prop, y estos tweets son los que provienen desde esta importación llamada data.

3:03 Nada aún aparece en pantalla. Vamos a ver la TweetList. La TweetList dice que debemos iterar sobre la prop tweet para renderizar un elemento tweet. Tweets.map, elegimos un tweet y renderizamos entonces, un Tweet, ¿y este componente qué recibe? Recibe el tweet completo. Por lo tanto, pasamos el tweet directamente, y nos falta un prop key.

3:26 En este caso el tweet tiene un identificador, id. Guardamos, y tenemos algo en pantalla. Lo que nos falta entonces es completar el componente Tweet. Para este componente Tweet, utilizaremos destructuring, para acceder a las propiedades del tweet, que son avatar -- están nombradas acá -- author, tag, date y content.

3:43 Ahora podemos reemplazar sus valores en los lugares correspondientes. El avatar es una imagen. La ponemos aquí. Aquí renderizamos el nombre del autor del tweet. Aquí renderizamos el tag, y la fecha, y ahora el contenido. Perfecto. Guardamos.

3:58 Voila. Tenemos la interfaz completada. Pero si tratamos de twittear, nada pasa, solo se recarga la página. Por lo tanto, hay trabajo qué hacer todavía en el formulario.

4:07 Volvemos a nuestro componente Main. Vamos a nuestro formulario. ¿Qué tenemos? Tenemos un botón, que por defecto hace llamado al evento onSubmit del formulario. Es por eso que se recarga. Entonces lo primero que haremos será agregar el evento onSubmit, y utilizar la función submit(), que está predefinida.

4:23 Evitaremos que se recargue la página utilizando preventDefault. El escribir en el textarea ya no se recarga la página, pero nada ocurre aún. ¿Por qué? Porque ahora tenemos que manejar el formulario. Para eso podemos utilizar los componentes controlados, o componentes no controlados.

4:40 En caso de utilizar componentes no controlados, ya que es un formulario simple, crearemos un ref. Utilizaremos React.useRef(). Ese ref se lo pasaremos al textarea. En el evento onSubmit, podemos capturar ese valor. Diremos que el tweet = ref.current.value.

4:59 ¿Qué hacemos ahora con este tweet? ¿Cómo pasamos su valor a esta lista? Si miramos el componente tweetForm, es hermano de tweetList. En tweetForm es donde se genera el tweet, y este valor tiene que pasar a tweetList.

5:12 Lo primero que podemos hacer es crear una función dentro de este componente padre, para capturar el evento onSubmit. Le llamaremos onTweet(). Recibirá un tweet. Aún no definimos qué hacemos con él. Lo pasaremos a TeetForm onTweet = {onTweet}.

5:26 Ahora agreguemos esta prop al formulario, onTweet, y cuando se envía el formulario sea elemento onSubmit, simplemente ejecutaremos esta función onTweet y le pasamos el valor de tweet.

5:37 Ahora tenemos el valor de tweet aquí. ¿Cómo pasamos este valor dentro de esta lista? Para eso necesitamos manipular el estado y consideraremos el estado la lista de tweets que queremos renderizar.

5:49 Crearemos un estado llamado tweets y que tiene una función actualizadora llamada setTweets() proveniente del hook useState que tiene como valor por defecto la lista de tweets. Cambiamos ahora esto acá, tweets, guardamos.

6:04 Seguimos teniendo nuestra lista de tweets completa. Queremos, cuando llega un nuevo tweet, lo que tenemos que hacer es actualizar esa lista. Para eso llamamos a setTweets y podemos simplemente pasar el nuevo tweet. Probamos o que ocurre, "Nuevo Tweet" y falla. ¿Por qué?

6:19 Falla diciéndonos que tweets.map no es una función. Tweets era un arreglo y ahora ya no es un arreglo. Por lo tanto, cuando intentamos hacer, en la lista de tweets ejecutar map, no puede hacerlo, ya que map no pertenece a un objeto.

6:34 Lo que podemos hacer entonces es pasar un arreglo. Guardamos, revisamos, "Nuevo Tweet," tuiteamos, y se borra toda la lista y queda esto vacío. O sea, se agregó un tweet, pero vacío. Un problema.

6:45 Primero tratemos de resolver porque se borra la lista. La lista se borra porque lo que estamos haciendo al llamarse setTweets es eliminar el estado previo y agregar un nuevo estado, que es solo un tweet. Lo que necesitamos hacer es obtener el estado previo y agregar un nuevo tweet.

7:01 Para eso, React nos ofrece que setTweet, la función actualizadora proveniente de useState, puede recibir como argumento una función y esta función recibe como argumento el estado previo, y podemos utilizar esto para retornar el nuevo tweet agregado y el estado previo.

7:19 Ahora, al actualizar si escribimos "Nuevo Tweet," lo agregamos, se agrega nuevo elemento en pantalla pero está vacío. Está vacío porque tweet es solamente un texto, que es lo que capturamos desde el textarea. Para eso, utilizaremos este fakeTweet para poder completarlo.

7:36 Creamos una nueva variable, nuevoTweet, será igual a fakeTweet, pero el contenido será el tweet que acabamos de capturar. Nuevo tweet, actualizamos y escribimos "Nuevo Tweet," Twittear. Perfecto. Nuestro nuevo tweet está en pantalla.

7:51 En resumen, lo que hicimos en esta construcción de interfaz fue primero comenzar a revisar la estructura de componentes, renderizar un layout, luego comenzar por renderizar la lista de elementos para crear el menú, está aquí.

8:06 Configuramos el uso de un formulario para evitar que se haga el evento por defecto, capturar el valor del textarea utilizando un ref y utilizando props para comunicar dos componentes que son hermanos por medio del componente padre. En el componente padre utilizamos useState para manejar un simple estado que simplemente contiene la lista de tweets y la actualiza utilizando el valor anterior.