Default, named and namespace imports from React itself
useState imported by name and React.useState are the same function. You'll usually see named imports (import { useState } from "react"); import React from "react" is no longer needed for JSX since the new JSX transform (React 17).
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.Expected console output
React.useState === useState: true
createRoot is a function
React version 19.2.8