+2

React JSX

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!!!


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.