[React] JSX là gì ? Tổng quan về JSX

JSX là gì ?

JSX (Javascript Syntax Extension) là một loại cú pháp mở rộng dành cho ngôn ngữ JavaScript viết theo kiểu XML. Nó cho phép bạn viết các đoạn mã HTML trong React một cách dẽ dàng và có cấu trúc hơn để thay cho câu lệnh:

React.createElement() trong React.

Đơn giản thì : JSX = Javascript + XML

Bởi vì JSX không phải là Javascript nên bạn phải cần một trình biên dich để dich Babel từ JSX syntax sang JS.

Ví dụ:

React không sử dụng JSX

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

Tương tự với React sử dụng JSX

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

ReactDOM.render(
  <Hello toWhat="World" />,
  document.getElementById('root')
);

Cú pháp JSX

Cú pháp của JSX cũng tương tự như XML.

Ta có thẻ mở tag:

<JSXElementName JSXAttributesopt>

Và thẻ đóng tag:

</JSXElementName>

Ở đây chú ý tên của thẻ mở tag và đóng tag phải giống nhau.

Ví dụ:

 <MyButton color="blue" shadowSize={2}>
      Click Me
    </MyButton>

Ngoài ra JSX cũng có SelfClosingElement:

<JSXElementName JSXAttributes/>

Ví dụ:

<div className="sidebar" />

Lưu ý: JSX không phải là HTML do đó bạn nên cẩn thận với việc nhầm lẫn với cú pháp của HTML .

Ví dụ trong một div element, ta định nghĩa một Class container thì ta không viết là:

div class="container">...</div> mà phải viết là <div className="container">...</div>

(vì class là keyword của Javascript). Hoặc for trong label element thì phải viết thành htmlfor, ....

Lưu ý: HTML tag không cần thẻ đóng cũng được nhưng JSX cần thiết phải có thẻ đóng tag.

<JSXElementName JSXAttributesopt>

# something here

</JSXElementName>

Tại sao nên dùng JSX trong React

Sử dụng JSX trong ReactJS là không bắt buộc, nhưng việc sử dụng nó trong ReactJS rất hữu ích bởi:

+ JSX giúp cho việc xây dựng các ứng dụng React một cách nhanh hơn, dễ tối ưu trong việc complie code sang JS.

+ JSX rất dễ xem các lỗi trong quá trình triển khai bởi hầu hết các lỗi sẽ được hiển thị trong quá trình compile, không như các đoạn mã HTML có thể thừa thiếu các thể div khiến giao diện bị hiển thị sai. JSX lại hoàn toàn ngược lại, khi bạn quên đóng div chẳng hạn thì nó lập tực sẽ hiển thị lỗi.

+ Cú pháp khá giống với HTML nên nó giúp những developers có thể hiểu được một cách dễ dàng, từ đó có thể viết hoặc sửa code mà không gặp nhiều khó khă

+ JSX với cú pháp gần giống XML, cấu trúc cây khi biểu thị các attributes, điều đó giúp ta dễ dàng định nghĩa, quản lý được các component phức tạp, thay vì việc phải định nghĩa và gọi ra nhiều hàm hoặc object trong javascript. Khi nhìn vào cấu trúc đó cũng dễ dàng đọc hiểu được ý nghĩa của các component.

+ Code JSX ngắn hơn, dễ hiểu hơn code JS

Nhúng biểu thức trong JSX

Biểu thức JavaScript có thể nhúng vào trong JSX bằng cách đóng nó trong dấu ngoặc nhọn {}.

Ví dụ:

2 + 2, user.firstName, và formatName (user) là tất cả các biểu thức hợp lệ,  dưới, chúng ta nhúng kết quả của một hàm JavaScript, formatName(user), vào bên trong phần tử <h1>.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

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

Lưu ý: Chúng ta có thể tách JSX vào những tệp khác nhau cho dễ đọc.Làm như vậy để tránh rơi vào trường hợp JS Engines tự thêm chấm phẩy.

JSX cũng là một biểu thức

Sau khi biên dịch, biểu thức JSX trở thành các đối tượng JavaScript thông thường. Điều này nghĩa là bạn có thể sử dụng JSX bên trong các câu lệnh if và cho các vòng lặp for, gán nó cho các biến, chấp nhận nó như các đối số/ tham số, và trả về nó từ các hàm:

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

Thuộc tính của thẻ với JSX

Bạn có thể sử dụng dấu nháy để xác định chuỗi như các thuộc tính của thẻ:

const element = <div tabIndex="0"></div>;

Bạn cũng có thể sử dụng dấu ngoặc nhọn để nhúng một biểu thức JavaScript trong một thuộc tính:

const element = <img src={user.avatarUrl}></img>;

Chú ý: Không đặt dấu nháy quanh dấu ngoặc nhọn khi nhúng một biểu thức JavaScript trong một thuộc tính. Nếu không, JSX sẽ coi thuộc tính là một chuỗi chữ chứ không phải là một biểu thức. Bạn nên sử dụng dấu nháy (cho giá trị chuỗi) hoặc dấu ngoặc nhọn (cho các biểu thức), nhưng không phải cả hai cho cùng một thuộc tính.

CẢNH BÁO: Vì JSX gần với JavaScript hơn là so với HTML, React DOM sử dụng chuẩn quy tắc đặt tên camelCase cho thuộc tính thay vì dùng tên thuộc tính gốc của HTML.

Ví dụ: class trở thành className trong JSX, và tabindex trở thành tabIndex.

Thẻ con trong JSX

Nếu tag rỗng (không có thẻ con), bạn có thể đóng nó ngay lập tức với />, giống XML:

const element = <img src={user.avatarUrl} />;

Còn nếu thẻ JSX có thể chứa thẻ con:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

Ngăn chặn Injection Attacks trong JSX

Mặc định, React DOM loại bỏ những kí tự đặc biệt ở bên trong bất kì giá trị nào được nhúng vào JSX trước khi render chúng.

Việc này đảm bảo không có giá trị bất thường nào được được đưa vào ứng dụng. Mọi thứ đều được chuyển thành chuỗi trước khi được render.

Tinh năng bảo mật mặc định của React giúp ngăn chặn phương thức tấn công XSS (cross-site-scripting).

//Khi sử dụng trong React sẽ không nguy hiểm
const content = '<script>XSS</script>'
const element = <p className="welcome">{content}</p>;

Tổng kết

Trên đây là toàn bộ những kiến thức liên quan đến JSX được tổng hợp lại. Hy vọng, với các kiến thức trên thì bạn đã hiểu rõ JSX là gì cũng như nắm rõ về JSX trong React.

Cảm ơn bạn ghé qua trang của mình.