React components

A React component describes a piece of UI, and defines it through a tree of markup.

• It can receive data from its parent and make use of it (props)
• It can declare its own state, scoped to itself. Scoped state improves encapsulation.
• It can import and use other components.

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

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

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