Xây dựng app React bằng toolkit Blueprint UI

Sử dụng thư viện Blueprint và bạn sẽ không bao giờ phải vất vả tạo một trang web hấp dẫn, dễ truy cập nữa.

Xây dựng ứng dụng React từ đầu có thể tốn thời gian và đầy thách thức, đặc biệt là khi nói đến các thành phần tạo kiểu dáng. Đây là nơi Blueprint UI Toolkit phát huy tác dụng. Bộ công cụ này là một tập hợp các thành phần giao diện người dùng có thể tái sử dụng, giúp bạn tạo giao diện nhất quán và hấp dẫn trực quan cho mọi app phát triển bằng React. Dưới đây là cách dùng Blueprint UI Toolkit tạo app React đơn giản.

Blueprint UI Toolkit là gì?

Blueprint UI Toolkit là một thư viện thành phần React UI. Nó chứa một tập hợp các thành phần được tạo sẵn dễ sử dụng & tùy chỉnh. Bạn có thể sử dụng các thành phần được thiết kế sẵn này ngay lập tức hoặc sửa đổi chúng để phù hợp với từng nhu cầu.

Các thành phần của Blueprint UI Toolkit bao gồm Buttons, Forms, Modals, Navigation, & Tables. Sử dụng chúng có thể giúp bạn tiết kiệm thời gian và công sức vì bạn không cần phải thiết kế, xây dựng từng thành phần từ đầu.

Hướng dẫn sử dụng Blueprint UI Toolkit

Để bắt đầu dùng Blueprint UI Toolkit, bạn cần tạo app React.

Sau khi thiết lập dự án, bạn có thể cài đặt Blueprint UI Toolkit bằng bất kỳ trình cài đặt gói Node đã chọn. Để cài đặt Blueprint UI Toolkit bằng npm, hãy chạy lệnh sau trong terminal:

npm install @blueprintjs/core

Để dùng yarn thay thế, chạy lệnh sau:

yarn add @blueprintjs/core

Sau khi đã cài đặt Blueprint UI Toolkit, bạn có thể dùng các thành phần lựa chọn trong app React.

Sau khi đã cài Blueprint UI Toolkit, bạn có thể dùng các thành phần lựa chọn trong app React.

Dùng thành phần trong Blueprint UI Toolkit

Trước khi dùng thành phần này, bao gồm file CSS từ Blueprint UI Toolkit:

@import "normalize.css";
@import "@blueprintjs/core/lib/css/blueprint.css";
@import "@blueprintjs/icons/lib/css/blueprint-icons.css";

Thêm khối code trên vào file CSS áp dụng các kiểu Blueprint UI cho thành phần của nó.

Ví dụ, để thêm nút bấm vào ứng dụng, dùng Button từ Blueprint UI Toolkit:

import React from "react";
import { Button } from "@blueprintjs/core";

function App() {
  return (
    <div>
      <Button intent="success" text="Click Me" icon="refresh" small={true}/>
    </div>
  );
}

export default App;

Khối code này thêm nút bấm vào ứng dụng bằng Button. Thành phần Button nhận các thuộc tính như intent, text, icon, small, và large.

Thuộc tính intent xác định bản chất của nút bấm, phản ánh trong màu background. Ở ví dụ này, nút bấm phục vụ cho mục đích làm màu nền màu xanh lá. Blueprint UI cung cấp một số ý định cốt lõi bao gồm cơ bản (xanh lam), thành công (xanh lục), cảnh báo (cam) và nguy hiểm (đỏ).

Bạn có thể chỉ định văn bản xuất hiện bên trong nút bằng thuộc tính text. Bạn cũng có thể thêm các biểu tượng vào nút bằng thuộc tính icon. Bên cạnh icon là rightIcon - thêm biểu tượng vào bên phải của nút.

Cuối cùng, các thuộc tính boolean large và small chỉ định kích thước của nút bấm. Thuộc tính large làm cho nút lớn hơn, trong khi small làm cho nút nhỏ hơn.

Khối code ban đầu sẽ tạo một nút bấm như sau:

Bạn cũng có thể sử dụng thành phần AnchorButton để tạo nút bấm trong ứng dụng. Thành phần AnchorButton là phiên bản chuyên biệt của thành phần Button được thiết kế rõ ràng để sử dụng làm liên kết.

Thành phần này chấp nhận nhiều thuộc tính giống như thành phần Button, bao gồm text, large, small, intent, icon.. Nó cũng chấp nhận các thuộc tính href và target.

Thuộc tính href chỉ định URL mà nút liên kết đến và target chỉ định cửa sổ hoặc khung đích cho liên kết:

import React from "react";
import { AnchorButton } from "@blueprintjs/core";

function App() {
  return (
    <div>
      <AnchorButton
        href="https://example.com/"
        intent="primary"
        text="Click Me"
        target="_blank"
      />
    </div>
  );
}

export default App;

Khối code ở trên hiển thị một thành phần AnchorButton. Giá trị thuộc tính href của thành phần là “https://example.com/” và giá trị target là “_blank”, có nghĩa liên kết này sẽ mở trong một tab hoặc cửa sổ trình duyệt khác.

Một thành phần thiết yếu khác của Blueprint UI Toolkit là Card. Đây là một thành phần có thể tái sử dụng, hiển thị thông tin theo cách trực quan hấp dẫn.

Thành phần Card có hai thuộc tính interactive & elevation. Thuộc tính elevation kiểm soát độ sâu bóng của thẻ, với các giá trị cao hơn sẽ tạo ra hiệu ứng bóng nổi bật hơn.

Thuộc tính interactive chấp nhận một giá trị boolean. Khi được đặt thành true, nó sẽ cho phép các tương tác di chuột và nhấp trên thẻ, cho phép thẻ phản hồi thông tin nhập của người dùng.

Ví dụ:

import React from "react";
import { Card, Elevation } from "@blueprintjs/core";

function App() {
  return (
    <div>
      <Card interactive={true} elevation={Elevation.TWO}>
        <h2>This is a Card</h2>
        <p>This is some content in my card</p>
      </Card>
    </div>
  );
}

export default App;

Trong ví dụ này, thành phần Card có tiêu đề và một số nội dung. interactive được đặt thành true.

Bạn cũng nhập thành phần Elevation từ @blueprintjs/core. Elevation là một enum xác định tập hợp các giá trị được xác định trước mà bạn có thể sử dụng để đặt độ sâu đổ bóng của thành phần.

Sau đây là những giá trị sẵn có của enu Elevation:

• Elevation.ZERO: Giá trị này đặt độ sâu của bóng thành 0, cho biết thành phần không có bất kỳ bóng nào được áp dụng
• Elevation.ONE: Giá trị này đặt độ sâu của bóng tối thành 1.
• Elevation.TWO: Giá trị này đặt độ sâu của bóng tối thành 2.
• Elevation.THREE: Giá trị này đặt độ sâu của bóng tối thành 3.
• Elevation.FOUR: Giá trị này đặt độ sâu của bóng tối thành 4.
• Elevation.FIVE: Giá trị này đặt độ sâu của bóng tối thành 5.

Rendering khối code ở trên sẽ hiển thị một ảnh trên màn hình của bạn giống như sau:

Blueprint UI còn cung cấp nhiều thành phần khác, chẳng hạn như Alert, Popover, toast, v.v. Tuy nhiên, với thông tin được cung cấp, bạn có thể xây dựng một ứng dụng React đơn giản bằng Blueprint UI.