¿Sabes cómo cargar CSS desde un componente React? En programación, el proceso de estilizar es fundamental para hacer que una aplicación o página web se diferencie de las otras. Además, estilizar una aplicación es importante para su usabilidad. No basta con que un botón esté bien hecho, también es importante que el usuario sepa cómo usarlo con las claves de estilo.
En React, existen muchas maneras de estilizar una aplicación, desde manejar CSS directamente o usar una librería como styled components hasta insertar la etiqueta style dentro de nuestro código. En este post, te enseñaremos cómo cargar CSS desde un componente React para que puedas aplicar propiedades CSS en tu aplicación JavaScript.
Un poco de contexto
Supongamos que tenemos un componente llamado TweetsPage, al cual le hemos dado un nombre de clase «tweetsPage». Entonces, como hemos aprendido en nuestro post sobre los estilos en React, podemos utilizar este nombre de clase para estilizar nuestro componente. Para ello, hemos creado un archivo CSS al mismo nivel que nuestro componente JavaScript, dentro del cual hemos escrito las siguientes líneas de código de estilo:
.tweetsPage {
background-color: lightblue;
}
Ahora, tenemos este archivo CSS con las propiedades de estilo que queremos añadir a nuestro componente. Sin embargo, las propiedades no tendrán efecto hasta que hagamos el proceso de cargar CSS desde un componente React.
¿Cómo cargar CSS desde un componente React?
Para cargar CSS desde un componente React, utilizamos webpack. Con webpack y sus loaders podemos hacer import de archivos CSS en react desde JavaScript. Es decir, no solo podemos hacer importaciones de archivos .js y sus componentes, pero también podemos importar archivos de otros tipos.
Entonces, para cargar CSS desde un componente en React, deberemos ir al archivo donde tenemos nuestro componente e insertar la importación del archivo CSS en react en las primeras líneas de código. Para esta importación utilizamos la palabra clave import y luego la guía de acceso al archivo CSS in react que queremos insertar. En nuestro caso, esto se ve de la siguiente manera:
import ‘./TweetsPage.css’;
La línea de código anterior nos permite hacer un import dentro de nuestro archivo js para que, cuando webpack recorra todas las importaciones de nuestro proyecto, sepa que debe cargar este archivo CSS en react para crear un archivo CSS in react final.
Para asegurarte de que esta importación esté funcionando, te sugerimos tener abierto tu servidor localhost y ver los cambios. Si estás manejando una aplicación creada con create-react-app, deberías ver el cambio en la web de manera automática. En nuestro caso, veremos que el fondo de nuestro texto es ahora de color azul claro del conjunto style en react. Esto también lo podrás explorar en el panel de estilos de tu inspector web. Allí verás aplicada la clase que has definido y la propiedad de estilo o style en react.
Ten presente que la posibilidad de estilizar una aplicación de React usando CSS no es una característica de React. Es decir, lo que hace React realmente es permitirnos declarar una clase con la etiqueta className. El hecho de que podamos importar un fichero CSS in react en un JS es una acción completamente propia de webpack.
¿No sabes cómo instalar webpack? ¡No te preocupes! Al crear una aplicación con create-react-app, toda esta configuración se hace de manera automática e interna, para que tú no tengas que crearla de forma manual. Lo único que debes hacer es cargar CSS desde un componente de style en react. Si no lo haces, es como si el archivo CSS estuviera aislado de tu proyecto. Es decir, que no sería tomado en cuenta por el programa ni por webpack al recorrer los archivos a partir del index.
¿Cuál es el siguiente paso?
Al leer este post no solo has aprendido cómo cargar CSS desde un componente React, sino que también te has acercado a dominar esta poderosa librería de programación. Ahora, el siguiente paso es dedicarte por completo a tu aprendizaje. Para ello, te invitamos a nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva donde aprenderás a dominar herramientas y lenguajes de programación para la web como React, HTML, CSS y JavaScript. ¡Anímate a dar el siguiente paso e inscríbete para destacar en el sector IT!
