Import / Export

React · Reference cheat sheet

📋 Overview

React apps use ES modules: import / export. Prefer named exports for components and utilities; default exports are fine for route-level pages when the framework expects them.

🔧 Core concepts

• Named — export function Button → import \{ Button \} from "./Button".
• Default — export default App → import App from "./App".
• Re-export — export \{ Button \} from "./Button" for barrel files.
• Type-only — import type \{ Props \} from "./types" (TypeScript).
• CSS / assets — import "./styles.css", import logo from "./logo.svg".

💡 Examples

// Button.tsx
export type ButtonProps = { label: string };

export function Button({ label }: ButtonProps) {
  return <button type="button">{label}</button>;
}

// App.tsx
import { Button } from "./components/Button";
import type { ButtonProps } from "./components/Button";
import "./App.css";

export function App() {
  const props: ButtonProps = { label: "Save" };
  return <Button {...props} />;
}

// barrel: components/index.ts
export { Button } from "./Button";
export { Input } from "./Input";

⚠️ Pitfalls

• Circular imports between components — extract shared modules.
• Mixing default and named for the same symbol confuses refactors.
• Side-effect imports order can matter for CSS cascade.

🔗 Related

• file_structure.md — where modules live
• component.md — exporting components
• tsx.md — TypeScript modules
• main.md — entry imports