/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ p: "p", h2: "h2", pre: "pre", code: "code" }, _provideComponents(), props.components); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "SOLID principles get mentioned a lot, but they're often explained with abstract examples that don't relate to frontend work. Let me break them down with React examples." }), "\n", _jsx(_components.h2, { id: "single-responsibility-principle", children: "Single Responsibility Principle" }), "\n", _jsx(_components.p, { children: "A component should have one reason to change. If you're updating a component because the API changed, and also because the design changed, it's doing too much." }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "// ❌ Too many responsibilities\nfunction UserCard({ userId }) {\n const [user, setUser] = useState(null);\n useEffect(() => {\n fetch(`/api/users/${userId}`).then(r => r.json()).then(setUser);\n }, [userId]);\n\n return (\n

{user?.name}

\n \n

\n );\n}\n\n// ✅ Separated concerns\nfunction UserCard({ user, onDelete }) {\n return (\n

{user.name}

\n \n

\n );\n}\n" }) }), "\n", _jsx(_components.h2, { id: "openclosed-principle", children: "Open/Closed Principle" }), "\n", _jsx(_components.p, { children: "Open for extension, closed for modification. Use composition instead of modifying existing components." }), "\n", _jsx(_components.p, { children: "Instead of adding props to handle every variation, create variants or use composition:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "// ✅ Extensible without modification\nfunction Button({ variant, children, ...props }) {\n return ;\n}\n" }) }), "\n", _jsx(_components.h2, { id: "liskov-substitution-principle", children: "Liskov Substitution Principle" }), "\n", _jsx(_components.p, { children: "Subtypes should be substitutable for their base types. In React, this means components that extend others should work in the same contexts." }), "\n", _jsx(_components.h2, { id: "interface-segregation-principle", children: "Interface Segregation Principle" }), "\n", _jsxs(_components.p, { children: ["Don't force components to depend on interfaces they don't use. Prefer specific props over a giant ", _jsx(_components.code, { children: "options" }), " object."] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-typescript", children: "// ❌ Too broad\nfunction Modal({ options }) {\n /* ... */\n}\n\n// ✅ Specific props\nfunction Modal({ isOpen, onClose, title, children }) {\n /* ... */\n}\n" }) }), "\n", _jsx(_components.h2, { id: "dependency-inversion-principle", children: "Dependency Inversion Principle" }), "\n", _jsx(_components.p, { children: "Depend on abstractions, not concretions. Use interfaces or types to define contracts, then implement them." }), "\n", _jsx(_components.h2, { id: "the-takeaway", children: "The Takeaway" }), "\n", _jsx(_components.p, { children: "SOLID isn't about following rules—it's about writing code that's easier to change. Start with single responsibility. The rest follows naturally." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent };

SOLID - The Simple Way To Understand