React se encuentra entre los marcos y bibliotecas de JavaScript más populares para crear aplicaciones e interfaces de usuario de una sola página. Su flexibilidad en la creación de interfaces de usuario utilizando sus componentes reutilizables, la velocidad de desarrollo y la comunidad de apoyo son las razones de su popularidad.
Sin embargo, Reaccionar debe combinarse con hojas de estilo en cascada (CSS) para hacer que sus aplicaciones sean más atractivas visualmente y presentables. Escribir CSS desde cero puede llevar mucho tiempo.
Los desarrolladores pueden pasar mucho tiempo trabajando en el estilo en lugar de las funcionalidades clave de una aplicación React. La buena noticia es que las herramientas y marcos como Bootstrap facilitan la adición de CSS a su aplicación React.
¿Qué es Bootstrap?
Bootstrap es un código abierto Marco CSS para el desarrollo frontal. Bootstrap permite a los desarrolladores crear sitios web receptivos y móviles a través de su completo conjunto de JavaScript y herramientas y plantillas de diseño basadas en CSS.
Bootstrap fue creado por Twitter y también lo mantiene un equipo de ingenieros de la misma empresa. Su código fuente se mantiene en GitHuby los miembros de la comunidad pueden contribuir y enviar informes de errores y sugerencias. Bootstrap 5.3.0-alpha1 es la versión más reciente al momento de escribir este artículo.
¿Por qué usar Bootstrap con React?
- Ahorra tiempo:: Bootstrap se encarga del formato, dándote más tiempo para concentrarte en la funcionalidad. Por lo tanto, no tiene que preocuparse por problemas como la apariencia de sus formularios o botones, sino por áreas como si el botón de envío envía datos a su backend o API.
- Facilidad de uso: Una vez que haya agregado Bootstrap a su aplicación React, simplemente tome los componentes de la interfaz de usuario prediseñados y agréguelos a su aplicación.
- Diseño consistente: La mayoría de las aplicaciones aumentan de tamaño con el tiempo. Es importante garantizar un diseño consistente de su sitio web si desea atraer usuarios leales. Bootstrap tiene un estilo consistente que le dará a tus páginas un aspecto uniforme.
- Toneladas de plantillas para elegir: Bootstrap tiene cientos de plantillas que van desde barras de navegación, botones, formularios y carruseles hasta menús desplegables, por mencionar algunos, para elegir.
- Facilidad de personalización: Aunque Bootstrap tiene plantillas de diseño, siempre puede personalizar el tamaño de fuente, el color y otras características para satisfacer sus necesidades.
- Soporte comunitario: Bootstrap tiene una extensa documentación para que pueda comenzar. Sin embargo, aún puede confiar en la gran comunidad, siempre agregando nuevas funciones y manteniendo este marco CSS.
- Diseño de respuesta: Una vez que haya agregado Bootstrap a su aplicación React, puede estar seguro de que su aplicación web responderá en todos los tamaños de pantalla.
Cómo instalar Bootstrap en React
Una aplicación React no viene con Bootstrap instalado de forma predeterminada. Pero antes de explorar cómo agregar/instalar Bootstrap en React, debemos verificar algunas cosas;
Requisitos previos
- Compruebe que Node.js está instalado: Este entorno de tiempo de ejecución de JavaScript multiplataforma permite a los desarrolladores ejecutar JavaScript fuera de un navegador web.
Use este comando para verificar si node.js está instalado en su PC:
node -vSi node.js está instalado, tendrá un resultado similar a este en su terminal.
Si no está instalado, puede consultar las instrucciones de descarga desde https://nodejs.org/en/.
- Verifica que React esté instalado: Utilizará React para crear funcionalidad mientras Bootstrap toma el formato.
Use este comando para verificar si React está instalado en su PC:
npm list reactSi React está instalado globalmente en su máquina, tendrá algo como esto en su terminal.
- Crea tu aplicación de reacción: Puede crear la aplicación React manualmente, pero requiere mucho trabajo. Para nuestros propósitos de demostración, usaremos el comando create-react-app. Siga estos pasos para crear su aplicación de reacción:
- Instale la aplicación react-create en su máquina. Usando este comando
npm install -g create-react-app- Cree su aplicación React usando este comando
npx create-react-app my-appPuedes reemplazar mi-aplicación con cualquier nombre de su elección. Para nuestro caso, llamamos a nuestra aplicación reaccionar-b.
Una vez instalado, tendrás algo similar en tu terminal:
Ejecute estos comandos para comenzar
cd react-b(utilice el nombre de su aplicación elegido en el paso anterior)npm start(este comando inicia su aplicación React)
Ahora podemos ir a los siguientes pasos y agregar/instalar Bootstrap a nuestra aplicación React:
NPM Install Bootstrap Method
Node.js viene con npm (administrador de paquetes de nodos) instalado de forma predeterminada.
Puede verificar la versión de su npm a través de este comando:
npm -vSi npm está instalado, obtendrá una salida como 9.2.0
Ahora puede instalar bootstrap usando este comando:
npm install bootstrapUna vez hecho esto, vaya a ./src/index.js archivo. Agregue esta línea en la parte superior.
import 'bootstrap/dist/css/bootstrap.css';
Using Yarn Package Manager
A diferencia de npm, yarn no se instala de forma predeterminada cuando instala node.js.
Instale el patio usando este comando;
npm install -g yarnEste comando instalará yarn globalmente, por lo que ya no tendrá que instalar el paquete cada vez que cree una aplicación React.
Ejecute este comando para agregar bootstrap a React:
yarn add bootstrapUna vez hecho esto, vaya a ./src/index.js archivo. Agregue esta línea en la parte superior.
import 'bootstrap/dist/css/bootstrap.css';
Siempre debe importar Bootstrap en la parte superior del archivo de entrada de su aplicación antes que otros archivos CSS. Esto facilita la modificación de sus entradas de Bootstrap si necesita cambiar los valores predeterminados de las plantillas a medida que crea su aplicación React.
CDN Method
Usando un enlace de red de entrega de contenido (CDN), puede agregar Bootstrap a React. Al agregar este enlace CDN, incluye la biblioteca Bootstrap en su aplicación React sin descargar ni alojar los archivos en la carpeta de su proyecto. Sigue estos pasos.
- En su carpeta raíz, navegue hasta el .public/index.html presentar
- En
<head>etiqueta, agrega esto<link>etiqueta
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">- Debe agregar dependencias de JavaScript a su aplicación. Ve al cuerpo de tu index.html archivo y agregue esta etiqueta justo antes del cierre etiqueta:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>Bootstrap finalmente está instalado en su aplicación React.
Using React Bootstrap Package
Los enfoques que hemos cubierto hasta ahora se diseñaron originalmente para archivos HTML. Para entender esto mejor, considere este código desplegable de Bootstrap:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>¿Qué está mal con el código? Bootstrap, por defecto, usa class para clasificar sus divisiones (DIV). Sin embargo, React usa JSX, que usa la sintaxis camelCase. Por lo tanto, debe reemplazar la clase con className manualmente.
Para que ese código funcione en React, debemos reemplazar cada "clase" con "className". El código final será:
<div className="dropdown">
<button className="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul className="dropdown-menu">
<li><a className="dropdown-item" href="#">Action</a></li>
<li><a className="dropdown-item" href="#">Another action</a></li>
<li><a className="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>Afortunadamente, tenemos dos enfoques más, react-bootstrap y reactstrap, donde no se necesita intervención manual.
Reaccionar-bootstrap
React-bootstrap tiene verdaderos componentes de React creados desde cero. La biblioteca es compatible con el núcleo de Bootstrap.
Siga estos pasos para comenzar con React-bootstrap:
- Instale React-bootstrap con este comando:
npm install react-bootstrap bootstrap- Navegue hasta src/index.js o App.js archivo y agregue esta línea antes de otros archivos CSS
import 'bootstrap/dist/css/bootstrap.min.css';
React-bootstrap le permite importar un componente específico en lugar de la biblioteca completa. Por ejemplo, si necesita importar un botón en uno de sus componentes, puede importarlo de la siguiente manera;
import { Button } from 'react-bootstrap';
correa de reacción
Esta es una biblioteca de componentes React para Bootstrap. correa de reacción se basa en el marco Bootstrap CSS para sus estilos y temas. Esta biblioteca importa las clases de Bootstrap correctas a su aplicación React, lo que le permite tener un estilo de aplicación consistente. Tampoco necesita agregar los archivos JavaScript de Bootstrap para activar la funcionalidad.
Siga estos pasos para agregar Reactstrap a su aplicación React:
- Instale Reactstrap a través de este comando:
npm install reactstrap react react-dom- Importe Bootstrap usando estos comandos:
npm install --save bootstrapimport 'bootstrap/dist/css/bootstrap.min.css'; (agregue esta línea a su app.js)
También puede usar la opción de enlace CDN para incluir Bootstrap en su aplicación. Después del primer paso, vaya al directorio raíz y navegue hasta .public/index.html archivo y agregue esta línea al etiqueta
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css"
/>Reactstrap le permite importar un componente específico en lugar de toda la biblioteca. Por ejemplo, si necesita importar un botón en uno de sus componentes, puede importarlo como;
import { Button } from 'reactstrap';
Conclusión
Arriba hay algunos enfoques que puede usar para instalar Bootstrap en su aplicación React para diseñar sus aplicaciones web. La elección del enfoque de instalación es una cuestión de preferencia, ya que el objetivo final es el mismo.
Combinando reaccionar con Bootstrap le ahorra el dolor de tener que realizar un seguimiento de todos los estilos CSS a medida que crece su aplicación. Diseñar su aplicación se vuelve fácil y eficiente a medida que tiene más tiempo para concentrarse en la funcionalidad.
Puede explorar algunas razones para elegir Reaccionar nativo para el desarrollo de aplicaciones móviles.
