Cree componentes simples y eficientes con React Bootstrap

La mayor parte del tráfico web ahora proviene de dispositivos móviles, no de computadoras de escritorio. Por lo tanto, las aplicaciones web modernas deben adaptarse fácilmente a diferentes resoluciones, relaciones de aspecto y dispositivos. La biblioteca React Bootstrap se basa en dos marcos populares (React y Bootstrap) para facilitar la creación de aplicaciones web efectivas, eficientes y receptivas.

Este artículo describe los componentes básicos y los beneficios de React-Bootstrap y explora ejemplos detallados en una aplicación de muestra que ofrece una experiencia de desarrollo mejorada para su próximo proyecto web.

Conceptos básicos: el qué y el por qué de React-Bootstrap

Bootstrap, basado en CSS y JavaScript, es un marco CSS que permite un diseño web receptivo con un diseño de cuadrícula de filas y columnas. Examinemos React-Bootstrap en el contexto de los marcos CSS y el arranque estándar para identificar los proyectos a los que podría servir mejor.

Marcos Bootstrap y CSS

Al crear un sitio web, CSS describe los elementos visuales en una página, y cambiar el CSS de un sitio web puede proporcionar un cambio de imagen muy necesario. Sin embargo, cuando se trata de estilo web moderno, CSS por sí solo no es suficiente: el diseño web receptivo es obligatorio y los marcos facilitan la vida de los desarrolladores de CSS.

El diseño web receptivo permite que las aplicaciones cambien diseños y elementos en función de una variedad de dispositivos y tamaños de pantalla o ventana. Los marcos CSS brindan beneficios adicionales, como desarrollo acelerado, duplicación de código reducida y capacidad de mantenimiento mejorada de la base de código.

Hay muchos marcos para facilitar la escritura de CSS; Tailwind CSS y Foundation son dos opciones populares. Sin embargo, Bootstrap es una opción predeterminada para CSS receptivo debido a ventajas como:

• Una comunidad fuerte y una extensa documentación.
• Un ecosistema establecido con una variedad de componentes de estilo que incluyen bloques, temas y plantillas preconstruidos.
• Personalización y compatibilidad entre navegadores.

Exploremos las ventajas y desventajas al decidir entre el arranque React y el arranque Vanilla.

Bootstrap vs Reaccionar arranque

Con tantos beneficios listos para usar, ¿por qué no querríamos simplemente usar Bootstrap para aplicaciones React? La respuesta está en la forma en que se construye React.

React no recomienda a los desarrolladores que modifiquen el DOM directamente; En su lugar, utiliza principalmente el DOM virtual o VDOM para realizar un seguimiento de todos los cambios en el DOM. React puede pasar por alto cambios fuera del VDOM, lo que puede generar errores, errores y comportamientos inesperados.

Las versiones anteriores de Bootstrap dependen en gran medida de jQuery, que modifica directamente el DOM y, por lo tanto, puede producir estos resultados no deseados. Ingrese a React-Bootstrap, la biblioteca que brinda acceso a cada componente de Bootstrap y depende de JavaScript puro en lugar de jQuery y solo modifica el VDOM.

React-Bootstrap no solo evita el comportamiento no deseado relacionado con el DOM, sino que también proporciona una sintaxis limpia y legible. A modo de comparación, creemos el mismo mapa de ejemplo usando Bootstrap y React-Bootstrap:

Nuestro código de tarjeta de arranque contiene muchos div Etiquetas que dificultan la identificación de cada componente:

<div className="card">
  <img src="https://bs-uploads.toptal.io/blackfish-uploads/public-files/React-icon-8e26f22094a11f6a689d8302dc30782c.svg" className="card-img-top" alt="https://www.toptal.com/bootstrap/..." />
  <div className="card-body">
      <h5 className="card-title">Example Card</h5>
      <p className="card-text">This is an example React card</p>
      <a href="#" className="btn btn-primary">Example Button</a>
    </div>
</div>

