Header Ads Widget

Ticker

6/recent/ticker-posts

Tutorial de React Bootstrap: Integración de Bootstrap 4 con React

 En este tutorial, aprenderemos cómo integrar Bootstrap 4 con React construyendo una aplicación React de ejemplo simple y diseñando la interfaz de usuario con componentes comunes de Bootstrap como el sistema de cuadrícula (contenedor, clases de filas y columnas), barras de navegación y tarjetas.

Bootstrap 4 es el marco CSS más popular para crear diseños receptivos con muchas características nuevas, como el soporte para Flexbox y un nuevo componente Card.

React es la biblioteca de UI más popular para construir interfaces de usuario web que hace uso de un paradigma basado en componentes y un DOM virtual.

DOM virtual se refiere a un concepto de programación en el que una representación virtual de una interfaz de usuario se mantiene en la memoria y se sincroniza con el DOM real mediante una biblioteca como ReactDOM. Este proceso se llama reconciliación.

Bootstrap 4 depende tanto de jQuery como de Popper.js, pero no se recomienda usar jQuery con React ya que jQuery usa manipulación DOM directa.

Si necesita agregar para agregar el estilo Bootstrap 4 a su aplicación React, la comunidad ha creado algunos paquetes para que sea posible usar Bootstrap 4 sin jQuery pero aún así poder usar las características y componentes completos de BS 4.

Cómo agregar Bootstrap 4 a su aplicación React

La integración de Bootstrap con React se puede lograr de varias maneras, como:

  • Importando Bootstrap desde una CDN,
  • Instalando Bootstrap desde npm,
  • Usando el paquete React Bootstrap como Reactstrap

En este tutorial exploraremos estos métodos con más detalle.

Cómo usar Bootstrap 4 desde un CDN en React

Veamos el primer método para integrar Bootstrap con React, es decir, a través de una CDN. Este enfoque es el más sencillo, ya que solo necesita agregar una <link>etiqueta que apunte a Bootstrap CDN en el public/index.htmlarchivo de su aplicación React.

Siempre que haya generado un proyecto React con la create-react-appherramienta, navegue a la carpeta raíz de su proyecto y abra el public/index.htmlarchivo, luego agregue el siguiente código en la <head>sección:

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

Si necesita utilizar componentes Bootstrap que dependen de JavaScript / jQuery en su aplicación React, también debe incluir jQuery, Popper.js y Bootstrap.js en su documento. Agregue las siguientes importaciones antes de la </body>etiqueta de cierre :

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" 
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" 
crossorigin="anonymous"></script>

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" 
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" 
crossorigin="anonymous"></script>

Eso es. Ahora ha agregado Bootstrap en su aplicación React. Debería poder utilizar todas las utilidades CSS y los componentes de la interfaz de usuario disponibles en Bootstrap en su aplicación.

Nota : tenga en cuenta que no es necesario que utilice la create-react-appherramienta para montar su aplicación. Lo importante es que necesitas agregar las importaciones al index.htmlarchivo de tu proyecto.

Agregar Bootstrap en React usando NPM

También puede importar Bootstrap en su aplicación React instalándolo desde npm.

Siempre que tenga un proyecto React. Abra una nueva ventana de terminal, navegue hasta la carpeta de su proyecto y ejecute el siguiente comando:

$ npm install bootstrap --save

Después de instalar el bootstrappaquete, deberá importarlo en su archivo de entrada de la aplicación React.

Si generó su proyecto usando la create-react-appherramienta; abre el src/index.jsarchivo y agrega el siguiente código:

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

Ahora puede usar las clases y utilidades CSS en su aplicación, pero si necesita usar los componentes de JavaScript, también necesitará instalar los paquetes jquerypopper.jsdesde npm. En su terminal, ejecute los siguientes comandos:

$ npm install jquery popper.js

A continuación, vaya al src/index.jsarchivo y agregue las siguientes importaciones:

import $ from 'jquery';
import Popper from 'popper.js';
import 'bootstrap/dist/js/bootstrap.bundle.min';

Eso es. Ahora puede usar todo el poder de Bootstrap en su aplicación React.

