REACTJS CĂN BẢN
REACTJS NÂNG CAO
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Giới thiệu JSX trong ReactJS

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:

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.
  • 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 = 'Freetuts.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 Freetuts</p>
  </div>
);

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

const element = <p className="welcome">Welcome to Freetuts.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 Freetuts.net!"
  }
};

const element = <p className="welcome">Welcome to Freetuts.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.

Cùng chuyên mục:

Xây dựng Hook trong React JS (React Custom Hook)

Xây dựng Hook trong React JS (React Custom Hook)

React Hooks là một tính năng mới trong React 16.8. Cho phép sử dụng state…

Tạo ứng dụng ghi chú với ReactJS và Redux

Tạo ứng dụng ghi chú với ReactJS và Redux

Trong bài viết này mình sẽ hướng dẫn xây dựng một ứng dụng ghi chú…

Cách đẩy ứng dụng ReactJS lên Heroku và Deploy trên đó

Cách đẩy ứng dụng ReactJS lên Heroku và Deploy trên đó

Cho bạn nào chưa bíết thì Heroku mà môt nền tảng đám mây hỗ trợ…

Tích hợp Redux vào ReactJS

Tích hợp Redux vào ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về cách tích…

Tạo máy tính đơn giản bằng ReactJS

Tạo máy tính đơn giản bằng ReactJS

Trong bài này ta sẽ xây dựng một ứng dụng máy tính đơn giản bằng…

Redux là gì? Tại sao lại ứng dụng trong ReactJS

Redux là gì? Tại sao lại ứng dụng trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về Redux trong…

useContext trong React Hook

useContext trong React Hook

Trong bài viết này chúng ta sẽ cùnuseContextg nhau đi tìm hiểu về useContext trong…

React Router cơ bản

React Router cơ bản

Có thể khẳng định rằng những trang SPA (single page application) hiện đang rất phổ…

useEffect trong React Hooks

useEffect trong React Hooks

Trong bài viết này chúng ta sẽ đi tìm hiểu về useEffect trong React Hooks.…

Tìm hiểu React Hook useState

Tìm hiểu React Hook useState

React Hooks bao gồm rất 10 hooks khác nhau, trong phạm vi bài viết này…

Giới thiệu Hooks trong React JS

Giới thiệu Hooks trong React JS

Higher-Order Components trong ReactJS

Higher-Order Components trong ReactJS

Tìm hiểu về Fragments trong ReactJS

Tìm hiểu về Fragments trong ReactJS

Tìm hiểu về Render Props trong ReactJS

Tìm hiểu về Render Props trong ReactJS

Tìm hiểu về Context trong ReactJS

Tìm hiểu về Context trong ReactJS

Tìm hiểu về Refs trong ReactJS

Tìm hiểu về Refs trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về refs trong…

Kỹ thuật Lifting State Up trong ReactJS

Kỹ thuật Lifting State Up trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về kỹ thuật…

Tìm hiểu về List và Keys trong ReactJS

Tìm hiểu về List và Keys trong ReactJS

Trong bài viết này chúng ta sẽ cùng hau đi tìm hiểu về lists và…

Render với điều kiện trong ReactJS

Render với điều kiện trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về cách để…

Handling Events (xử lý sự kiện) trong ReactJS

Handling Events (xử lý sự kiện) trong ReactJS

Top