JSX trong ReactJs là gì? Chỉ 5 phút hiểu nhanh về JSX

Một số ưu điểm của JSX trong ReactJs

• Mang lại tốc độ nhanh hơn vì nó thực hiện tối ưu hóa khi biên dịch mã sang JavaScript.
• Hầu hết các lỗi đều có thể được phát hiện ngay trong quá trình biên dịch mã.
• Nếu bạn quen thuộc với HTML, JSX sẽ giúp bạn viết các mẫu (templates) nhanh và dễ dàng hơn.

Sử dụng JSX trong ReactJs

JSX cho phép lập trình viên 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 nào createElement()  và/hoặc appendChild(). 

Ví dụ :

Có JSX, đoạn code sẽ như sau:

const myelement = <h1>I Love JSX!</h1>;

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

Không có JSX, đoạn code sẽ như sau:

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

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

Có thể thấy, trong ví dụ đầu tiên, JSX cho phép chúng ta viết HTML trực tiếp trong JavaScript.

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 mã.

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 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ả.

Ví dụ

Thực hiện biểu thức 5+5:

const myelement = <h1>React is {5 + 5} times better with JSX</h1>;

>>>Đọc thêm: Framework ReactJs - Top 10 Framework ReactJs tốt nhất cho LTV

Chèn khối HTML lớn

Để viết HTML trên nhiều dòng, bạn có thể đặt HTML bên trong dấu ngoặc đơn như sau:

Ví dụ:

Tạo một danh sách với ba mục sau

const myelement = (

  <ul>

    <li>Apples</li>

    <li>Bananas</li>

    <li>Cherries</li>

  </ul>

);

>>> Tham khảo: Khóa học lập trình ReactJS

Thuộc tính JSX trong ReactJs

Bạn có thể sử dụng các thuộc tính tùy chỉnh của riêng mình ngoài các thuộc tính HTML thông thường. Khi muốn thêm thuộc tính tùy chỉnh của JSX trong ReactJS, bạn cần sử dụng tiền tố data-, Trong ví dụ sau, data-myattribute đã được thêm làm thuộc tính của phần tử p.

import React from 'react';

class App extends React.Component {

   render() {

      return (

         <div>

            <h1>Header</h1>

            <h2>Content</h2>

            <p data-myattribute = "somevalue">This is the content!!!</p>

         </div>

      );

   }

}

export default App;

>>> Đọc thêm: Vòng đời thành phần trong ReactJS - Tìm hiểu vòng đời của Component trong ReactJS

Tạo kiểu JSX trong ReactJs

React khuyên các lập trình viên nên sử dụng các kiểu nội tuyến (inline styles). Khi muốn thiết lập các kiểu nội tuyến, bạn cần phải sử dụng cú pháp camelcase. React sẽ tự động thêm px sau giá trị số trên các phần tử cụ thể. Ví dụ sau đây sẽ cho bạn thấy cách để thêm nội tuyến myStyle vào phần tử h1.

import React from 'react';

class App extends React.Component {

   render() {

      var myStyle = {

         fontSize: 100,

         color: '#FF0000'

      }

      return (

         <div>

            <h1 style = {myStyle}>Header</h1>

         </div>

      );

   }

}

export default App;

Quy ước đặt tên JSX trong ReactJS

Các thẻ HTML luôn sử dụng tên thẻ viết thường, trong khi các thành phần React bắt đầu bằng chữ hoa. Lưu ý: Bạn nên sử dụng className và htmlFor làm tên thuộc tính XML thay vì class và for.

Trên trang web chính thức của React, điều này được giải thích là do JSX là JavaScript nên các định danh như class và for không được khuyến khích làm tên thuộc tính XML. Thay vào đó, các thành phần React DOM yêu cầu các tên thuộc tính DOM tương ứng như className và htmlFor.

Kết luận: JSX trong ReactJS là một cú pháp mở rộng cho phép người dùng lập trình ứng dụng dễ dàng hơn, bạn có thể tận dụng những ưu điểm vượt trội của JSX để  giúp việc lập trình nhanh chóng và hiệu quả hơn.

>>> Đọc thêm thông tin về ReactJS tại  Viện công nghệ thông tin T3H