Uso de paquetes comunitarios para integrar Bootstrap 4 con React

El último enfoque que puede usar para agregar Bootstrap a su aplicación React es mediante el uso de algunos paquetes creados por la comunidad que tienen como objetivo reconstruir componentes Bootstrap como componentes React como:

  • react-bootstrap : React bootstrap reemplaza el javascript Bootstrap. Cada componente se ha creado desde cero como verdaderos componentes de React, sin dependencias innecesarias como jQuery.
  • reactstrap : esta biblioteca contiene componentes React Bootstrap 4 que favorecen la composición y el control. La biblioteca no depende de jQuery o Bootstrap javascript. Sin embargo, se necesita react-popper para el posicionamiento avanzado de contenido como Tooltips, Popovers y Dropdowns de volteo automático.

Ejemplo de React Bootstrap

Veamos ahora un ejemplo práctico de cómo usar el reactstrappaquete para crear una aplicación simple y diseñar la interfaz de usuario con Bootstrap.

Prerrequisitos

Para seguir los pasos de este tutorial, debe tener algunos requisitos previos, como:

  • Experiencia laboral con JavaScript,
  • Familiaridad con React,
  • Node.js y NPM instalados en su máquina de desarrollo. Estos son requeridos por la create-react-apputilidad que se puede usar para andamios y trabajar con aplicaciones React, pero no React en sí.

Instalando create-react-app

Comencemos instalando la create-react-appherramienta que es la herramienta oficial para trabajar con proyectos de React. Abra una terminal y ejecute el siguiente comando:

$ npm install -g create-react-app

Nota : El comando anterior se instalará create-react-appglobalmente en su sistema, por lo que es posible que deba agregar sudo antes de su comando en sistemas basados ​​en Debian o macOS o usar un símbolo del sistema de administrador en Windows. También puede corregir sus permisos npm para ejecutar el comando sin problemas.

Crear un proyecto de React

Después de instalar la utilidad, usémosla para crear nuestra aplicación React. Regrese a su terminal y ejecute el siguiente comando:

$ cd ~
$ create-react-app react-bootstrap-example

A continuación, navegue hasta la carpeta raíz de su proyecto e inicie un servidor de desarrollo local usando los siguientes comandos:

$ cd react-bootstrap-example
$ npm start

Su servidor se ejecutará desde la http://localhost:3000dirección.

Deje la terminal ejecutando el servidor de desarrollo y abra una nueva terminal para ejecutar el resto de los comandos de este tutorial.

Instalación bootstrapyreactstrap

Después de generar su proyecto, ahora puede navegar a su carpeta e instalar las dependencias ejecutando los siguientes comandos:

$ cd react-bootstrap-example
$ npm install --save bootstrap reactstrap

Nota : Necesitamos instalar bootstrap porque react-bootstraprequiere los archivos CSS Bootstrap 4

En el momento de escribir este artículo, están instaladas las reactstrapversiones 8.0.0 y bootstrap4.3.1.

Importando Bootstrap

A continuación, abra el src/index.jsarchivo y agregue el siguiente código para importar el archivo CSS Bootstrap:

import 'bootstrap/dist/css/bootstrap.css';

También puede utilizar una <link>etiqueta en su index.htmlarchivo de proyecto .

Luego puede importar componentes individuales de Bootstrap 4 y usarlos.

Obteniendo datos JSON

Abra src/App.jsy agregue una contactsvariable de estado para contener los datos obtenidos del servidor:

class App extends Component {
  state = {
    contacts: []
  }

A continuación, agregue un componentDidMount()método de ciclo de vida y obtenga datos JSON del servidor remoto y llame al método React setState para establecer el contactsestado en los datos obtenidos:

  componentDidMount() {
    fetch('http://jsonplaceholder.typicode.com/users')
    .then(res => res.json())
    .then((data) => {
      this.setState({ contacts: data })
      console.log(this.state.contacts)
    })
    .catch(console.log)
  }

Nota: también puede usar Axios con React para obtener datos de los servidores.

Barra de navegación Bootstrap

reactstrap proporciona un componente Navbar que representa un componente sensible de la barra de navegación Bootstrap 4.

Una barra de navegación puede contener otros componentes como NavbarBrand, Nav, NavItem, etc. para crear una barra de navegación con varios tipos de enlaces.

Agregue las siguientes importaciones:

import { Fragment } from 'react';
import {
  Navbar, NavbarBrand, Nav, NavItem, NavLink
} from 'reactstrap';

A continuación, cambie el render()método de la siguiente manera:

