Free style Component: function class React component: props Component nesting (component lồng nhau) Component reuse (sử dụng lại component) Free style Component: function class React component: props Component nesting (component lồng nhau) Component reuse (sử dụng lại component
Conceive Design Implement Operate THỰC HỌC – THỰC NGHIỆP http://www.poly.edu.vn MỤC TIÊU Free style Component: function & class React component: props Component nesting (component lồng nhau) Component reuse (sử dụng lại component) BONUS ❑Các mẫu free style ❖Truy xuất đường link https://semantic-ui.com/ BONUS ❑Cách lấy sử dụng free style ❖Truy xuất đường link https://cdnjs.com/libraries/semantic-ui BONUS COMPONENT ❑Component: khối code độc lập, tái sử dụng, chia UI thành nhiều phần nhỏ ❑Tạo component: để dễ dàng quản lý tái sử dụng ❑Component react thường viết theo loại chính: function class FUNCTION COMPONENT ❑Function component đơn giản FUNCTION COMPONENT Free style sematic-ui Nội dung JSX TRÍCH JSX > NEW COMPONENT PROPS ❑Gửi nhiều props (multi props) PROPS TRONG FUNCTION COMPONENT ❑nhận props (CommentDetail.js) PROPS TRONG CLASS COMPONENT ❑nhận props (CommentDetail.js) PROPS TRONG CLASS COMPONENT ❑Nếu class component có structure constructor function Nhận props sau DEFAULT PROPS ❑Cách 01: Sử dụng cú pháp DEFAULT PROPS ❑Ví dụ: function component DEFAULT PROPS ❑Ví dụ: class component DEFAULT PROPS ❑Cách 02: class ReactComp extends React.Component {} ReactComp.defaultProps = {} Hoặc class ReactComp extends React.Component { static defaultProps = {} } Hoặc function Reactcomp(props) {} ReactComp.defaultProps = {} DEFAULT PROPS ❑Ví dụ: DEFAULT PROPS – PROPTYPES ❑PropTypes: định kiểu liệu props ❑Proptypes với defaultProps COMPONENT REUSE ❑Tái sử dụng component COMPONENT REUSE SUMARRY Component: function & class React component: props Component nesting (component lồng nhau) Component reuse (sử dụng lại component) ... PROPS ❑Ví dụ: class component DEFAULT PROPS ❑Cách 02: class ReactComp extends React.Component {} ReactComp.defaultProps = {} Hoặc class ReactComp extends React.Component { static defaultProps = {}... COMPONENT NESTING COMPONENT NESTING CLASS COMPONENT CLASS COMPONENT ❑Ví dụ 01 CLASS COMPONENT ❑Ví dụ 02 PROPS PROPS PROPS PROPS ❑Cung cấp props từ parent đến child (React props giống đối số hàm javascript... xuất đường link https://cdnjs.com/libraries/semantic-ui BONUS COMPONENT ❑Component: khối code độc lập, tái sử dụng, chia UI thành nhiều phần nhỏ ❑Tạo component: để dễ dàng quản lý tái sử dụng ❑Component