React Mobx

Cursor-Regel für React mit MobX: observable Stores statt Redux-Boilerplate.

Original-Beschreibung der Autoren: Cursor rules for React development with MobX integration.

Die Regel

---
description: "Cursor rules for React development with MobX integration."
globs: **/*
alwaysApply: false
---
// React + MobX .cursorrules

// Prefer functional components with hooks

const preferFunctionalComponents = true;

// MobX best practices

const mobxBestPractices = [
  "Use MobX-react-lite for optimal performance with functional components",
  "Implement stores for managing application state",
  "Utilize computed values for derived state",
  "Use actions for modifying observable state",
  "Implement proper error handling in asynchronous actions",
];

// Folder structure

const folderStructure = `
src/
  components/
  stores/
  hooks/
  pages/
  utils/
`;

// Additional instructions

const additionalInstructions = `
1. Use TypeScript for type safety with MobX
2. Implement strict mode for MobX for better debugging
3. Use observer HOC or useObserver hook for reactive components
4. Implement proper dependency injection for stores
5. Use reaction for side-effects based on observable changes
6. Utilize MobX DevTools for debugging
7. Follow MobX best practices for scalable state management
`;

So nutzt du sie

Die Regel kopieren (Button oben) oder als Datei herunterladen und im Projekt unter .cursor/rules/ ablegen — Cursor lädt sie beim nächsten Start automatisch. Ältere Cursor-Versionen lesen alternativ eine einzelne .cursorrules-Datei im Projektstamm; dort einfach den Regel-Text ohne den Kopfblock zwischen den ----Zeilen einfügen.

Der Regel-Text ist englisch — Cursor versteht ihn unabhängig von der Sprache, in der Sie mit dem Editor chatten.

Im Detail

Diese Cursor-Regel gibt vor, wie State-Management mit MobX in React-Projekten aussehen soll: Stores werden als observable Klassen angelegt, Komponenten mit observer umschlossen, damit sie automatisch auf Änderungen reagieren. Im Vergleich zu Redux entfällt viel Boilerplate wie Actions, Reducer und Dispatch-Logik — Zustand lässt sich direkt mutieren, MobX kümmert sich um Reaktivität und Rerendering. Sinnvoll für Teams, die objektorientiert denken und schnelle, pragmatische State-Verwaltung ohne strikte Unidirektionalität wollen. Wer dagegen explizite, nachvollziehbare State-Transitionen und Time-Travel-Debugging braucht, ist mit Redux oder Zustand oft besser bedient.

Praxis-Tipp

In Cursor einfach eine Prompt wie ‘Erstelle einen MobX-Store für Warenkorb-Items mit observable Array und Actions zum Hinzufügen/Entfernen’ verwenden — die Regel sorgt für konsistente Klassenstruktur.

Lizenz & Quelle

• Lizenz: CC0 1.0
• Quelle: PatrickJS/awesome-cursorrules (GitHub)

Lade …