Bootstrap es un marco CSS front-end popular que utilizan los desarrolladores web para diseñar sus aplicaciones web. Los componentes de Bootstrap incluyen HTML, CSS y JavaScript con dependencias adicionales como jQuery, lo que dificulta su uso en aplicaciones React. Hay dos bibliotecas disponibles que son reactstrap y react-bootstrap que nos ayudan a superar este problema. Ambas bibliotecas tienen un enfoque similar a los componentes de Bootstrap. Sin embargo, existen diferencias menores entre las dos bibliotecas que hacen que una sea preferible a la otra según los requisitos.
Veamos una comparación entre ambos:
PARÁMETRO | REACT-BOOTSTRAP | CORREA DE REACCIÓN |
---|---|---|
Creado | 28 de diciembre de 2013 | 19 de febrero de 2016 |
Descripción | React-Bootstrap son componentes de Bootstrap 4 construidos con React | Reactstrap es componentes de React Bootstrap 4 sin estado |
Última actualización | 19 de octubre de 2020 | 17 de octubre de 2020 |
Licencias | MIT | MIT |
Versiones | 155 | 200 |
dependencias | proporciona implementación propia para animaciones y posicionamiento. | depende del grupo de transición de reacción y popper de reacción para las animaciones y el posicionamiento de las ventanas emergentes. |
Exclusión | No más dependencias en Javascript y jquery | No incluye Bootstrap CSS y no depende de Javascript o jquery |
Estrellas | 18, 456 | 9594 |
Problemas abiertos | 117 | 224 |
Descargas | Más número de descargas | Menor número de descargas |
Instalación | npm instalar reaccionar-bootstrap | npm instalar correa de reacción |
Desinstalar | npm desinstalar reaccionar-bootstrap | npm desinstalar reactstrap |
Reaccionar Bootstrap:
Los siguientes son los pasos para crear una aplicación simple de arranque de reacción
npm install -g create-react-app
create-react-app my_app
cd my_app/
npm start
Abra la aplicación en “http://localhost:3000/”
Agregando Bootstrap:
npm install react-bootstrap bootstrap
En el directorio «myapp», hay una carpeta «src» que tiene archivos «index.js» y «App.js» que son de nuestro interés. Escriba el siguiente código en cada archivo de la siguiente manera y vea la aplicación en http://localhost:3000/
Archivo App.js: El archivo “App.js” tiene el siguiente código.
Javascript
// Importing individual react components import React from 'react'; import Jumbotron from 'react-bootstrap/Jumbotron'; import Container from 'react-bootstrap/Container'; import Button from 'react-bootstrap/Button'; // App function is created which contains the html // code that is displayed in the webpage const App = () => ( <Container className="p-3"> <Jumbotron> <h1 className="header">Welcome To React-Bootstrap</h1> <Button variant="danger">Click here</Button> </Jumbotron> </Container> ); export default App;
index.js: El archivo “index.js” tiene el siguiente código.
Javascript
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; // Importing the Bootstrap CSS import 'bootstrap/dist/css/bootstrap.min.css'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); // For faster loading and working of app, // you can change unregister() to register() // below. Note this comes with some pitfalls. // Learn more about service workers: // https://bit.ly/CRA-PWA serviceWorker.unregister();
Producción:
Correa de reacción:
Los siguientes son los pasos para crear una aplicación simple de reactstrap
npm install -g create-react-app
create-react-app myapp
cd myapp/
npm start
Abra «http://localhost:3000/» para ver su aplicación.
Agregando Bootstrap:
npm i bootstrap
npm i reactstrap react react-dom
En el directorio «myapp», hay una carpeta «src» que tiene archivos «index.js» y «App.js» que son de nuestro interés. Escriba el siguiente código en cada archivo de la siguiente manera y vea la aplicación en http://localhost:3000/
App.js: El archivo “App.js” tiene el siguiente código.
Javascript
// Importing individual react components to // reduce the code size import React, { Component } from 'react'; import { Button } from 'reactstrap'; import { Jumbotron } from 'reactstrap'; import { Row } from 'reactstrap'; import { Col } from 'reactstrap'; import { Container } from 'reactstrap'; // This is what is displayed on the webpage // we create a jumbotron having a message // and a button class App extends Component { render() { return ( <div> <Jumbotron> <Container> <Row> <Col> <h1>Welcome to Reactstrap</h1> <p> <Button color="danger"> Click Me </Button> </p> </Col> </Row> </Container> </Jumbotron> </div> ); } } export default App;
index.js: El archivo “index.js” tiene el siguiente código.
Javascript
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import 'bootstrap/dist/css/bootstrap.css'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); // If you want your app to work offline // and load faster, you can change // unregister() to register() below. // Note this comes with some pitfalls. // Learn more about service workers: // https://bit.ly/CRA-PWA serviceWorker.unregister();
Producción:
Conclusión:
Reactstrap utiliza componentes de clase, mientras que React-bootstrap utiliza funciones y ganchos. Ambos códigos producen resultados similares y la única diferencia es el uso de los componentes. El usuario podrá optar por cualquiera en función de sus preferencias.
Publicación traducida automáticamente
Artículo escrito por Shreyasi_Chakraborty y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA