Những hàm được export default và được viết hoa ký tự đầu tiên là component

Ví dụ, trong components/component.tsx:

export default function Component(props) {
    return <span>Giá trị của thuộc tính 1 là {props.thuộcTính1}. Giá trị của thuộc tính 2 là {props.thuộcTính2}.</span>
} 

(Props là đối số đầu tiên của hàm component, dùng để truyền giá trị các thuộc tính của nó)
Trong routes/index.tsx:

import Component from '../components/component.tsx'

export default function Home() {
    return <Component thuộcTính1 = 'hello' thuộcTính2 = 'world' />

// 👉 Giá trị của thuộc tính 1 là hello. Giá trị của thuộc tính 2 là world.
} 

Ta thấy trong index.tsx hàm Component() được dùng như thể đó là HTML.

Khi viết components/component.tsx thường người ta sẽ destructuring luôn props để vừa thấy rõ ràng trong props đó sẽ có những thuộc tính nào, vừa để đỡ phải viết lại nhiều lần:

export default function Component({thuộcTính1, thuộcTính2}) {
    return <span>Giá trị của thuộc tính 1 là {thuộcTính1}. Giá trị của thuộc tính 2 là {thuộcTính2}.</span>
}