jcorpac UI Component Architecture
Encapsulation shouldn't require a framework. This skill provides a pattern for building reusable components that are easy to drop into any project.
The Component Pattern
- The Template: A function that returns HTML as a template literal.
- The Styles: Encapsulated CSS (often using scoped selectors or Shadow DOM).
- The Logic: An init function that sets up listeners and internal state.
Folder Structure
components/
└── Card/
├── index.js # Component logic & template
└── style.css # Scoped styles
Best Practices
- Props: Pass data into components via function arguments.
- Events: Components should communicate with the app by dispatching custom events.
- Cleanup: Provide a way to "destroy" or "unmount" a component to prevent memory leaks.