Quelle est la différence entre reactstrap et react-bootstrap ?

Question

J'ai trouvé deux bootstraps différents pour reactjs

1. npm install --save reactstrap react react-dom
2. npm install react-bootstrap bootstrap

Quelle est la différence fondamentale et principale entre les deux ?

Answer 1

J'ai moi-même lutté contre ce problème et c'est comme @Besart Marku. c'est une question d'opinion.

Une chose qui a fait une différence pour moi est que la documentation de reactstraps utilise l'état dans beaucoup de ses exemples de code :

import React from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

class ModalExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState(prevState => ({
      modal: !prevState.modal
    }));
  }

  render() {
    return (
      <div>
        <Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
          <ModalBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default ModalExample; 

vs react-bootstrap utilise des fonctions et des crochets :

function MyVerticallyCenteredModal(props) {
  return (
    <Modal
      {...props}
      size="lg"
      aria-labelledby="contained-modal-title-vcenter"
      centered
    >
      <Modal.Header closeButton>
        <Modal.Title id="contained-modal-title-vcenter">
          Modal heading
        </Modal.Title>
      </Modal.Header>
      <Modal.Body>
        <h4>Centered Modal</h4>
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
          dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac
          consectetur ac, vestibulum at eros.
        </p>
      </Modal.Body>
      <Modal.Footer>
        <Button onClick={props.onHide}>Close</Button>
      </Modal.Footer>
    </Modal>
  );
}

function App() {
  const [modalShow, setModalShow] = React.useState(false);

  return (
    <ButtonToolbar>
      <Button variant="primary" onClick={() => setModalShow(true)}>
        Launch vertically centered modal
      </Button>

      <MyVerticallyCenteredModal
        show={modalShow}
        onHide={() => setModalShow(false)}
      />
    </ButtonToolbar>
  );
}

render(<App />);

Je ne donne pas une réponse disant que l'un d'entre eux est meilleur que l'autre, c'est une préférence et pour moi personnellement je m'aventure avec reactstrap puisque j'ai tendance à utiliser les composants de classe plus que les crochets, donc avoir des exemples finis que je peux modifier avec un effort minimal a fait l'affaire.

Answer 2

Ce sont deux bibliothèques différentes mais toutes deux basées sur les composants Bootstrap.

Quelques petites statistiques à leur sujet https://www.npmtrends.com/react-bootstrap-vs-reactstrap

Answer 3

J'ai pensé que je devais ajouter mes 2 pence. Je suis venu de l'autre côté, apprenant React Native avec le développement Android avant de passer à React.

La première méthode avec Reactstrap est plus proche de la façon dont nous avons fait les choses avec le développement Web et Bootstrap, tandis que la seconde est plus proche de la façon dont j'ai fait les choses dans React Native, c'est-à-dire le développement basé sur les composants.

Cependant, si vous avez une page dynamique avec beaucoup d'éléments mobiles, je vous suggère d'utiliser la bibliothèque React-Bootstrap, dont l'implémentation est beaucoup plus proche du modèle de composants et qui vous permettra de rendre vos éléments de page réutilisables (même si vous ne pouvez pas le faire avec l'ancienne bibliothèque Reactstrap).

J'ai opté pour Reactstrap pour l'instant, simplement parce qu'il offre toutes les fonctionnalités de Bootstrap 4, ce qui correspond à ce dont j'ai besoin, sans trop de complications.

Answer 4

Documentations officielles :

• React Bootstrap
• Reactstrap

Les deux fonctionnent de la même manière, du point de vue de l'utilisation :

• Ils ont besoin npm install bootstrap pour importer le fichier de feuille de style Bootstrap dans index.js ou App.js pour activer le style par défaut de Bootstrap avec import 'bootstrap/dist/css/bootstrap.min.css'; . ReactJS, par défaut, ajoutera tout le code CSS de Bootstrap dans une balise style à l'intérieur de l'en-tête de la page HTML.

  import { StrictMode } from "react"; import ReactDOM from "react-dom";

  import "bootstrap/dist/css/bootstrap.min.css";

  import App from "./App";

  const rootElement = document.getElementById("root"); ReactDOM.render( <StrictMode> <App /> </StrictMode>, rootElement );

• Donnez-nous des composants Bootstrap prêts à l'emploi, redessinés en interne en tant que JSX, sans avoir besoin d'utiliser JQuery ou Javascript avec une manipulation directe du DOM (en utilisant le DOM virtuel, comme React le fait déjà par défaut) ;

• Dans les coulisses, en utilisant React.createElement pour rendre les composants ;

Props

Les props passés aux composants peuvent avoir des noms différents selon le paquet. Voir l'utilisation de la couleur des boutons : https://codesandbox.io/s/reactbootstrapvsreactstrap-7y87c-7y87c?file=/src/App.js

import React from "react";

import { Button as ReactBootstrapButton } from "react-bootstrap";
import { Button as ReactstrapButton } from "reactstrap";

const App = () => (
  <>
    <ReactBootstrapButton variant="danger">React BootStrap</ReactBootstrapButton>
    <ReactstrapButton color="danger">Reactstrap</ReactstrapButton>
  </>
);

export default App;

Les noms des accessoires sont différents color y variant mais le HTML rendu est à peu près le même, comme nous pouvons le voir dans DevTools :

Les coulisses

Vous pouvez visualiser les deux implémentations, en comparant un composant de base en tant que Button dans le code source des paquets :

• modules de nœuds \react -bootstrap \cjs\Button.js (React Bootstrap ^1.6.0) ;
• modules de nœuds \reactstrap\dist\reactstrap.cjs.js line:930 (Reactstrap v^8.9.0) ;

React Bootstrap

var Button = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
  var bsPrefix = _ref.bsPrefix,
      variant = _ref.variant,
      size = _ref.size,
      active = _ref.active,
      className = _ref.className,
      block = _ref.block,
      type = _ref.type,
      as = _ref.as,
      props = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["bsPrefix", "variant", "size", "active", "className", "block", "type", "as"]);
  var prefix = (0, _ThemeProvider.useBootstrapPrefix)(bsPrefix, 'btn');
  var classes = (0, _classnames.default)(className, prefix, active && 'active', variant && prefix + "-" + variant, block && prefix + "-block", size && prefix + "-" + size);

  if (props.href) {
    return /*#__PURE__*/_react.default.createElement(_SafeAnchor.default, (0, _extends2.default)({}, props, {
      as: as,
      ref: ref,
      className: (0, _classnames.default)(classes, props.disabled && 'disabled')
    }));
  }

  if (ref) {
    props.ref = ref;
  }

  if (type) {
    props.type = type;
  } else if (!as) {
    props.type = 'button';
  }

  var Component = as || 'button';
  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, props, {
    className: classes
  }));
});

