reactstrap 和 react-bootstrap 的区别

Bootstrap 是一种流行的前端 CSS 框架，Web 开发人员使用它来设计他们的 Web 应用程序。 Bootstrap 组件包括 HTML、CSS 和 JavaScript 以及其他依赖项，例如 jQuery，这使得它很难在 React 应用程序中使用。有两个可用的库，它们是 reactstrap 和 react-bootstrap，可以帮助我们克服这个问题。两个库对 Bootstrap 组件都有类似的方法。但是，这两个库之间存在细微的差异，根据要求，这使得一个库比另一个库更可取。

让我们来看看两者之间的比较：

PARAMETER	REACT-BOOTSTRAP	REACTSTRAP
Created	Dec 28, 2013	Feb 19, 2016
Description	React-Bootstrap is Bootstrap 4 components built with React	Reactstrap is stateless React Bootstrap 4 components
Last Updated	Oct 19, 2020	Oct 17, 2020
Licenses	MIT	MIT
Versions	155	200
Dependencies	provides own implementation for animations and positioning.	depends on react-transition group and react-popper for animations and positioning of popups.
Exclusion	No more dependencies on Javascript and jquery	It does not include Bootstrap CSS and is not dependent on Javascript or jquery
Stars	18, 456	9594
Open issues	117	224
Downloads	More number of downloads	Lesser number of downloads
Installation	npm install react-bootstrap	npm install reactstrap
Uninstall	npm uninstall react-bootstrap	npm uninstall reactstrap

反应引导：

以下是创建一个简单的 react-bootstrap 应用程序的步骤

npm install -g create-react-app

create-react-app my_app

cd my_app/

npm start

在“http://localhost:3000/”打开应用程序

添加引导程序：

npm install react-bootstrap bootstrap

在“myapp”目录中，有一个“src”文件夹，里面有我们感兴趣的“index.js”和“App.js”文件。在每个文件中编写如下代码如下，在http://localhost:3000/查看app

App.js 文件： “App.js”文件包含以下代码。

Javascript

// Importing individual react components
import React from 'react';
  
import Jumbotron from 'react-bootstrap/Jumbotron';
import Container from 'react-bootstrap/Container';
import Button from 'react-bootstrap/Button';
  
// App function is created which contains the html
// code that is displayed in the webpage
const App = () => (
  
    
      
Welcome To React-Bootstrap
      Click here
    
  
);
  
export default App;

index.js： “index.js”文件有以下代码。

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
  
// Importing the Bootstrap CSS
import 'bootstrap/dist/css/bootstrap.min.css';
  
ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);
  
// For faster loading and working of app,
// you can change unregister() to register()
// below. Note this comes with some pitfalls.
// Learn more about service workers: 
// https://bit.ly/CRA-PWA
serviceWorker.unregister();

输出：

反应带：

以下是创建一个简单的 reactstrap 应用程序的步骤

npm install -g create-react-app

create-react-app myapp

cd myapp/

npm start

打开“http://localhost:3000/”以查看您的应用程序。

添加引导程序：

npm i bootstrap

npm i reactstrap react react-dom

在“myapp”目录中，有一个“src”文件夹，里面有我们感兴趣的“index.js”和“App.js”文件。在每个文件中编写如下代码如下，在http://localhost:3000/查看app

App.js： “App.js”文件包含以下代码。

Javascript

// Importing individual react components to 
// reduce the code size
import React, { Component } from 'react';
import { Button } from 'reactstrap';
import { Jumbotron } from 'reactstrap';
import { Row } from 'reactstrap';
import { Col } from 'reactstrap';
import { Container } from 'reactstrap';
  
// This is what is displayed on the webpage
// we create a jumbotron having a message
// and a button
class App extends Component {
    render() {
        return (
            

                
                    
                        
                            
                                
Welcome to Reactstrap
                                

                                    
                                        Click Me
                                    
                                
                            
                        
                    
                
            
        );
    }
}
  
export default App;

index.js： “index.js”文件有以下代码。

Javascript

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
  
import 'bootstrap/dist/css/bootstrap.css';
  
ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);
  
// If you want your app to work offline
// and load faster, you can change
// unregister() to register() below. 
// Note this comes with some pitfalls.
// Learn more about service workers: 
// https://bit.ly/CRA-PWA
serviceWorker.unregister();

输出：

结论：

Reactstrap使用类组件，而React-bootstrap使用函数和钩子。两种代码产生相似的输出，唯一的区别是组件的使用。用户可以根据自己的喜好进行选择。