ReactJS - Styling: A Beginner's Guide

Xin chào các bạn future React developers! Hôm nay, chúng ta sẽ cùng lặn vào thế giới đầy màu sắc của việc styling trong ReactJS. Đừng lo lắng nếu bạn chưa bao giờ viết một dòng mã trước đây - chúng ta sẽ bắt đầu từ những điều cơ bản nhất và dần dần nâng cao. Cuối cùng của bài hướng dẫn này, bạn sẽ có thể styling các component React của mình như một chuyên gia!

Tại sao styling lại quan trọng

Trước khi chúng ta bắt đầu, hãy để tôi chia sẻ một câu chuyện ngắn. Khi tôi mới bắt đầu dạy React, tôi có một học viên đã tạo ra một ứng dụng tuyệt vời... nhưng nó trông như thể từ năm 1995! Đó là khi tôi nhận ra tầm quan trọng của styling. Nó không chỉ là việc làm cho mọi thứ đẹp hơn - mà còn là việc tạo ra một trải nghiệm người dùng mà mọi người sẽ yêu thích.

Bây giờ, hãy cùng khám phá ba cách chính để styling các component React của bạn:

1. CSS Stylesheets
2. Inline Styling
3. CSS Modules

CSS Stylesheets: Cách tiếp cận cổ điển

CSS Stylesheets là gì?

CSS (Cascading Style Sheets) là cách tiếp cận truyền thống để styling các trang web. Nó giống như một nhà thiết kế thời trang cho các phần tử HTML của bạn, chỉ định cách chúng nên ăn mặc và trình bày mình.

Cách sử dụng CSS Stylesheets trong React

Hãy bắt đầu với một ví dụ đơn giản. Hãy tưởng tượng chúng ta có một component React gọi là Button:

// Button.js
import React from 'react';
import './Button.css';

function Button() {
return <button className="cool-button">Click me!</button>;
}

export default Button;

Bây giờ, chúng ta tạo một tệp CSS riêng biệt gọi là Button.css:

/* Button.css */
.cool-button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

Trong ví dụ này, chúng ta đang nhập tệp CSS trực tiếp vào component React của mình. Thuộc tính className trong React tương đương với thuộc tính class trong HTML.

Ưu và nhược điểm của CSS Stylesheets

Ưu điểm	Nhược điểm
quen thuộc với hầu hết các nhà phát triển	Mức độ toàn cục có thể dẫn đến xung đột tên
Dễ bảo trì cho các dự án nhỏ	Có thể trở nên phức tạp cho các dự án lớn
Tốt cho các phong cách toàn ứng dụng	Ít linh hoạt hơn so với các phương pháp khác

Inline Styling: Style nhanh chóng

Inline Styling là gì?

Inline styling trong React cho phép bạn viết CSS trực tiếp trong mã JavaScript của bạn. Nó giống như cấp cho các component của bạn một người stylist cá nhân!

Cách sử dụng Inline Styling trong React

Hãy thay đổi giao diện của component Button của chúng ta bằng cách sử dụng inline styling:

// Button.js
import React from 'react';

function Button() {
const buttonStyle = {
backgroundColor: '#4CAF50',
border: 'none',
color: 'white',
padding: '15px 32px',
textAlign: 'center',
textDecoration: 'none',
display: 'inline-block',
fontSize: '16px',
margin: '4px 2px',
cursor: 'pointer'
};

return <button style={buttonStyle}>Click me!</button>;
}

export default Button;

Trong ví dụ này, chúng ta xác định các phong cách của mình như một đối tượng JavaScript và truyền nó đến thuộc tính style của nút.

Ưu và nhược điểm của Inline Styling

Ưu điểm	Nhược điểm
Rất linh hoạt - có thể thay đổi dựa trên props hoặc state	Có thể làm cho các component khó đọc
Không có nguy cơ xung đột phong cách	Không hỗ trợ tất cả các tính năng CSS (như media queries)
Dễ dàng styling dựa trên các điều kiện	Mất đi các ưu thế của CSS, như caching

CSS Modules: Cả hai thế giới tốt nhất

CSS Modules là gì?

CSS Modules là một bổ sung mới hơn cho bộ công cụ styling React. Chúng cho phép bạn viết các tệp CSS được gán cho một component cụ thể, tránh được tính chất toàn cục của CSS truyền thống.

Cách sử dụng CSS Modules trong React

Hãy refactoring component Button của chúng ta để sử dụng CSS Modules:

// Button.js
import React from 'react';
import styles from './Button.module.css';

function Button() {
return <button className={styles.coolButton}>Click me!</button>;
}

export default Button;

Và tệp CSS của chúng ta, bây giờ được đặt tên là Button.module.css:

/* Button.module.css */
.coolButton {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}

Điều kỳ diệu ở đây là React sẽ tự động tạo ra các tên class duy nhất, đảm bảo rằng các phong cách của bạn không xung đột với các component khác.

Ưu và nhược điểm của CSS Modules

Ưu điểm	Nhược điểm
Các phong cách scoped ngăn chặn xung đột	Cần thêm cài đặt build
Có thể sử dụng toàn bộ sức mạnh của CSS	Độ khó học đối với các nhà phát triển quen thuộc với CSS toàn cục
Tăng cường khả năng bảo trì cho các dự án lớn	Không linh hoạt như các phong cách inline

Chọn phương pháp styling phù hợp

Bây giờ chúng ta đã khám phá ba phương pháp này, bạn có thể tự hỏi, "Tôi nên sử dụng phương pháp nào?" Đúng vậy, như với nhiều điều trong lập trình, câu trả lời là: nó tùy thuộc vào!

• Sử dụng CSS Stylesheets cho các phong cách toàn cục và khi làm việc trên các dự án nhỏ.
• Sử dụng Inline Styling khi bạn cần các phong cách linh hoạt thay đổi dựa trên props hoặc state.
• Sử dụng CSS Modules cho các dự án lớn nơi việc cách ly phong cách là quan trọng.

Nhớ rằng, bạn thậm chí có thể kết hợp các phương pháp này trong một dự án duy nhất. Cốt lõi là chọn đúng công cụ cho công việc.

Kết luận

Chúc mừng! Bạn vừa bước những bước đầu tiên vào thế giới styling các component React. Dù bạn đang tạo một nút sleek, một form phức tạp hay một ứng dụng hoàn chỉnh, các phương pháp styling này sẽ giúp bạn hiện thực hóa tầm nhìn của mình.

Nhớ rằng, thực hành là cách tốt nhất để trở thành thạo. Đừng ngại thử nghiệm với các phương pháp styling khác nhau và tìm ra điều gì hoạt động tốt nhất cho bạn và dự án của bạn. Chúc bạn may mắn và các component của bạn luôn thời trang!

Credits: Image by storyset