Làm cách nào để đưa Bootstrap vào ReactJS?

Trong bài này mình sẽ giúp các bạn sử dụng bootstrap trong react. js. Thật dễ dàng để thêm bootstrap vào dự án của bạn. Chúng ta bắt đầu với Entro cơ bản

Phản ứng. js là một trong những thư viện javascript phổ biến được sử dụng để tạo các thành phần giao diện người dùng có trạng thái và có thể tái sử dụng. Nó được phát triển trên Facebook. Nó là một thư viện JavaScript mã nguồn mở

Bootstrap là khung phát triển giao diện người dùng phổ biến nhất để xây dựng bố cục web đáp ứng với nhiều thành phần

Ghi chú

Tôi không khuyên bạn nên sử dụng bootstrap. vì bootstrap tăng kích thước tệp HTML và CSS

1. Thêm Bootstrap vào React bằng NPM
2. Thêm Bootstrap trong React bằng CDN

sử dụng lệnh này để cài đặt bootstrap trong dự án của chúng tôi

npm install bootstrap --save

sau khi cài đặt bootstrap. Bạn phải nhập tệp CSS vào mục nhập ứng dụng React của mình

Nếu bạn đã tạo dự án của mình bằng công cụ tạo ứng dụng phản ứng, hãy mở thư mục src và tìm tệp mục nhập dán

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

Bây giờ bạn có thể sử dụng các lớp CSS và các tiện ích trong ứng dụng của mình nếu bạn cần sử dụng các thành phần JavaScript

Bạn cũng sẽ cần cài đặt jquery và popper. gói js từ npm. Trong thiết bị đầu cuối của bạn, hãy chạy các lệnh sau

npm install jquery popper.js

Tiếp theo, đi đến 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';

In this method, you are integrating Bootstrap into the React.JS project. You use a CDN link. This approach is straightforward for everyone because you need only add a tag for Bootstrap CDN.

Go to your project’s root folder, open the public/index.html file, and paste this code into the section.

Nếu bạn chỉ cần các thành phần Bootstrap thì trong trường hợp đó, bạn thêm JavaScript/jQuery vào ứng dụng React của mình

Thêm tệp CDN sau vào trước thẻ đóng

bản demo cho CDN

Tôi hy vọng bạn hiểu cách thêm bootstrap—mọi truy vấn và đề xuất. Xin vui lòng cho tôi biết trong hộp bình luận

React là khung JS được sử dụng phổ biến nhất để phát triển các ứng dụng web tương tác. Nhưng vì nó là một thư viện dạng xem nên nó không đi kèm với các kỹ thuật để xây dựng các thiết kế đáp ứng và rất trực quan. Để khắc phục điều này chúng ta có thể sử dụng Bootstrap, một framework thiết kế front-end

Tại sao các thành phần Bootstrap không thể được bao gồm trong React

Thêm thẻ HTML như

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

Chúng tôi sẽ kiểm tra cả hai phương pháp để chúng tôi có thể chọn phương pháp nào phù hợp nhất cho một tình huống nhất định. Chúng tôi sẽ tập trung vào các chi tiết triển khai để tích hợp Bootstrap với ứng dụng React

Cách thiết lập Biểu định kiểu Bootstrap với React

Chúng tôi sẽ sử dụng Create React App CLI để bắt đầu với dự án React của chúng tôi. Nó không yêu cầu bất kỳ cấu hình nào để bắt đầu

Các lệnh sau có thể được sử dụng cài đặt Tạo ứng dụng React và khởi động máy chủ ở chế độ phát triển

1$ create-react-app my-bootstrap-react-app
2$ cd my-bootstrap-react-app
3$ npm start

jav

Cấu trúc thư mục được tạo bởi Create React App như bên dưới

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

jav

Bước tiếp theo là lấy thư viện Bootstrap mới nhất từ ​​​​trang web chính thức của nó. Gói đã tải xuống bao gồm các phiên bản tệp JavaScript và CSS được biên dịch cũng như thu nhỏ. Cũng có một biểu định kiểu lưới dành riêng cho các ứng dụng chỉ cần sử dụng lưới. Bước tiếp theo là tạo một thư mục mới cho CSS ở chế độ công khai, sao chép bootstrap. tối thiểu. css ở đó, sau đó thêm mã được yêu cầu vào công khai/chỉ mục. html để liên kết nó

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

html

Một cách khác là sử dụng CDN để tìm nạp CSS đã thu nhỏ

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

html

Cách sử dụng các lớp Bootstrap thông thường với React

Chúng ta có thể sử dụng các lớp Bootstrap với mã JSX sau khi biểu định kiểu Bootstrap đã được thêm vào ứng dụng React. Để xác minh điều này, chúng tôi sẽ sao chép một số mã mẫu ngẫu nhiên từ trang demo Bootstrap

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

jav

Sẽ thật tuyệt nếu các lớp Bootstrap có thể được nhập dưới dạng các thành phần React để sử dụng React tốt nhất. Ví dụ: chúng ta có thể có các thành phần lưới, hàng và Cột để sắp xếp trang thay vì các lớp HTML như bên dưới

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

