JSX là gì?

• JSX là viết tắt của JavaScript XML, nó cho phép chúng ta viết HTML trong React.
• JSX giúp viết và thêm HTML trong React dễ dàng hơn
• JSX cho phép chúng ta viết các phần tử HTML bằng JavaScript và đặt chúng trong DOM mà không cần bất kỳ phương thức createElement () và / hoặc appendChild () nào.
• JSX là một phần mở rộng của ngôn ngữ JavaScript dựa trên ES6 và được dịch sang JavaScript thông thường trong thời gian chạy
• Bạn không bắt buộc phải sử dụng JSX

Ví dụ về sử dụng và không sử dụng JSX:

// Có JSX
// index.js

import React from 'react';
import ReactDOM from 'react-dom/client';

const myelement = <p>Đẹp trai là một tội ác thì toàn bộ zai bách khoa phải đi tù!</p>;

ReactDOM.render(myelement, document.getElementById('root'));

// Không có JSX
// index.js

import React from 'react';
import ReactDOM from 'react-dom/client';

const myelement = React.createElement('p',{},'Đẹp trai là một tội ác thì toàn bộ zai bách khoa phải đi tù!');

ReactDOM.render(myelement, document.getElementById('root'));

• Hãy so sánh 2 đoạn code, dễ thấy code sử dụng JSX đơn giản, dễ hiểu hơn.

Một số quy ước trong JSX

• Đặt tên trong JSX

  • tên thẻ luôn viết thường
  • tên các React component phải viết hoa chữ cái đầu
  • sử dụng className và htmlFor thay thế cho class và for
  • Các thuộc tính trong thẻ phải được viết dưới dạng camelCase (vd: onClick, className,...)

• Với JSX, bạn có thể viết các biểu thức bên trong dấu ngoặc nhọn {}

const apple = 30;

const myelement = <h1>Có {apple} quả táo</h1>
const myelement = <h1>Có {30 + 10} quả táo</h1>

• Để viết HTML trên nhiều dòng, hãy đặt HTML bên trong dấu ngoặc đơn và đồng thời luôn có một thẻ mẹ bao quanh tất cả.

const myelement = (
   <div>
       <p>Đoạn văn thứ nhất</p>
       <p>Đoạn văn thứ hai</p>
   </div>
)

• Nhưng nếu bạn chỉ muốn có 2 thẻ p mà không cần thẻ div bao quanh thì có thể làm như sau.

const myelement = (
    <>
        <p>Đoạn văn thứ nhất</p>
        <p>Đoạn văn thứ hai</p>
    </>
)

• Hoặc

const myelement = (
   <fragment>
       <p>Đoạn văn thứ nhất</p>
       <p>Đoạn văn thứ hai</p>
   </fragment>
)

• Thêm class cho các thẻ trong JSX.

const myelement = <p className="par1">Đoạn văn thứ nhất</p>

• Thêm thuộc tính cho các thẻ trong JSX như trong html.

const myelement =  <input type="text" value="" size="10" />

• Thêm event cho các thẻ trong JSX như trong html.

const myelement =  <button onClick={functionHandle}>Click here!</button>

Trên đây là những gì mình hiểu về JSX, nếu bạn có ý kiến, thắc mắc hay bổ sung gì hãy comment cho mình biết nhé!

Cảm ơn vì đã đọc đến đây!!!