Implementar y Probar React Bootstrap, Containers, Buttons y mas

React Bootstrap es una libreria para React que agrega los componentes de Bootstrap para usarlos en proyectos en React, con un par de comandos instalamos react-bootstrap y empezamos a trabajar.

Como ya se imaginaran yo soy muy fan de bootstrap y lo he usado desde la version 2, 3, es decir desde los inicios y casi todo mi trabajo esta hecho en Bootstrap, por que yo no soy buen diseñador y pues Bootstrap lo tienen Todo (para mi uso).

Entonces vamos a crear un proyecto en React con el comando.

npm create vite@latest bootstrap1

En el asistente de creacion vamos a seleccionar que vamos a trabajar con el framework React y con el lenguaje Javascript.

Una vez que se creo el proyecto vamos a importar la libreria react-bootstrap para lo cual usaremos el comando.

cd bootstrap1
npm install react-bootstrap bootstrap

Y se va a instalar la libreria react-bootstrap y sus componentes.

Ahora vamos a agregar la libreria bootstrap.css en el archivo main.jsx

import 'bootstrap/dist/css/bootstrap.min.css'

En el archivo App.jsx y en todos los futuros modulos donde vallamos a usar bootstrap vamos a importar los componentes de react-bootstrap

import {Button, Alert, Container, Row, Col} from 'react-bootstrap'

Los componentes Container, Row, Col son practicamente los componentes div con las clases “container”, “row”, “col”.

El componente <Button> tiene los parametros variant que puede ser primary, success, danger, warning, etc y el parametro size que tiene los diferentes tamaños: sm, md, lg, xl.

El componente <Alert> tambien tiene su parametro variant con los diferentes estilos de bootstrap.

Codigo

A continuacion les dejo todo el archivo App.jsx con los ejemplos.

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import {Button, Alert, Container, Row, Col} from 'react-bootstrap'
function App() {
  const [count, setCount] = useState(0)

  function hola(){
    alert("Hola mundo")
  }

  return (
    <>
    <Container>
      <Row>
        <Col>
      <div>
        <h1>Hola mundo desde React Bootstrap!</h1>
        <Button variant="primary" size="lg">Boton Primario</Button> {/* Boton de tamaño grande con el estilo primario */}
        <Button variant="warning" size="lg">Boton Advertencia</Button> {/* Boton de tamaño grande con el estilo de advertencia */}
        <Button variant="danger" size="lg">Boton Peligro</Button> {/* Boton de tamaño grande con el estilo de peligro */}
        <Button variant="info" size="lg">Boton Información</Button> {/* Boton de tamaño grande con el estilo de información */}
        <Button variant="light" size="lg">Boton Claro</Button> {/* Boton de tamaño grande con el estilo claro */}
        <br/>
        <br/>
        <Button variant="outline-primary" size="md">Boton Primario</Button> {/* Boton de tamaño mediano con el estilo primario en modo outline */}
        <Button variant="outline-warning" size="md">Boton Advertencia</Button> {/* Boton de tamaño mediano con el estilo de advertencia en modo outline */}
        <Button variant="outline-danger" size="md">Boton Peligro</Button> {/* Boton de tamaño mediano con el estilo de peligro en modo outline */}
        <Button variant="outline-info" size="md">Boton Información</Button> {/* Boton de tamaño mediano con el estilo de información en modo outline */}
        <Button variant="outline-light" size="md">Boton Claro</Button> {/* Boton de tamaño mediano con el estilo claro en modo outline */}
        <br/><br/>

        <Alert variant="success">
          <Alert.Heading>¡Bien hecho!</Alert.Heading>
          <p>
            Esta es una alerta de éxito con un mensaje de ejemplo. Puedes personalizar este mensaje según tus necesidades.
          </p>
          <hr />
          <Button variant="success" onClick={hola}>Aceptar</Button>
        </Alert>
      </div>
      </Col>
      </Row>
      </Container>

    </>
  )
}

export default App

Para ejecutar el ejemplo vamos a usar el comando.

npm run dev

Y para ver el resultado lo veremos en el navegador en la url http://127.0.0.1:5173 y listo

Resultado