Giới thiệu về UI Framework RSuite JS bạn nên biết

Hãy cùng tìm hiểu React là gì?

React là một thư viện Javascript open-source hàng đầu giúp bạn xây dựng giao diện dành cho cả web cũng như các ứng dụng trên thiết bị di động. React dễ dàng kết hợp với các thư viện và framework Javascript khác. Để xây dựng UI bằng React chúng ta sử dụng các đoạn code nhỏ, độc lập được gọi là components.

UI Framework RSuite JS

RSuite (React Suite) là một thư viện React components thích hợp cho việc xây dựng các ứng dụng web, đặc biệt là các trang quản lý dành cho các doanh nghiệp vừa và nhỏ. Các điểm mạnh của RSuite bao gồm: thiết kế giao diện thân thiện với user, dễ dàng chỉnh sửa, đa dạng các loại components…

Khi xây dựng một ứng dụng web bằng React, các developers thường gặp phải những UI hoặc tính năng tương tự nhau. Thay vì xây dựng các components này từ đầu thì chúng ta có thể sử dụng một UI Framework, điều này giúp tăng tốc độ develop cũng như hạn chế bug.

Theo lời các developers của React Suite, “Đây là một bộ (suite) các React components với UI đã được nghiên cứu và thiết kế một cách hợp lý, mang đến trải nghiệm thân thiện cho developer cũng như end-user”.

Trong thực tế,  React Suite được thiết kế và triển khai để sử dụng trên desktop browsers thay vì mobile browsers. Vì vậy, trong bài viết này, chúng ta sẽ cùng tìm hiểu và xây dựng một ứng dụng Todo App bằng RSuite JS.

Tổng quan về ứng dụng mà chúng ta sẽ xây dựng

Trong khuôn khổ bài viết, chúng ta sẽ xây dựng một Todo App sử dụng React kết hợp với thư viện UI Component RSuite. Ứng dụng cho phép người dùng tạo và cập nhật danh sách các việc cần làm.

Thông qua ví dụ này, hy vọng các bạn có thể biết cách sử dụng một thư viện UI Component để xây dựng ứng dụng, từ đó áp dụng cho các thư viện tương tự như: Ant Design, Headless UI, React Bootstrap,…

Các bước thực hiện bạn cần biết

Tạo một dự án mới với Create React App và cài đặt RSuite

Chúng ta hãy bắt đầu bằng cách thiết lập dự án mới. Chạy lệnh bên dưới để tạo React project:

npx create-react-app react-suite-app && cd react-suite-app

Lệnh trên sẽ tạo một thư mục mới tên là react-suite-app. Bên trong thư mục này, lệnh create-react-app đã tạo ra cấu trúc mặc định của dự án và cài đặt các thư viện liên quan. Bây giờ hãy mở project vừa được tạo bằng text editor yêu thích của bạn. Đối với các minh họa trong bài viết này, chúng ta sẽ sử dụng Visual Studio Code. 

Sau khi đã di chuyển vào bên trong thư mục vừa được tạo, chạy lệnh sau để mở dự án bằng VSCode:

code .

Tiếp theo, chúng ta sẽ chạy lệnh sau để cài đặt RSuite:

yarn add rsuite

Sau khi việc cài đặt hoàn tất, chạy lệnh bên dưới để chạy application trên browser:

yarn start

Nếu bạn mở application trên browser của mình, bạn sẽ thấy màn hình hiển thị như bên dưới:

Như vậy là chúng ta đã tạo xong dự án mới và cài đặt các thư viện cần thiết. Phần tiếp theo, mình và các bạn sẽ bắt đầu code các UI cần thiết cho Todo App.

Tạo layout cơ bản cho Todo App

Đầu tiên, chúng ta sẽ tạo giao diện tổng quan cho Todo App, bao gồm:

• Thanh navigation bar
• Khu vực main content để chứa form nhập công việc cần làm mới cũng như danh sách các công việc cần làm

Mở file ./src/App.js và chỉnh sửa như sau:

import React from "react";
import { Container, Header, Navbar, Nav, Content } from "rsuite";
import CogIcon from "@rsuite/icons/legacy/Cog";
import "rsuite/dist/rsuite.min.css";
import "./App.css";

const App = () => {
  const [activeKey, setActiveKey] = React.useState(1)

 return (
    <div className="main">
      <Container>
        <Header>
          <Navbar appearance="inverse">
            <Navbar.Brand href="#">RSUITE</Navbar.Brand>
            <Nav onSelect={setActiveKey} activeKey={activeKey}>
              <Nav.Item eventKey="1">Todo</Nav.Item>
            </Nav>
            <Nav pullRight>
              <Nav.Item icon={<CogIcon />}>Settings</Nav.Item>
            </Nav>
          </Navbar>
        </Header>
        <Content>
          <FlexboxGrid justify="center">
            <FlexboxGrid.Item colspan={12}>
            </FlexboxGrid.Item>
          </FlexboxGrid>
        </Content>
      </Container>
    </div>
  );
};

export default App;

Trong đoạn code trên, chúng ta đã import CSS bản rút gọn (minified) của React Suite, đây là file chứa CSS dành cho các component của RSuite.

import "rsuite/dist/rsuite.min.css";

Tiếp theo, chúng ta sử dụng các component được RSuite cung cấp sẵn để nhanh chóng hoàn thiện phần UI mong muốn:

Các components được import bao gồm:

• Container: định nghĩa frame cho trang
• Navbar: thêm navigation vào trang
• Nav: thêm danh sách navigation menu 
• Header: thêm tiêu đề vào trang
• Content: định nghĩa nội dung của trang

Lưu file vừa chỉnh sửa và quay lại browser, bạn sẽ thấy kết quả như sau:

