¿Cómo integrar Reactjs con Sass y Material Design y no morir en el intento?

Material Components es una librería desarrollada por Google para crear aplicaciones con hermosos componentes UI personalizables y modulares, su documentación es bastante buena, aunque viniendo creo que tendría que ser mejor.

A mi gusto es muy modular y permite la utilización de componentes que realmente vayas a utilizar en tus desarrollos diarios, la enorme ventaja es que al integrarlo con React las posibilidades se vuelven infinitas, permitiendo una mayor escalabilidad y creando aplicaciones con una UI increíble.

Motivación

Siempre se vuelve un reto integrar varias tecnologías o frameworks, por eso en esta ocasión me hice a la tarea de crear un pequeño tutorial para lograr integrar ReactJS con Sass y Material Design y no morir en el intento, ya que resulta un reto bastante interesante poder hacerlo.

Creando el proyecto con create-react-app

Instalamos create-react-app con npm o yarn, de la siguiente forma.

npm install -g create-react-app
yarn global add create-react-app

Una vez instalado create-react-app vamos a correrlo para crear nuestro proyecto en ReactJS con el nombre que desees:

create-react-app "nombre del proyecto"

Instalando dependencias

Ahora es importante instalar las dependencias necesarias para que nuestras hojas de estilo con extensión .scss pueden compilarse correctamente.

Entramos a la carpeta de nuestro proyecto:

cd "nombre del proyecto"

Y ejecutamos los siguientes comandos, con npm: npm install --save-dev node-sass sass-loader, con yarn: yarn add --dev node-sass sass-loader .

Configurando Webpack para que compile archivos scss

Con create-react-app tenemos la capacidad de mostrar nuestra configuración “oculta” que nos proveen el paquete de react-scripts. Ejecutamos el siguiente comando:

npm run eject
yarn eject

Es importante recalcar que esta acción no se puede deshacer, nuestra terminal nos mostrará el siguiente mensaje:

Are you sure you want to eject? This action is permanent. (y/N)

Ahora si contamos con la configuración entera de nuestra aplicación, ahora es momento de configurar Webpack y probar si lo estamos haciendo bien.

Buscamos el archivo config/webpack.config.dev.js e identificamos la siguiente línea

// "file" loader makes sure those assets get served by WebpackDevServer.

Y en la línea anterior escribimos lo siguiente:

Esto nos permitirá crear correctamente el loader para así compilar nuestros archivos .scss y también para que webpack reconozca la ruta de nuestros modulos de material components.

Creando componentes con Material Components

Hecho esto podemos probar si nuestra configuración esta funcionando.

Cambiamos el nombre del archivo App.css -> App.scss en la carpeta src de nuestra aplicación y reemplazamos el módulo en nuestro archivo App.js , quedaría de la siguiente forma:

import './App.css' -> import './App.scss';

Ahora podemos agregar algunos componentes en nuestra aplicación para probar que todo está funcionando correctamente:

Primero instalamos cada componente por separado:

npm install --save-dev @material/card @material/layout-grid @material/toolbar @material/typography
yarn add --dev @material/card @material/layout-grid @material/toolbar @material/typography
// Después importamos los componentes en App.scss
@import '@material/card/mdc-card';
@import '@material/layout-grid/mdc-layout-grid';
@import '@material/toolbar/mdc-toolbar';
@import '@material/typography/mdc-typography';

Ahora podemos añadir algún componente extra para probar nuestra aplicación:

Creamos la carpeta components en src y agregamos los siguientes componentes en components/Grid.js y components/Card.js , con el siguiente contenido:

Simplemente añadimos cada componente en nuestro App.js y probamos nuestra aplicación:

Ejecutamos nuestro servidor:

yarn start
npm run start

Y entramos a localhost:3000 y veremos lo siguiente:

Aquí ya tenemos los estilos por default de Material Components

¡Y listo! Tenemos integrado todo, ahora podremos integrarlo en nuestros proyectos: les dejos el enlace para que chequen la documentación de material components, que a mi en lo particular me ha fascinado y un repositorio que he creado en github del proyecto:

biotec-io/mdc-react-tutorial

Material Components for the Web

Conclusión

Como podemos notar la integración de estas grandes tecnologías no es tan complicado como parece, después haremos más tutoriales para que integremos otros increíbles frameworks y tecnologías, tales como styled-components y glamorous.

Ahora podemos crear aplicaciones web responsivas y que se verán geniales, además de modulares, es un ejemplo sencillo pero espero les pueda servir.