Hay varias maneras en las que puedes integrar Bootstrap en una aplicación desarrollada con React. En este post te compartiré 3 posibles formas de hacerlo:

  1. mediante CDN
  2. mediante npm
  3. mediante React Bootstrap

Tabla de contenidos

En los ejemplos que te comparto estoy utilizando fragmentos de código tomados del sitio web de Bootstrap en su versión más actualizada al día de hoy.

Sin embargo, cuando leas este artículo, es posible que ya exista una versión más actual de Bootstrap, por lo que te recomiendo que no uses el código que encontrarás aquí como ejemplo, sino que lo obtengas directamente de su sitio web.

Cómo importar Bootstrap mediante CDN

Esta es una forma sencilla y rápida de integrar Bootstrap a tu aplicación React, pero NO te la recomiendo si quieres personalizar los estilos de Bootstrap.

Dirígete al directorio raíz de tu aplicación y abre el archivo index.html y :

  1. Dentro del elemento <head> utiliza un elemento <link> para importar los estilos CSS de Bootstap.
  2. Dentro del elemento <body>, justo antes de su etiqueta de cierre, utiliza un elemento <script> para importar las funcionalidades Javascript de Bootstrap:
index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />
    <title>Bootstrap in React</title>
  </head>
  <body>
    <div id="root"></div>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
      crossorigin="anonymous"
    ></script>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>
HTML

Con estos simples pasos ya puedes utilizar las clases y los componentes de Bootstrap en los componentes React de tu aplicación.

Algunas Ventajas y Desventajas

  • Ventajas
    • Facilidad y rapidez de implementación
    • Rapidez de carga: Bootstrap es usado en muchos sitios web, por lo que es probable que quien visite tu web ya haya visitado un sitio que utiliza su CDN. En esos casos los archivos ya se habrán almacenado en caché por el navegador y no será necesario volver a descargarlos.
  • Desventajas
    • No puedes personalizar los estilos CSS de Bootstrap mediante Sass (la forma más potente y flexible de hacerlo).
    • Es un recurso sobre el que no tienes control (posibles problemas de disponibilidad o seguridad, por ejemplo).

Cómo instalar Bootstrap mediante npm

Si prefieres instalar Bootstrap en tu aplicación (en vez de importarlo mediante CDN), puedes hacerlo mediante un sistema de gestión de paquetes (npm, yarn, etc). Veremos cómo hacerlo con npm.

Para ello, abre una terminal en el directorio raíz de tu aplicación React (el directorio donde se encuentra el archivo package.json), y ejecuta el comando de instalación: 

npm i bootstrap@5.3.3
Bash

Esto descargará e instalará Bootstrap y sus dependencias en tu proyecto.

Importando Bootstrap en la aplicación

Después de instalar Bootstrap, necesitas importarlo para que puedas comenzar a usarlo.

Por lo general, esto se hace en el archivo de punto de entrada de tu aplicación, como index.js, main.jsx o App.jsx.

Justo antes de importar el archivo que contiene los demás estilos CSS de tu aplicación (index.css en el ejemplo), importa los estilos CSS de Bootstrap. Luego importa las funcionalidades Javascript de Bootstrap:

main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App.jsx';
import "bootstrap/dist/css/bootstrap.min.css";
import './index.css';
import "bootstrap/dist/js/bootstrap.js";

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)
JSX

Si deseas personalizar los estilos de Bootstrap, el proceso de importación de los estilos CSS requiere unos pasos adicionales que puedes leer en este post.

Algunas Ventajas y Desventajas

  • Ventajas
    • Gestión de versiones y dependencias: Al instalar Bootstrap a través de un gestor de paquetes, puedes gestionar fácilmente las versiones y las dependencias de tu proyecto.
    • Puedes personalizar Bootstrap mediante Sass
  • Desventajas
    • Aumento del tamaño del paquete

Cómo integrar Bootstrap mediante React Bootstrap

Otra forma de utilizar Bootstrap en una aplicación React es con React Bootstrap.

React Bootstrap es una librería basada en componentes que ofrece componentes y utilidades de Bootstrap nativo encapsulados en componentes de React.

React Bootstrap depende de los estilos CSS que provee Bootstrap, por lo que es necesario que tengas importados dichos estilos en tu aplicación:

Una vez tengas los estilos CSS de Bootstrap importados, abre una terminal en el directorio raíz de tu aplicación React y ejecuta el comando de instalación de React Bootstrap:

npm install react-bootstrap
Bash

Algunas Ventajas y Desventajas

  • Ventajas
    • Componentes predefinidos y optimizados para React
  • Desventajas
    • Aumento del tamaño del paquete
    • Dependencia de la comunidad y la documentación: Al utilizar React Bootstrap, estás confiando en la comunidad de desarrolladores para mantener y actualizar la biblioteca.
    • Curva de aprendizaje adicional

La mejor forma de importar Bootstrap en React

Cada una de las 3 formas expuestas para integrar Bootstrap a una aplicación desarrollada con React tiene sus pros y sus contras, sus defensores y sus detractores.

Mi opinión es que ninguna es «la mejor» en todos los escenarios.

Pienso que lo mejor es conocer las opciones que tenemos, evaluar sus ventajas y desventajas para así poder decidir cuál nos conviene utilizar en cada caso, dependiendo de las necesidades de la aplicación a desarrollar y del equipo de desarrollo involucrado.

Ahora que ya conoces estas 3 formas de importar Bootstrap en una aplicación desarrollada con React, puedes experimentar con cada una y sacar tus propias conclusiones .

¿Ves ventajas o desventajas adicionales a alguno de estos métodos?
¿Cuál es el método que usas más frecuentemente?
¿Utilizas un método diferente?🤔
Puedes compartir tus ideas en los comentarios 😉.

Y si estás dando tus primeros pasos en el uso de Bootstrap con React, tal vez te interese este post sobre cómo usar componentes y clases de Bootstrap en tus componentes React o este sobre cómo personalizar Bootstrap.

Categorizado en:

BootstrapDesarrollo WebFront EndReact

Etiquetado en: