Sử dụng bootstrap trong reactjs

Các ứng dụng một trang trở nên phổ biến trong vài năm gần đây, vì vậy nhiều framework front-end đã được giới thiệu như Angular, React, Vue.js, Ember, v.v. Do đó, jQuery không phải là yêu cầu cần thiết để xây dựng ứng dụng web. Ngày nay, React có framework JavaScript được sử dụng nhiều nhất để xây dựng các ứng dụng web và Bootstrap trở thành framework CSS phổ biến nhất. Vì vậy, cần phải tìm hiểu nhiều cách khác nhau mà Bootstrap có thể được sử dụng trong các ứng dụng React, đó là mục đích chính của phần này.

Các bài viết liên quan:

• Thêm Bootstrap cho React
• Sử dụng Bootstrap CDN
• Bootstrap as Dependency
• Gói React Bootstrap
• Cài đặt React Bootstrap
• Sử dụng reactstrap

Thêm Bootstrap cho React

Chúng ta có thể thêm Bootstrap vào ứng dụng React theo một số cách. Dưới đây là ba cách phổ biến nhất:

• Sử dụng Bootstrap CDN
• Bootstrap as Dependency
• Gói React Bootstrap

Sử dụng Bootstrap CDN

Đây là cách dễ nhất để thêm Bootstrap vào ứng dụng React. Không cần cài đặt hoặc tải xuống Bootstrap. Chúng ta có thể chỉ cần đặt một vào phần của tệp index.html của ứng dụng React như được hiển thị trong đoạn mã sau.

Nếu có nhu cầu sử dụng các thành phần Bootstrap phụ thuộc vào JavaScript / jQuery trong ứng dụng React, chúng ta cần đưa jQuery, Popper.js và Bootstrap.js vào tài liệu. Thêm các lần nhập sau vào các thẻ

Trong đoạn mã trên, chúng tôi đã sử dụng phiên bản slim của jQuery, mặc dù chúng tôi cũng có thể sử dụng phiên bản đầy đủ. Bây giờ, Bootstrap đã được thêm thành công trong ứng dụng React và chúng ta có thể sử dụng tất cả các tiện ích CSS và các thành phần giao diện người dùng có sẵn từ Bootstrap trong ứng dụng React.

Bootstrap as Dependency

Nếu chúng ta đang sử dụng một công cụ xây dựng hoặc một trình gói mô-đun như Webpack, thì nhập Bootstrap làm phụ thuộc là tùy chọn ưu tiên để thêm Bootstrap vào ứng dụng React. Chúng tôi có thể cài đặt Bootstrap như một phụ thuộc cho ứng dụng React. Để cài đặt Bootstrap, hãy chạy các lệnh sau trong cửa sổ dòng lệnh.

$ npm install bootstrap --save  

Sau khi cài đặt Bootstrap, chúng ta có thể nhập nó vào tệp mục nhập ứng dụng React. Nếu dự án React được tạo bằng công cụ create-react-app, hãy mở tệp src / index.js và thêm mã sau:

import 'bootstrap/dist/css/bootstrap.min.css';  

Bây giờ, chúng ta có thể sử dụng các lớp CSS và các tiện ích trong ứng dụng React. Ngoài ra, nếu chúng ta muốn sử dụng các thành phần JavaScript, chúng ta cần cài đặt các gói jquery và popper.js từ npm. Để cài đặt các gói sau, hãy chạy lệnh sau trong cửa sổ dòng lệnh.

$ npm install jquery popper.js  

Tiếp theo, chuyển đến tệp src / index.js và thêm các lần nhập sau.

import $ from 'jquery';  
import Popper from 'popper.js';  
import 'bootstrap/dist/js/bootstrap.bundle.min';  

Bây giờ, chúng ta có thể sử dụng Bootstrap JavaScript Components trong ứng dụng React.

Gói React Bootstrap

Gói React Bootstrap là cách phổ biến nhất để thêm bootstrap vào ứng dụng React. Có rất nhiều gói Bootstrap được xây dựng bởi cộng đồng, nhằm mục đích xây dựng lại các thành phần Bootstrap như các thành phần React. Hai gói Bootstrap phổ biến nhất là:

react-bootstrap: Đây là một bản tái hiện hoàn chỉnh của các thành phần Bootstrap dưới dạng các thành phần React. Nó không cần bất kỳ phụ thuộc nào như bootstrap.js hoặc jQuery. Nếu thiết lập React và React-Bootstrap được cài đặt, chúng ta có mọi thứ chúng ta cần.

reactstrap: Đây là một thư viện chứa các thành phần React Bootstrap 4 thiên về thành phần và điều khiển. Nó không phụ thuộc vào JavaScript jQuery hoặc Bootstrap. Tuy nhiên, react-popper cần thiết để định vị nội dung nâng cao như Chú giải công cụ, Cửa sổ bật lên và Trình đơn thả xuống tự động lật.

Cài đặt React Bootstrap

Hãy để chúng tôi tạo một ứng dụng React mới bằng cách sử dụng lệnh create-react-app như sau.

$ npx create-react-app react-bootstrap-app

Sau khi tạo ứng dụng React, cách tốt nhất để cài đặt Bootstrap là thông qua gói npm. Để cài đặt Bootstrap, hãy điều hướng đến thư mục ứng dụng React và chạy lệnh sau.

