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:

React Forms

Giống như trong HTML, React sử dụng các form để cho phép người dùng tương tác với trang web.

Thêm các Form trong React

Chúng ta thêm một form với React giống như bất kỳ phần tử nào khác:

Ví dụ sau sẽ thêm vào một form để cho phép người dùng nhập tên của họ:

Đoạn code này sẽ hoạt động như bình thường, form sẽ được gửi và trang web sẽ được làm mới.

Nhưng đây thường không phải là điều chúng ta muốn xảy ra trong React.

Chúng ta muốn ngăn chặn hành vi mặc định này và cho phép React kiểm soát form.

Xử lý các Form

Xử lý các form là cách chúng ta xử lý dữ liệu khi nó thay đổi giá trị hoặc được gửi.

Trong HTML, dữ liệu của form thường được xử lý bởi DOM.

Trong React, dữ liệu của form thường được xử lý bởi các component.

Khi dữ liệu được xử lý bởi các component, tất cả các dữ liệu được lưu trữ trong component state.

Chúng ta có thể kiểm soát các thay đổi bằng cách thêm hàm xử lý sự kiện trong thuộc tính onChange.

Chúng ta có thể sử dụng useState Hook để theo dõi giá trị của mỗi input và cung cấp một "nguồn thông tin chính xác duy nhất" cho toàn bộ ứng dụng.

Ghi chú: Hãy xem phần React Hook để biết thêm thông tin về Hook.

Ví dụ sau sẽ sử dụng useState Hook để quản lý các input:

Gửi các Form

Chúng ta có thể kiểm soát hành động gửi dữ liệu bằng cách thêm một hàm xử lý sự kiện trong thuộc tính onSubmit của phần tử <form>:

Ví dụ sau sẽ thêm một submit button và một hàm xử lý sự kiện trong thuộc tính onSubmit:

Nhiều trường input

Chúng ta có thể kiểm soát giá trị của nhiều trường input bằng cách thêm thuộc tính name vào mỗi phần tử.

Chúng ta sẽ khởi tạo state với một đối tượng rỗng.

Để truy cập các trường trong hàm xử lý sự kiện chúng ta sử dụng cú pháp event.target.name và event.target.value.

Để cập nhật state, chúng ta sử dụng cặp dấu ngoặc vuông xung quanh tên của thuộc tính.

Ví dụ sau sẽ viết một form với hai trường input:

Ghi chú: Chúng ta sử dụng cùng một hàm xử lý sự kiện cho cả hai trường input, chúng ta có thể viết hàm xử lý sự kiện cho mỗi input, nhưng điều này mang lại cho chúng ta code sạch hơn nhiều và là cách ưa thích trong React.

Textarea

Phần tử textarea trong React hơi khác so với HTML thông thường.

Trong HTML, giá trị của một textarea là đoạn văn bản ở giữa thẻ bắt đầu <textarea> và thẻ kết thúc </textarea>.

Trong React giá trị của một textarea được đặt trong thuộc tính value. Chúng ta sẽ sử dụng useState Hook để quản lý giá trị của textarea:

Ví dụ sau là một textarea đơn giản với một số nội dung:

Select

Một danh sách thả xuống, hay còn gọi là một select box, trong React cũng có một chút khác biệt so với HTML.

Trong HTML, giá trị được chọn trong danh sách thả xuống được định nghĩa với thuộc tính selected:

Trong React, giá trị được chọn được định nghĩa với thuộc tính value trong thẻ select:

Ví dụ sau là một select box đơn giản, ở đó giá trị được chọn "Volvo" được khởi tạo trong constructor:

Bằng cách thực hiện những thay đổi nhỏ này đối với <textarea> và <select>, React có thể xử lý tất cả các phần tử input theo cùng một cách.

React Lists

Trong React, chúng ta sẽ render danh sách bằng một số loại vòng lặp.

Phương thức mảng của JavaScript map() thường là phương thức được ưa thích.

Lưu ý: Nếu như bạn cần ôn lại phương thức map(), thì hãy xem phần ES6.

Chúng ta hãy render tất cả các cars từ Garage của chúng ta:

Khi chúng ta chạy đoạn code này trong create-react-app, nó sẽ làm việc nhưng chúng ta sẽ nhận được một cảnh báo rằng không có "key" được cung cấp cho các list item.

Key là cái gì ?

Key cho phép React theo dõi các phần tử. Bằng cách này, nếu như một item được cập nhật hoặc bị xóa, thì chỉ item đó sẽ được render lại thay vì toàn bộ danh sách.

Key cần phải là duy nhất đối với mỗi phần tử anh em ruột. Nhưng chúng có thể trùng nhau trên phạm vi toàn cầu.

Thông thường, key sẽ là một ID duy nhất được gán cho mỗi item. Chúng ta có thể sử dụng chỉ số của mảng như là một key.

Chúng ta hãy sửa lại ví dụ trước để bao gồm các key:

React Conditional Rendering

Trong React, chúng ta có thể render các component dựa vào điều kiện.

Có một số cách để làm việc này là sử dụng câu lệnh if, sử dụng toán tử &&, sử dụng ternary operator.

Câu lệnh if

Chúng ta có thể sử dụng câu lệnh if của JavaScript để quyết định xem component nào sẽ được render.

Trong ví dụ sau chúng ta sẽ sử dụng hai component này:

Bây giờ, chúng ta sẽ tạo ra một component khác, bên trong component này chúng ta sẽ chọn ra component nào sẽ được render dựa vào một điều kiện:

Thử thay đổi giá trị của thuộc tính isGoal thành true:

Toán tử logic &&

Một cách khác để render một React component dựa vào điều kiện là sử dụng toán tử &&.

Trong ví dụ sau chúng ta có thể nhúng các biểu thức JavaScript trong JSX bằng cách sử dụng cặp dấu ngoặc nhọn:

Nếu như biểu thức cars.length > 0 có giá trị là true, thì biểu thức sau toán tử && sẽ được render.

Thử làm rỗng mảng cars:

Ternary Operator

Một cách khác để render các phần tử dựa vào điều kiện là sử dụng ternary operator.

Chúng ta sẽ quay trở lại ví dụ goal.

Ví dụ sau sẽ trả về MadeGoal component nếu như isGoal là true, nếu không thì trả về MissedGoal component:

Để tìm hiểu thêm, chúng ta hãy xem phần ternary operator.