Thật là nhanh chóng để có một UI cơ bản đúng không nào? Tiếp theo chúng ta sẽ sử dụng các component trong thư viện để xây dựng form nhập tên của công việc (Todo) mới.

Tạo Todo Form

Chúng ta sẽ tạo TodoForm component để người dùng nhập nội dung việc cần làm (Todo) mới. Tạo folder mới tên là components bên trong folder src. Bên trong folder components vừa tạo, tạo một folder mới tên là todos và file TodoForm.js với đoạn code như sau:

import React from "react";
import { FlexboxGrid, Panel, Form, ButtonToolbar, Button } from "rsuite";

const TodoForm = () => {
  return (
    <Panel header={<h3>Add ToDo</h3>} bordered>
      <Form fluid>
        <Form.Group>
          <Form.ControlLabel>What you want to do?</Form.ControlLabel>
          <Form.Control name="task" />
        </Form.Group>
        <Form.Group>
          <ButtonToolbar>
            <Button appearance="primary">Create</Button>
          </ButtonToolbar>
        </Form.Group>
      </Form>
    </Panel>
  );
};

export default TodoForm;

Ở đây chúng ta import các components như FlexboxGrid, Panel, Form, ButtonToolbar, Button để tạo form cho người dùng nhập todo. Để sử dụng TodoForm component vừa được tạo, chúng ta cần import vào file App.js:

...
import TodoForm from "./components/todos/TodoForm";
...

Sau đó, thêm TodoForm vào trong FlexboxGrid.Item component.

...
<FlexboxGrid.Item colspan={12}>
  <TodoForm>
</FlexboxGrid.Item>
...

Khi bạn quay lại browser, lần này bạn sẽ thấy form nhập todo.

Tạo Todo List

Bây giờ, chúng ta sẽ tạo TodoList component để hiển thị danh sách Todo mà người dùng nhập. Tạo file TodoList.js trong components folder và thêm đoạn code sau:

import React from "react";
import { List, IconButton, FlexboxGrid } from "rsuite";
import { Icon } from "@rsuite/icons";

const MinusSvg = React.forwardRef((props, ref) => (
  <svg {...props} xmlns="http://www.w3.org/2000/svg" version="1.1" width="16" height="16" viewBox="0 0 16 16" ref={ref}>
    <title>minus-copy</title>
    <path d="M2 7h12c0.552 0 1 0.448 1 1s-0.448 1-1 1h-12c-0.552 0-1-0.448-1-1s0.448-1 1-1z" />
  </svg>
));

const TodoList = () => {
  const [todos, setTodos] = React.useState([]);

  React.useEffect(() => {
    fetch("http://jsonplaceholder.typicode.com/posts?_limit=10")
      .then(res => res.json())
      .then(posts => setTodos(posts))
      .catch(err => {
        console.error(err);
      });
  }, []);

  return (
    <section>
      <List>
        {todos.map((todo, i) => (
          <List.Item key={i} index={i}>
            <FlexboxGrid justify="space-around">
              <FlexboxGrid.Item colspan={12}>
                <h5>{todo.title}</h5>
              </FlexboxGrid.Item>
              <FlexboxGrid.Item colspan={10}></FlexboxGrid.Item>
              <FlexboxGrid.Item colspan={2}>
                <IconButton icon={<Icon as={MinusSvg} />} color="red" appearance="primary" circle />
              </FlexboxGrid.Item>
            </FlexboxGrid>
          </List.Item>
        ))}
      </List>
    </section>
  );
};


export default TodoList;

Trong đoạn code trên, chúng ta import thêm List và IconButton từ React Suite để định nghĩa cho danh sách todo trong application. Sau đó chúng ta sẽ lặp qua mảng các todos (ở đây chúng mình fetch data mẫu) và hiển thị nội dung todo. Trong file App.js, import TodoList component:

...
import TodoList from "./components/todos/TodoList";
...

Sau đó thêm TodoList vào trong FlexboxGrid.Item component.

...
<FlexboxGrid.Item colspan={12}>
  ...
  <TodoList />
</FlexboxGrid.Item>
...

Chạy application và xem lại giao diện hoàn chỉnh

Ứng dụng Todo App của chúng ta hiện tại sẽ trông như hình dưới đây:

Như vậy là với sự trợ giúp của thư viện RSuite, chỉ cần một ít thời gian là chúng ta đã có thể xây dựng được một UI trông khá đẹp dành cho Todo App. Bạn có thể bổ sung thêm phần thao tác với dữ liệu (CRUD) để tạo nên Todo App hoàn chỉnh. Ở bài viết này, chúng mình chỉ giới thiệu cách dùng components của React Suite để xây dựng giao diện cho application.

Kết luận

Kết thúc bài viết này, bạn đã được làm quen với thư viện UI cho React là RSuite. Chúng ta cũng đã có thể tạo giao diện Todo App một cách dễ dàng bằng cách import và sử dụng các component mà RSuite cung cấp sẵn. Mình tin rằng mỗi lần thực hành sẽ tạo ra nhiều sự khác biệt, vì vậy nếu các bạn có hứng thú với việc xây dựng một giao diện tương tác với user một cách dễ dàng, hãy bắt tay vào tìm hiểu, sử dụng React Suite và mở rộng thêm các chức năng của application. 

Có một lưu ý là React Suite được thiết kế và triển khai để sử dụng trên desktop browsers thay vì mobile browsers, vì vậy nếu các bạn muốn phát triển sản phẩm có thể responsive trên mobile browsers thì cần cân nhắc nên sử dụng UI Framework khác phù hợp hơn.

Mình mong là bài viết sẽ mang lại hữu ích cho những bạn đang tìm hiểu về UI Framework. Chúc các bạn có một ngày tốt lành 😀