Ồ, bạn chưa phải thành viên của forum
Đăng nhập hoặc đăng ký ngay.
, React chia nhỏ các phần của trang thành từng phần riêng biệt, gọi là component, ví dụ như các phần: header, footer, sidebar, navigation, itemList, ... .Tính chất của component giống như một hàm (function) Javascript, có thể tái sử dụng ở nhiều nơi khác nhau.
Cách viết một component
- Viết dưới dạng function (hoặc Class - nói ở bài sau), và function luôn được return.
- Bên trong return luôn tồn tại tag bao ngoài tất cả (tag wrap).
- Sử dụng thư viện React.DOM để render một component.
- Function render phải có cấu trúc XML, viết dưới dạng <Tên /> hoặc <Tên></Tên>
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React Component</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="member"></div>
<script type="text/babel">
function Member(){
return(
<div className="member">
<h2>Nguyễn Văn A</h2>
<p>Tuổi: 25</p>
</div>
)
};
ReactDOM.render(
<Member />,
document.getElementById('member')
);
</script>
</body>
</html>Hiển thị
- Function
Member()đóng vai trò là một component, nhiệm vụ là tạo một đối tượng member với tên và tuổi. ReactDOM.rendergiữ vai trò render nội dung ra trình duyệt, dựa vàoid="member".
Cách tạo và include component
- Giả sử ta có nhiều component khác nhau trong một trang, mỗi component có một nhiệm vụ riêng, Ví dụ:
- Component avatar dành để xử lý hình ảnh member.
- Component memberInfo dành để hiển thị thông tin member như tên, tuổi.
- Component comment dành để quản ý bình luận của member.
- Nhiệm vụ của ta là làm sao viết kết hợp các component này lại để hiển thị thông tin cho member, ta làm như sau:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React Component</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="member"></div>
<script type="text/babel">
function Avatar(){
return(
<div className="avatar">
<img src="img_avatar.jpg" alt="" />
</div>
)
};
function MemberInfo(){
return(
<div className="info">
<h2>Nguyễn Văn A</h2>
<p>Tuổi: 25</p>
</div>
)
};
function Comment(){
return(
<div className="comment">
Lorem ipsum dolor sit amet, consectetur adipiscing elit proin sit amet neque.
</div>
)
};
function Member(){
return(
<div className="member">
<Avatar />
<MemberInfo />
<Comment />
</div>
)
};
ReactDOM.render(
<Member />,
document.getElementById('member')
);
</script>
</body>
</html>Hiển thị
- Với ví dụ trên, các bạn sẽ thấy việc tạo component rất đơn giản, chỉ cần tách các phần riêng biệt cho từng chức năng khác nhau, là ta đã có được các component, việc này thuận lợi trong việc sử lý các phần riêng mà không bị ảnh hưởng hay bị phân tâm với các component khác.
- Khi làm thực tế, ta cần tách từng component ra riêng một file Javascript để tiện sử dụng, cách làm như thế nào sẽ được giới thiệu sau nhé.
