Three files, shown as one
A live example can only be one file, so the file boundaries are marked with comments. The commented import/export lines are what each real file would contain.
Real React apps keep components in separate files and connect them with JavaScript modules: a file shares a component with export (default or named) and another file brings it in with the matching import.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Button.jsx contains export function Button() {...} and export const SIZES = ["sm", "md"]. Write the one import line that brings both into App.jsx (same folder).
Split this into Card.jsx (default export) and App.jsx:
``jsx
function Card() {
return <div className="card">Hello</div>;
}
export default function App() {
return <Card />;
}
Explain it without notes
What is the difference between a default export and a named export? How do you import each?
A teammate gets Element type is invalid … got: undefined. What are the likely causes?
Why do React projects usually put one component per file?
What does ./, ../ and a bare name like react mean in an import path?
Preview
Console
Nothing logged yet.