리액트스트랩과 리액트 부트스트랩의 차이점은 무엇입니까?

리액트스트랩과 리액트 부트스트랩의 차이점은 무엇입니까?

reactj에 대해 두 개의 다른 부트스트랩을 찾았습니다.

1. npm install --save reactstrap react-dom
2. npm install react-bootstrap 부트스트랩

이 둘의 기본과 주요 차이점은 무엇입니까?

저도 이 문제에 대해 고민해 왔습니다만, @Besart Marku씨의 말대로, 매우 높은 평가를 받고 있습니다.

한 가지 다른 점은 reactstraps 문서에서는 많은 코드 예에서 상태를 사용한다는 것입니다.

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은 함수와 후크를 사용합니다.

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 />);

둘 중 하나가 다른 것보다 낫다고 대답하지 않고 선호하며, 저는 Hooks보다 클래스 컴포넌트를 더 많이 사용하는 경향이 있기 때문에 최소한의 노력으로 수정할 수 있는 예를 완성한 것이 성공했습니다.

두 라이브러리는 서로 다르지만 둘 다 부트스트랩 컴포넌트를 기반으로 합니다.

https://www.npmtrends.com/react-bootstrap-vs-reactstrap 에 관한 통계 정보가 기재되어 있습니다.

내 2펜스를 더 넣어야 할 것 같아서요.저는 React로 옮기기 전에 Android 개발을 통해 React Native를 배우고 있었습니다.

Reactstrap을 사용한 전자의 방법은 Web Development와 Bootstrap을 사용한 방법에 가깝습니다.후자는 React Native에서 작업을 수행한 방법(컴포넌트 기반 개발)에 가깝습니다.

사용 예에 따라 다르지만, 움직이는 부품이 많은 동적 페이지가 있는 경우에는 React-Bootstrap 라이브러리를 사용하는 것이 좋습니다.이는 구현이 컴포넌트 모델에 훨씬 가깝기 때문입니다(이전 Reactstrap 라이브러리에서는 사용할 수 없는 것이 아닙니다).

일단 Reactstrap을 선택하게 된 것은 Bootstrap 4를 바로 사용할 수 있기 때문입니다.이것은 제가 필요로 하는 것입니다.

공식 문서:

• 리액트 부트스트랩
• 리액트스트랩

양쪽 모두 사용 관점에서 동일한 방식으로 작동합니다.

• 그들은 필요하다npm install bootstrap inside 또는 를 사용하여 with index.js를 .import 'bootstrap/dist/css/bootstrap.min.css';ReactJS의 HTML의 부트스트랩 CSS의 부트스트랩 CSS의 설정.

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
);

• 직접 DOM 조작과 함께 JQuery 또는 Javascript를 사용할 필요 없이 JSX로 재설계된 즉시 사용할 수 있는 부트스트랩 컴포넌트를 제공합니다(React는 이미 기본 동작하므로 Virtual DOM을 사용합니다).
• 백그라운드, 사용React.createElement컴포넌트를 렌더링한다.

소품

부품에 전달되는 소품은 패키지에 따라 이름이 다를 수 있습니다.버튼 색상 사용법 참조: 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;

소품명이 다르다.color그리고.variant그러나 렌더링된 HTML은 DevTools에서 볼 수 있듯이 거의 동일합니다.

비하인드

두 구현 모두 표시하여 기본 컴포넌트를 비교할 수 있습니다.Button패키지 소스 코드:

• node_module\model-bootstrap\models\modelsButton.js(부트스트랩 대응^1.6.0);
• node_modules\reactstrap\dist\reactstrap.cjs.js 행:930 (Reactstrap v^8.9.0);

리액트 부트스트랩

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"];

리액트스트랩

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);

시제품 사용에 대한 접근법과 같은 몇 가지 차이에도 불구하고reactstrap구현, 특히 이 구성 요소에서 일부 추가 소품 처리에는 일반적으로 이들 사이에 큰 차이가 없다.

컴포넌트 리스트

사용 가능한 컴포넌트는 80~90% 동일하며, 이름만 다를 뿐입니다.

리액트 부트스트랩:경고, 아코디언, 배지, 브레드크럼, 버튼, 버튼 그룹, 카드, 회전목마, 드롭다운, 그림, 폼, 입력 그룹, 이미지, 점보트론, 리스트 그룹, 모듈, 내비게이션, 오버레이, 페이지, 팝오버, 프로그레스, 스피너 탭, 테이블

리액트스트랩:경고, 배지, 브레드 크럼, 버튼 드롭다운, 버튼, 카드, 회전목마, 접기, 드롭다운, 페이드, 폼, 입력 그룹, 점보트론, 레이아웃, 목록, 목록 그룹, 미디어, 모듈, Navbar, Navs, 페이지화, 페이지화, 진행률, 테이블

벤치마크

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

제 원래 게시글은 이쪽에서 보실 수 있습니다.

저는 React의 전문가는 아니지만, 당신에게 도움이 될 만한 흥미로운 비교를 발견했습니다.https://npmcompare.com/compare/bootstrap,react-bootstrap,reactstrap

그리고 주어진 통계에 따르면 확실한 승자는 react-bootstrap입니다.

감사해요.

언급URL : https://stackoverflow.com/questions/56061590/what-is-difference-between-reactstrap-and-react-bootstrap