69

What's the point in using react-bootstrap over plain old Bootstrap?

I was going through https://react-bootstrap.github.io/components.html and I don't see any advantage. I can only see that it can bring unnecessary dependency to the project.

Is there any difficulty in using plain Bootstrap in React/Redux projects?

**EDIT **

Deducing from reading https://react-bootstrap.github.io/introduction.html is the only thing that react-bootstrap gives me the shorthand for class names? Below are the examples of the same page.

In plain boostrap I'd do:

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

React.render(button, mountNode);

And in react-boostrap:

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

React.render(button, mountNode);

All these bsStyle, bsSize, ... from react-boostrap are the things people didn't like on Angular that have remember all those ng-* tags... I personally don't mind it but if it's the only thing that react-bootstrap gives me I will use twitter-bootstrap. Or did I miss something?

Amio.io
  • 20,677
  • 15
  • 82
  • 117

4 Answers4

42

React-bootstrap creates React components for you.

The advantage will be obvious if you consider how to do animations with the help of bootstrap in your React project.

Without react-bootstrap, you need something like CSSTransitionGroup. You cannot take advantage of bootstrap's API because it will manipulate the DOM, which makes the React behavior unpredictable. Also, bootstrap will hide details of their animation API; that is to say,you cannot use it at all.

With bootstrap components, however, you do not need to worry about how the animation is implemented by bootstrap, you just need to specify properties and hooks in a component and the library will do the trick. More specifically, it can add some wrappers which are not visible to the client.

enter image description here

As you can see above, <Fade> and <Transition> component is added by bootstrap.

In addition, the syntax of virtual DOM may not be compatible with DOM:

enter image description here

As shown above, putting <input> inside a <select> is a way of semantic UI, but React will complain. I expect the bootstrap may experience similar issues without a customized library.

Michael Freidgeim
  • 26,542
  • 16
  • 152
  • 170
Guichi
  • 2,150
  • 1
  • 19
  • 27
  • Thx @Guigui. So if I don't need bootstrap transitions I am save even without `react-bootstrap`? – Amio.io Jul 01 '16 at 06:44
  • 2
    @zatziky If you just need html and css part of bootstrap,it should be fine do not use the library .But if you want use js part of bootstrap, the library is a must – Guichi Jul 01 '16 at 06:49
  • 2
    "Bootstrap create React component for you". More accurate would be: "*react-bootstrap* creates React components to make your life easier (if you are using React) since they map with their equivalent Bootstrap components". And react-bootstrap is attempting to be at feature parity with Bootstrap". – Martin Carel Mar 16 '18 at 21:48
  • @MartinCarel thanks! traditional bootstamp view the HTML as a document so just adding styles to document. `react-bootstrap` view HTML as an application, so providing components to a typical application – Guichi Mar 19 '18 at 00:48
  • In my opinion, React does not need to know about animations such as fading and transitioning. Having `` and `` components makes no sense to me. React should only care about state changes relating to data, not presentation. – ESR May 21 '18 at 03:05
  • @EdmundReed So in your opinion, how the animation in a React app come into play? Have a look: https://github.com/reactjs/react-transition-group – Guichi May 21 '18 at 03:50
  • In my opinion, I prefer a system where React is used for rendering data-driven content (and updates/re-renders based on data), and for things like user interactions (such as animations), they would come into play in `componentDidMount` from external JS functions (which would make direct DOM manipulations). I like to keep my interaction logic separate as pure JS so they can be used with or without React, which in my opinion should be used for data-driven logic.I'm still new to React so there's a good chance I'm missing something, though. Interested to hear your thoughts... – ESR May 21 '18 at 04:58
  • @EdmundReed React is definitely not just a library for `state management` as you though. At the very beginning, I also thought it hard to something like `animation` `routing` using `react` declarative style. It, however, turns out that some seemingly hard parts can be performed in clean logic fitting perfectly in React – Guichi May 21 '18 at 08:12
  • aside from animation, is there another reason why use `react-bootstrap` over regular bootstrap? – giuliano-oliveira Oct 13 '20 at 15:24
  • 1
    @giuliano-oliveira there are tons of complications to do in a component other than `css`, the animation is just one of the examples. For example, there is some visual effect is not easily achieved by css. maybe need some help of DOM api or some html tricks – Guichi Oct 14 '20 at 02:13
10

It's really a matter of what front-end framework you plan to use. If you are going to use Angular, Ember, Knockout, or plain old jQuery then traditional Bootstrap may be sufficient for you. With React though there is a fundamental difference in how the JavaScript application code interacts with the DOM that makes the jQuery approach from Bootstrap very difficult to work with since React primarily works with a Virtual DOM. It iss true that using React-Bootstrap will reduce the amount of boilerplate code that you would need to do simple tasks like Buttons or Form elements, though that's not the primary gain.

Matt Smith
  • 483
  • 3
  • 11
3

If I understood correctly, react-bootstrap is just an extension of components to make easy the life whose does not know about html + css.

If you don't have the knowledge about doing buttons, menus, layouts and etc by yourself with html+css+js I advice you to use bootstrap.

React doesn't give you the design of buttons and menus for example.

Here is the link from facebook of why use react:

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

I chose React in spite of angular because it is easier to learn react if you already know javascript.

If you need to use bootstrap I advice you to use only twitter-bootstrap because you can customize your layout just adding another css file after bootstrap.css

Alessander França
  • 2,697
  • 2
  • 29
  • 52
0

Advantages of Bootstrap Framework: 1. It supports JavaScript and jQuery add-ons 2. The framework is easy to understand 3. Learning and practicing is easy 4. The components of the tool can be used again 5. Compatible with all types of browsers

Advantages of React Framework 1. It increases productivity 2. Constant coding 3. Search engine optimization friendly operation. 4. This tool can be used by all firms. 5. Produces dynamic websites with fresh content. 6. Components used can be reused again.

Read more here: https://techidology.com/bootstrap-vs-reactjs/

Johnp007
  • 51
  • 2
  • -1 because question was regarding `bootstrap` by itself, vs. `react-boostrap` lib, which is a React-oriented lib that wraps Bootstrap components into React components – Thiago Silva Aug 10 '20 at 16:52