Vantaggi dell'uso di react-bootstrap su bootstrap

Question

Che senso ha usare react-bootstrap su un semplice Bootstrap vecchio?

Stavo passando per https://react-bootstrap.github.io/components.html e non vedo alcun vantaggio. Posso solo vedere che può portare dipendenza non necessaria al progetto.

C'è qualche difficoltà nell'usare Bootstrap in chiaro nei progetti React/Redux?

** EDIT **

dedurre dalla lettura https://react-bootstrap.github.io/introduction.html è l'unica cosa che mi dà react-bootstrap la scorciatoia per i nomi delle classi? Di seguito sono riportati gli esempi della stessa pagina.

In plain boostrap farei:

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

React.render(button, mountNode); 

E in react-boostrap:

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

React.render(button, mountNode); 

Tutti questi bsStyle, bsSize, ... da react-boostrap sono le cose che la gente non piace il Angular che hanno ricordare tutti coloro ng-* tag ... Personalmente non mi dispiace, ma se è l'unica cosa che mi dà react-bootstrap userò twitter-bootstrap. O mi sono perso qualcosa?

Answer 1

Bootstrap crea il componente React per te. Il vantaggio sarà ovvio se si considera come fare animazione con l'aiuto di bootstrap nel progetto React

Senza react-bootstrap, è necessario qualcosa come CSSTransitionGroup, non è possibile sfruttare l'API di bootstrap perché manipolerà DOM, che rendere il React imprevedibile, e bootstrap nasconderà i dettagli della loro API di animazione. Questo vuol dire che non puoi usarlo affatto

Con il componente bootstrap, tuttavia, non devi preoccuparti di come l'animazione è implementata da bootstrap, hai solo bisogno di specificare proprietà e hook in un componente e la libreria farà il trucco, in particolare, può aggiungere alcuni wrapper che non sono visibili al client

Come si può vedere sopra <Fade> e <Transition> componente è aggiunto bootstrap

Inoltre, la sintassi di DOM virtuale potrebbe non essere compatibile con DOM come esposizione precedenza, messi <input> all'interno di un <select> è un modo dell'interfaccia utente semantica, ma React si lamenterà. Mi aspetto che il bootstrap possa riscontrare problemi simili senza una libreria personalizzata

Answer 2

Se ho capito bene, react-bootstrap è solo un'estensione di componenti per rendere facile la vita di chi non sa di html + css.

Se non si dispone della conoscenza di pulsanti, menu, layout ed ecc. Da soli con html + css + js, consiglio di utilizzare il bootstrap.

React non offre il design di pulsanti e menu, ad esempio.

ecco il link da facebook del motivo per cui l'uso reagiscono:

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

Ho scelto Reagire nonostante angolare perché è più facile da imparare reagire se si conosce già javascript.

Se è necessario utilizzare consiglio che bootstrap di utilizzare solo twitter-bootstrap, perché è possibile personalizzare il layout solo l'aggiunta di un altro file css dopo bootstrap.css

Answer 3

E 'davvero una questione di quale quadro front-end si prevede usare. Se vuoi usare Angular, Ember, Knockout o plain jQuery, il tradizionale Bootstrap potrebbe essere sufficiente per te. Con React però c'è una differenza fondamentale nel modo in cui il codice dell'applicazione JavaScript interagisce con il DOM che rende molto difficile lavorare con l'approccio jQuery da Bootstrap poiché React funziona principalmente con un DOM virtuale. È vero che l'utilizzo di React-Bootstrap ridurrà la quantità di codice boilerplate che ti servirà per eseguire semplici operazioni come pulsanti o elementi Form, anche se questo non è il guadagno principale.