Por otro lado, el código de nuestra tarjeta de arranque React identifica de forma única cada componente:

<Card>
  <Card.Img variant="top" src="https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg" />
  <Card.Body>
    <Card.Title>Example Card</Card.Title>
    <Card.Text>This is an example React card</Card.Text>
    <Button variant="primary">Example Button</Button>
  </Card.Body>
</Card>

¿Estas dos ventajas hacen que React-Bootstrap sea superior a Bootstrap en todos los sentidos? no A partir de la versión 5, Bootstrap ya no usa jQuery y se puede usar con React. Y hasta hace poco, React-Bootstrap no tenía soporte para Bootstrap 5, lo que significaba que los desarrolladores no podían actualizar sus proyectos de React-Bootstrap con nuevas versiones de Bootstrap. React-Bootstrap v2 resuelve este problema.

Si está considerando migrar su proyecto de React a otro marco como Vue, Bootstrap ofrece la mejor flexibilidad. Puede reutilizar la mayor parte del código básico de Bootstrap, pero los usuarios de React-Bootstrap deberán convertir su código. Bootstrap y React-Bootstrap tienen sus pros y sus contras, y el que elijas depende de tus necesidades específicas. En nuestro caso, priorizamos la legibilidad sobre la flexibilidad para la migración.

Implementación: componentes elegantes con React Bootstrap

Para explorar una implementación funcional de React Bootstrap, creemos una interfaz de usuario de sitio web estándar con una barra de navegación, un pie de página y una cuadrícula receptiva.

Estructura y fundamentos

Primero, creemos una nueva aplicación React en la terminal:

npx create-react-app react-bootstrap-example --template typescript

A continuación, instale tanto React-Bootstrap como Bootstrap (se requiere la instalación de Bootstrap ya que contiene todos los estilos para los componentes de React-Bootstrap):

npm install bootstrap react-bootstrap

A menos que planee anular los estilos predeterminados de Bootstrap, debe importar la hoja de estilo de Bootstrap en este punto. bootstrap/dist/css/bootstrap.min.cssen el cual src/App.tsx Expediente. (Estamos anulando los estilos Bootstrap predeterminados para usar estilos personalizados, por lo que no necesitamos hacer este paso).

En general, hay dos formas de importar componentes de arranque de React. La primera forma utiliza esta sintaxis:

import Button from 'react-bootstrap/Button';
import Container from 'react-bootstrap/Container';

Sin embargo, prefiero las importaciones desestructuradas porque condensan y simplifican el código para múltiples componentes:

import { Button, Container } from 'react-bootstrap';

Finalmente, rendericemos un componente de arranque de React usando esta sintaxis:

<Button>This is a button</Button>

Estilos personalizados

Los estilos Bootstrap predeterminados (por ejemplo, colores) se pueden anular con estilos personalizados para un diseño web más exclusivo. Anulemos los 13 colores de texto de Bootstrap con los nuestros. Primero instalamos Sass:

npm install sass

A continuación, cambie el nombre de la App.css archivo a App.scsspara indicar que es un archivo Sass, y import './App.scss'; en el cual App.tsx Expediente. En nuestro App.scss anulamos los colores primario y secundario antes de importar la hoja de estilo Sass Bootstrap:

$primary: #204ecf;
$secondary: #262d3d;

@import '~bootstrap/scss/bootstrap';

Siempre asegúrese de anular los estilos antes de importar hojas de estilo de Bootstrap. De lo contrario, no se aplicarán los estilos personalizados.

envase

Los contenedores son el componente React Bootstrap más simple y básico; Son un componente básico en la implementación de componentes más complejos, como las cuadrículas. Los contenedores pueden opcionalmente centrar y rellenar horizontalmente el contenido que contienen.

Antes de agregar la barra de navegación, el pie de página y el sistema de cuadrícula a nuestro sitio, veamos cómo los contenedores afectan su contenido. Creamos un texto simple (p) dentro de una sección genérica (div) temporalmente en src/App.tsx. Haremos que la sección sea azul y todo el fondo gris para que el diseño sea más visible:

