ReactJS - Sử dụng React mà không cần JSX

JSX là gì?

Trước khi chúng ta đi sâu vào việc sử dụng React mà không cần JSX, hãy cùng hiểu JSX là gì. JSX, hay JavaScript XML, là một mở rộng cú pháp cho JavaScript có vẻ tương tự như HTML. Nó thường được sử dụng cùng với React để mô tả giao diện người dùng nên trông như thế nào. Tuy nhiên, JSX không phải là yêu cầu bắt buộc để sử dụng React. Chúng ta có thể sử dụng React mà không cần JSX, và đó là điều chúng ta sẽ khám phá trong hướng dẫn này.

Tại sao sử dụng React mà không cần JSX?

Bạn có thể tự hỏi, "Nếu JSX phổ biến như vậy, tại sao chúng ta lại muốn sử dụng React mà không cần nó?" Đó là một câu hỏi tuyệt vời! Có một số lý do:

1. Học các khái niệm cốt lõi: Hiểu cách React hoạt động mà không cần JSX có thể mang lại cho bạn một sự hiểu biết sâu hơn về thư viện này.
2. Hạn chế của công cụ xây dựng: Một số môi trường xây dựng có thể không hỗ trợ việc biên dịch JSX.
3. Sở thích cá nhân: Một số nhà phát triển đơn giản là thích viết pure JavaScript.

Tạo các yếu tố với React.createElement()

Trái tim của việc sử dụng React mà không cần JSX là hàm React.createElement(). Hàm này chính là điều JSX biên dịch thành, vì vậy chúng ta chỉ đang loại bỏ trung gian!

Hãy bắt đầu với một ví dụ đơn giản:

const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);

Trong ví dụ này, chúng ta đang tạo một yếu tố h1 với lớp 'greeting' và nội dung văn bản 'Hello, world!'. Hãy phân tích các đối số:

1. Đối số đầu tiên ('h1') chỉ định loại yếu tố chúng ta muốn tạo.
2. Đối số thứ hai ({className: 'greeting'}) là một đối tượng chứa các thuộc tính của yếu tố.
3. Đối số thứ ba ('Hello, world!') là nội dung của yếu tố.

Nếu chúng ta viết điều này trong JSX, nó sẽ trông như thế này:

const element = <h1 className="greeting">Hello, world!</h1>;

Thấy rằng JSX gọn gàng hơn nhiều phải không? Nhưng đừng lo lắng, với sự luyện tập, việc tạo các yếu tố mà không cần JSX sẽ trở thành bản năng!

Chồng các yếu tố

Bây giờ, hãy thử một điều gì đó phức tạp hơn. Tạo một div với hai yếu tố con?

const element = React.createElement(
'div',
null,
React.createElement('h1', null, 'Welcome'),
React.createElement('p', null, 'This is a paragraph.')
);

Điều này tạo ra cấu trúc tương đương với:

<div>
<h1>Welcome</h1>
<p>This is a paragraph.</p>
</div>

Chú ý rằng chúng ta chồng các cuộc gọi createElement để tạo các yếu tố con. Các đối số null là nơi chúng ta sẽ đặt các thuộc tính nếu cần.

Tạo các thành phần

Các thành phần là những khối xây dựng của các ứng dụng React. Hãy tạo một thành phần hàm đơn giản mà không cần JSX:

function Welcome(props) {
return React.createElement(
'h1',
null,
'Welcome, ' + props.name
);
}

Để sử dụng thành phần này, chúng ta sẽ làm như sau:

const element = React.createElement(Welcome, {name: 'Alice'});

Điều này tương đương với JSX:

const element = <Welcome name="Alice" />;

Xử lý sự kiện

Xử lý sự kiện trong React mà không cần JSX rất tương tự như với JSX. Hãy tạo một nút nhấn để ghi lại một tin nhắn khi được nhấp:

function handleClick() {
console.log('Button clicked!');
}

const button = React.createElement(
'button',
{onClick: handleClick},
'Click me'
);

Ở đây, chúng ta đang truyền hàm handleClick như thuộc tính onClick cho yếu tố nút.

渲染条件

Việc渲染 điều kiện mà không cần JSX sẽ dài hơn một chút, nhưng vẫn hoàn toàn khả thi:

function Greeting(props) {
if (props.isLoggedIn) {
return React.createElement('h1', null, 'Welcome back!');
} else {
return React.createElement('h1', null, 'Please sign up.');
}
}

const element = React.createElement(
Greeting,
{isLoggedIn: true}
);

Danh sách và Keys

Việc渲染 danh sách mà không cần JSX yêu cầu chúng ta sử dụng Array.map() một cách rõ ràng:

const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number) =>
React.createElement('li', {key: number.toString()}, number)
);

const list = React.createElement('ul', null, listItems);

Chú ý rằng chúng ta vẫn sử dụng thuộc tính key, điều này rất quan trọng cho quá trình điều phối của React.

Bảng phương pháp

Dưới đây là bảng tóm tắt các phương pháp chính mà chúng ta đã thảo luận:

Phương pháp	Mô tả	Ví dụ
React.createElement()	Tạo một yếu tố React	React.createElement('div', null, 'Hello')
Array.map()	Chuyển đổi các phần tử của mảng	numbers.map(n => React.createElement('li', null, n))
React.render()	Render một yếu tố React vào DOM	ReactDOM.render(element, document.getElementById('root'))

Kết luận

Mặc dù JSX thực sự làm cho việc viết mã React trở nên trực quan và dễ đọc hơn, nhưng việc hiểu cách sử dụng React mà không cần JSX sẽ mang lại cho bạn một sự hiểu biết sâu hơn về những gì đang xảy ra bên trong. Đó giống như việc học lái xe手动 trước khi lái xe tự động - nó mang lại cho bạn nhiều quyền kiểm soát và hiểu biết hơn về quá trình.

Nhớ rằng, dù bạn sử dụng JSX hay không, các nguyên tắc cốt lõi của React vẫn giữ nguyên. Components, props, state và virtual DOM đều hoạt động theo cùng một cách. JSX chỉ là đường đường Syntaxic sugar làm cho quá trình viết mã trở nên ngọt ngào hơn!

Vậy, lần tới khi bạn đang gỡ lỗi một ứng dụng React và bạn thấy React.createElement() trong mã đã biên dịch, bạn sẽ biết chính xác điều gì đang xảy ra. Chúc bạn viết mã vui vẻ và các yếu tố React của bạn luôn hiển thị đúng!

Credits: Image by storyset