Anatomy of a Component
By the end of this lesson, you'll be able to:
- Describe the purpose of each file in an LWC bundle
- Apply correct naming conventions for LWC components and files
- Identify which files are required vs. optional in a component bundle
Prerequisites: Module 3: "Immutability and JavaScript Events"
The Component Folder
Every LWC lives in its own folder, and the folder name IS the component's name — written in camelCase (e.g. accountBadge). In markup, that same component is referenced in kebab-case with a c- namespace prefix: <c-account-badge>.
The Files in a Bundle
accountBadge/
├── accountBadge.html (template — required)
├── accountBadge.js (JavaScript class — required)
├── accountBadge.js-meta.xml (configuration — required to expose the component)
├── accountBadge.css (styling — optional)
├── accountBadge.svg (custom icon — optional)
└── __tests__/ (Jest tests — optional, covered in Module 14)Every file inside the folder shares the exact same base name as the folder itself.
Naming Rules
- The folder, file names, and the exported JS class name must all correspond exactly.
- camelCase only — no PascalCase, snake_case, or kebab-case for the folder/files.
- Cannot start with a number, cannot use a reserved word.
- LWC automatically converts the camelCase name to kebab-case for the HTML tag (
accountBadge→<c-account-badge>).
Why This Matters in Real Projects
A misnamed file is the single most common first-week beginner bug — the component deploys with no error, then simply doesn't appear, or appears broken, in App Builder. On a shared component library with fifty or more components, consistent naming discipline is what keeps the whole thing navigable and maintainable for every developer who touches it.
Exercise
A component folder is named "AccountBadge" (capital A). Explain, as a comment, whether this will work, and why.
Show hint
Recall the exact casing rule for LWC folder/file names.
Exercise
Challenge: which files in a component bundle are strictly required for the component to be usable on a Lightning page, and which are optional?
Show hint
Think about what happens if .css or .js-meta.xml is missing.
Anatomy of a Component Quiz
My Notes
Log in to keep private notes on this lesson.
Questions about this lesson
No questions yet — be the first to ask.
Log in to ask a question about this lesson.
Summary
Every LWC lives as a folder of same-named files, each with one clear job. Getting the naming correspondence right is what separates a component that deploys AND works from one that just deploys.