Tiếng Việt

Hướng dẫn ReactJS

Hooks

Chức năng nâng cao của ReactJS

Khái niệm bổ sung

ReactJS - Bootstrap: Hướng dẫn cơ bản về tích hợp Bootstrap

Xin chào các bạnfuture React developers! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình đầy thú vị vào thế giới của ReactJS và Bootstrap. Là người đã dạy khoa học máy tính trong nhiều năm, tôi có thể đảm bảo rằng vào cuối bài hướng dẫn này, bạn sẽ có một hiểu biết vững chắc về cách làm cho ứng dụng React của bạn trông hiện đại và chuyên nghiệp hơn bằng cách sử dụng Bootstrap. Hãy cùng bắt đầu nào!

ReactJS - Bootstrap

Bootstrap là gì?

Trước khi chúng ta bắt đầu tích hợp Bootstrap với React, hãy dành một chút thời gian để hiểu Bootstrap là gì. Hãy tưởng tượng bạn đang xây dựng một ngôi nhà. Bạn có thể tạo từng viên gạch, đinh vít và từng món nội thất từ đầu, hoặc bạn có thể sử dụng các thành phần预制 để加快进程. Bootstrap giống như những thành phần预制 đó, nhưng dành cho phát triển web.

Bootstrap là một khung công tác CSS phổ biến cung cấp một bộ sưu tập các thành phần và phong cách thiết kế sẵn có. Nó giống như một kho báu đầy các yếu tố trang web sẵn sàng sử dụng ngay trong tầm tay bạn. Với Bootstrap, bạn có thể nhanh chóng tạo ra các trang web responsive và bắt mắt mà không cần viết toàn bộ CSS từ đầu.

Tại sao nên sử dụng Bootstrap với React?

Bạn có thể đang tự hỏi, "Tại sao tôi nên sử dụng Bootstrap với React?" Hãy để tôi kể cho bạn một câu chuyện ngắn. Năm xưa, tôi có một học sinh rất xuất sắc trong React nhưng lại gặp khó khăn trong thiết kế. Các ứng dụng của anh ấy hoạt động hoàn hảo nhưng trông như thể bị mắc kẹt trong thập niên 90. Sau đó, anh ấy phát hiện ra Bootstrap, và đột nhiên, các dự án của anh ấy từ "thường" trở thành "wow!" trong thời gian ngắn.

React rất tuyệt vời trong việc xây dựng giao diện người dùng động, nhưng nó không có phong cách内置. Bằng cách kết hợp React với Bootstrap, bạn sẽ có được sự kết hợp tốt nhất của cả hai: kiến trúc thành phần mạnh mẽ của React và các yếu tố thiết kế đẹp mắt, responsive của Bootstrap.

Tích hợp Bootstrap với React

Bây giờ, hãy bắt tay vào việc và bắt đầu tích hợp Bootstrap với React. Có hai cách chính để làm điều này:

  1. Sử dụng Bootstrap CSS
  2. Sử dụng React-Bootstrap

Chúng ta sẽ khám phá cả hai phương pháp, nhưng trước tiên, hãy thiết lập một dự án React mới.

Thiết lập một dự án React mới

Nếu bạn chưa cài đặt Node.js trên máy tính của mình, hãy làm theo. Sau khi hoàn tất, mở terminal và chạy các lệnh sau:

npx create-react-app my-bootstrap-app
cd my-bootstrap-app
npm start

Lệnh này sẽ tạo một ứng dụng React mới và khởi động máy chủ phát triển. Bạn nên thấy ứng dụng React mặc định chạy trong trình duyệt của mình.

Phương pháp 1: Sử dụng Bootstrap CSS

Cách đơn giản nhất để thêm Bootstrap vào dự án React của bạn là bao gồm tệp CSS. Dưới đây là cách làm:

  1. Cài đặt Bootstrap:
npm install bootstrap
  1. Nhập Bootstrap CSS trong tệp src/index.js của bạn:
import 'bootstrap/dist/css/bootstrap.min.css';

Bây giờ bạn có thể sử dụng các lớp Bootstrap trong các thành phần React của mình. Hãy tạo một thanh điều hướng đơn giản để xem nó trong hành động:

import React from 'react';

function App() {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<a className="navbar-brand" href="#">My Bootstrap App</a>
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item active">
<a className="nav-link" href="#">Trang chủ</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Về chúng tôi</a>
</li>
<li className="nav-item">
<a className="nav-link" href="#">Liên hệ</a>
</li>
</ul>
</div>
</nav>
);
}

export default App;

Mã này tạo ra một thanh điều hướng responsive sử dụng các lớp Bootstrap. Lớp navbar xác định bộ chứa chính, trong khi các lớp khác như navbar-expand-lg và navbar-light kiểm soát hành vi và外观 của nó.

Phương pháp 2: Sử dụng React-Bootstrap

Mặc dù sử dụng CSS trực tiếp của Bootstrap hoạt động tốt, React-Bootstrap lại đi một bước xa hơn bằng cách cung cấp các thành phần React tích hợp chức năng của Bootstrap. Phương pháp này mang lại mã "React-like" hơn và có thể giúp mã của bạn dễ bảo trì hơn.

Hãy thiết lập như sau:

  1. Cài đặt React-Bootstrap và Bootstrap:
npm install react-bootstrap bootstrap
  1. Nhập Bootstrap CSS trong tệp src/index.js (giống như trước):
