React.js 04 – JSX trong React.js

0
259

JSX là một công nghệ được React giới thiệu

Mặc dù React có thể hoạt động hoàn toàn tốt mà không cần sử dụng JSX, nhưng đây là một công nghệ lý tưởng để làm việc với các Components, vì vậy React được hưởng lợi rất nhiều từ JSX.

React sử dụng JSX để tạo templating thay vì Javascript thông thường.  Dưới đây là một số ưu điểm đi kèm với nó.

  • JSX nhanh vì nó thực hiện tối ưu hóa trong khi biên dịch mã thành Javascript.
  • JSX an toàn và hầu hết các lỗi có thể được bắt gặp trong quá trình biên dịch
  • JSX giúp viết template dễ dàng và nhanh hơn, nếu bạn đã quen thuộc với HTML

Cú pháp JSX

Dưới đây là một số điều cần nhớ khi các bạn khai báo cú pháp JSX.

  • Thẻ bắt đầu bằng chữ thường được hiện thị dưới dạng các phần tử HTML thông thường
  • Thẻ bắt đầu bằng chữ hoa được hiện thị dưới dạng các thành phần React.
  • Bất kỳ mã nào được viết trong dấu ngoặc nhọn {...} đều được hiểu là mã Javascript theo nghĩa đen.

Đây là cú pháp xác định thẻ h1 chứa chuỗi.

Mặc dù có vẻ như nó có thành phần của HTML , nhưng trên thực tế tất cả đều là Javascript.

Sử dụng JSX trong React

Ở phần trước khi các bạn cài đặt bằng create-react-app các bạn sẽ thấy ở file App.js sẽ có đoạn mã như sau.

trong đoạn mã trên các toàn bộ nội dung được viết trong hàm render() đều là JSX.

Bây giờ các bạn hãy xóa toàn bộ nội dung ở trong render() và viết đoạn mã JSX của mình vào.

Ví dụ

File App.js

Các bạn nên chú ý một điều là một hàm render() chỉ trả về duy nhất một phần tử, vì thế trong trường hợp bạn muốn trả về 2 hoặc nhiều phần tử con thì chỉ cần thêm phần tử cha bao bọc 2 phần tử con.

Ví dụ dưới đây tôi sử dụng thẻ div làm trình bao bọc cho các phần tử h1, h2p.

File App.js

 

HTML trong JSX

JSX rất giống với HTML, nhưng thực tế đó là một cú pháp XML.

Vì thế bạn cần nhớ một số điều khác biệt trong HTML và trong JSX.

Bạn cần đóng tất cả các thẻ

Nếu như trong HTML có thể bạn không cần phải đóng các thẻ nhưng đối với JSX bạn phải đóng tất cả các thẻ. Ví dụ với br các bạn sẽ không còn được sử dụng <br> như thế này nữa mà các bạn sẽ phải đóng nó lại như thế này <br/> .

Sử dụng quy tắc camelCase

camelCase – Viết hoa chữ cái đầu tiên của mỗi từ. Chữ cái đầu tiên của cụm từ viết thường.

Trong HTML, bạn sẽ tìm thấy các thuộc tính được viết là các cụm từ (ví dụ: onclick). Trong JSX, các thuộc tính như vậy sẽ đổi tên tương đương với camelCase của chúng.

Ví dụ

  • onchange => onChange
  • onclick => onClick
  • onsubmit => onSubmit

class trở thành className

Do thực tế JSX là Javascript và class là một danh từ riêng trong , nên bạn không thể viết như thế này trong JSX

bạn cần thay đổi thành

Tương tự đối với thuộc tính for cũng là một danh từ riêng vì thế các bạn thay đổi thành htmlFor.

JS Trong JSX

JSX chấp nhận bất kỳ loại mã Javascript nào được trộn vào nó.

Bất cứ khi nào bạn muốn thêm đoạn mã JS, chỉ cần đặt nó vào trong dấu ngoặc nhọn {}.

Ví dụ dưới đây là cách bạn sử dụng giá trị của một biến trong JSX.

File App.js

Khi chạy bạn sẽ nhận được kết quả như màn hình bên dưới

Hay như ví dụ dưới đây JSX chấp nhận các đoạn mã JS.

Như các bạn có thể thấy chúng ta lồng mã JS vào bên trong JSX được định nghĩa bên trong một đoạn mã JS được lồng trong JSX . Bạn có thể lồng nó nhiều cấp độ hơn nữa nếu bạn muốn.

CSS trong React

JSX cung cấp một cách hay để định nghĩa CSS

CSS nội tuyến trong JSX không giống như css nội tuyến của HTML. Trong JSX thay vì nhận vào chuỗi chứa mã CSS thì thuộc tính style lại nhận vào một đối tượng. Điều đó có nghĩa là bạn xác định các thuộc tính CSS trong một đối tượng.

Ví dụ: Style cho thẻ h1

Khi chạy lên các bạn sẽ thấy sự thay đối

Các giá trị CSS bạn viết trong JSX hơi khác so với CSS đơn giản.

  • Tên thuộc tính được viết theo dạng camelCase
  • Gía trị thuộc tính là chuỗi

Thêm Comment Trong JSX

Bạn có thể thêm comment vào JSX bằng cách sử dụng các comment JS bình thường bên trong các biểu thức.

Ví dụ

File App.js

 

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây