Capitulo 8 ➜ El apartado visual del sitio web

Hagamos un repaso de la lección anterior, en el archivo index tenemos un único script que llama al archivo main.jsx, main.jsx importa las librerías de react y reactDom, que abren el camino para usar muchas dependencias necesarias para tener una estación de trabajo lista para programar, luego también se importar el archivo app y los estilos de main, y para terminar agregamos un archivo llamado datos con arrays que usaremos más adelante en el curso; pero en la lección anterior no respondimos la pregunta de que era “app” Empecemos por eso.

1.- El componente App

Dentro de la carpeta src aparte del archivo main, también está un archivo llamado App.jsx y los estilos del mismo con el nombre App.css pero ¿qué es app? app es el primer componente, creado por defecto en la raíz de la carpeta src (src viene de sources), si nuestro sitio web es una casa en construcción, los componentes son los ladrillos que la conforman, siendo más técnicos, un componente es una pieza de código que renderiza una parte de la interfaz de tu sitio web. 

Los componentes, puede tener sus propias importaciones y normalmente solo es una función que se exporta por defecto (ya hablamos de las formas de importar en la lección pasada), pero dentro de la función se resaltan dos partes importantes: la parte lógica donde puedes programar a gusto lo que quieras que pase en tu componente y la parte del return, donde se destaca la sintaxis jsx, (de la que también ya hablamos en la lección anterior). Lo normal en un proyecto React es tener una distribución más ordenada, por lo que tener el componente app así en la raíz no es una opción, así que borrenlo y creen sus carpetas de “componentes”, “páginas” y “vistas”.

2.- Distribución de carpetas en src

La primera carpeta que creamos “páginas” guardará componentes, si, parece contradictorio pero debes entender una cosa desde ya y es que aunque es muy dicho, no siempre un código que se repita mucho es candidato para ser un componente, puedes crear un componente de algo que solamente se va a utilizar una vez, quiero decir, ¿recuerdas nuestras tarjetitas de cursos en la unidad uno?, pues eso es un ejemplo obvio de componente, pero seguro que no te imaginas que todo lo que se muestra en una página, puede también ser un componente, por eso necesitamos una distribución que pueda mejorar nuestro orden al momento de crear componentes.

Prepare la imagen a continuación para explicarlo mejor; las páginas, son para contener lo que se cargará en cada ruta, y generalmente tienen una parte del diseño que se repite, como un sidebar, un header o un footer, pero también tiene una parte del diseño que varía, a ese contenido que varía le estoy llamando vistas, ¿que es la vista? pues otro componente, al final todo aquí son componentes, en la imagen lo represento de color rojo, mientras que de verde son la parte que se repite, (el sidebar y el header) pero ¿qué diferencia a la vista del header o del sidebar? Pues que lo de verde, se va repetir, va ha ser el mismo también en otras páginas, mientras que la vista, no es como el sidebar, o el header, porque su contenido si va a cambiar por eso tiene sus propios componentes, ahora son estadísticas, pero según en qué página estemos, pueden ser quizá tablas, o otro diseño completamente diferente, (por eso las colocó también de verde en la última representación que tiene la imagen) En conclusión, cada una de las rutas de nuestro sitio web cargará una página con vistas y componentes, ambas las vistas y los componentes dependeran de la ruta para mostrar uno u otro contenido dentro de la página, esa es la razón de ser de las 3 carpetas.

3.- Lo mínimo que necesitas saber sobre react router-dom

Entonces con distribución carpetas ya explicada, ahora podemos centrarnos en cómo armar el sitio web con react, como ya se dijo, cada una de las rutas del sitio web deberá cargar una de nuestras páginas (los componentes en la carpeta páginas) ¿cómo hacemos eso? bueno, el enrutado que es justamente de lo que hablo, no es algo que viene con React, react al final es solo una librería, por lo que si queremos enrutado, tenemos que ir a nuestra consola y usar el comando a continuación para descargar la librería react-router-dom

npm install react-router-dom

Cabe aclarar que en este curso, al ser básico, no lo plantee con enrutado, porque realmente no es necesario, recuerden que al final solo haremos una página, tal como en la unidad uno, pero para poder explicar mejor las distribución de: páginas, vistas y componentes caí en cuenta que igual si es necesario poner una breve introducción al enrutado, sobretodo por las páginas, que costaría explicarlas si solo usaremos una; entonces para enrutado en react, la librería líder y con más descargas es: react-router-dom y para empezar a usarla necesitamos un objeto router, que es lo que obtenemos de la función CreateBrowserRouter, con la librería react-router-dom ahora tenemos acceso a esa función, que para que nos retorne el router, hay que pasarle un array de objetos (estos objetos son “route”, no confundir con “router”); la idea es que definas tus rutas, como objetos, cada objeto estará formado por una propiedad path, o ruta, que para nuestro caso será la raíz, luego una propiedad element, que recibirá el componente que se va a aplicar en esta ruta, y luego los hijos de esta ruta, si los tiene. Con todo esto el Router ya está listo y si te preguntas para qué sirve, pues en resumen es un proveedor de contexto que proporciona información de enrutamiento al resto de la aplicación, pero aún no está listo, necesitamos importar una última cosa, RouterProvider, recubriendo toda nuestra aplicación con este componente garantizamos que nuestro router funcione correctamente. 

4.- ¿Cómo crear componentes?

Dentro de la carpeta páginas, y con extensión punto jsx, crea un archivo llamado “Home”, dentro crearemos una función, (así es, los componentes no son más que funciones) que deberemos exportar para que así podamos importarlo en cualquier parte del proyecto y esa importación será por defecto; y ¿que va ir en la parte del return? pues casi siempre va ser un div, y es muy importante porque siempre debe haber un único elemento que envuelva a los demás, eso siempre debes tenerlo en cuenta, otras dos cosas que debes tener en cuenta con los componentes, es que el nombre del componente debe empezar por mayúscula, si no lo pones react pensara que es una función normal y no un componente, y también debes saber que en las etiquetas html que pongas en el return, no puedes usar el class, en su lugar debes usar: classname esto para que react no piense que es una clase de javascript.

5.- Añadiendo CSS en React

Si estás siguiendo el video de esta lección, seguro notaste que la idea es poner toda la página en una caja flexible, el famoso flexbox, por lo tanto la pregunta aquí es ¿cómo ponemos los estilos? bien, yo lo que hago es crearlo en la misma carpeta, con el nombre estilos, y quiero aprovechar en hacer una aclaración porque en esto de agregar estilos hay muchas formas, primero como yo use la distribución de páginas y vistas lo que se suele hacer es crear una carpeta estilos en cada una de las carpetas de páginas, vistas y componentes, para que desde ahí tengas los archivos de estilo con el mismo nombre del componente que los va a aplicar; puede haber excepciones como es nuestro caso, ya que solo tenemos una página, basta con ponerle a mi archivo "estilos", para que Home lo encuentre y ya con eso ya se estarán aplicando los estilos.