React: Component- Day 2

Trong bài viết trước, chúng ta đã học cách tạo 1 DOM component. Để tái sử dụng, chúng ta sẽ sử dụng hàm thay vì khai báo trực tiếp.

Có 2 cách để tạo custom component:

• Sử dụng function component (bao gồm JSX)
  
• Sử dụng class component

Functional component

Ví dụ về functional component:

const MyComponent = function() {
	return 'I am so custom';
};

Từ khoá const trong JavaScript là viết tắt của từ constant, có nghĩa là hằng số. Nó được sử dụng để xác định giá trị của một biến không thể thay đổi ("redeclared", or "reassigned") sau khi biến đó được gán bằng một giá trị nào đó. Ví dụ khác sử dụng thẻ span

const MyComponent = function() {
	return React.createElement('span', null, 'I am so custom');
};

Sử dụng JSX version

const MyComponent = function() {
	return <span>I am so custom</span>;
};
ReactDOM.render(
	<MyComponent />,
	document.getElementById('app')
);

Class Component

Cách 2 là định nghĩa 1 class extend từ React.Component và implement hàm render()
Cú pháp

class ComponentName extends React.Component {
	render() {
		return (
			<div>
			{/* ... todo ... */}
			</div>
		);
	}
}

All React components require at least a render() function. This render() function is expected to return a virtual DOM representation of the browser DOM element(s).

Ví dụ

class MyComponent extends React.Component {
  render() {
	return React.createElement('span', null, 'I am so custom');
	// or with JSX:
	// return I am so custom;
	}
}
ReactDOM.render(
  React.createElement(MyComponent),
  document.getElementById('app')
);

Vậy nên sử dụng cú pháp nào?

Qua 2 bài viết này, bạn sẽ lúng túng, để tạo 1 đoạn code HTML, sẽ có 4 cách: 

• Viết trực tiếp: cách này khó xử lý nếu trang web của bạn phức tạp
  
• JSX là một cú pháp mở rộng của JavaScript, cho phép bạn viết các component dưới dạng HTML-like tags. JSX giúp cho code của bạn dễ đọc và viết hơn, và được biên dịch thành các lệnh React.createElement() bởi Babel
• Function component là một loại component được định nghĩa bằng cách viết một hàm JavaScript đơn giản trả về một React element
• Class component là một loại component được định nghĩa bằng cách kế thừa từ React.Component và định nghĩa một phương thức render(). Phương thức render() trả về một React element, giống như một function component

Mỗi cách có những ưu và nhược điểm riêng, và tùy vào nhu cầu và mục đích của bạn mà bạn có thể lựa chọn cách phù hợp nhất.