  render() {

    return (
      <Fragment>
        <Navbar color="faded" light expand="md">

          <NavbarBrand href="/">
            React Bootstrap Example
          </NavbarBrand>
          <Nav className="ml-auto" navbar>

            <NavItem className="d-flex align-items-center">
              <NavLink className="font-weight-bold" href="/">Home</NavLink>
            </NavItem>
            <NavItem className="d-flex align-items-center">
              <NavLink className="font-weight-bold" href="https://www.techiediaries.com/react-bootstrap">
                Tutorial
              </NavLink>
            </NavItem>


          </Nav>
        </Navbar>
      </Fragment>
    );
  }

Usamos un fragmento de reacción para poder devolver múltiples elementos de nuestro render()método.

Según los documentos oficiales:

Un patrón común en React es que un componente devuelva varios elementos. Los fragmentos le permiten agrupar una lista de niños sin agregar nodos adicionales al DOM.

Nota : Puede hacer que NavBar responda agregando un componente <NavbarToggler>interno <Navbar>y luego envolverlo <NavItems>en un <Collapse>componente.

En este punto, esta es una captura de pantalla de nuestra barra de navegación de Bootstrap 4:

Ejemplo de React Bootstrap 4

A continuación, agreguemos un componente Contenedor y mostremos los datos de los contactos con un componente Tarjeta para cada contacto. Primero, agregue las siguientes importaciones:

import {
  Container, Row, Col, Navbar, NavbarBrand, Nav, NavItem, NavLink, Card, CardBody, CardTitle, CardSubtitle, CardText, Button
} from 'reactstrap';

A continuación, actualice el render()método de la siguiente manera:

  render() {

    return (
      <Fragment>
        <Navbar color="faded" light expand="md">

          <NavbarBrand href="/">
            React Bootstrap Example
          </NavbarBrand>
          <Nav className="ml-auto" navbar>

            <NavItem className="d-flex align-items-center">
              <NavLink className="font-weight-bold" href="/">Home</NavLink>
            </NavItem>
            <NavItem className="d-flex align-items-center">
              <NavLink className="font-weight-bold" href="https://www.techiediaries.com/react-bootstrap">
                Tutorial
              </NavLink>
            </NavItem>


          </Nav>
        </Navbar>

        <Container fluid>


          <Row>
            <Col>
              {this.state.contacts.map((contact) => (

                <Card color="primary">
                  <CardBody>
                    <CardTitle className="h3 mb-2 pt-2 font-weight-bold">{contact.name}</CardTitle>
                    <CardSubtitle className="mb-3 font-weight-light text-uppercase" style=>{contact.email}</CardSubtitle>
                    <CardText className="mb-4" style=> {contact.company.catchPhrase}</CardText>
                    <Row>

                    <Col xs=>
                          <Button color="success">Call</Button>
                    </Col>
                    <Col sm={'auto'}>
                          <Button color="warning">Message</Button>
                    </Col>
                    <Col sm={'auto'}>
                          <Button color="success">Email</Button>
                    </Col>
                    </Row>
                  </CardBody>
                </Card>



              ))}
            </Col>
          </Row>

        </Container>
      </Fragment>
    );
  }

Esta es una captura de pantalla de nuestra interfaz de usuario con estilo Bootstrap:

Ejemplo de React Bootstrap 4

Conclusión

En este tutorial, hemos visto varias formas de integrar Bootstrap 4 con React para construir interfaces de usuario de aspecto profesional y luego creamos un ejemplo de demostración que muestra cómo usar React y el react-bootstrappaquete para construir una aplicación simple que obtiene datos de contactos de un servidor remoto y usa una tarjeta Bootstrap 4 para mostrar cada contacto.

Publicar un comentario

0 Comentarios