React Mobx

Cursor-Regel für React mit MobX: Stores als observable Klassen, observer-Komponenten 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

Cursor-Regel für React-Projekte mit MobX als State-Management: legt fest, wie Stores als Klassen mit observable/action definiert, wie Komponenten per observer verbunden und wie Reaktionen (autorun, reaction) sparsam statt exzessiv eingesetzt werden. Nützlich für Teams, die statt Redux bewusst auf MobX’ reaktiven, weniger boilerplate-lastigen Ansatz setzen und verhindern wollen, dass generierter Code stattdessen Redux-Patterns oder rohen useState-Wildwuchs vorschlägt. Setzt Grundkenntnisse von MobX-Konzepten (Observables, Reactions) voraus, ist also für Redux- oder Zustand-Projekte nicht relevant.

Praxis-Tipp

Beim Anlegen neuer Stores nutzen, z. B. „erstelle einen UserStore mit MobX-Observables und einer computed-Property für den vollen Namen“.

Lizenz & Quelle

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

Lade …