Cài đặt bootstrap ReactJS

React Bootstrap là một thư viện dựa trên thành phần phục vụ các tính năng bootstrap gốc trong các thành phần React thuần túy. Thay vì sử dụng các thư viện JavaScript bootstrap, nó chuyển đổi tất cả hàm JavaScript thành React và gộp chúng với một thành phần

React Bootstrap tương thích với tất cả các chủ đề bootstrap để cung cấp giao diện người dùng nhất quán

Tuy nhiên, chúng ta có thể sử dụng thư viện và lớp bootstrap truyền thống bằng cách định nghĩa chúng bằng thuộc tính claasName trong thành phần React. Tuy nhiên, đây không phải là một cách tiếp cận tốt để trở thành nhà phát triển React JS. Nó sẽ không được hưởng lợi nhiều từ việc sử dụng React làm khung giao diện người dùng ưa thích của bạn

Thành phần React Bootstrap không hiển thị toàn bộ thư viện bootstrap cho trang web của bạn; . Đó là lý do tại sao trong React JS, việc sử dụng React Bootstrap được ưu tiên hơn

Hãy hiểu cách cài đặt React Bootstrap trong dự án React

Tạo ứng dụng phản ứng

Trước khi cài đặt React Bootstrap, hãy tạo một ứng dụng React

Để tạo một ứng dụng phản ứng, hãy tạo một thư mục, mở thiết bị đầu cuối của bạn và điều hướng đến thư mục mà bạn muốn tạo Ứng dụng phản ứng. bây giờ, thực hiện lệnh sau

Lệnh trên sẽ hiển thị thông báo xác nhận bên dưới;

Nó sẽ bắt đầu một quy trình trình nền sẽ cài đặt các gói và mô-đun nút cần thiết cho ứng dụng React. Lệnh trên sẽ hiển thị đầu ra sau nếu được thực hiện thành công

Creating a new React app in E:\jtp\React-App\myapplication.
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...


added 1364 packages in 5m

169 packages are looking for funding
  run `npm fund` for details
Git repo not initialized Error: Command failed: git --version
    at checkExecSyncError (node:child_process:826:11)
    at execSync (node:child_process:900:15)
    at tryGitInit (E:\jtp\React-App\myapplication\node_modules\react-scripts\scripts\init.js:46:5)
    at module.exports (E:\jtp\React-App\myapplication\node_modules\react-scripts\scripts\init.js:276:7)
    at [eval]:3:14
    at Script.runInThisContext (node:vm:129:12)
    at Object.runInThisContext (node:vm:305:38)
    at node:internal/process/execution:75:19
    at [eval]-wrapper:6:22
    at evalScript (node:internal/process/execution:74:60) {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 12040,
  stdout: null,
  stderr: null
}

Installing template dependencies using npm...
npm WARN deprecated [email protected]: See https://github.com/lydell/source-map-resolve#deprecated

added 33 packages in 16s

169 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...


removed 1 package, and audited 1397 packages in 8s

169 packages are looking for funding
  run `npm fund` for details

8 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Success! Created myapplication at E:\jtp\React-App\myapplication
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    , and scripts into the app directory. If you do this, you can't go back!

We suggest that you begin by typing:

  cd myapplication
  npm start

Happy hacking!

Nếu bạn có thể thấy đầu ra ở trên trong thiết bị đầu cuối của mình. Nó có nghĩa là ứng dụng phản ứng được tạo thành công trong thư mục của bạn

Bây giờ chúng ta có thể chạy ứng dụng trên để kiểm tra xem nó đã được tạo thành công hay chưa

Để chạy ứng dụng React, hãy thay đổi thư mục thành ứng dụng đã tạo từ thiết bị đầu cuối của bạn bằng cách thực hiện lệnh sau

Ứng dụng trên sẽ thay đổi thư mục thành ứng dụng React của chúng ta. Bây giờ, hãy chạy ứng dụng phản ứng bằng cách thực hiện lệnh bên dưới

Ứng dụng trên sẽ khởi động máy chủ nút và hiển thị dữ liệu ứng dụng mặc định trên localhost. Theo mặc định, ứng dụng phản ứng sử dụng cổng 3000 để phục vụ dữ liệu ứng dụng. Tuy nhiên, số cổng có thể được thay đổi bằng cách chỉ định nó trong gói. tập tin json

Để truy cập dữ liệu ứng dụng, hãy mở trình duyệt web và điều hướng đến địa chỉ sau

Bạn sẽ có thể thấy đầu ra sau

Bây giờ chúng ta đã tạo thành công ứng dụng React. Cấu trúc cơ bản của một ứng dụng React như sau

Xóa mã mặc định khỏi Ứng dụng. tập tin js. Nó sẽ trông giống như sau

