Bootstrap es uno de los conjuntos de herramientas front-end de código abierto más populares para desarrollar proyectos front-end receptivos y móviles en la web. Contiene varios tipos de plantillas de diseño basadas en CSS y JavaScript. Tiene varios componentes prediseñados, como acordeón, alertas, carrusel, botón, tarjeta, migas de pan, etc. En lugar de escribir código desde cero, se pueden usar plantillas de arranque para facilitar el trabajo. Hay varias formas de usar Bootstrap en su proyecto local, como usar Bootstrap CDN o instalar Bootstrap en React JS.
Sin embargo, usar Bootstrap CDN es una forma más fácil de agregar Bootstrap al proyecto. No es necesario instalar ni descargar ningún paquete. Uno puede agregar simplemente colocando un <enlace> en la sección <encabezado> del archivo o aplicación de reacción. Pero hoy vamos a discutir cómo se puede instalar Bootstrap en React JS.
Los siguientes son algunos pasos para instalar Bootstrap: –
- Crear aplicación de reacción
- Abra la terminal y cambie el directorio a la ruta de su proyecto actual
- Ejecute el comando de instalación npm (administrador de paquetes de Nodes) seguido del nombre del paquete y la versión (opcional).
Después de la instalación, uno puede usar Bootstrap simplemente importando la dependencia de bootstrap en su archivo React JS. Después de importar CSS minimizado de Bootstrap como la dependencia, podemos usar clases de arranque integradas en nuestros componentes de la aplicación React. Pero para usar los componentes de JavaScript de Bootstrap en nuestra aplicación React, debemos instalar jquery y popper.js de manera similar usando npm install.
Creando una aplicación de reacción:
Paso 1: cree una aplicación React con el siguiente comando. Escriba el siguiente comando dentro de la terminal y presione enter. (En lugar de gfg, puede usar el nombre de carpeta de su elección).
npx create-react-app gfg
Paso 2: cambie el directorio a la carpeta del proyecto ingresando el siguiente comando.
cd gfg
Estructura del proyecto: ahora estamos en nuestro directorio de proyectos. Como creamos ReactJS con éxito, instalemos el paquete requerido. Después de crear la aplicación React, la estructura de nuestro proyecto sería similar a la siguiente.
Estructura del proyecto
Paso 3: Ejecute el siguiente comando en la terminal. Verifique si está en el directorio de la aplicación React o no. Por comodidad, he tomado F:\gfg como mi directorio de trabajo actual, el directorio de mi aplicación React ( gfg).
npm install bootstrap
Si observa en el comando anterior, no he mencionado la versión de bootstrap. De forma predeterminada, instalará la última versión de bootstrap. Pero si está siguiendo algunos tutoriales, cursos o desea crear su aplicación React JS en una versión particular de arranque, puede hacerlo pasando ‘@version’ justo después de arranque que es npm install bootstrap@4.1 donde 4.1 es el nombre de la versión.
Nuestro directorio de trabajo actual es F:/gfg. Bootstrap ahora se instaló correctamente, puede verificar buscando en la carpeta de arranque dentro de la carpeta node_modules .
Carpeta Bootstrap dentro de node_modules
También puede observar algunos cambios en su archivo package.json después de instalar bootstrap, se agrega una entrada dentro de la parte de dependencias de package.json similar a «bootstrap»: «versión».
paquete.json
Bootstrap dentro de las dependencias después de la instalación
Paso 4: a partir de ahora, bootstrap se instaló correctamente en la aplicación React, pero para usarlo debemos importarlo dentro del archivo React. Estoy importando el archivo CSS minificado de Bootstrap y el archivo de paquete minificado de JavaScript de Bootstrap dentro de index.js que se encuentra en F:\gfg\src .
import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/js/bootstrap.bundle.min';
Se requieren las dos declaraciones anteriores en nuestro index.js para importar dependencias dentro del archivo React para usar clases de arranque en nuestros componentes de la aplicación React.
Nombre de archivo: index.js
Javascript
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Explicación: el código anterior probablemente se vería como index.js, excepto que las líneas 1 y 2 no se importan como dependencias dentro de index.js de manera predeterminada al crear la aplicación React. En las líneas 1 y 2 hemos importado bootstrap minified css y bootstrap javascript minified bundle . Ahora podemos usar clases de arranque dentro de los componentes de nuestra aplicación React.
Paso 5: Estamos listos para usar las clases integradas de Bootstrap, pero para usar los componentes de JavaScript de Bootstrap en nuestra aplicación de reacción, debemos instalar popper.js y jquery. En caso de que no estén instalados ya. Para instalar tanto jquery como popper.js, escriba la siguiente línea en la terminal y presione enter.
npm install jquery popper.js
Después de instalar esto, importe de manera similar estas dos dependencias en su archivo React JS, en este caso, index.js . Las siguientes son las declaraciones para importar estas dos dependencias.
import $ from 'jquery'; import Popper from 'popper.js';
Después de realizar todos estos cambios adicionales, su archivo index.js debería tener el siguiente aspecto
Nombre de archivo: index.js
Javascript
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min';
import $ from 'jquery';
import Popper from 'popper.js';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance
// in your app, pass a function to log results
// (for example: reportWebVitals(console.log))
// or send to an analytics endpoint.
reportWebVitals();
Paso 6: usemos el botón de arranque simple en nuestra aplicación React. Para eso, tenemos que importar bootstrap minified css y bootstrap javascript minified bundle como una dependencia en nuestro archivo index.js. Y agregue un botón en nuestro archivo index.js predeterminado. Como ya hicimos. Después de eso, tenemos que agregar un botón dentro de nuestra aplicación para agregar el siguiente código dentro de App.js.
Nombre de archivo: App.js
Javascript
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<a className="btn btn-primary"
data-bs-toggle="collapse"
href="#collapseExample"
role="button"
aria-expanded="false"
aria-controls="collapseExample">
Bootstrap button
</a>
</header>
</div>
);
}
export default App;
Paso para ejecutar la aplicación: guarde su archivo y ejecute el servidor npm ingresando el siguiente comando en la terminal.
npm start
Salida: después de ejecutar el servidor, su salida se vería así
PRODUCCIÓN