2.3. JSX là gì ?

<div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <p>
        Edit <code>src/App.js</code> and save to reload.
      </p>
      <a
        className="App-link"
        href="https://reactjs.org"
        target="_blank"
        rel="noopener noreferrer"
      >
        Learn React
      </a>
    </header>
</div>

Đoạn mã trên chúng ta đã thấy ở trong các phần trước khi dự án được khởi tạo. Đoạn mã này nhìn qua trông giống HTML mà chúng ta đã từng sử dụng, tuy nhiên nó lại không phải HTML mà đó là cú pháp của JSX - Javascript XML.

JSX là cú pháp do đội ngũ React phát triển, sử dụng chủ yếu trong React. Tuy nhiên vẫn có thể sử dụng JSX cho một vài công cụ khác như VueJS.

Mục đích của JSX được tạo ra để có thể tạo ra các element một cách tường minh và đơn giản. JSX cho phép developer có thể tạo ra các đoạn HTML nhanh chóng, kèm với khả năng có thể chèn các giá trị JS vào bên trong để tạo ra trang web có nội dung động.

Bạn có nhất thiết phải dùng JSX với ứng dụng React không ?

Câu trả lời là Không. Chúng ta cùng xét với 2 ví dụ dưới đây:

Ví dụ 1: Viết theo cú pháp của JSX

function App() {
  return (
    <div className="app">
      <h1>Hello, World!</h1>
    </div>
  );
}

Ví dụ 2: Viết theo cú pháp thông thường

import React from "react";

function App() {
  return React.createElement(
    "div",
    { className: "app" },
    React.createElement("h1", {}, "Hello, World!")
  );
}

Tuy cả 2 cách đều cho ra một kết quả nhưng dễ thấy cách viết ở ví dụ 2 sẽ phức tạp hơn ví dụ 1. Đặc biệt, nếu số lượng phần tử nhiều và lồng nhau. Vì vậy, mặc dù JSX không bắt buộc hoàn toàn với React, nhưng gần như các dự án hầu như sử dụng JSX.

Thực tế, JSX cuối cùng cũng sẽ biến đổi thành các React.createElement dựa vào công cụ babel. Đây là lý do ở phần đầu, chúng ta sử dụng thư viện babel.

Một số lưu ý khi sử dụng JSX

1. JSX không phải là HTML

JSX mặc dù có cú pháp trông rất giống HTML, tuy nhiên nó có một vài đặc điểm khác biệt so với HTML thông thường

1. Single parent root: Các component React cần phải return một thẻ bao ngoài duy nhất hoặc một array, không thể trả về nhiều hơn hai thẻ.

2. className thay vì class. Đây là một lý do kĩ thuật. class là một từ khoá trong JS. Vì vậy, đội ngũ React đã sử dụng className thay vì class để tránh các lỗi.

3. style nhận giá trị là một object, thay vì là cú pháp CSS thông thường

4. Các thuộc tính HTML sẽ được đổi tên theo kiểu camelCase

5. Đối với các đoạn JSX nằm trên nhiều dòng, JSX cần phải được bọc bên trong cặp ngoặc tròn ()

6. Component do chúng ta viết buộc phải được sử dụng ở dưới dạng tên viết hoa.

2. Render giá trị JS với JSX

JSX cho phép chúng ta có thể output các giá trị Javascript trực tiếp vào bên trong. Cú pháp để làm điều này là sử dụng dấu ngoặc nhọn {}. Xét ví dụ sau:

const App = () => {
  const randomAge = Math.floor(Math.random() * 10);
  const imgSrc =
    "https://ptit.edu.vn/images/avatar.png";
  return (
    <div>
      Hello, my name is PTITer. I'm {randomAge} years old.
      <img src={imgSrc} />
    </div>
  );
};

Bằng cách này, chúng ta có thể dễ dàng tạo ra các trang web có nội dung động, có thể hiển thị ra màn hình các giá trị JS cần thiết.

Một điểm lưu ý là các giá trị JS có thể được chèn vào các thuộc tính của các thẻ HTML. Như ở ví dụ trên, ta thấy thẻ img với thuộc tính src đã nhận vào giá trị là imgSrc có kiểu dữ liệu là string.

3. JSX với styling:

Có nhiều cách để có thể style với JSX trong React, tương tự với HTML. Cơ bản sẽ có hai kiểu như sau:

1. Style với file CSS bên ngoài, sử dụng HTML class và id

2. Inline style

Với cách thứ nhất, cách viết CSS không có gì khác biệt. Điểm khác biệt ở đây là chúng ta cần dùng className thay cho class thông thường. Điểm khác biệt ở đây là chúng ta có thể import file css vào bên trong component với cú pháp import "<file>.css". Xét ví dụ sau:

.App {
  text-align: center;
  font-size: '20px';
}

import "./App.css";

const App = () => {
  return <div className="App">Hello, world!</div>;
};

Đối với inline-style, đây là một điểm khác biệt tương đối lớn so với HTML thông thường:

• style trong JSX nhận giá trị là một object (key-value)

• Các key CSS phải được viết dưới dạng camelCase

• Các value CSS cần phải được viết dưới dạng string hoặc number

Xét ví dụ inline-style sau:

const App = () => {
  return (
    <div style={{ backgroundColor: "yellow", fontSize: 18 }}>Hello, World!</div>
  );
};

Một điều lưu ý ở đây là với các giá trị CSS nhận vào là số, đơn vị được sử dụng sẽ là px. Nếu muốn đơn vị khác, chúng ta cần chuyển giá trị thành string và thêm đơn vị đo vào sau giá trị đó.

Cần lưu ý phân biệt hai dấu ngoặc nhọn ở trong ví dụ trên: dấu ngoặc nhọn thứ nhất là ký hiệu đánh dấu việc chúng ta chèn biến Javascript vào trong, dấu ngoặc nhọn thứ hai là ký hiệu bắt đầu của một object javascript.