import 'bootstrap/dist/css/bootstrap.min.css';

Bây giờ, hãy viết lại thanh điều hướng của chúng ta sử dụng các thành phần React-Bootstrap:

import React from 'react';
import { Navbar, Nav } from 'react-bootstrap';

function App() {
return (
<Navbar bg="light" expand="lg">
<Navbar.Brand href="#home">My Bootstrap App</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Trang chủ</Nav.Link>
<Nav.Link href="#about">Về chúng tôi</Nav.Link>
<Nav.Link href="#contact">Liên hệ</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
}

export default App;

Mã này đạt được kết quả tương tự như ví dụ trước, nhưng nó sử dụng các thành phần React-Bootstrap như Navbar và Nav thay vì các phần tử HTML nguyên thủy với các lớp Bootstrap. Phương pháp này mang lại mã rõ ràng hơn và dễ bảo trì hơn.

Các thành phần Bootstrap trong React

Bây giờ chúng ta đã thiết lập Bootstrap trong ứng dụng React của mình, hãy khám phá một số thành phần Bootstrap phổ biến và cách sử dụng chúng trong React. Chúng ta sẽ tạo một trang layout đơn giản sử dụng các thành phần khác nhau của Bootstrap.

import React from 'react';
import { Container, Row, Col, Card, Button } from 'react-bootstrap';

function App() {
return (
<Container>
<Row className="mt-5">
<Col md={4}>
<Card>
<Card.Img variant="top" src="https://via.placeholder.com/150" />
<Card.Body>
<Card.Title>Thẻ 1</Card.Title>
<Card.Text>
Đây là một thẻ mẫu với một chút nội dung.
</Card.Text>
<Button variant="primary">Tìm hiểu thêm</Button>
</Card.Body>
</Card>
</Col>
<Col md={4}>
<Card>
<Card.Img variant="top" src="https://via.placeholder.com/150" />
<Card.Body>
<Card.Title>Thẻ 2</Card.Title>
<Card.Text>
Một thẻ khác với nội dung khác nhau.
</Card.Text>
<Button variant="secondary">Khám phá</Button>
</Card.Body>
</Card>
</Col>
<Col md={4}>
<Card>
<Card.Img variant="top" src="https://via.placeholder.com/150" />
<Card.Body>
<Card.Title>Thẻ 3</Card.Title>
<Card.Text>
Còn một thẻ khác để trình diễn Bootstrap.
</Card.Text>
<Button variant="success">Khám phá</Button>
</Card.Body>
</Card>
</Col>
</Row>
</Container>
);
}

export default App;

Trong ví dụ này, chúng ta sử dụng một số thành phần Bootstrap:

  • Container: Tạo một bộ chứa centered cho nội dung của chúng ta.
  • Row và Col: Thực hiện hệ thống lưới responsive của Bootstrap.
  • Card: Hiển thị nội dung trong một bộ chứa flexible.
  • Button: Tạo các nút được thiết kế với các的外观 khác nhau.

Lớp md={4} trên các phần tử Col cho biết mỗi cột chiếm 4 đơn vị trong hệ thống lưới 12 đơn vị trên màn hình trung bình và lớn hơn. Điều này kết quả trong ba cột có chiều rộng bằng nhau.

Tùy chỉnh Bootstrap trong React

Một trong những điều tuyệt vời về Bootstrap là tính linh hoạt của nó. Bạn có thể dễ dàng tùy chỉnh nó để phù hợp với phong cách độc đáo của dự án của bạn. Dưới đây là một vài cách để làm điều đó:

1. Thay thế các biến Bootstrap

Tạo một tệp custom.scss trong thư mục src của bạn:

// Custom.scss

// Thay thế các biến mặc định
$primary: #007bff;
$secondary: #6c757d;
$success: #28a745;

// Nhập Bootstrap và các biến mặc định của nó
@import '~bootstrap/scss/bootstrap.scss';

Sau đó, nhập tệp này trong index.js thay vì CSS mặc định của Bootstrap:

import './custom.scss';

2. Thêm các lớp tùy chỉnh

Bạn cũng có thể thêm các lớp tùy chỉnh bên cạnh các lớp Bootstrap:

<Button className="my-custom-button" variant="primary">Nút tùy chỉnh</Button>

Sau đó trong tệp CSS (hoặc SCSS) của bạn:

.my-custom-button {
border-radius: 25px;
text-transform: uppercase;
}

Kết luận

Chúc mừng! Bạn đã vừa迈出了将 Bootstrap 与 React 集成的第一步。我们已经介绍了在 React 项目中设置 Bootstrap 的基础知识、使用 Bootstrap 组件以及甚至定制 Bootstrap 以满足您的需求。

记住，熟能生巧。尝试使用这里学到的知识构建一个小项目。也许是一个个人作品集页面或者一个简单的博客布局。你使用这些工具越多，你对它们就会越熟悉。

在我们结束之前，我想起了一个最初对前端设计感到害怕的学生。在学习了如何使用 Bootstrap 与 React 集成之后，她继续创建了一些我所见过的最美丽、最实用的网络应用程序。谁知道呢？也许下一个成功故事的就是你！

继续编码，保持好奇心，最重要的是，享受其中的乐趣。下次见，愉快地与 Bootstrap 一起使用 React！

Credits: Image by storyset

Hướng Dẫn Trước:
ReactJS - Hoạt hình
Hướng Dẫn Tiếp Theo:
ReactJS - Bản đồ