Agrega Bootstrap a tu proyecto de React

En esta entrada trabajaremos con bootstrap que es un framework de css que nos permite crear sitios web responsivos de manera rapida y sencilla. Esto con el fin de trabajar menos en el diseño y enfocarnos mas en la funcionalidad de nuestro proyecto. Partiremos de la idea de que ya tenemos un proyecto de react, si no es asi te invito a leer la entrada Construye Aplicaciones más Rápidas con React y Vite para que puedas crear uno.

Instalando Bootstrap

Como nuestro trabaja con NPM y Vite, lo primero que debemos hacer es instalar bootstrap con el siguiente comando:

npm i bootstrap@5.3.2

Este comando instalara bootstrap en nuestro proyecto y lo agregara como dependencia en nuestro archivo package.json ahora nos falta importarlo a nuestro proyecto. Para ello, debemos agregar las siguientes lineas en nuestro archivo principal, en este caso main.jsx qudando de la siguiente manera:

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

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

Notese como en la linea 5 importamos el archivo css de bootstrap. De esta manera ya tenemos bootstrap instalado y listo para usarse en nuestro proyecto. Ahora, ejecutemos nuestro proyecto con el comando tradicional npm run dev notaremos un ligero cambio en nuestro proyecto, esto es debido a que bootstrap ya esta funcionando. Podemos confirmarlo agregado un h1 con la clase text-danger y notaremos que el texto se pone de color rojo.

Codigo de App.jsx

import './App.css'
function App() {

  return (
    <>
      <h1 className='text-danger'>Ejemplo Bootstrap</h1>
    </>
  )
}

export default App

Imagen resultado

Esto es todo por esta entrada, en futuras entradas veremos como usar bootstrap para crear sitios web responsivos de manera rapida y sencilla asi como las distintas clases que nos ofrece bootstrap para crear sitios web mas atractivos.