File Naming, Component Boundaries, Prop Naming
Adopt simple conventions: PascalCase for components, clear folders, small component boundaries, and expressive prop names.
File Naming, Component Boundaries, Prop Naming is a free React Academy lesson on CoddyKit — lesson 2 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why conventions help
Goal: Make the codebase predictable.
- PascalCase component files
- Small, focused components
- Clear, descriptive prop names
Naming & folders quick list
- Files: UserCard.jsx, ProductList.jsx
- Folders: components/UserCard, pages/Profile
- Exports: default or named, but match file name
Demo: mini project tree
A small project layout with PascalCase component files.
<div id="root"></div>
Demo: small, reusable parts
Keep components focused: a small UserCard used inside a Profile.
<div id="root"></div>
Demo: clear props & defaults
Use descriptive prop names; set simple defaults in destructuring.
<div id="root"></div>
Checklist
- PascalCase for components and files
- One file, one main component
- Props: clear names (label, onPress), simple defaults
File naming best practice
Recap
Recap: Use PascalCase files and component names, keep components focused, and choose expressive prop names with simple defaults.
Frequently asked questions
Is the “File Naming, Component Boundaries, Prop Naming” lesson free?
Yes — the full text of “File Naming, Component Boundaries, Prop Naming” is free to read here on the web, and the React Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.
What will I learn in “File Naming, Component Boundaries, Prop Naming”?
Adopt simple conventions: PascalCase for components, clear folders, small component boundaries, and expressive prop names. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start React Academy?
No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “File Naming, Component Boundaries, Prop Naming” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this React Academy lesson?
Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- ESLint + React Rules; Prettier Integration
- File Naming, Component Boundaries, Prop Naming
- Env Variables & Config Organization