Преимущества использования реактивного бутстрапа над бутстрапом

Какой смысл использовать react-bootstrap поверх простого старого Bootstrap?

Я проходил через https://react-bootstrap.github.io/components.html, и я не вижу никакого преимущества. Я могу только видеть, что это может привести к ненужной зависимости от проекта.

Есть ли трудности в использовании простого Bootstrap в проектах React/Redux?

** РЕДАКТИРОВАТЬ **

Отключение от чтения https://react-bootstrap.github.io/introduction.html - это единственное, что react-bootstrap дает мне сокращение имен классов? Ниже приведены примеры одной и той же страницы.

В plain boostrap я бы сделал:

var button = React.DOM.button({
  className: "btn btn-lg btn-success",
  children: "Register"
});

React.render(button, mountNode);

И в react-boostrap:

var button = ReactBootstrap.Button({
  bsStyle: "success",
  bsSize: "large",
  children: "Register"
});

React.render(button, mountNode);

Все эти bsStyle, bsSize, ... из react-boostrap - это те вещи, которые не понравились на Angular, которые помнят все теги ng-*... Я лично не против, но если это единственное, что react-bootstrap дает мне использовать twitter-bootstrap. Или я что-то пропустил?

Ответы

Ответ 1

React-bootstrap создает компоненты React для вас.

Преимущество будет очевидно, если вы подумаете, как сделать анимацию с помощью начальной загрузки в вашем проекте React.

Без реакции-начальной загрузки вам нужно что-то вроде CSSTransitionGroup. Вы не можете воспользоваться API-интерфейсом начальной загрузки, поскольку он будет манипулировать DOM, что делает поведение React непредсказуемым. Кроме того, bootstrap скроет детали своего API анимации; то есть вы не можете использовать его вообще.

Однако с компонентами начальной загрузки вам не нужно беспокоиться о том, как анимация реализована с помощью начальной загрузки, вам просто нужно указать свойства и перехватчики в компоненте, и библиотека сделает свое дело. Более конкретно, он может добавить некоторые обертки, которые не видны клиенту.

enter image description here

Как вы можете видеть выше, компоненты <Fade> и <Transition> добавляются загрузчиком.

Кроме того, синтаксис виртуального DOM может быть несовместим с DOM:

enter image description here

Как показано выше, размещение <input> внутри <select> является способом семантического пользовательского интерфейса, но React будет жаловаться. Я ожидаю, что при начальной загрузке могут возникнуть подобные проблемы без настраиваемой библиотеки.

Ответ 2

Это действительно вопрос о том, какой интерфейс вы планируете использовать. Если вы собираетесь использовать Angular, Ember, Knockout или обычный старый jQuery, тогда вам может быть достаточно обычного Bootstrap. С React, хотя есть фундаментальное различие в том, как код приложения JavaScript взаимодействует с DOM, что очень затрудняет работу с jQuery-подходом из Bootstrap, поскольку React работает в основном с виртуальным DOM. Это правда, что использование React-Bootstrap приведет к уменьшению количества кода шаблона, который вам потребуется для выполнения простых задач, таких как кнопки или элементы формы, хотя это не первичный коэффициент усиления.

Ответ 3

Если я правильно понял, реакция-бутстрап - это просто расширение компонентов, чтобы облегчить жизнь, которая не знает о html + css.

Если у вас нет знаний о том, как делать кнопки, меню, макеты и т.д. самостоятельно с помощью html + css + js, я советую вам использовать загрузку.

React не дает вам дизайн кнопок и меню, например.

Вот ссылка из facebook, почему нужно использовать реакцию:

https://facebook.github.io/react/docs/why-react.html

Я выбрал React несмотря на angular, потому что легче понять, если вы уже знаете javascript.

Если вам нужно использовать bootstrap, я советую вам использовать только твиттер-бутстрап, потому что вы можете настроить свой макет, просто добавив еще один файл css после bootstrap.css