What are exports and imports?

Every .ts or .tsx file in your project is its own little world — in JavaScript, each file is called a module. By default, what's inside one module is invisible to all the others. Exports and imports are how modules share things with each other.

Export: making something available

When you write export in front of something, you're saying "other files can use this."

greeting.ts
export const name = 'World'

export function sayHello() {
  return `Hello, ${name}!`
}

Without export, name and sayHello only exist inside greeting.ts. With it, any other file can grab them.

Import: using something from another file

app.ts
import { name, sayHello } from './greeting'

console.log(sayHello()) // "Hello, World!"
console.log(name)       // "World"

The import line says: "go to greeting.ts, find the things called name and sayHello, and bring them here."

Default exports

A file can also have one default export — the "main thing" the file provides:

page.tsx
export default function Page() {
  return <h1>Hello</h1>
}

When you import a default export, you don't use curly braces, and you can name it whatever you want:

import Page from './page'
import Whatever from './page'  // same thing, different name

In React Router, the default export from a route file is the component that renders the page. That's why you see export default function Page() in every route file.

Named vs. default

A file can have many named exports but only one default export. Think of it like a store: the default export is the main product — it's what you came for. Named exports are the extras on the shelf.

math.ts
export default function add(a, b) { return a + b }  // the main thing
export function subtract(a, b) { return a - b }      // also available

Most of the time, you don't need to think about this. The AI generates the right export pattern for each file. But when you see export and import in code, now you know what they're doing: connecting files together.