W3seo Hướng Dẫn Sử Dụng Bootstrap Trong React

Trang chủ » Cách Dùng Bootstrap Trong Reactjs » W3seo Hướng Dẫn Sử Dụng Bootstrap Trong React

Có thể bạn quan tâm

Rate this post

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.

Hướng dẫn khác:

  1. Routing trong React: Hướng Dẫn Chi Tiết
  2. Sử dụng table trong React
  3. ReactJS là gì? cách cài đặt ReactJS
  4. State và Props trong React: Hướng Dẫn Chi Tiết
  5. Sử dụng Context trong React: Hướng dẫn Chi Tiết
  6. Code Splitting trong React: Hướng dẫn Chi Tiết cho Người Mới Bắt Đầu
  7. Redux trong React: Hướng dẫn Chi Tiết
  8. Portals trong React: Hướng Dẫn Chi Tiết
  9. Hướng dẫn Component API trong React
  10. CSS trong React

Tóm tắt nội dung

Toggle
  • Thêm Bootstrap cho React
  • Sử dụng Bootstrap CDN
  • Bootstrap as Dependency
  • Gói React Bootstrap
  • Cài đặt React Bootstrap
    • Importing Bootstrap
  • Sử dụng reactstrap
    • Import Bootstrap
  • Một số câu hỏi phổ biến về Bootstrap trong React

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 <link> vào phần <head> của tệp index.html của ứng dụng React như được hiển thị trong đoạn mã sau.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

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ẻ <script> gần cuối thẻ đóng </body> của tệp index.html.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

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 ( <div style={parentContainerStyles}> <div style={subContainerStyles}> <span className={`h1 center-block text-center text-${theme ? themeClass : 'muted'}`} style={{ marginBottom: 25 }}>{theme || 'Default'}</span> <div className="center-block text-center"> <SplitButton bsSize="large" bsStyle={themeClass} title={`${theme || 'Default Block'} Theme`}> <Dropdown.Item eventKey="Primary Block" onSelect={this.chooseTheme}>Primary Theme</Dropdown.Item> <Dropdown.Item eventKey="Danger Block" onSelect={this.chooseTheme}>Danger Theme</Dropdown.Item> <Dropdown.Item eventKey="Success Block" onSelect={this.chooseTheme}>Success Theme</Dropdown.Item> <Dropdown.Item divider /> <Dropdown.Item eventKey="Reset Block" onSelect={this.chooseTheme}>Default Theme</Dropdown.Item> </SplitButton> </div> </div> </div> ); } } 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(<ThemeSwitcher />, 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 ( <div className="d-flex flex-wrap justify-content-center align-items-center"> <span className={`h1 mb-4 w-100 text-center text-${themeClass}`}>{theme || 'Default'}</span> <ButtonDropdown isOpen={dropdownOpen} toggle={this.toggleDropdown}> <Button id="caret" color={themeClass}>{theme || 'Custom'} Theme</Button> <DropdownToggle caret size="lg" color={themeClass} /> <DropdownMenu> <DropdownItem onClick={e => this.chooseTheme('Primary', e)}>Primary Theme</DropdownItem> <DropdownItem onClick={e => this.chooseTheme('Danger', e)}>Danger Theme</DropdownItem> <DropdownItem onClick={e => this.chooseTheme('Success', e)}>Success Theme</DropdownItem> <DropdownItem divider /> <DropdownItem onClick={this.resetTheme}>Default Theme</DropdownItem> </DropdownMenu> </ButtonDropdown> </div> ); } } 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(<ThemeSwitcher />, 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.

Một số câu hỏi phổ biến về Bootstrap trong React

  1. Bootstrap là gì?
  • Bootstrap là một bộ khung CSS được sử dụng để xây dựng các giao diện web đáp ứng, dễ dàng tùy chỉnh và tương thích với nhiều trình duyệt.
  1. Tại sao nên sử dụng Bootstrap trong React?
  • Sử dụng Bootstrap trong React giúp việc xây dựng giao diện trở nên dễ dàng hơn vì nó cung cấp nhiều lớp CSS có sẵn và các thành phần UI được thiết kế sẵn.
  • Bootstrap cũng hỗ trợ việc xây dựng các giao diện đáp ứng cho nhiều loại màn hình khác nhau.
  1. Làm thế nào để sử dụng Bootstrap trong React?
  • Có thể sử dụng Bootstrap trong React thông qua các gói npm như react-bootstrap hoặc reactstrap.
  • Cài đặt các gói npm này và import các thành phần của chúng vào trong mã nguồn React để sử dụng.
  1. Các thành phần UI nào được cung cấp bởi Bootstrap?
  • Bootstrap cung cấp nhiều thành phần UI như nút, biểu mẫu, thanh điều hướng, bảng, carousel, modal, tooltip, popover, v.v.
  1. Làm thế nào để tùy chỉnh giao diện của Bootstrap trong React?
  • Có thể tùy chỉnh giao diện của Bootstrap trong React bằng cách sử dụng CSS để ghi đè các lớp CSS có sẵn của Bootstrap hoặc sử dụng các biến Sass để thay đổi các giá trị mặc định của Bootstrap.
  • Cũng có thể tạo các lớp CSS tùy chỉnh hoặc tái sử dụng các lớp CSS có sẵn để tạo giao diện theo ý muốn.
  1. Làm thế nào để sử dụng React với Bootstrap?
  • Có thể sử dụng Bootstrap trong React bằng cách sử dụng các gói npm như react-bootstrap hoặc reactstrap.
  • Các gói này cung cấp các thành phần UI đã được tích hợp sẵn với React, vì vậy chúng ta có thể sử dụng các thành phần này như bình thường trong mã nguồn React.
  1. React-Bootstrap và Reactstrap khác nhau như thế nào?
  • React-Bootstrap là một gói npm cho phép sử dụng Bootstrap với React và cung cấp các thành phần UI đã được tích hợp sẵn với React.
  • Reactstrap cũng là một gói npm cho phép sử dụng Bootstrap với React, nhưng nó sử dụng các thành phần được xây dựng bằng Bootstrap 4.
  1. Tại sao phải sử dụng React-Bootstrap hoặc Reactstrap thay vì Bootstrap thông thường?
  • Sử dụng React-Bootstrap hoặc Reactstrap giúp tích hợp Bootstrap với React một cách dễ dàng hơn và có thể tùy chỉnh tốt hơn.
  • Các gói này cung cấp các thành phần UI đã được tích hợp sẵn với React, giúp tăng tốc độ phát triển và giảm thiểu lỗi trong mã nguồn.
  1. Có những lưu ý gì khi sử dụng Bootstrap trong React?
  • Nên sử dụng các gói npm như react-bootstrap hoặc reactstrap để tích hợp Bootstrap với React.
  • Cần chú ý đến việc tùy chỉnh giao diện của Bootstrap để tránh xung đột với các thành phần khác trong mã nguồn React.
  • Cần cẩn thận khi sử dụng các thành phần Bootstrap có sẵn để đảm bảo tính tương thích với React.

Hướng dẫn khác:

  1. Routing trong React: Hướng Dẫn Chi Tiết
  2. Sử dụng table trong React
  3. ReactJS là gì? cách cài đặt ReactJS
  4. State và Props trong React: Hướng Dẫn Chi Tiết
  5. Sử dụng Context trong React: Hướng dẫn Chi Tiết
  6. Code Splitting trong React: Hướng dẫn Chi Tiết cho Người Mới Bắt Đầu
  7. Redux trong React: Hướng dẫn Chi Tiết
  8. Portals trong React: Hướng Dẫn Chi Tiết
  9. Hướng dẫn Component API trong React
  10. CSS trong React

Từ khóa » Cách Dùng Bootstrap Trong Reactjs