$ npm install react-bootstrap bootstrap --save 

Importing Bootstrap

Bây giờ, mở tệp src / index.js và thêm mã sau để nhập tệp Bootstrap.

import 'bootstrap/dist/css/bootstrap.min.css';  

Chúng tôi cũng có thể nhập các thành phần riêng lẻ như nhập {SplitButton, Dropdown} từ ‘react-bootstrap’; thay vì toàn bộ thư viện. Nó cung cấp các thành phần cụ thể mà chúng ta cần sử dụng và có thể giảm đáng kể số lượng code.

Trong ứng dụng React, hãy tạo một tệp mới có tên ThemeSwitcher.js trong thư mục src và đặt đoạn mã sau.

import React, { Component } from 'react';  
import { SplitButton, Dropdown } from 'react-bootstrap';  
  
class ThemeSwitcher extends Component {  
  
  state = { theme: null }  
    
  chooseTheme = (theme, evt) => {  
    evt.preventDefault();  
    if (theme.toLowerCase() === 'reset') { theme = null }  
    this.setState({ theme });  
  }  
    
  render() {  
    const { theme } = this.state;  
    const themeClass = theme ? theme.toLowerCase() : 'default';  
      
    const parentContainerStyles = {  
      position: 'absolute',  
      height: '100%',  
      width: '100%',  
      display: 'table'  
    };  
      
    const subContainerStyles = {  
      position: 'relative',  
      height: '100%',  
      width: '100%',  
      display: 'table-cell',  
    };  
      
    return (  
      
  
        
  
          
          {theme || 'Default'}  
            
          
  
              
              Primary Theme  
              Danger Theme  
              Success Theme  
                
              Default Theme  
              
          
    
        
  
      
  
    );   
  }   
}  
export default ThemeSwitcher;  

Bây giờ, hãy cập nhật tệp src / index.js bằng đoạn mã sau.

Index.js

import 'bootstrap/dist/css/bootstrap.min.css';  
import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
import './index.css';  
import ThemeSwitcher from './ThemeSwitcher';  
  
ReactDOM.render(, document.getElementById('root'));  

Khi chúng tôi thực thi ứng dụng React, chúng tôi sẽ nhận được kết quả như bên dưới.

React Bootstrap

Nhấp vào menu thả xuống. Chúng ta sẽ nhận được màn hình sau.

Sử dụng reactstrap

Hãy để chúng tôi tạo một ứng dụng React mới bằng cách sử dụng lệnh create-react-app như sau.

$ npx create-react-app reactstrap-app

Tiếp theo, cài đặt reactstrap thông qua gói npm. Để cài đặt reactstrap, hãy điều hướng đến thư mục ứng dụng React và chạy lệnh sau.

$ npm install bootstrap reactstrap --save  

Import Bootstrap

Bây giờ, mở tệp src / index.js và thêm mã sau để nhập tệp Bootstrap.

import 'bootstrap/dist/css/bootstrap.min.css';  

Chúng tôi cũng có thể nhập các thành phần riêng lẻ như nhập {Button, Dropdown} từ ‘reactstrap’; thay vì toàn bộ thư viện. Nó cung cấp các thành phần cụ thể mà chúng ta cần sử dụng và có thể giảm đáng kể số lượng mã.

Trong ứng dụng React, hãy tạo một tệp mới có tên ThemeSwitcher.js trong thư mục src và đặt đoạn mã sau.

import React, { Component } from 'react';  
import { Button, ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';  
  
class ThemeSwitcher extends Component {  
  
  state = { theme: null, dropdownOpen: false }  
    
  toggleDropdown = () => {  
    this.setState({ dropdownOpen: !this.state.dropdownOpen });  
  }  
    
  resetTheme = evt => {  
    evt.preventDefault();  
    this.setState({ theme: null });  
  }  
    
  chooseTheme = (theme, evt) => {  
    evt.preventDefault();  
    this.setState({ theme });  
  }  
  render() {  
    const { theme, dropdownOpen } = this.state;  
    const themeClass = theme ? theme.toLowerCase() : 'secondary';  
      
    return (  
      
  
        
        {theme || 'Default'}  
          
          
          {theme || 'Custom'} Theme  
            
            
             this.chooseTheme('Primary', e)}>Primary Theme  
             this.chooseTheme('Danger', e)}>Danger Theme  
             this.chooseTheme('Success', e)}>Success Theme  
              
            Default Theme  
            
          
          
      
  
    );    
  }  
}  
export default ThemeSwitcher;  

Bây giờ, hãy cập nhật tệp src / index.js bằng đoạn mã sau.

Index.js

import 'bootstrap/dist/css/bootstrap.min.css';  
import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App.js';  
import './index.css';  
import ThemeSwitcher from './ThemeSwitcher';  
  
ReactDOM.render(, document.getElementById('root'));  

Khi chúng tôi thực thi ứng dụng React, chúng tôi sẽ nhận được kết quả như bên dưới.

Nhấp vào menu thả xuống. Chúng ta sẽ nhận được màn hình sau.

Bây giờ, nếu chúng ta chọn Danger  , chúng ta sẽ nhận được màn hình bên dưới.