<div className="bg-primary">
  <p>Example</p>
</div>

Sin un contenedor de arranque de React, nuestro contenido no se rellena y no responde:

Probemos el mismo código con un bootstrap de React Container en lugar de un genérico div (Tenemos que importar Container antes de usar):

<Container className="bg-primary">
  <p>Example</p>
</Container>

Ahora nuestro contenido aparece con relleno:

Cambie el ancho de la ventana del navegador para ver el diseño receptivo en acción.

barras de navegación

El primer componente agregado a nuestra página de muestra es la barra de navegación. Crear un componente React separado para la barra de navegación (en lugar de escribirlo junto con otro código) facilita la búsqueda de componentes y la realización de cambios.

Un... crear src/components carpeta y agregar el archivo ResponsiveNavbar.tsx. los importamos Navbar y otros componentes necesarios. Luego agregaremos una barra de navegación simple, que se integrará en el Responsive Container Componente que muestra el logo o título de nuestro sitio web (Navbar.Brand):

import { Navbar, NavDropdown, Nav, Container } from 'react-bootstrap';

const ResponsiveNavbar = () => {
  return (
    <Navbar bg="primary" collapseOnSelect expand="sm">
      <Container>
   <Navbar.Brand href="https://www.toptal.com/">Example Site</Navbar.Brand>
 </Container>
    </Navbar>
  );
};

export default ResponsiveNavbar;

Pasamos tres argumentos a la barra de navegación:

• bg afecta el color de la barra de navegación.
• collapseOnSelect hace que la barra de navegación se contraiga automáticamente cuando el usuario selecciona un elemento.
• expand determina cuándo se colapsa la barra de navegación (sm significa que se reducirá a un ancho de 768 px).

Para una barra de navegación ampliada, estamos agregando un menú de hamburguesas alternable (Navbar.Toggle) con las secciones Inicio, Enlace y Menú desplegable. Navbar.Toggle es invisible en el modo de escritorio. Sin embargo, al ver el sitio en pantallas más pequeñas, las secciones horizontales se condensan, envuelven Navbar.Collapseen un menú de hamburguesas compatible con dispositivos móviles.

<Navbar bg="primary" collapseOnSelect expand="sm">
  <Container>
    <Navbar.Brand href="https://www.toptal.com/">Example Site</Navbar.Brand>
    <Navbar.Toggle aria-controls="navbar-toggle" />
    <Navbar.Collapse id="navbar-toggle">
      <Nav className="me-auto">
        <Nav.Link href="https://www.toptal.com/">Home</Nav.Link>
        <Nav.Link href="http://www.toptal.com/link">Link</Nav.Link>
        <NavDropdown title="Drop-down" id="nav-dropdown">
          <NavDropdown.Item href="http://www.toptal.com/action1">Action 1</NavDropdown.Item>
          <NavDropdown.Item href="http://www.toptal.com/action2">Action 2</NavDropdown.Item>
          <NavDropdown.Item href="http://www.toptal.com/action3">Action 3</NavDropdown.Item>
        </NavDropdown>
      </Nav>
    </Navbar.Collapse>
  </Container>
</Navbar>

Navbar.Toggle y Navbar.Collapse son herramientas poderosas que permiten a los desarrolladores crear barras de navegación receptivas con solo unas pocas líneas de código.

Finalmente tenemos import ResponsiveNavbar from './components/ResponsiveNavbar'; e incluirlo en nuestro archivo principal App:

<div className="d-flex flex-column">
  <ResponsiveNavbar />
</div>

Siempre puedes probar la aplicación ejecutándola npm start para ver cómo se actualiza con cada componente agregado.

Nuestra barra de navegación está lista, así que trabajemos en el pie de página del sitio. Como en ResponsiveNavbartenemos que declarar Footer y exportarlo a uno nuevo Footer.tsx Expediente. Crearemos un pie de página simple con texto, enlaces y un Container:

