Element là một đối tượng đơn giản mô tả những gì bạn muốn hiển thị trên màn hình dưới dạng các nút DOM hoặc các thành phần khác. Các element có thể chứa các element khác trong props của chúng. Tạo một React element rất đơn giản và ít tốn chi phí. Khi một element được tạo, nó không bao giờ bị thay đổi. Ví dụ:
const element = React.createElement('div', { id: 'login-btn' }, 'Login');
Hàm createElement ở trên trả về dưới dạng object như bên dưới,
{
type: 'div',
props: {
children: 'Login',
id: 'login-btn',
},
};
Và cuối cùng, nó hiển thị tới DOM bằng cách sử dụng ReactDOM.render như bên dưới,
<div id='login-btn'>Login</div>
Trong khi một component có thể được khai báo theo nhiều cách khác nhau. Nó có thể là một class có phương thức render().
Ngoài ra, trong những trường hợp đơn giản, nó có thể được định nghĩa như một function. Trong cả hai trường hợp, nó lấy props làm đầu vào và trả ra một Element tree.
function Button({ onLogin }) {
return React.createElement('div', { id: 'login-btn', onClick: onLogin }, 'Login');
}