Styling React Using Sass

Sass là cái gì?

Sass là một tiền xử lý của CSS.

Các tập tin Sass được thực thi trên server và gửi CSS đến trình duyệt.

Bạn có thể tìm hiểu thêm về Sass trong Tutorial của chúng tôi.

Tôi có thể sử dụng Sass không?

Nếu như chúng ta sử dụng create-react-app trong dự án, chúng ta có thể dễ dàng cài đặt và sử dụng Sass trong các dự án React.

Chúng ta có thể cài đặt Sass bằng cách chạy dòng lệnh sau trong terminal:

Bây giờ chúng ta đã sẵn sàng để include các tập tin Sass trong dự án của mình!

Tạo ra một tập tin Sass

Cách tạo ra một tập tin Sass giống như cách chúng ta tạo ra một tập tin CSS, nhưng tập tin Sass có phần mở rộng là *.scss

Trong các tập tin Sass chúng ta có thể sử dụng biến và function:

Ví dụ trong tập tin my-sass.scss chúng ta tạo ra một biến để định nghĩa màu sắc của đoạn văn bản:

Cách import tập tin Sass giống như cách chúng ta import một tập tin CSS:

index.js:

Styling React Using CSS

Có nhiều cách để tạo kiểu cho React bằng CSS, tutorial này sẽ xem xét kỹ hơn ba cách phổ biến:

1. Inline styling
2. CSS stylesheets
3. CSS Modules

Inline Styling

Để tạo kiểu cho một phần tử với thuộc tính style, giá trị phải là một đối tượng JavaScript:

Ví dụ sau sẽ chèn một đối tượng với thông tin về các thuộc tính css:

Lưu ý: Trong JSX, các biểu thức JavaScript được viết bên trong cặp dấu ngoặc nhọn, và vì các đối tượng JavaScript cũng sử dụng cặp dấu ngoặc nhọn, các thuộc tính css trong ví dụ bên trên được viết bên trong hai cặp dấu ngoặc nhọn được lồng nhau {{}}.

Tên thuộc tính theo quy ước camelCased

Do inline CSS được viết bằng một đối tượng JavaScript, các thuộc tính với dấu gạch nối, như background-color, phải được viết bằng cú pháp camelCased:

Ví dụ sau sẽ sử dụng backgroundColor thay cho background-color:

Đối tượng JavaScript

Chúng ta cũng có thể tạo ra một đối tượng với thông tin về các thuộc tính css, và tham chiếu đến nó trong thuộc tính style:

Ví dụ sau sẽ tạo ra một đối tượng chứa các thuộc tính css có tên là myStyle:

CSS Stylesheet

Chúng ta có thể viết các thuộc tính CSS trong một tập tin riêng biệt, chỉ cần lưu tập tin đó với phần mở rộng là *.css, và import nó vào ứng dụng.

Chúng ta hãy tạo ra một tập tin mới có tên là "App.css" và chèn một số CSS code vào nó:

Lưu ý: Chúng ta có thể gọi tập tin này bất cứ khi nào chúng ta thích, chỉ cần nhớ chính xác phần mở rộng của tập tin.

Import tập tin css trên vào ứng dụng:

index.js:

CSS Modules

Một cách khác để thêm css vào ứng dụng là sử dụng các CSS Module.

Các CSS Module thì thuận tiện cho các component được đặt trong các tập tin riêng rẽ.

CSS bên trong một module chỉ có sẵn cho component đã import nó, và chúng ta không phải lo lắng về việc xung đột tên.

Chúng ta hãy tạo ra CSS module với phần mở rộng là .module.css, ví dụ: my-style.module.css.

Import css vào trong component:

Car.js:

Import component vào trong ứng dụng:

index.js:

React Memo

Sử dụng memo sẽ khiến React bỏ qua việc render một component nếu như props của nó không bị thay đổi.

Điều này có thể cải thiện hiệu suất.

Phần này sử dụng React Hooks. Hãy xem phần React Hooks để biết thêm thông tin về Hooks.

Vấn đề

Trong ví dụ sau, Todos component sẽ được render lại ngay cả khi todos không bị thay đổi.

index.js:

Todos.js:

Khi chúng ta click vào increment button, Todos component sẽ được render lại.

Nếu như component này phức tạp, thì nó có thể gây ra vấn đề về hiệu suất.

Giải pháp

Để sửa vấn đề này, chúng ta có thể sử dụng memo.

Sử dụng memo để giữ cho Todos component khỏi render lại một cách không cần thiết.

Bao bọc Todos component export trong memo:

index.js:

Todos.js:

Bây giờ Todos component chỉ render lại khi todos được truyền tới nó qua props được cập nhật.

React Router

Khi chúng ta tạo ra một ứng dụng React thì mặc định sẽ không bao gồm định tuyến đến các trang.

React Router là giải pháp phổ biến nhất để định tuyến đến các trang.

Thêm React Router

Để thêm React Router vào ứng dụng của mình, chúng ta hãy chạy dòng lệnh sau trong terminal từ thư mục gốc của ứng dụng:

Lưu ý: Tutorial này sử dụng React Router v6. Nếu như bạn nâng cấp từ v5, thì bạn sẽ cần phải sử dụng lá cờ @latest:

Cấu trúc thư mục

Để tạo ra một ứng dụng với định tuyến đến nhiều trang, trước tiên chúng ta hãy bắt đầu bằng cấu trúc tập tin.

Ở bên trong thư mục src, chúng ta sẽ tạo ra một thư mục có tên là pages với một số tập tin:

Mỗi tập tin sẽ chứa một React component vô cùng cơ bản.

Cách sử dụng cơ bản

Bây giờ chúng ta sẽ sử dụng Router của mình trong tập tin index.js.

Ví dụ sau sẽ sử dụng React Router để định tuyến đến các trang dựa vào URL:

index.js:

Giải thích ví dụ

Trước tiên chúng ta bao bọc nội dung của mình bằng <BrowserRouter>.

Sau đó chúng ta sẽ định nghĩa <Routes> của mình. Một ứng dụng có thể có nhiều <Routes>. Ví dụ cơ bản của chúng ta chỉ sử dụng một <Routes>.

Các <Route> có thể được lồng nhau. <Route> đầu tiên có đường dẫn là / và render ra Layout component.

Các <Route> được lồng nhau kế thừa và thêm vào route cha. Vì vậy đường dẫn đến blogs được kết hợp với route cha và trở thành /blogs.

Định tuyến đến Home component  không có đường dẫn nhưng có thuộc tính index. Thuộc tính index này chỉ định rằng route này là route mặc định cho route cha, đó là /.

Việc thiết lập đường dẫn thành * sẽ đóng vai trò chung cho mọi URL không xác định. Điều này rất tốt cho một trang thông báo lỗi 404.

Các trang / Component

Layout component có các phần tử <Outlet> và <Link>.

Phần tử <Outlet> sẽ render ra route hiện tại được chọn.

Phần tử <Link> được sử dụng để thiết lập URL và theo dõi lịch sử duyệt web.

Bất cứ khi nào chúng ta liên kết đến một đường dẫn nội bộ, chúng ta sẽ sử dụng phần tử <Link> thay cho <a href="">.

Layout route là một component để chèn nội dung chung trên tất cả các trang, chẳng hạn như một menu điều hướng.

Layout.js:

Home.js:

Blogs.js:

Contact.js:

NoPage.js: