Lời mở đầu
Bài viết này không có mục tiêu cụ thể, nó không phải 1 bài viết hướng dẫn từ A tới Z cho người mới bắt đầu
Nó giống với 1 bài liệt kê các tài liệu liên quan đến Component thì đúng hơn, và hi vọng đâu đó trong bài viết bạn nhặt được 1 phần nào đó bạn chưa biết
Nếu bạn có phần nào không hiểu, đừng ngại để lại 1 Bình Luận cho mình nhé!
1. Component
1 Component sẽ được viết chủ yếu trong [src/features/] và [src/shared/]. Về cơ bản 1 Component sẽ trả về 1 đoạn html.
folder [src/features/] để lưu những Component the từng tính năng, như Login, List, Detail... [src/shared/] lưu những Component được sử dụng nhiều như Header, Footer, Input...
Component có thể là 1 function hoặc là 1 biến lưu 1 callBack funcion đều được.
Tên 1 Component PHẢI bắt đầu bằng chữ in Hoa
Trong Typescript mình hay code như này:
import React from 'react';
export interface WelcomeProps { name: string; }
export const Welcome: React.FC = (props: WelcomeProps) = > { return (<h1>Hello, {props.name}</h1>);
}
hoặc rút gọn của callBack function:
export const Welcome = (props: WelcomeProps) => (<h1>Hello, {props.name}</h1>);
export const Welcome = (props: WelcomeProps) => <h1>Hello, {props.name}</h1>;
Component chỉ cho phép trả về 1 tag, nếu muốn trả về hơn 1 tag thì cần bọc lại bằng 1 thẻ khác, nếu không thể bọc được thì có thể dùng cặp thẻ <></>. cặp thẻ này sẽ biến mất khi được gen ra code html
2. TypeScript + React: Component patterns
Danh sách này là tập hợp các mẫu Component cho React khi làm việc với TypeScript.
Basic function components
viết Component như 1 function bình thường
function Title() { return <h1>Welcome to this application</h1>;
}
Props
được đặt theo tên component + Props-suffix. Không cần sử dụng React.FC
type GreetingProps = {name: string;};
function Greeting(props: GreetingProps) { return <p>Hi {props.name} 👋</p>
}
Destructuring
cũng như trên nhưng dễ đọc hơn
function Greeting({ name }: GreetingProps) { return <p>Hi {name} 👋</p>;
}
Default props
phương pháp này cho phép đặt giá trị mặc định cho tham số truyền vào nếu Parent Component không truyền tham số xuống Children
type LoginMsgProps = { ame?: string };
function LoginMsg({ name = "Guest" }: LoginMsgProps) { return <p>Logged in as {name}</p>;
}
Children
thay vì dùng FC hay FunctionComponent, chúng ta sẽ set vào [children] type React.ReactNode
vì nó chấp nhận hầu hết (JSX elements, strings, etc.)
type CardProps = { title: string; children: React.ReactNode;
};
export function Card({ title, children }: CardProps) { return ( <section className="cards"> <h2>{title}</h2> {children} </section> );
}
cách sử dụng Children trong Parent Component:
<Card title="Title"> <p>This is children</p>
</Card>
Không cho phép Children
thay vì dùng FC hay FunctionComponent, chúng ta sẽ set vào [children] type React.ReactNode
vì nó chấp nhận hầu hết (JSX elements, strings, etc.)
// This throws errors when we pass children
type SaveButtonProps = { //... whatever children: never
}
WithChildren helper type
thay vì dùng FC hay FunctionComponent, chúng ta sẽ set vào [children] type React.ReactNode
vì nó chấp nhận hầu hết (JSX elements, strings, etc.)
type WithChildren<T = {}> = T & { children?: React.ReactNode };
type CardProps = WithChildren<{ title: string; }>;
Điều này rất giống với FC, nhưng với tham số chung mặc định {}, nó có thể linh hoạt hơn nhiều:
// works as well
type CardProps = { title: string } & WithChildren;
Nếu bạn đang sử dụng Preact, bạn có thể sử dụng h.JSX.Elementhoặc VNode dưới dạng một loại thay vì React.ReactNode.
Cá nhân mình nghĩ phần này tác giả đang vẽ rắn thêm chân.
3. cách 1 Component được hiển thị
mặc định file luôn được hiển thị là index.html, mọi thay đổi trong file này sẽ ảnh hưởng tới cả Project. Nhg đây không phải nơi để sửa global trong React, ngta sẽ cố giữ không sửa file này
<body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div>
</body>
bên trong file này sẽ có 1 thẻ: <div id="root"></div>. đây chính là nơi React thay đổi nội dung html hiển thị
file index.tsxthay đổi thẻ này bằng các Component thông qua code
const container = document.getElementById('root')!;
const root = createRoot(container);
root.render( <App />
);
trong file này có [import './index.css';], đây là nơi áp dụng 1 số css Global
file App.tsxcơ bản dùng để phân từng trang tương ứng với Url, thông qua Router
const App: React.FC = () => { return ( <div className="App"> <Router /> </div> );
}
file Router.tsx thường áp dụng với Extenstion react-router, hoặc phân trang bằng tay
const Router: React.FC = () => { return ( <BrowserRouter> <HeaderComponent /> <Routes> <Route path={URL_PATH.LIST} element={ <ListComponent /> } /> <Route path={URL_PATH.DATA1} element={ <Data1Component /> } /> <Route path={URL_PATH.DATA2} element={ <Data2Component /> } /> <Route path={URL_PATH.CONFIRM} element={ <ConfirmComponent /> } /> <Route path={URL_PATH.DETAIL} element={ <DetailComponent /> } /> <Route path={URL_PATH.INDEX} element={ <LoginComponent /> } /> <Route path={URL_PATH.LOGIN} element={ <LoginComponent /> } /> <Route path={URL_PATH.NOT_FOUND} element={ <InvalidComponent /> } /> </Routes> </BrowserRouter> ); }
tuy nhiên mỗi Component không phải là 1 Page, Component có thể nhỏ như 1 cái Button, 1 Area hay to như file App.tsx cũng là 1 Component