twitter-bootstrap - example - react-bootstrap npm

Ventajas de usar react-bootstrap sobre bootstrap

Question

¿Qué sentido tiene usar react-bootstrap en lugar de Bootstrap antiguo?

Estaba revisando https://react-bootstrap.github.io/components.html y no veo ninguna ventaja. Solo puedo ver que puede traer una dependencia innecesaria al proyecto.

¿Hay alguna dificultad en usar Bootstrap simple en proyectos React / Redux?

** EDIT **

¿Deducir de leer https://react-bootstrap.github.io/introduction.html es lo único que react-bootstrap me da la taquigrafía para los nombres de clase? A continuación se muestran los ejemplos de la misma página.

En plain boostrap lo haría:

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

Y en react-boostrap :

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

Todos estos bsStyle, bsSize, ... de react-boostrap son las cosas que a la gente no le gustó en Angular que han recordado todas esas etiquetas ng-* ... Personalmente no me importa, pero si es lo único que react-bootstrap me da utilizaré twitter-bootstrap . ¿O me perdí algo?

Answer 1

Bootstrap crea el componente React para ti. La ventaja será obvia si considera cómo hacer una animación con la ayuda de bootstrap en el proyecto React

Sin react-bootstrap, necesita algo como CSSTransitionGroup, no puede aprovechar la API de bootstrap porque manipulará el DOM, lo que hará que React sea impredecible, y bootstrap ocultará los detalles de su API de animación. Es decir, no puede usar en absoluto

Sin embargo, con el componente bootstrap, no necesita preocuparse por cómo la animación es implementada por bootstrap, solo necesita especificar propiedades y enlaces en un componente y la biblioteca hará el truco, más específicamente, puede agregar algunas envolturas que son no visible para el cliente

Como puede ver, el componente <Fade> y <Transition> se agrega mediante bootstrap

Además, la sintaxis de DOM virtual puede no ser compatible con DOM Como se muestra arriba, poner <input> dentro de <select> es una forma de IU semántica, pero React se quejará. Supongo que el bootstrap puede experimentar un problema similar sin una biblioteca personalizada

Answer 2

Es realmente una cuestión de qué marco de front-end planeas usar. Si va a utilizar jQuery Angular, Ember, Knockout o simple, entonces el Bootstrap tradicional puede ser suficiente para usted. Sin embargo, con React existe una diferencia fundamental en la forma en que el código de la aplicación JavaScript interactúa con el DOM, lo que hace que sea muy difícil trabajar con el enfoque jQuery de Bootstrap, ya que React funciona principalmente con un DOM virtual. Es cierto que el uso de React-Bootstrap reducirá la cantidad de código repetitivo que necesitarías para realizar tareas simples como botones o elementos de formulario, aunque esa no es la ganancia principal.

Answer 3

Si lo entendí correctamente, reaccion-bootstrap es solo una extensión de los componentes para facilitar la vida de quienes no saben sobre html + css.

Si no tiene conocimientos sobre cómo hacer botones, menús, diseños, etc., usted mismo con html + css + js, le aconsejo que use bootstrap.

React no te da el diseño de botones y menús, por ejemplo.

Aquí está el enlace de facebook de por qué usar reaccionar:

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

Escogí React a pesar de angular porque es más fácil aprender a reaccionar si ya sabes javascript.

Si necesita usar bootstrap, le aconsejo que use solo twitter-bootstrap porque puede personalizar su diseño simplemente agregando otro archivo css después de bootstrap.css