u

.cursor/rules/prefer-class-components.mdc

@@ -0,0 +1,33 @@
+---
+description: React-Komponenten bevorzugt als Class Components schreiben
+globs: src/**/*.{jsx,js,tsx,ts}
+alwaysApply: false
+---
+
+# Class Components bevorzugen
+
+Neue und geänderte React-Komponenten als **Class Components** (`extends Component`), nicht als Function Components.
+
+```js
+// ❌
+export default function ArticlePhoto({ photo }) {
+  return <Box>{photo?.thumbHash}</Box>;
+}
+
+// ✅
+class ArticlePhoto extends Component {
+  render() {
+    const { photo } = this.props;
+    return <Box>{photo?.thumbHash}</Box>;
+  }
+}
+export default ArticlePhoto;
+```
+
+## Konventionen
+
+- `import { Component } from 'react'`
+- Event-Handler im Constructor binden (`this.handleX = this.handleX.bind(this)`)
+- State über `this.state` / `this.setState`
+- Lifecycle: `componentDidMount`, `componentDidUpdate`, `componentWillUnmount` statt Hooks
+- Keine neuen Function Components und keine neuen Hooks (`useState`, `useEffect`, …), außer der Bestandscode ist bereits so und bleibt unangetastet