Học JSX trong ReactJS

Học JSX trong ReactJS là vấn đề được nhiều lập trình viên quan tâm, bởi những kiến thức trên trường lớp là không đủ, vì vậy bài Học JSX trong ReactJS sẽ chia sẻ tới bạn nhiều thông tin hữu ích

Mọi người vẫn hỏi tôi về việc học lập trình nói chung và ReactJS nói riêng có cần năng khiếu hay quá khó để tiếp cận hay không. Thì tôi có thể trả lời rằng, học lập trình cũng như việc bạn học tiếng Anh hay bất kỳ một ngôn ngữ khác, bởi lập trình...là ngôn ngữ của máy tính, để máy tính đọc và máy tính thực hiện theo yêu cầu của mình, bạn thích là học được.

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 = 'Hoidapcode.com';
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 Hoidapcode.com</p>
  </div>
);
 
//Viết sai
//Các phần từ không được bọc
const element = (
    <h1>Hello</h1>
    <p>Welcome to Hoidapcode.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 Hoidapcode.com!"
);
 
const element = <p className="welcome">Welcome to Hoidapcode.com!</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 Hoidapcode.com!"
  }
};
 
const element = <p className="welcome">Welcome to Hoidapcode.com!</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.

Bài sau Bài tiếp

Hy vọng với bài viết về Học JSX trong ReactJS đã giải đáp giúp bạn phần nào về kiến thức lập trình ReactJS. Như tôi đã nói, ngôn ngữ lập trình không quan trọng bằng tư duy giải thuật, tư duy logic để giải quyết vấn đề.

Với những năm trước đây, lập trình viên là một cái nghề khó và kén chọn người học, đồng nghĩa với việc thu nhập hàng tháng của các lập trình viên luôn cao. Còn những năm gần đây, thì lập trình là môn học phổ thông, và ai cũng nên học một ngôn ngữ lập trình nào đó.

Nếu bạn còn bất kỳ câu hỏi nào trong việc học lập trình online, hãy gửi yêu cầu cho tôi qua email hoidapcode.com@gmail.com hoặc để lại comment bên dưới, tôi sẽ giải đáp trong vòng 24 giờ!

Blog hoidapcode.com là blog được tổng hợp tự động các bài học, thông tin về lập trình trên mạng internet. Nếu bạn có ý kiến hoặc đóng góp về bài viết này, hãy liên hệ với tôi!