Usar Bootstrap en React

3 minutos de lectura

Fecha: 23/2/2019

React es hoy por hoy el rey de las librerías para crear componentes, muy sencilla y con una gran comunidad detrás desarrollando con él.

Por otro lado Bootstrap también esta en lo mas alto, en este caso como el que encabeza los frameworks de CSS.

Es por ello que puedes estar pensando en crear tu próximo proyecto usando ambas tecnologías, algo que desde luego es una buena apuesta. En la entrada de hoy voy a explicar como crear este proyecto e integrarle la última versión de Bootstrap (verás que es muy sencillo).

En primer lugar creamos nuestra aplicación, para ello si quieres información recomiendo que te leas esta entrada donde explico las distintas opciones que tenemos. Yo he escogido valerme de npx que es lo más rápido.

npx create-react-app nombre-del-proyecto

Añadir Bootstrap

Ahora que ya tienes el proyecto vamos a seguir unos cuantos pasos para añadir Bootstrap, como verás todo muy sencillo, en primer lugar tienes que instalarlo como un paquete de node de esta manera…

npm install --save bootstrap

Hecho esto ahora dentro de la carpeta node modules tendrás disponible la ultima versión de Bootstrap, lo siguiente que tenemos que hacer es cargarla en el proyecto, para ello solo tenemos que navegar hasta el fichero src/index.js que por decirlo así es nuestro punto de entrada general y lo importamos.

import 'bootstrap/dist/css/bootstrap.css';
// Put any other imports below so that CSS from your
// components takes precedence over default styles.

Si quieres saber que es lo que ha pasado, el resumen es que estamos usando un empaquetador llamado webpack que por defecto busca las rutas de importación en algunos directorios como el ‘node_modules‘, por eso aun sin escribirlo nosotros lo encuentra. Si inspeccionas la mencionada carpeta verás que existe esa ruta relativa.

¿Y si queremos modificar estilos de Bootstrap?

Si queremos tener un poco mas de control y poder editar los estilos de forma correcta lo mejor es que en vez de importar directamente la librería en el src/index.js, lo que hagamos sea:

1. Crearnos nuestra propia hoja de estilos.
2. Importar Bootstrap al comienzo de esta hoja.
3. Modificar a continuación lo que queramos.
4. Importar esa hoja de estilos nuestra en el src/index.js.

Para ello lo mas sencillo es usar SASS, por ejemplo, nos creamos un archivo custom.scss y en el interior importamos el fichero SASS de Bootstrap en vez del fichero CSS que se obtiene después de transpilarlo. Siendo este el contenido de ese fichero src/custom.scss

// Override default variables before the import
$body-bg: #000;

// Import Bootstrap and its default variables
@import '~bootstrap/scss/bootstrap.scss';

// Other SASS code...

El src/index.js nos queda así ahora..

import './custom.scss';
// Put any other imports below so that CSS from your
// components takes precedence over default styles.

Usando componentes de Bootstrap

Ya tenemos Bootstrap disponible, este framework CSS define una serie de componentes, y ahora nosotros podemos construir componentes específicos de React para encapsular el HTML.

Recordemos que cuando hablamos de que Bootstrap define componentes hablamos de que los ha definido a nivel de estilos, pero obviamente necesitamos de una estructura HTML que incorpore esos estilos y si además son componentes con efectos de transición también necesitaremos de importar los ficheros JS necesarios (básicamente son jQuery, popper y su librería específica de JS).

Podemos hacer todo eso nosotros mismos, y sin duda tendremos el control total de lo que hacen esos componentes porque son nuestros. Pero es requiere de bastante trabajo.

Otra opción es usar componentes de React de terceros que implemente todo esto, y el proyecto más conocido es Reactstrap, os dejo aquí en enlace a github.

Aquí ya tenemos todo hecho, básicamente para instalar sus componentes de Bootstrap tenemos que usar de nuevo node con estos comandos…

npm install --save reactstrap react react-dom

Luego en nuestro código si por ejemplo queremos crear un botón de Bootstrap solo tenemos que hacer esto…

import { Button } from 'reactstrap';

Os animo a leeros su documentación que os dejo aquí, para saber como usar sus componentes, y ver las propiedades que podemos pasarle a cada uno para configurarlos.