la creciente popularidad de las aplicaciones de una sola página en los últimos años ha llevado a una afluencia de marcos de JavaScript, incluyendo Angular, React, Vue.js, Ember – la lista continúa. Como resultado, ya no es necesario usar una biblioteca DOM, como jQuery, para crear aplicaciones web.
esto ha coincidido con la aparición de marcos CSS diseñados para ayudar a los desarrolladores a construir aplicaciones web receptivas., Si eres un desarrollador de frontend, es casi seguro que has usado o al menos has oído hablar de Bootstrap, Foundation y Bulma, todos marcos CSS responsivos (mobile-first) con características robustas y utilidades integradas. Si React es el framework JavaScript más utilizado para crear aplicaciones web, Bootstrap es el framework CSS más popular, que alimenta a millones de sitios web en internet.,
en este tutorial, le mostraremos cómo usar React y Bootstrap, cómo agregar Bootstrap a una aplicación de React, cómo instalar paquetes de React Bootstrap como react-bootstrap (con ejemplos) y, finalmente, cómo crear una aplicación de React con Bootstrap.
si acabas de empezar con estos frameworks, te sugiero que revises la documentación oficial de React y Bootstrap. También te animo a ver el video tutorial completo a continuación para una inmersión más profunda.,
agregar Bootstrap a React
Las tres formas más comunes de agregar Bootstrap a tu aplicación React son:
- Usar BootstrapCDN
- importar Bootstrap en React como una dependencia
- instalar un paquete de Bootstrap de React (como
bootstrap-reactoreactstrap)
usar bootstrapcdn
bootstrapcdn es la forma más fácil de agregar bootstrap a tu aplicación React. No se requieren instalaciones ni descargas. Simplemente coloque un <link> en la sección <head> de su aplicación, como se muestra en el siguiente fragmento.,
si está interesado en usar los componentes JavaScript que se envían con Bootstrap, debe colocar las siguientes etiquetas <script> cerca del final de sus páginas, justo antes del cierre </body> para habilitarlas.
como puede ver, Bootstrap 4 Requiere Jquery y Popper.js para sus componentes JavaScript. En el fragmento anterior, usamos la versión slim de jQuery, aunque también puedes usar la versión completa.
para tu aplicación React, estos fragmentos de código generalmente se agregarán a la página de índice de tu aplicación., Si utilizó create-react-app para crear su aplicación, entonces su página public/index.html debería tener el siguiente fragmento:
ahora puede comenzar a usar las clases de Bootstrap integradas y los componentes JavaScript en los componentes de la aplicación React.
importar Bootstrap como una dependencia
si está utilizando una herramienta de compilación o un paquete de módulos como webpack, esta es la opción preferida para agregar Bootstrap a su aplicación React. Tendrá que instalar Bootstrap como una dependencia para su aplicación.,
npm install bootstrap
o si está utilizando Yarn:
yarn add bootstrap
Una vez que haya instalado Bootstrap, siga adelante e inclúyalo en el archivo JavaScript de entrada de su aplicación. Si usted está acostumbrado a create-react-app, este debe ser tu src/index.js archivo.
observe que hemos importado el CSS minificado de Bootstrap como la primera dependencia. Con esto, podemos seguir adelante utilizando las clases de Bootstrap integradas en nuestros componentes de la aplicación React., Sin embargo, antes de que puedas usar los componentes JavaScript de Bootstrap en tu app, necesitarás instalar jquery y popper.js si aún no están instalados.
npm install jquery popper.js
a continuación, realizará cambios adicionales en el archivo src/index.js para agregar las nuevas dependencias como se muestra en el siguiente fragmento.
Aquí hemos añadido las importaciones de $ y Popper. También importamos el archivo de paquete minificado de JavaScript de Bootstrap. Ahora puedes usar componentes de JavaScript Bootstrap en tu app React.,
instalar un paquete de Bootstrap de React
la tercera forma de agregar Bootstrap a una aplicación de React es usar un paquete que ha reconstruido componentes de Bootstrap diseñados para funcionar como componentes de React. Los dos paquetes más populares son:
react-bootstrapreactstrap
Ambos paquetes son grandes opciones para el uso de Bootstrap con Reaccionar apps aunque no necesariamente requiere el uso de alguno de ellos. Comparten características muy similares.,
usando clases y componentes Bootstrap incorporados
puedes usar Bootstrap directamente en elementos y componentes de tu app React aplicando las clases integradas como cualquier otra clase. Vamos a construir un componente React theme switcher simple para demostrar usando clases y componentes de Bootstrap.,
Como se muestra en esta demo, estamos usando la lista desplegable componente disponible en Bootstrap para implementar en nuestro theme switcher. También utilizamos las clases de botón integradas para establecer el tamaño y el color del botón desplegable.
vamos a escribir el código para nuestro componente ThemeSwitcher. Asegúrate de tener una aplicación React ya configurada., Cree un nuevo archivo para el componente y agregue el siguiente fragmento de código:
Aquí hemos construido un componente theme switcher muy simple aprovechando el componente desplegable de Bootstrap y un par de clases integradas. Puede obtener más información sobre el uso de Bootstrap desplegable aquí.
primero, configuramos el estado del componente con una propiedad theme y la inicializamos a null., A continuación, definimos dos controladores de eventos de clic resetTheme() y chooseTheme() en la clase de componente para elegir un tema y restablecer el tema respectivamente.
en el método render(), representamos un menú desplegable de botón dividido que contiene tres temas. a saber: Primary, Danger y Success. Cada elemento del menú se adjunta a un controlador de eventos de clic para la acción apropiada. Observe cómo usamos theme.toLowerCase() para obtener la clase de color del tema tanto para los botones desplegables como para el texto., Por defecto usamos secondary como el color del tema si no se establece ningún tema.
en este ejemplo, hemos visto lo fácil que es usar las clases y componentes integrados de Bootstrap en nuestra aplicación React. Consulte la documentación de Bootstrap para obtener más información sobre las clases y componentes integrados.
react-bootstrap ejemplo
Ahora, vamos a reconstruir nuestro theme switcher con react-bootstrap. Usaremos la herramienta de línea de comandos create-react-app para crear nuestra aplicación. Asegúrese de tener la herramienta create-react-app instalada en su máquina.,
cree una nueva aplicación de React usando create-react-app de la siguiente manera:
create-react-app react-bootstrap-app
a continuación, siga adelante e instale las dependencias de la siguiente manera:
yarn add bootstrap@3 react-bootstrap
react-bootstrap actualmente se dirige a Bootstrap v3. Sin embargo, se está trabajando activamente para proporcionar soporte Bootstrap v4.
cree un nuevo archivo llamado ThemeSwitcher.js en el directorio src de su proyecto y coloque el siguiente contenido en él.
Aquí hemos intentado imitar nuestro ejemplo inicial tanto como sea posible usando react-bootstrap., Importamos dos componentes de la etiqueta react-bootstrap el paquete, a saber: SplitButton y MenuItem. Consulte la documentación desplegable react-bootstrap para obtener más información.
primero, configuramos el estado del componente con una propiedad theme y la inicializamos a null. A continuación, definimos un chooseTheme() controlador de eventos de clic para elegir un tema o restablecer el tema.
ya que estamos usando Bootstrap 3.3.,7, creamos algunos estilos de contenedores en el método render() para ayudarnos a lograr el centrado horizontal y vertical.
observe cómo especificamos el tamaño del botón en el componente SplitButton usando la prop bsSize. Además, observe cómo estamos pasando elthemeClass albsStyle prop para cambiar dinámicamente el color del botón según el tema del estado.
pasamos el nombre del tema al eventKey prop de cada componente MenuItem., También configuramos el manejador onSelect a this.chooseTheme(), que definimos anteriormente. El componente MenuItem pasa el eventKey y el event al controlador onSelect de la siguiente manera:
(eventKey: any, event: Object) => any
finalmente, modificaremos el archivo src/index.js para que se vea como el siguiente fragmento:
aquí, primero importamos los archivos CSS minificados de Bootstrap. También importamos nuestro componente ThemeSwitcher y lo renderizamos en el DOM.,
Si usted ejecutar la aplicación con el comando yarn start o npm start. Su aplicación debe iniciarse en el puerto 3000 y debe parecerse a la siguiente demostración:
react-bootstrap demo. reactstrap ejemplo
vamos a seguir adelante y reconstruir nuestro theme switcher con reactstrap esta vez., Usaremos la herramienta de línea de comandos create-react-app para crear nuestra aplicación. Asegúrese de tener la herramienta create-react-app instalada en su máquina.
crear una nueva aplicación de React usando create-react-app de la siguiente manera:
create-react-app reactstrap-app
a continuación, siga adelante e instale las dependencias de la siguiente manera:
yarn add bootstrap reactstra
crear un nuevo archivo llamado ThemeSwitcher.js en el directorio src de su proyecto y ponga el siguiente contenido en él:
Aquí hemos reconstruido nuestro ejemplo inicial usando reactstrap., Importamos un par de componentes de reactstrap. Consulte la documentación desplegable del botón reactstrap para obtener más información.
en Primer lugar, tenemos el componente del estado con dos propiedades:
-
themepropiedad inicializado anull -
dropdownOpeninicializa afalse. Esta propiedad se utilizará en el componenteButtonDropdowndereactstrappara mantener el estado de alternancia del menú desplegable.,
también definimos un método toggleDropdown() para alternar el estado abierto del menú desplegable. Esto también se utilizará en el componente ButtonDropdown.reactstrap también proporciona una descontrolada componente UncontrolledButtonDropdown que no requieren el isOpen prop o el toggle controlador de la proposición a trabajar. En la mayoría de los casos, esto se puede usar en lugar de usar ButtonDropdown.
Cada elemento del menú desplegable se representa utilizando el componente DropdownItem., Observe cómo especificamos el tamaño del botón en el componente DropdownToggle usando la prop size. También observe cómo estamos pasando elthemeClass alcolor prop en ambos componentesButton yDropdownToggle para cambiar dinámicamente el color del botón basado en el tema del estado.
también configuramos el controlador onClick en cada DropdownItem al igual que lo hicimos antes, utilizando los controladores chooseTheme() y resetTheme() que definimos anteriormente.,
finalmente, modificaremos el archivo src/index.js para que se vea como el siguiente fragmento:
aquí, primero Importamos el archivo CSS minificado de Bootstrap. También importamos nuestro componente ThemeSwitcher y lo renderizamos en el DOM.
Si usted ejecutar la aplicación con el comando yarn start o npm start., Su aplicación debe iniciarse en el puerto 3000 y debe parecerse a la siguiente demostración:
Crear un Reaccionan de la aplicación con Bootstrap
Vamos a empujar un poco más para crear una aplicación con algunos detalles más. Intentaremos usar tantas clases y componentes Bootstrap como sea posible. También usaremos reactstrap para integrar Bootstrap con React, ya que soporta Bootstrap 4.,
usaremos la herramienta de línea de comandos create-react-app para crear nuestra aplicación. Asegúrese de tener la herramienta create-react-app instalada en su máquina. Aquí hay una captura de pantalla de lo que vamos a crear.,
Crear un nuevo Reaccionar aplicación a través de create-react-app de la siguiente manera:
create-react-app sample-app
a continuación, seguir adelante e instalar las dependencias de la siguiente manera:
yarn add axios bootstrap reactstrap
Observe aquí que podemos instalar axios como una dependencia. Axios es un cliente HTTP basado en promesas para el navegador y el nodo.js. Nos permitirá obtener publicaciones de la API BaconIpsum JSON.,
Haga una pequeña modificación al archivo src/index.js para incluir el archivo CSS minificado de Bootstrap. Debería verse como el siguiente fragmento:
cree un nuevo directorio llamadocomponents en el directoriosrc de su proyecto. Cree un nuevo archivo, Header.js, en el directorio components con el siguiente contenido:
el componente que acabamos de crear en este fragmento es el componente Header que contiene el menú de navegación., A continuación, crearemos un nuevo archivo llamado SideCard.js en el directorio components con el siguiente contenido:
a continuación, crearemos un nuevo archivo llamado Post.js en el directorio components y agregue el siguiente fragmento de código:
aquí creamos un componente Post que renderiza un post en la página. Inicializamos el estado del componente con un post hotel null., Cuando el componente se monta, usamos axios para obtener una publicación aleatoria de cuatro párrafos de la API BaconIpsum JSON y actualizar la propiedad post en el estado.
finalmente, modifique el archivo src/App.js para que se parezca al siguiente fragmento:
aquí simplemente incluimos los componentes Header, SideCard, y Post el componente App. Observe cómo usamos un par de clases de utilidad receptivas proporcionadas por Bootstrap para adaptar nuestra aplicación a diferentes tamaños de pantalla.,
si ejecuta la aplicación ahora con el comando yarn start o npm start, su aplicación debería iniciarse en el puerto 3000 y debería verse exactamente como la captura de pantalla que vimos anteriormente.
conclusión
en este tutorial, exploramos algunas formas diferentes en las que podemos integrar Bootstrap con nuestras aplicaciones React. También hemos visto cómo podemos usar dos de las bibliotecas de arranque de React más populares, a saber, react-bootstrap y reactstrap.,
solo hemos utilizado algunos componentes de Bootstrap en este tutorial, como alert, badge, desplegable, navbar, nav, form, button, card, etc. Todavía hay un par de componentes de Bootstrap con los que puedes experimentar, como tablas, modales, información sobre herramientas, Carrusel, jumbotron, paginación, pestañas, etc.
Puede consultar la documentación de los paquetes que utilizamos en este tutorial para descubrir más formas de usarlos. El código fuente de todas las aplicaciones de demostración en este tutorial se puede encontrar en GitHub.,
visibilidad completa de las aplicaciones de producción de React
depurar las aplicaciones de React puede ser difícil, especialmente cuando los usuarios experimentan problemas que son difíciles de reproducir. Si está interesado en monitorear y rastrear el estado de Redux, detectar automáticamente los errores de JavaScript y rastrear las solicitudes de red lentas y el tiempo de carga de los componentes, pruebe LogRocket. 
LogRocket es como un DVR para aplicaciones web, grabando literalmente todo lo que sucede en su aplicación React., En lugar de adivinar por qué Ocurren los problemas, puede agregar e informar sobre el estado en el que se encontraba su aplicación cuando se produjo un problema. LogRocket también supervisa el rendimiento de la aplicación, creando informes con métricas como la carga de la CPU del cliente, el uso de la memoria del cliente y más.
El paquete de middleware LogRocket Redux añade una capa adicional de visibilidad a sus sesiones de usuario. LogRocket registra todas las acciones y el estado de sus tiendas Redux.
modernice cómo depura sus aplicaciones React: comience a monitorear de forma gratuita.