Photo by Scott Rodgerson on Unsplash
Đi sâu vào công nghệ Component: Custom Component & Multiple Platforms
Sau khi cưỡi ngựa xem hoa 1 vòng các bài trước thì đến giờ chúng ta đã có thể làm 1 cái web, hoặc 1 cái app. Mặc dù rất đơn giản thôi nhưng nó sẽ là cánh cổng để mở đến những hệ thống phức tạp hơn. Bài này sẽ đi sâu thêm chút nữa về công nghệ Component vì nó khá quan trọng với Frontend development
Nhìn lại một chút của bài trước:
HTML
,CSS
,Javascript
là nền tảng của Frontend Web.URP
thực chất làReact Native
, là một thư viện dùng để code cho mobile app nhưandroid
vàiOS
. Bình thường để codeandroid
chúng ta cần dùngJava
(cái này khácJavascript
nhé) hoặcKotlin
, codeiOS
thì dùngObjectice C
hoặcSwift
.React Native
sinh ra là để giúp chúng ta có thể code chỉ bằngJavascript
và build ra được app cho cả 2 nền tảngAndroid
vàiOS
.URP
là viết tắt củaUniversal React Practice
là việc dùngReact Native
để code cả cho nền tảng web. Giải pháp code đa nền tảng được gọi làcross platform
.- Bạn sẽ thấy được sự giao thoa giữa ý 1 và ý 2 là
Javascript
. Đúng vậy cái này sẽ là ngôn ngữ chủ yếu của toàn bộ series. Ban đầu học cách build giao diện thì chưa cần để ý nhiều nhưng hãy để tâm đến nó - Component sẽ có hình dạng kiểu như này
<Component></Component>
hoặc<Component />
Hướng học Component với Multiple Platforms
Về mặt giao diện, chúng ta sẽ học song song URP
và HTML
, mục đích để cho bạn nắm được nhiều cách thức làm giao diện nhất có thể, học bằng nhiều cách sẽ giúp hiểu bản chất nhanh hơn, ngoài ra có thể làm được nhiều job hơn sau này.
Ảnh dưới đây là giới thiệu một số Component quan trọng mà chắc chắn bạn cần nhuyền nhuẫn
Chúng ta sẽ bắt đầu từ những Component nhỏ và build nó dần dần to lên. Cái quan trọng là cần nắm vững bản chất. 1 điểm cần lưu ý với Multiple Platforms đó là mỗi Platform sẽ đều có những điểm riêng và cần lưu ý. Cụ thể cần nắm 2 điểm quan trọng đầu tiên như sau:
URP
Component style lấy cảm hứng từCSS
tuy nhiên nó chỉ là 1 tập con củaCSS
, nhiều style áp dụng được choHTML
sẽ không áp dụng được choURP
component. Vì thế, chúng ta cần sử dụng 1 hướng style chung có thể sử dụng cho cả 2.Có 2 thuộc tính style quan trọng là
position
vàdisplay
.- position: Với
HTML
thì có rất nhiềustatic
(mặc định),fixed
,sticky
,relative
vàabsolute
. Nhưng vớiURP
chỉ có thể dùngrelative
(mặc định) vàabsolute
.
- position: Với
- display: với
HTML
thì cóinline
&block
(mặc định),flex
,none
và 1 số khác. Nhưng vớiURP
thì chỉ cóflex
,none
. Cái này sẽ liên quan đến việc thiết lập các layout cho component, vì với HTML có 3 hướng làm layout trọng tâm là dự theoblock
, dựa theoflex
và dựa theogrid
, để đảm bao cho style chạy trên cả 2 nền tảng, chúng ta sẽ học và sử dụng theo hướngflex
- display: với
Bài tập 1: Hoàn thành khóa học CSS Flexbox trên Freecodecamp
và đọc bài viết này:
Bắt tay làm thử 1 số Component nhỏ
Component thường được chia làm 2 loại là Container và Item. Item là các mục nội dung chính (Content) của trang web/app và Container là dùng để chứa các Item. Container sẽ chuyên về phân phối bố cục (Layout) còn Item sẽ chuyên về trang trí sao cho hợp lý, dễ nhìn (Decoration). Thường thì khi nhìn vào 1 trang web/app cái mà thu hút mắt nhìn chính là Item.
Một page có thể có nhiều item và nhiều container.
Chúng ta thử bắt đầu làm 1 cái Container trước như này:
Khai báo custom Component với URP
Bước 1: Mở snack.expo.dev và lại xóa hết code có sẵn
Bước 2: Viết lên bên trên 1 Custom Component mẫu như này:
const CustomComponent = ({ children }) => (
<View>
{children}
</View>
);
Tạm thời bạn chỉ cần hiểu là children
sẽ là các Component cấp con của nó, nằm bên trong đó, còn cú pháp khai báo thì cứ học thuộc đã.
Để hiển thị thì nhét vào trong đoạn Component ở chỗ export default
, phải để vào bên trong đó thì mới hiển thị được.
export default () => {
return (
<View>
<CustomComponent>
<Text>Xin chào các bạn</Text>
</CustomComponent>
</View>
);
}
Giờ cần làm cho children
ra giữa, và thêm thuộc tính chiều cao cho Component
const Middle = ({ children, height }) => (
<View
style={{
width: '100%',
height: height,
justifyContent: 'center',
alignItems: 'center',
}}
>
{children}
</View>
);
export default () => {
return (
<View>
<CustomComponent>
<Text>Xin chào các bạn</Text>
</CustomComponent>
<Middle height={50}>
<Text>Đây là component Middle</Text>
</Middle>
</View>
);
}
Vậy là xong component, nhìn vào preview bạn sẽ thấy nó đã hiển thị ở giữa
Chỗ này có 1 vài lưu ý, hãy nhìn những chỗ khoanh đỏ để nắm được sơ lược về:
- Cách truyền thông tin
height={50}
đến đoạn setheight: height
children
chính là Component bên trong, k cần truyềnchilren={...} giống height
Để cho rõ hơn, hãy tạo border đứt đoạn để nhìn đc phạm vi của container
Okay như vậy là xong ở URP
, chuyển sang làm với HTML
Khai báo custom Component với HTML
Bước 1: Mở codepen.io và tạo 1 pen mới
Ở ô JS
điền vào đoạn code như sau để khai báo component:
class MiddleComponent extends HTMLElement {
defaultStyle = `
div {
display: flex;
flex-direction: column;
align-content: flex-start;
flex-shrink: 0;
position: relative;
}
`;
constructor() {
super();
this.shadow = this.attachShadow({ mode: "open" });
this.shadow.innerHTML = `
<style>
${this.defaultStyle}
div {
width: 100%;
justify-content: center;
align-items: center;
border-width: 1px;
border-style: dashed;
border-color: lightgrey;
}
</style>
<div><slot></slot></div>
`;
}
}
customElements.define("middle-component", MiddleComponent);
Sau đó điền vào ô HTML
như sau:
<middle-component>
<span>Đây là component Middle</span>
</middle-component>
Chúng ta sẽ được kết quả:
1 số lưu ý:
- code sử dụng chủ yếu là
Javascript
nên hãy chú ý cú pháp của nó. Các nội dung HTML và CSS sẽ được để trongstring
củaJavascript
- đoạn
defaultStyle
là chúng ta thay đổi các thuộc tính style mặc định củadiv
, nên nhớ vớiHTML
thìdisplay
mặc định làblock
vàposition
mặc định làstatic
. DùngdefaultStyle
để cho giống vớiURP
<slot></slot>
sẽ đóng vai trò giống như{children}
ở bênURP
- với
HTML
thì chỉ đặt được tên component theo dạng kebab-case , nên đặt tên component gồm 2 chữ, nếu lúc code thấy không hiện component của mình thì nên check lại xem đặt tên đã đúng chưa
Giờ chúng ta sẽ thêm như sau để nhận thuộc tính height
constructor() {
super();
this.shadow = this.attachShadow({ mode: "open" });
const height = this.getAttribute("height") || "auto";
this.shadow.innerHTML = `
<style>
${this.defaultStyle}
div {
width: 100%;
height: ${height};
justify-content: center;
align-items: center;
border-width: 1px;
border-style: dashed;
border-color: lightgrey;
}
</style>
<div><slot></slot></div>
`;
}
OKay vậy là xong r đó <Middle />
cho URP
và <middle-component></middle-component>
cho HTML
Bài tập 2:
Code lại giao diện này
Yêu cầu:
- Code thành 2 component, 1 container và 1 item. Như vậy nó sẽ có dạng như này:
<Container>
<Item />
<Item />
<Item />
</Container>
- Phải code trên cả
URP
vàHTML
, gửi lại link snack và link codepen
Lưu ý: Giao diện Web preview của snack hơi nhỏ có thể mở sang của sổ preview to hơn để code.