Giới thiệu JSX trong ReactJS - ự học ReactJS căn bản đến nâng ca

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về JSX trong ReactJS. Ở bài viết trước mình cũng đã giới thiệu về JSX một cách căn bản nhất, bài này chúng ta sẽ tiếp tục và đi tìm hiểu sâu hơn về cú pháp của JSX trong ReactJS, cũng như cách sử dụng nó.

1. JSX là gì ?

JSX là viết tắt là Javascript XML, một template languges nhưng nó lại mang hầu hết tính năng của Javascript. 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. React sử dụng JSX cho việc xây dựng bố cục thay vì javascript thông thường. JSX giúp tạo ra các React 'elements'. 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 javascript.
• 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 dễ dàng cho việc viết chuyển đổi.

Ngoài ra bạn có thể tham khảo thêm về JSX.

2. JSX trong ReactJS

Trong ReactJS không bắt buộc bạn phải sử dụng JSX nhưng hầu hết mọi nguời đều sử dụng nó bởi đây là cách hữu ích nhất để làm việc với các UI bên trong Javascript code. JSX cũng cho phép React hiển thị đầy đủ các lỗi nhất và hiệu quả hơn.

Gán một biểu thức trong JSX

Giả sử bạn muốn gán một biểu thức trong JSX, trong ví dụ bên dưới mình sẽ gán biến name vào trong JSX bằng cách bọc nó trong dấu { :

const name = 'Zaidap.com.net';
const element = <h1>Welcome to {name}</h1>;

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

Ngoài ra bạn có thêm bất cứ biểu thức javscript nào vào trong dấu ngoặc kép này như info.name, 1+1, formatMoney(10000),...Như trong ví dụ dưới đây mình sử dụng hàm formatName :

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

const user = {
  firstName: 'Nguyễn',
  lastName: 'Trí'
};

const element = (
  <h1>
    Xin chào, {formatName(user)}!
  </h1>
);

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

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

Sau khi complie, các đoạn đoạn mã JSX sẽ như các object Javasript thông thường, cho phép bạn có thể gọi hoặc làm bất cứ gì với nó.

Có nghĩa là bạn có thể sử dụng JSX bên trong if, for, function,...hay là chỉ định nó làm giá trị của một biến,..Trong ví dụ mình có một hàm trả về một JSX:

function sayHi(name) {
    if(name) {
        return <p>Xin chào, {name} !</p>
    }else{
        return <p>Xin chào bạn !</p>
    }
}

Chỉ định attributes với JSX

Bạn cũng có thể chỉ định một attribute trong JSX, cú pháp giống như HTML thông thường :

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

hay chỉ định attributes với JSX bằng biểu thức javascript như này:

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

Bạn nên dùng dấu ngoặc kép ( "" ) cho giá trị chuỗi và ngoặc nhọn ( {} ) cho biểu thức như trong ví dụ trên, React khuyên chúng ta không nên dùng cả 2 cái lồng nhau như thế này :

const element = <div tabIndex={"1"}></div>;

Quy ước đặt tên của JSX gần giống với HTML, React DOM sử dụng thuộc tính camelCase cho tên của thuộc tính cho phép chuyển đổi dễ hơn giữa HTML và JSX. Ví dụ trong HTML có thuộc tính class, JSX sẽ chuyển thành className, tabindex -> tabIndex.

Phần tử con trong JSX

Nếu chỉ có một tag bạn chỉ cần đóng nó bằng dấu /> như ví dụ :

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

trong trường hợp trong tag có nhiều phần tử con bạn cần phải bọc ngoài nó bằng một JSX tags:

//Đúng cú pháp
//Phải bọc nó bằng một tags
const element = (
  <div>
    <h1>Hello</h1>
    <p>Welcome to Zaidap.com</p>
  </div>
);

//Viết sai
//Các phần từ không được bọc
const element = (
    <h1>Hello</h1>
    <p>Welcome to Zaidap.com</p>
);

JSX Object

Để complide một JSX object thành JSX thông thường chúng ta sử dụng React.createElement() như ví dụ :

const element = React.createElement(
  "p",
  { className: "welcome" },
  "Welcome to Zaidap.com.net!"
);

const element = <p className="welcome">Welcome to Zaidap.com.net!</p>

JSX object cho phép bạn tạo ra các JSX dễ dàng debug hơn, ngoài ra JSX obejct còn có thể được viết theo dạng như:

const element = {
  type: "p",
  props: {
    className: "welcome",
    children: "Welcome to Zaidap.com.net!"
  }
};

const element = <p className="welcome">Welcome to Zaidap.com.net!</p>;

Ngăn chặn Injection Attacks

Đây là một tính năng bảo mật của React, React DOM sẽ tiến hành escaped tất cả các giá trị bên trong JSX một cách tự động trước khi render chúng, điều này rất hữu ích cho việc ngăn chặn các hình thức tấn công bằng cách tiêm mã độc.

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

Trong bài này chúng ta đã cùng nhau đi tìm hiểu về JSX trong ReactJS, đây là kiến thức rất cơ bản về nó nhưng cũng hết sức quan trọng trong quá trình làm việc với ReactJS. Mong rằng bài viết sẽ giúp ích cho bạn.