Components

Defining a component

A component is just a function that returns JSX. Whatever it returns is what gets rendered.

• Name it with a capital letter (see the naming convention in Project Structure).
• export default makes it the main thing this file exports, so other files can import it without needing to know its exact name.

function App() {
    return (
        <div>
            <Header />
            <button>Search</button>
        </div>
    )
}
 
export default App
 
function Header() {
    return (
        <header>
            <h1>Letterboxd Plus</h1>
            <p>Your personal movie tracker</p>
        </header>
    )
}

• App renders Header inside itself, components nest inside other components exactly like this.
• Header doesn't need its own export default here since it's only used inside this same file. It'd need exporting only if another file wanted to import it directly.

Another component: MovieCard

Same file, another component, same pattern: its own function, capital letter, returns some JSX.

function App() {
    return (
        <div>
            <Header />
            <button>Search</button>
        </div>
    )
}
 
export default App
 
function Header() {
    return (
        <header>
            <h1>Letterboxd Plus</h1>
            <p>Your personal movie tracker</p>
        </header>
    )
}
 
function MovieCard() {
    return (
        <div>
            <h2>Dune</h2>
            <p>Sci-Fi</p>
            <p>★★★★★</p>
        </div>
    )
}

• Defining MovieCard doesn't put it on the page. App still only renders Header and a button, MovieCard isn't called anywhere inside it.
• Defining a component and rendering it are two separate steps. This one exists, but nothing shows up until something actually writes <MovieCard /> into a return statement.

<Header /> vs Header()

Only one of these actually goes through React, the other just runs a plain JavaScript function.

• <Header /> is JSX. It compiles down to React.createElement(Header, ...), which tells React "here's a component, you decide when and how to render it." React treats it as its own node in the tree and can track and re-render it independently later.
• Header() just calls the function directly, like any other JS function call. You get its return value, the JSX it produces, inlined wherever you called it, but React never finds out a separate component was involved. No node of its own in the tree, no independent re-renders, and if Header used any hooks internally, calling it this way can break the rules of hooks entirely (hooks assume they're running inside a proper component render, not a nested plain function call).
• Net effect: Header() still "works" for something this simple, but it quietly stops being an actual React component and becomes just a JSX-shaped helper function.