React component

A React component describes a piece of markup.

• It may receive data from a parent component and make use of it.
• It may declare some state that is to be scoped to this component. Scoping state to the component makes it easier to keep parents unaffected by any change in state.
• Finally, a React component may import and use other components.

// describe a piece of UI
function Home() {
    return <div>Hi</div>
}

// encapsulate some state
function Counter() {
    const [count, setCount] = React.useState<number>(0)
    return <div>{count}</div>
}

// use other components
import { Header, Footer } from "./components"
function Home() {
    return (
        <>
            <Header />
            // ...
            <Footer />
        </>
    )
}