¿React usa Bootstrap?
April 13, 2022
Table of contents
Quick Access
Una de las tecnologías que más ha ganado popularidad entre los desarrolladores de software es React, convirtiéndose en la preferida de miles de developers a nivel mundial para diseñar páginas web y aplicaciones dinámicas con un frontend óptimo y que sea del agrado de los usuarios.
React es una biblioteca de código abierto creada por Facebook. React, o ReactJS, permite a los desarrolladores crear interfaces de usuario de manera rápida y eficiente al incluir archivos Java en su HTML. Es una de las bibliotecas de Java más populares del mundo y la utilizan grandes plataformas como Netflix, Airbnb e incluso Walmart.
Como mencionamos anteriormente, React se utiliza en la mayoría de los casos para diseñar el frontend de una aplicación o sitio web. Otra de las tecnologías que también domina este campo es Bootstrap.
En su página web oficial, definen Bootstrap como “el kit de herramientas de código abierto de front-end más popular del mundo, que incluye variables y mixins de Sass, un sistema de cuadrícula receptivo, amplios componentes preconstruidos y potentes complementos de JavaScript”.
¿Cómo utilizar Bootstrap en React?
Es posible integrar ambas tecnologías para trabajar en el frontend de una aplicación o sitio web y te explicamos el paso a paso:
Usando BootstrapCDN
Usando BootstrapCDN es la manera más sencilla de añadir Bootstrap a tu aplicación React. No se requiere instalaciones o descargas, solo coloca un link en la sección head de tu aplicación, de esta manera:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
Para utilizar componentes de JavaScript que vengan con Bootstrap, necesitas colocar el siguiente script cerca del final de tus páginas para activarlos:
<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>
Si estás utilizando create-react-app para desarrollar tu aplicación, entonces tu página public/index.html debe verse así:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4"
crossorigin="anonymous">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
<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>
</body>
</html>
Ahora puede comenzar a usar las clases integradas de Bootstrap y los componentes de JavaScript en los componentes de su aplicación React. Nuestros expertos en Rootstack han utilizado React para dar pronta y efectiva solución a los problemas que han presentado nuestros más de 200 clientes internacionales. No dudes en contactarnos y comienza ya tu camino en el mundo del internet.
Te recomendamos en video
Related Blogs
¿Por qué el desarrollo móvil es tan especial?
Red Hat Enterprise Linux 9 para gestión de contenedores
Agencia de desarrollo de aplicaciones móviles en Medellín
¿Cuáles son los elementos esenciales del desarrollo móvil?
Cómo crear una aplicación móvil con Microsoft Xamarin
