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, React debe combinarse con hojas de estilo en cascada (CSS) para 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.
Tabla de contenido
¿Qué es Bootstrap?
Bootstrap es un marco CSS de código abierto para el desarrollo front-end. Bootstrap permite a los desarrolladores crear sitios web receptivos y móviles a través de su completo conjunto de plantillas y herramientas de diseño basadas en JavaScript y 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 GitHub y 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 en el momento de escribir este artículo.
¿Por qué usar Bootstrap con React?
- Ahorra tiempo: Bootstrap se encarga del formato, lo que le brinda más tiempo para concentrarse 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 coherente: 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 de la comunidad: 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 receptivo: 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
Use este comando para verificar si node.js está instalado en su PC:
node -v
Si node.js está instalado, tendrá un resultado similar a este en su terminal.
Versión de nodo
Si no está instalado, puede consultar las instrucciones de descarga desde https://nodejs.org/en/.
Use este comando para verificar si React está instalado en su PC:
npm list react
Si React está instalado globalmente en su máquina, tendrá algo como esto en su terminal.
Versió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-app
Puede reemplazar my-app 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 (use 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:
Método Bootstrap de instalación de NPM
Node.js viene con npm (administrador de paquetes de nodos) instalado de manera predeterminada.
Puede verificar la versión de su npm a través de este comando:
npm -v
Si npm está instalado, obtendrá una salida como 9.2.0
Ahora puede instalar bootstrap usando este comando:
npm install bootstrap
Una vez hecho esto, vaya al archivo ./src/index.js. Agregue esta línea en la parte superior.
importar ‘bootstrap/dist/css/bootstrap.css’;
Uso del administrador de paquetes de hilo
A diferencia de npm, yarn no se instala de forma predeterminada cuando instala node.js.
Instale el patio usando este comando;
npm install -g yarn
Este 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 bootstrap
Una vez hecho esto, vaya al archivo ./src/index.js. Agregue esta línea en la parte superior.
importar ‘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.
Método CDN
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 archivo .public/index.html
- En la etiqueta , agregue esta etiqueta
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
- Debe agregar dependencias de JavaScript a su aplicación. Vaya al cuerpo de su archivo index.html y agregue esta etiqueta justo antes de la etiqueta de cierre :
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
Bootstrap finalmente está instalado en su aplicación React.
Uso del paquete React Bootstrap
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 el archivo src/index.js o App.js y agregue esta línea antes de otros archivos CSS
importar ‘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;
importar {Botón} desde ‘react-bootstrap’;
correa de reacción
Esta es una biblioteca de componentes React para Bootstrap. Reactstrap 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 bootstrap
importar ‘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 el archivo .public/index.html y agregue esta línea a la etiqueta
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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;
importar {Botón} de ‘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.
La combinación de React 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 React Native para el desarrollo de aplicaciones móviles.