Reactjs - tìm hiểu React JSX

Reactjs - tìm hiểu React JSX

1. JSX là gì?
JSX là viết tắt của JavaScript XML.
JSX 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.

2. Code JSX
- 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 chuyển đổi các thẻ HTML thành các phần tử react.
- Bạn không bắt buộc phải sử dụng JSX, nhưng JSX giúp bạn viết các ứng dụng React dễ dàng hơn.
Hãy để chúng tôi chứng minh bằng hai ví dụ, ví dụ đầu tiên sử dụng JSX và ví dụ thứ hai thì không:

sử dung JSX

const myelement = <h1>I Love JSX!</h1>;
ReactDOM.render(myelement, document.getElementById('root'));

Không sử dụng JSX

const myelement = React.createElement('h1', {}, 'I do not use JSX!');
ReactDOM.render(myelement, document.getElementById('root'));

3. Biểu thức trong JSX

Với JSX, bạn có thể viết các biểu thức bên trong dấu ngoặc nhọn {}.
Biểu thức có thể là một biến React hoặc thuộc tính hoặc bất kỳ biểu thức JavaScript hợp lệ nào khác. JSX sẽ thực thi biểu thức và trả về kết quả:

4. Chèn một khối lớn HTML

Để viết HTML trên nhiều dòng, hãy đặt HTML bên trong dấu ngoặc đơn ():

const myelement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

5. Một phần tử cấp cao nhất

Mã HTML phải được bao bọc trong MỘT phần tử cấp cao nhất.

Vì vậy, nếu bạn muốn viết hai tiêu đề, bạn phải đặt chúng bên trong phần tử cha, như phần tử div

const myelement = (
  <div>
    <h1>I am a Header.</h1>
    <h1>I am a Header too.</h1>
  </div>
);

6. Các phần tử phải được đóng

JSX tuân theo các quy tắc XML và do đó các phần tử HTML phải được đóng đúng cách.

const myelement = <input type="text" />;

Cám ơn