ReactJS - Sử dụng các thành phần mới tạo

Giới thiệu

Xin chào các bạn future React developers! 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 React components. Là người đã dạy khoa học máy tính trong nhiều năm, tôi có thể告诉 bạn rằng việc hiểu các thành phần giống như học cách xây dựng với LEGO bricks - một khi bạn đã làm quen với nó, bạn có thể tạo ra những điều kỳ diệu!

Thành phần React là gì?

Trước khi chúng ta nhảy vào sử dụng các thành phần, hãy hiểu chúng là gì. Hãy tưởng tượng các thành phần như những khối xây dựng có thể tái sử dụng cho giao diện người dùng của bạn. Giống như bạn có thể sử dụng cùng một khối LEGO ở nhiều phần khác nhau của tạo tác của mình, bạn cũng có thể sử dụng cùng một thành phần React ở nhiều phần khác nhau của ứng dụng của bạn.

Loại thành phần

React có hai loại thành phần chính:

1. Function Components
2. Class Components

Trong hướng dẫn này, chúng ta sẽ tập trung vào function components, vì chúng đơn giản và hiện đại hơn.

Tạo thành phần đầu tiên của bạn

Hãy bắt đầu bằng cách tạo một thành phần đơn giản. Chúng ta sẽ tạo một thành phần "Greeting" hiển thị một thông báo chào mừng.

function Greeting() {
return <h1>Hello, React learner!</h1>;
}

Điều này có thể trông đơn giản, nhưng có rất nhiều điều đang xảy ra:

• Chúng ta định nghĩa một hàm叫做 Greeting
• Hàm này trả về JSX (định dạng HTML alike)
• JSX đại diện cho những gì sẽ được hiển thị trên màn hình

Sử dụng thành phần mới tạo của bạn

Bây giờ chúng ta đã có thành phần Greeting, hãy sử dụng nó trong ứng dụng của mình!

function App() {
return (
<div>
<Greeting />
<p>Welcome to our React tutorial!</p>
</div>
);
}

Đây là những gì đang xảy ra:

• Chúng ta có một thành phần App (thành phần chính của ứng dụng của chúng ta)
• Trong App, chúng ta sử dụng thành phần Greeting của mình
• Chúng ta sử dụng các thành phần như chúng ta sẽ sử dụng các thẻ HTML

Khi bạn chạy đoạn mã này, bạn sẽ thấy "Hello, React learner!" tiếp theo là "Welcome to our React tutorial!"

Thành phần với props

Các thành phần trở nên rất mạnh mẽ khi chúng ta làm chúng động với props. Props giống như các tham số cho các thành phần của bạn.

Hãy sửa đổi thành phần Greeting của chúng ta để accept một tên:

function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}

Bây giờ, chúng ta có thể sử dụng nó như này:

function App() {
return (
<div>
<Greeting name="Alice" />
<Greeting name="Bob" />
</div>
);
}

Điều này sẽ hiển thị:

Hello, Alice!
Hello, Bob!

Đây có phải là cool không? Chúng ta đã tạo ra một thành phần có thể chào đón nhiều người khác nhau!

Thành phần với nhiều props

Hãy đi một bước xa hơn và tạo một thành phần phức tạp hơn. Chúng ta sẽ tạo một thành phần UserCard hiển thị thông tin người dùng.

function UserCard(props) {
return (
<div className="user-card">
<h2>{props.name}</h2>
<p>Age: {props.age}</p>
<p>Occupation: {props.occupation}</p>
</div>
);
}

Bây giờ chúng ta có thể sử dụng nó như này:

function App() {
return (
<div>
<UserCard name="Alice" age={28} occupation="Developer" />
<UserCard name="Bob" age={35} occupation="Designer" />
</div>
);
}

嵌套 thành phần

Một trong những tính năng mạnh mẽ nhất của React là khả năng nesting các thành phần. Hãy tạo một thành phần UserList sử dụng nhiều UserCard:

function UserList() {
return (
<div>
<h1>User List</h1>
<UserCard name="Alice" age={28} occupation="Developer" />
<UserCard name="Bob" age={35} occupation="Designer" />
<UserCard name="Charlie" age={42} occupation="Manager" />
</div>
);
}

Bây giờ thành phần App của chúng ta có thể sử dụng UserList:

function App() {
return (
<div>
<Greeting name="React Learner" />
<UserList />
</div>
);
}

Phương thức thành phần

Các thành phần cũng có thể có phương thức của riêng mình. Hãy thêm một phương thức vào thành phần UserCard của chúng ta để tính năm sinh:

function UserCard(props) {
const calculateBirthYear = () => {
const currentYear = new Date().getFullYear();
return currentYear - props.age;
};

return (
<div className="user-card">
<h2>{props.name}</h2>
<p>Age: {props.age}</p>
<p>Birth Year: {calculateBirthYear()}</p>
<p>Occupation: {props.occupation}</p>
</div>
);
}

Kết luận

Chúc mừng! Bạn đã bước những bước đầu tiên vào thế giới của React components. Chúng ta đã bao gồm việc tạo các thành phần đơn giản, sử dụng props, nesting các thành phần, và thậm chí thêm phương thức vào các thành phần.

Nhớ rằng, thực hành làm cho hoàn hảo. Hãy thử tạo các thành phần của riêng bạn, experiment với các props khác nhau, và xem bạn có thể xây dựng được gì. Trước khi bạn biết điều đó, bạn sẽ xây dựng các giao diện người dùng phức tạp một cách dễ dàng!

Dưới đây là bảng tham khảo nhanh các thành phần chúng ta đã tạo:

Tên thành phần	Props	Mô tả
Greeting	name	Hiển thị một thông báo chào mừng
UserCard	name, age, occupation	Hiển thị thông tin người dùng
UserList	None	Hiển thị danh sách các thành phần UserCard

Tiếp tục mã hóa, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ với React!

Credits: Image by storyset