reactstrap和react-bootstrap之间的区别

Bootstrap是Web开发人员用来设计其Web应用程序的一种流行的前端CSS框架。 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：

以下是创建简单的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.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”文件具有以下代码。

Java脚本

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：

以下是创建简单的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.js： “ App.js”文件具有以下代码。

Java脚本

// 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”文件具有以下代码。

Java脚本

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使用函数和钩子。两种代码都产生相似的输出，唯一的区别是组件的使用。用户可以根据自己的喜好进行选择。