<div className="bg-secondary mt-auto">
  <Container className="p-3">
    <p className="text-center text-white">Thank you for visiting this website</p>
    <p className="text-center mt-5 text-white">Follow us on social media:</p>
    <a href="https://www.toptal.com/">Instagram</a>
    <a href="https://www.toptal.com/">Facebook</a>
    <a href="https://www.toptal.com/">Twitter</a>
  </Container>
</div>

Las clases p-3 y mt-5 significa padding y margin-top, y sus valores pueden estar entre cero y cinco (p. ej. p-5 y mt-1 también son opciones) o establecer auto. También es importante agregar mt-autoya que el pie de página se moverá al final de la página después de agregarlo Footer para nuestro App en el siguiente paso.

A continuación, agregaremos un para mostrar los enlaces sociales uno al lado del otro con el espacio correcto Row componente y anide cada enlace dentro de uno Col (columna) componente (también necesitamos agregar Row y Col a nuestras importaciones de React Bootstrap):

<div className="bg-secondary mt-auto">
  <Container className="p-3">
    <p className="text-center text-white">Thank you for visiting this website</p>
    <p className="text-center mt-5 text-white">Follow us on social media:</p>
    <Row>
      <Col className="text-center">
        <a href="https://www.toptal.com/">Instagram</a>
      </Col>
      <Col className="text-center">
        <a href="https://www.toptal.com/">Facebook</a>
      </Col>
      <Col className="text-center">
        <a href="https://www.toptal.com/">Twitter</a>
      </Col>
    </Row>
  </Container>
</div>

Nuestro paso final es colocar el pie de página en la parte inferior de nuestra página en nuestro App:

<div className="d-flex flex-column min-vh-100">
  <ResponsiveNavbar />
  <Footer />
</div>

Aquí también hemos establecido la altura mínima del sitio web para 100vh; esta es la altura completa de la pantalla (100 % de la altura de la ventana gráfica) y garantiza que el pie de página se muestre en la parte inferior real de la pantalla, en lugar de aparecer directamente debajo de otro contenido.

sistemas de red

Con nuestra barra de navegación y pie de página, finalicemos el sitio agregando un sistema de cuadrícula a la página. Nuestra grilla incluirá Card Componentes que redefinimos y exportamos Item.tsx Expediente:

<Card style={{ minWidth: '18rem', margin: '20px' }}>
  <Card.Img variant="top" src="https://www.toptal.com/bootstrap/..." />
  <Card.Body>
    <Card.Title>Example Card</Card.Title>
    <Card.Text>This is an example React card</Card.Text>
    <Button variant="primary">Example Button</Button>
  </Card.Body>
</Card>

Ahora podemos volver App.tsx y agregue una cuadrícula dinámica de filas y columnas entre la barra de navegación y el pie de página. Necesitamos envolver nuestro sistema de red en un Container:

<Container className="mt-5">
  <Row>
    {Array.from(Array(numberOfItems).keys()).map(number => (
      <Col key={number}>
        <Item />
      </Col>
    ))}
  </Row>
</Container>

Podemos elegir una constante para numberOfItems para controlar la frecuencia con la que Item se renderiza el componente. Las columnas se ajustan automáticamente y reaccionan a todos los tamaños de pantalla. Intente cambiar el tamaño de la ventana de su navegador para probar el resultado final.

Desarrollo web receptivo simplificado

La sintaxis limpia y los componentes sencillos de React-Bootstrap facilitan la implementación del diseño receptivo en cualquier proyecto. La capacidad de trabajar con Bootstrap y React-Bootstrap es imprescindible para los desarrolladores frontend. Con estas herramientas en su conjunto de habilidades, estará listo para diseñar y crear prototipos de aplicaciones web más fácilmente.

El equipo editorial del Blog de Ingeniería de Toptal quiere agradecerle dijo Kholov para revisar los ejemplos de código y otro contenido técnico presentado en este artículo.