Chúng tôi sẽ sử dụng dự án này để hiển thị thành phần bootstrap. Để tìm hiểu thêm về cấu trúc dự án React và quy trình cài đặt, hãy truy cập hướng dẫn React JS của chúng tôi

Bây giờ, hãy cài đặt React Bootstrap trong dự án này

Cài đặt React Bootstrap

Cách tốt nhất để nhập thư viện React Bootstrap vào dự án của bạn là sử dụng gói npm, gói này có thể được cài đặt bằng lệnh npm. Thực hiện lệnh bên dưới để cài đặt React Bootstrap cho dự án của bạn

Nó sẽ cài đặt React Bootstrap và Bootstrap cả hai gói theo phiên bản đã chỉ định. Ví dụ: chúng tôi đang cài đặt Bootstrap phiên bản 5. 1. 3. nếu lệnh trên được thực thi thành công, bạn sẽ có thể thấy đầu ra sau

added 23 packages, and audited 1420 packages in 21s

171 packages are looking for funding
  run `npm fund` for details

8 moderate severity vulnerabilities

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Như chúng ta có thể thấy từ đầu ra ở trên, các gói bootstrap được thêm vào dự án của chúng ta. Để xác minh, hãy mở gói. tập tin json;

Bây giờ, React Bootstrap đã được cài đặt thành công trong dự án của chúng ta

Thêm biểu định kiểu

Thành phần React Bootstrap không chứa các kiểu để cung cấp chúng; . Để thêm các biểu định kiểu, hãy nhập chúng vào ứng dụng của bạn. js hoặc chỉ mục. tập tin js. Để nhập tệp CSS, hãy bao gồm dòng sau trong phần nhập (trên cùng) của tệp

Chúng tôi cũng có thể sử dụng CDN để thêm biểu định kiểu. Để bao gồm biểu định kiểu bằng CDN, hãy thêm thẻ liên kết sau vào phần đầu chỉ mục của bạn. tệp html

Nhập tệp Sass

Nếu bạn muốn sử dụng tệp Sass thay vì tệp CSS, cách đơn giản nhất để sử dụng tệp Sass là bao gồm tệp Sass của Bootstrap. Tệp Sass phải được yêu cầu trong src/index. js hoặc ứng dụng. tập tin js

Để sử dụng tệp Sass thay vì tệp CSS, hãy nhập tệp bên dưới vào Ứng dụng. tập tin js

Ngoài ra, hãy bao gồm tệp sau trong Chỉ mục. js hoặc ứng dụng. tập tin js

Nó sẽ bao gồm tệp Bootstrap SCSS trong dự án của bạn

Tùy chỉnh tệp Bootstrap

Chúng tôi có thể tùy chỉnh tệp bootstrap hiện có bằng cách thêm tệp CSS hoặc SCSS tùy chỉnh. Để tùy chỉnh tệp bootstrap hiện có, hãy viết CSS trong tệp tùy chỉnh như sau

Nó sẽ ghi đè lên CSS hiện có. Đảm bảo bao gồm tệp CSS tùy chỉnh bên dưới tệp Bootstrap và nhập tệp đó vào chỉ mục. js hoặc ứng dụng. tập tin js

Prop "AS" trong Thành phần Bootstrap

Prop "as" cho phép chúng tôi sửa đổi hành vi của các thành phần được hiển thị. Với sự trợ giúp của as prop, chúng ta có thể giữ tất cả các kiểu của một thành phần bootstrap cụ thể nhưng chuyển nó sang một thành phần khác sẽ hiển thị

Ví dụ: chúng tôi muốn hiển thị thành phần nút dưới dạng thành phần col để chúng tôi có thể sử dụng chỗ dựa "as" để làm như vậy

Xem xét ví dụ sau

Nhập thành phần React Bootstrap

React Bootstrap cho phép chúng tôi nhập các thành phần riêng lẻ. Chúng ta có thể nhập một thành phần duy nhất từ ​​thư viện bootstrap như Reac-bootstrap/Button thay vì toàn bộ thư viện. Nó sẽ chỉ lấy thành phần cụ thể từ thư viện và giảm dòng mã khi sử dụng React

Ví dụ: nếu chúng tôi muốn nhập nút chính từ React Bootstrap; . mã js sẽ giống như sau

Ứng dụng. js

đầu ra

Từ đầu ra ở trên, chúng ta có thể thấy rằng nút chính được hiển thị cho trang web của chúng ta. Tương tự, chúng ta có thể nhập các thành phần khác từ thư viện React Bootstrap

Cài đặt Bootstrap NPM phản ứng như thế nào?

LÀM THẾ NÀO bao gồm Bootstrap js trong phản ứng?

Cách cài đặt Bootstrap phản ứng với mã VS?