Button.displayName = 'Button';
Button.defaultProps = defaultProps;
var _default = Button;
exports.default = _default;
module.exports = exports["default"];

Reactstrap

var Button = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(Button, _React$Component);

  function Button(props) {
    var _this;

    _this = _React$Component.call(this, props) || this;
    _this.onClick = _this.onClick.bind(_assertThisInitialized(_this));
    return _this;
  }

  var _proto = Button.prototype;

  _proto.onClick = function onClick(e) {
    if (this.props.disabled) {
      e.preventDefault();
      return;
    }

    if (this.props.onClick) {
      return this.props.onClick(e);
    }
  };

  _proto.render = function render() {
    var _this$props = this.props,
        active = _this$props.active,
        ariaLabel = _this$props['aria-label'],
        block = _this$props.block,
        className = _this$props.className,
        close = _this$props.close,
        cssModule = _this$props.cssModule,
        color = _this$props.color,
        outline = _this$props.outline,
        size = _this$props.size,
        Tag = _this$props.tag,
        innerRef = _this$props.innerRef,
        attributes = _objectWithoutPropertiesLoose(_this$props, ["active", "aria-label", "block", "className", "close", "cssModule", "color", "outline", "size", "tag", "innerRef"]);

    if (close && typeof attributes.children === 'undefined') {
      attributes.children = /*#__PURE__*/React__default.createElement("span", {
        "aria-hidden": true
      }, "\xD7");
    }

    var btnOutlineColor = "btn" + (outline ? '-outline' : '') + "-" + color;
    var classes = mapToCssModules(classNames(className, {
      close: close
    }, close || 'btn', close || btnOutlineColor, size ? "btn-" + size : false, block ? 'btn-block' : false, {
      active: active,
      disabled: this.props.disabled
    }), cssModule);

    if (attributes.href && Tag === 'button') {
      Tag = 'a';
    }

    var defaultAriaLabel = close ? 'Close' : null;
    return /*#__PURE__*/React__default.createElement(Tag, _extends({
      type: Tag === 'button' && attributes.onClick ? 'button' : undefined
    }, attributes, {
      className: classes,
      ref: innerRef,
      onClick: this.onClick,
      "aria-label": ariaLabel || defaultAriaLabel
    }));
  };

  return Button;
}(React__default.Component);

Malgré quelques différences telles que l'approche avec l'utilisation d'un prototype qui reactstrap met en œuvre, et spécifiquement dans ce composant, la gestion de quelques accessoires supplémentaires, en général, il n'y a pas de différences significatives entre eux.

Liste des composants

Les composants disponibles sont identiques à 80% ou 90%, et certains d'entre eux portent simplement des noms différents.

React Bootstrap : Alertes, Accordion, Badge, Fil d'Ariane, Boutons, Groupe de boutons, Cartes, Carrousel, Dropdowns, Figures, Formulaires, Groupe d'entrées, Images, Jumbotron, Groupe de listes, Modal, Navs, Navbar, Overlays, Pagination, Popovers, Progress, Spinners, Table, Tabs, Tooltips, Toasts.

Reactstrap : Alertes, Badge, Breadcrumbs, Button Dropdown, Button Group, Buttons, Card, Carousel, Collapse, Dropdowns, Fade, Form, Input Group, Jumbotron, Layout, List, List Group, Media, Modals, Navbar, Navs, Pagination, Popovers, Progress, Spinners, Tables, Tabs, Toasts, Tooltips.

Point de repère

• https://www.npmtrends.com/react-bootstrap-vs-reactstrap
• https://npmcompare.com/compare/react-bootstrap,reactstrap

Vous pouvez consulter l'intégralité de mon billet original à ce sujet aquí

Answer 5

Je ne suis pas un expert de React mais j'ai trouvé une comparaison intéressante qui pourrait vous être utile : https://npmcompare.com/compare/bootstrap,react-bootstrap,reactstrap

Et selon les statistiques données, le grand gagnant est react-bootstrap.

Merci.