ReactJS - JSX: Hướng dẫn cho người mới bắt đầu

Xin chào các bạnfuture nhà phát triển React! Tôi rất vui mừng được làm hướng dẫn viên của bạn trong hành trình thú vị vào thế giới của ReactJS và JSX. Là một ai đó đã dạy khoa học máy tính trong nhiều năm, tôi đã thấy biết bao nhiêu sinh viên trở nên hứng thú khi họ hiểu được những khái niệm này. Vậy hãy cùng nhau lặn vào và tạo ra một phép màu React nhé!

JSX là gì?

Trước khi chúng ta đi vào chi tiết, hãy bắt đầu với những điều cơ bản. JSX viết tắt của JavaScript XML. Nó là một_extension cú pháp cho JavaScript cho phép bạn viết mã HTML-like trong các tệp JavaScript của mình. Tôi thích nghĩ về nó như một chiếc bánh sandwich ngon lành nơi HTML là bánh mì, và JavaScript là phần nhân. Yum!

Sử dụng JSX trong ReactJS

Trong React, JSX là cách ưa thích để cấu trúc các thành phần của chúng ta. Nó làm cho mã của chúng ta dễ đọc và dễ hiểu hơn. Hãy xem một ví dụ đơn giản:

const element = <h1>Hello, React World!</h1>;

Điều này có thể trông giống như HTML, nhưng thực tế nó là JSX! React sẽ chuyển đổi điều này thành JavaScript thuần túy phía sau hậu trường.

Tại sao lại sử dụng JSX?

Bạn có thể tự hỏi, "Tại sao lại phiền phức với JSX khi chúng ta có thể chỉ viết JavaScript thuần túy?" Câu hỏi tuyệt vời! Dưới đây là lý do:

1. Thân thuộc: Nếu bạn biết HTML, JSX sẽ cảm thấy tự nhiên với bạn.
2. Dễ đọc: Nó dễ dàng hơn để hình dung cấu trúc của giao diện người dùng của bạn.
3. Kiểm tra cú pháp: Nó giúp phát hiện lỗi sớm trong quá trình phát triển.

Biểu thức trong JSX

Một trong những điều tuyệt vời nhất về JSX là bạn có thể nhúng các biểu thức JavaScript trực tiếp trong mã đánh dấu của mình. Nó giống như thêm những hạt đường vào kem - nó làm mọi thứ tốt hơn! Dưới đây là cách làm:

const name = 'React Learner';
const element = <h1>Hello, {name}!</h1>;

Những dấu ngoặc đơn {} là cây phép thuật của bạn. Bất cứ điều gì bên trong chúng sẽ được đánh giá như một biểu thức JavaScript.

Hàm trong JSX

Chúng ta có thể đi xa hơn một bước và sử dụng hàm trong JSX. Hãy xem xét điều này:

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

const user = {
firstName: 'React',
lastName: 'Learner'
};

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

Ở đây, chúng ta đang gọi hàm formatName trực tiếp trong JSX. Đáng kinh ngạc phải không?

Thuộc tính trong JSX

Giống như trong HTML, chúng ta có thể thêm các thuộc tính vào các phần tử JSX của mình. Nhưng có một điều đặc biệt! Trong JSX, chúng ta sử dụng camelCase cho tên thuộc tính thay vì chữ thường. Ví dụ:

const element = <div className="container">Hello, JSX!</div>;

Chú ý rằng chúng ta sử dụng className thay vì class. Điều này là vì class là một từ khóa được保留 trong JavaScript.

Sử dụng biểu thức trong thuộc tính

Nhớ lại những dấu ngoặc đơn {}? Chúng ta có thể sử dụng chúng trong thuộc tính nữa!

const imgUrl = 'https://example.com/react-logo.png';
const element = <img src={imgUrl} alt="React Logo" />;

Điều này cho phép chúng ta đặt các giá trị thuộc tính một cách linh hoạt, điều này rất hữu ích khi xây dựng các giao diện người dùng tương tác.

Phần tử con trong JSX

Giống như trong HTML, chúng ta có thể nhúng các phần tử trong JSX. Đây là cách chúng ta xây dựng các giao diện người dùng phức tạp:

const element = (
<div>
<h1>Welcome to React</h1>
<p>Let's learn JSX together!</p>
</div>
);

Chú ý rằng chúng ta bao gồm nhiều dòng JSX trong dấu ngoặc đơn. Điều này không bắt buộc, nhưng nó giúp cải thiện khả năng đọc mã.

Phương thức JSX

Dưới đây là bảng các phương thức JSX phổ biến mà bạn sẽ gặp:

Phương thức	Mô tả	Ví dụ
React.createElement()	Tạo một phần tử React	React.createElement('div', null, 'Hello, JSX!')
ReactDOM.render()	Render một phần tử React vào DOM	ReactDOM.render(element, document.getElementById('root'))
React.Fragment	Cho phép bạn trả về nhiều phần tử mà không thêm các nút bổ sung vào DOM	<React.Fragment> Title Paragraph </React.Fragment>

Kết luận

Và đây bạn đã có nó, các bạn! Chúng ta đã迈出第一步 vào thế giới của JSX. Nhớ rằng, thực hành là cách tốt nhất để thành thạo, vì vậy đừng ngại thử nghiệm với những khái niệm này.

Như tôi luôn nói với sinh viên của mình, lập trình giống như học骑自行车。 Ban đầu có thể cảm thấy不稳定, nhưng một khi bạn đã nắm vững, bạn sẽ nhanh chóng di chuyển. Vậy hãy tiếp tục pedal, và trước khi bạn biết, bạn sẽ đang xây dựng các ứng dụng React tuyệt vời!

Chúc các bạn lập trình vui vẻ, và gặp lại các bạn trong bài học tiếp theo, nơi chúng ta sẽ lặn sâu hơn vào vũ trụ React!

Credits: Image by storyset