html

May mắn thay, không cần triển khai thư viện của riêng chúng tôi để thực hiện điều này, vì đã có sẵn các thư viện. Hãy khám phá một vài trong số này

Sử dụng Thư viện của bên thứ ba cho React và Bootstrap

Có một số thư viện cố gắng phát triển triển khai Bootstrap dành riêng cho React, cho phép chúng tôi sử dụng các thành phần JSX cũng như làm việc với các kiểu Bootstrap. Sau đây là một số mô-đun Bootstrap phổ biến có thể được sử dụng với các dự án React

1. React-Bootstrap là một trong những thư viện hàng đầu để thêm các thành phần Bootstrap vào các dự án React. Nhưng triển khai hiện tại của nó được nhắm mục tiêu cho Bootstrap v3 chứ không phải phiên bản mới nhất

2. Reacstrap là một thư viện khác cho phép chúng ta sử dụng các thành phần Bootstrap trong ứng dụng React. Trái ngược với React-Bootstrap, reactstrap được phát triển để sử dụng với phiên bản Bootstrap mới nhất. Việc triển khai reactstrap có các thành phần cho biểu mẫu, nút, bảng, lưới bố cục và điều hướng. Nó hiện đang được phát triển, nhưng cung cấp một giải pháp thay thế tuyệt vời để phát triển ứng dụng với React và Bootstrap cùng nhau

Có một số lựa chọn thay thế như React-UI và một số mô-đun dành riêng cho miền như CoreUI-React, React-bootstrap-table có sẵn trên GitHub cung cấp các tiện ích mở rộng để phát triển một số giao diện người dùng thú vị cho các ứng dụng sử dụng React

Trong hướng dẫn này, chúng tôi sẽ tập trung vào Reacstrap vì nó phổ biến nhất và sử dụng phiên bản Bootstrap mới nhất

Cách thiết lập thư viện Reactstrap

Để bắt đầu, chúng tôi cài đặt thư viện reactstrap bằng npm

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

jav

Bây giờ, các thành phần có liên quan từ mô-đun có thể được nhập như bên dưới

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

jav

Ở giai đoạn này, thư viện sẽ không hoạt động như mong đợi vì nó không bao gồm Bootstrap CSS. Chúng tôi sẽ cần thêm nó theo cách thủ công như hình bên dưới

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

jav

Bước tiếp theo là nhập CSS Bootstrap vào tệp

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

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

jav

Hiểu Lưới Bootstrap

Bootstrap được phát triển với hệ thống lưới di động ưu tiên đáp ứng, cho phép sử dụng 12 cột trên mỗi trang. Chúng tôi sẽ cần nhập

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

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

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

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

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

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

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

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

jav

Sử dụng các thành phần Bootstrap với React

Bây giờ chúng ta đã quen thuộc với reactstrap và cách thức hoạt động của nó, có rất nhiều thành phần của Bootstrap 4 có thể được sử dụng với React bằng cách sử dụng reactstrap. Chúng ta sẽ xem xét một số thành phần quan trọng trong hướng dẫn này

Thanh điều hướng

reactstrap

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

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

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

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

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

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

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

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

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

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

jav

Cửa sổ phương thức

Thành phần Reacstrap

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

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

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

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

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

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

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

html

Các hình thức

Biểu mẫu phản ứng có thể ở trong dòng hoặc nằm ngang. Phần tử đầu vào được hiển thị bởi một thành phần

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

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

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

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

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

html

Danh sáchNhóm

Việc tạo kiểu và kiểm soát các mục trong danh sách có thể được thực hiện dễ dàng bằng cách sử dụng reactstrap

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

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

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

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

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

html

nút

Các nút có thể là thành phần quan trọng nhất đối với bất kỳ khung thiết kế nào. Có một thành phần phản ứng ____132 cho các nút. Ngoài các thuộc tính đang hoạt động và bị vô hiệu hóa chung, chúng tôi có thể sử dụng ____133 và

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

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

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

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

1<head>
2<link rel="stylesheet" href="css/bootstrap.min.css">
3head>

1.
2├── package.json
3├── public
4│   ├── favicon.ico
5│   ├── index.html
6│   └── manifest.json
7├── README.md
8├── src
9│   ├── App.css
10│   ├── App.js
11│   ├── App.test.js
12│   ├── index.css
13│   ├── index.js
14│   ├── logo.svg
15│   └── registerServiceWorker.js
16└── yarn.lock

html

Phần kết luận

Mọi thứ chúng ta cần để tích hợp Bootstrap với ứng dụng React đã được trình bày trong hướng dẫn này. Có rất nhiều thư viện để tích hợp Bootstrap với ứng dụng React và chúng tôi đã thảo luận về một số thư viện nổi tiếng nhất. Chúng tôi cũng đã làm việc với một trong những thư viện được sử dụng phổ biến nhất, reactstrap