twitter-bootstrap 使用 react-bootstrap 优于 bootstrap 的优点

Advantages of using react-bootstrap over bootstrap

提问by Amio.io

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

在普通的旧 Bootstrap 上使用react-bootstrap有什么意义？

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

我正在浏览https://react-bootstrap.github.io/components.html，但我没有看到任何优势。我只能看到它会给项目带来不必要的依赖。

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

在 React/Redux 项目中使用普通 Bootstrap 有什么困难吗？

**EDIT **

**编辑 **

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

从阅读https://react-bootstrap.github.io/introduction.html推断是唯一react-bootstrap给我类名速记的东西？以下是同一页面的示例。

In plain boostrapI'd do:

在plain boostrap我会做：

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

React.render(button, mountNode);

And in react-boostrap:

并在react-boostrap：

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

React.render(button, mountNode);

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

所有这些bsStyle, bsSize, ...来自react-boostrap人们不喜欢的东西Angular，它们记住了所有这些ng-*标签......我个人不介意但如果它是唯一react-bootstrap给我的东西，我会使用twitter-bootstrap。还是我错过了什么？

采纳答案by Guichi

React-bootstrap creates React components for you.

React-bootstrap 为你创建 React 组件。

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

如果您考虑如何在 React 项目中借助引导程序来制作动画，那么优势将是显而易见的。

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.

如果没有 react-bootstrap，你需要像 CSSTransitionGroup 这样的东西。你不能利用 bootstrap 的 API，因为它会操纵 DOM，这使得 React 行为不可预测。此外，bootstrap 将隐藏其动画 API 的详细信息；也就是说，你根本不能使用它。

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.

但是，使用引导程序组件，您无需担心引导程序如何实现动画，您只需要在组件中指定属性和钩子，库就会完成任务。更具体地说，它可以添加一些对客户端不可见的包装器。

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

正如你可以在上面看到，<Fade>并且<Transition>组件由引导增加。

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

此外，虚拟 DOM 的语法可能与 DOM 不兼容：

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.

如上所示，放入<input>a<select>是语义 UI 的一种方式，但 React 会抱怨。我希望引导程序在没有自定义库的情况下可能会遇到类似的问题。

回答by Alessander Fran?a

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

如果我理解正确的话，react-bootstrap 只是组件的扩展，它可以简化不了解 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.

如果您不具备使用 html+css+js 自己制作按钮、菜单、布局等的知识，我建议您使用 bootstrap。

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

例如，React 不会为您提供按钮和菜单的设计。

Here is the link from facebook of why use react:

这是 facebook 上关于为什么使用 react 的链接：

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

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.

尽管有 angular，我还是选择了 React，因为如果您已经了解 javascript，那么学习 React 会更容易。

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

如果您需要使用引导程序，我建议您只使用 twitter-bootstrap，因为您可以自定义布局，只需在 bootstrap.css 之后添加另一个 css 文件

回答by Matt Smith

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.

这实际上是您计划使用什么前端框架的问题。如果您打算使用 Angular、Ember、Knockout 或普通的 jQuery，那么传统的 Bootstrap 可能对您来说就足够了。尽管使用 React 在 JavaScript 应用程序代码与 DOM 交互的方式上存在根本差异，这使得 Bootstrap 中的 jQuery 方法很难使用，因为 React 主要使用虚拟 DOM。确实，使用 React-Bootstrap 将减少执行简单任务（如按钮或表单元素）所需的样板代码量，尽管这不是主要收益。

回答by Johnp007

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

Bootstrap 框架的优点：1. 支持 JavaScript 和 jQuery 插件 2. 框架容易理解 3. 学习和实践容易 4. 工具的组件可以再次使用 5. 兼容所有类型的浏览器

Advantages of React Framework1. 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.

React Framework 的优点1. 提高生产力 2. 不断编码 3. 搜索引擎优化友好操作。4. 本工具可供所有厂商使用。5. 制作内容新鲜的动态网站。6. 使用过的组件可以重复使用。

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

在此处阅读更多信息：https: //techidology.com/bootstrap-vs-reactjs/