0:00 Ultima lección, y es hora de poner a prueba todo lo que has aprendido. Ahora construiremos una interfaz. Será una aplicación completamente escrita en React en modo Single Page Application, pero le enfocarás en la creación de componentes y su composición.

0:12 Para lograr esto tendrás acceso a algunos componentes predeterminados, incluyendo los estilos, para así poder avanzar en construir esta interfaz enfocándote en aplicar lo aprendido hasta ahora. Para eso los primeros pasos es ejecutar el código de esta lección, abrir tu editor de código favorito, y revisar la estructura de archivos.

0:30 El objetivo es poder crear una aplicación estática aplicando lo aprendido desde un formulario, un layout predeterminado, botones, etc. Lo que vamos a construir es esta interfaz de Twitter, una pequeña aplicación que nos permite escribir y, al presionar el botón, aparecer el tuit en la lista de tuits. Este es el objetivo.

0:52 ¿Qué es lo que tenemos aquí? Tenemos un formulario, tenemos un botón, tenemos una lista que renderizan, acá tenemos más listas que renderizan, tenemos elementos que pueden ser representados como objetos y todo esto es posible gracias a lo que hemos aprendido hasta ahora.

1:06 Para comenzar, abriremos nuestro archivo index.html de la lección 13 y revisaremos qué es lo que hay en esta estructura archivos. Este es el primer ejercicio que haremos con varios archivos incluidos, como una real aplicación.

1:21 Lo que tenemos aquí es el archivo index.html, que es bastante sencillo. Simplemente tiene acceso a algunos elementos del head, y lo importante aquí es que define el elemento root, en dónde se montara la aplicación. También define cuál es el punto de entrada de la aplicación, nuestro archivo index.

1:39 Este archivo index simplemente incluye React y ReactDOM. Incluye algunos estilos predeterminados y un componente principal llamado App. Se encarga de renderizar App dentro del elemento root que está en el archivo index.html.

1:56 ¿Qué contiene nuestro archivo App? App es el componente principal y es quién renderiza el listado completo o el árbol completo de componentes. Revisaremos que otros componentes tenemos y la estructura de archivos.

2:08 Nuestra estructura de archivos es que tenemos App como punto de entrada, y tenemos un directorio llamado components, en dónde viven todos los otros elementos que utilizaremos en la interfaz. Podemos revisar uno por uno.

2:20 Main nos muestra que importa algunos assets, que son estas imágenes que están aquí. También importa un componente llamado TweetList, que es el componente que se encargará de renderizar la lista de tuits.

2:33 Importa, también, un arreglo de tuits, que vienen desde un archivo JSON. Imaginemos que esto es comunicarse con la API de Twitter y obtener los datos. Tenemos este fakeTweet, que simplemente lo utilizaremos más adelante para poder mostrar datos en la pantalla.

2:46 Tenemos una Toolbar que se utiliza en la interfaz. Tenemos un Header. Tenemos un formulario que tenemos que completar como nos muestra vedemos aquí es parte del ejercicio, y tenemos el componente Main que se encarga de renderizar el contenido principal de la aplicación.

3:02 También tenemos Sidebar que simplemente nos muestra un arreglo de items para renderizar el menú y después nos muestra en la idle Sidebar, y otra parte del ejercicio que nos indica que tenemos que renderizar elementos.