Checkliste für die React-Code-Überprüfung: Sicherheit und Leistung steigern

Für komplexe React-Anwendungen ist ein Code-Audit und eine Qualitätsprüfung durch einen Drittanbieter weit mehr als nur ein Nice-to-have – es ist eine entscheidende Investition. Wird dieser Schritt übersprungen oder werden nur oberflächliche Prüfungen durchgeführt, kann dies zu einer Kaskade von Problemen führen: Unfähigkeit zur Skalierung, Sicherheitslücken und technische Schulden, die Innovationen abwürgen und die Entwicklungskosten in die Höhe treiben.

Aus diesem Grund haben wir diese umfassende Checkliste für React-Code-Reviews zusammengestellt. Bei Redwerk entwickeln wir seit 2005 kundenspezifische Software und führen Code-Reviews durch. Dieser Leitfaden basiert auf jahrelanger praktischer Erfahrung in verschiedenen Branchen, wie z. B. E-Government, E-Commerce, E-Learning, Medien & Unterhaltung und vielen mehr.

Ganz gleich, ob Sie sich auf den Start einer React-basierten Anwendung vorbereiten, Performance-Probleme angehen oder sich proaktiv auf eine Due-Diligence-Prüfung durch einen Investor vorbereiten wollen – diese Checkliste für die Überprüfung des React JS-Codes wird Ihnen helfen, Probleme zu identifizieren und Lösungen zu finden.

Vorbereitung auf die Überprüfung

Die Vorbereitung vor der Überprüfung stellt sicher, dass die Umgebung bereit ist, die Abhängigkeiten aktualisiert sind und die Codebasis in einem optimalen Zustand für eine effiziente und gründliche Überprüfung des React-Codes ist. In diesem Schritt geht es darum, das Projekt zu organisieren, klare Ziele zu setzen und sicherzustellen, dass alle Tools, Konfigurationen und Dokumentationen vorhanden sind, um einen reibungslosen Review-Prozess zu ermöglichen.

Definieren Sie den Umfang und die Ziele:

• Legen Sie die Ziele und Schwerpunktbereiche für die Überprüfung klar fest, z. B. Codequalität, Leistung, Sicherheit oder bestimmte Funktionen (z. B. ein bestimmtes Feature oder Modul)
• Legen Sie fest, ob die Überprüfung die gesamte Anwendung, bestimmte Komponenten oder Schlüsselfunktionen umfassen soll
• Legen Sie messbare Erfolgskriterien fest, z. B. die Verbesserung der Lesbarkeit des Codes, die Reduzierung potenzieller Fehler oder die Optimierung der Leistung

Überprüfen von Projekt-Setup und Abhängigkeiten:

• Stellen Sie sicher, dass alle Abhängigkeiten auf dem neuesten Stand sind, indem Sie npm install oder yarn install ausführen. Stellen Sie außerdem sicher, dass keine veralteten oder anfälligen Pakete verwendet werden
• Überprüfen Sie die package.json-Datei auf Richtigkeit und vermeiden Sie unnötige oder veraltete Pakete
• Überprüfen Sie, ob das Projekt die neueste stabile Version von React und allen zugehörigen Bibliotheken (z. B. React Router, Redux usw.) verwendet, um die Kompatibilität mit modernen Best Practices sicherzustellen
• Überprüfen Sie, ob alle Bibliotheken von Drittanbietern richtig konfiguriert sind und ob ihre Verwendung notwendig ist

Bestätigen Sie die Umgebungskonfiguration:

• Stellen Sie sicher, dass die Entwicklungsumgebung mit allen erforderlichen Tools wie ESLint für das Code-Linting, Prettier für die Formatierung und anderen React-spezifischen Erweiterungen oder Linters richtig eingerichtet ist.
• Überprüfen Sie, ob das Projekt sowohl in der Entwicklungs- als auch in der Produktionsumgebung erfolgreich läuft. Dazu gehört, dass die Anwendung lokal ausgeführt (npm start, yarn start) und für die Produktion gebaut wird (npm run build, yarn build), ohne dass Fehler oder Warnungen auftreten.
• Stellen Sie sicher, dass alle umgebungsspezifischen Einstellungen (z. B. API-Endpunkte, Umgebungsvariablen) mit Hilfe von .env-Dateien oder Konfigurationstools korrekt gehandhabt werden, um das Festcodieren von Werten direkt in der Codebasis zu vermeiden.

Überprüfen und Optimieren der Testabdeckung:

• Sicherstellen, dass Unit-Tests für alle kritischen Komponenten und Funktionen vorhanden sind, unter Verwendung von Testbibliotheken wie Jest und React Testing Library
• Sicherstellen, dass die Testabdeckung umfassend ist und die wichtigsten Benutzerinteraktionen, die Zustandsverwaltung und Randfälle abdeckt
• Überprüfen Sie die Struktur der Testsuite, um sicherzustellen, dass die Tests logisch organisiert sind und sich nicht überschneiden – Unit-Tests sollten sich auf isolierte Funktionen konzentrieren, während Integrationstests die Interaktion der Komponenten überprüfen können
• Überprüfen Sie, ob die Testsuite ohne Fehler oder Ausfälle läuft (npm test, yarn test) und ob sinnvolle Aussagen gemacht werden
• Stellen Sie sicher, dass alle Tests beschreibend sind und Namen verwenden, die die getestete Funktionalität eindeutig erklären

Statische Code-Analyse-Tools ausführen:

• Stellen Sie sicher, dass statische Code-Analyse-Tools wie ESLint und Prettier richtig eingerichtet und konfiguriert sind, um einen konsistenten Code-Stil zu erzwingen und potenzielle Probleme wie unbenutzte Variablen, Syntaxfehler oder Code-Smells zu identifizieren
• Führen Sie die Code-Analyse-Tools aus und überprüfen Sie die Ergebnisse, bevor Sie mit der Überprüfung beginnen, um etwaige Probleme im Zusammenhang mit Styling oder Linting zu beheben
• Sicherstellen, dass die Regeln für bewährte Verfahren im gesamten Projekt einheitlich angewendet werden
• Sicherstellen, dass die Ergebnisse des Code-Linting und der Formatierung in die CI/CD-Pipeline integriert werden, um die Code-Qualitätsstandards bei jeder Pull-Anfrage oder Code-Zusammenführung durchzusetzen

Überprüfen und Organisieren der Dokumentation:

• Sicherstellen, dass die relevante Projektdokumentation auf dem neuesten Stand ist, einschließlich einer klaren README, die beschreibt, wie man das Projekt einrichtet, baut und ausführt, sowie alle spezifischen Einrichtungsanweisungen für Prüfer
• Überprüfen Sie, ob Inline-Kommentare und Codedokumentation (z. B. JSDoc) verwendet werden, um komplexe Logik, Funktionsargumente oder erwartetes Verhalten zu erläutern und den Prüfern das Verständnis des Codes zu erleichtern
• Überprüfung der API-Dokumentation oder der Integration von Drittanbieterdiensten, um sicherzustellen, dass sie ordnungsgemäß dokumentiert und für Prüfer zugänglich sind, die während der Prüfung zusätzlichen Kontext benötigen

Überprüfen Sie den Git-Workflow und die Codeverzweigungen:

• Stellen Sie sicher, dass das Projekt einem gut definierten Git-Workflow folgt (z. B. Gitflow, Feature Branching), damit Codeänderungen während der Überprüfung organisiert und überschaubar bleiben
• Überprüfen Sie Funktionszweige, um sicherzustellen, dass sie korrekt zusammengeführt werden
• Sicherstellen, dass alle offenen Pull Requests oder Funktionszweige mit den neuesten Änderungen aus dem Hauptzweig zusammengeführt werden, um Konflikte oder veralteten Code während des Überprüfungsprozesses zu vermeiden
• Sicherstellen, dass aussagekräftige Commit-Nachrichten verwendet werden, die den Zweck jeder Änderung klar beschreiben

Externe Abhängigkeiten und APIs validieren:

• Sicherstellen, dass alle externen Abhängigkeiten (z. B. APIs, Dienste von Drittanbietern) zu Test- und Überprüfungszwecken ordnungsgemäß nachgebildet sind
• Sicherstellen, dass es keine harten Abhängigkeiten von externen Diensten gibt, die während der Überprüfung unterbrochen werden oder fehlschlagen könnten
• Überprüfen Sie die Konfiguration von API-Aufrufen und stellen Sie sicher, dass bei fehlgeschlagenen Anfragen eine Fehlerbehandlung erfolgt und dass sensible Daten wie API-Schlüssel oder Token sicher unter Verwendung von Umgebungsvariablen gespeichert werden
• Überprüfen Sie, ob Bibliotheken und APIs von Drittanbietern effizient genutzt werden, und erwägen Sie Alternativen, wenn die Abhängigkeit durch integrierte React-Funktionen oder einfachere Optionen ersetzt werden kann

Einrichten und Testen der Build- und Deployment-Pipeline:

• Stellen Sie sicher, dass die CI/CD-Pipeline richtig konfiguriert ist, um die Anwendung automatisch zu erstellen, zu testen und bereitzustellen; dazu gehören automatisierte Tests, Linting und statische Analysen, um Probleme frühzeitig zu erkennen
• Überprüfung der Build-Konfiguration (z. B. Webpack, Vite), um sicherzustellen, dass der Produktions-Build für die Leistung optimiert ist und Funktionen wie Tree Shaking und Code-Splitting aktiviert sind
• Überprüfen Sie, ob die Deployment-Pipeline korrekt funktioniert und Änderungen automatisch und fehlerfrei in Staging- oder Produktionsumgebungen bereitgestellt werden

Vorbereiten von Testdaten und -szenarien:

• Stellen Sie sicher, dass die Testdaten und -szenarien für die Überprüfung vorbereitet sind, z. B. Musterdatensätze oder Mock Data für das Testen verschiedener Teile der Anwendung, wie Formulare, APIs und Benutzerinteraktionen
• Prüfen Sie realistische Testfälle für Schlüsselkomponenten und stellen Sie sicher, dass sie verschiedene Eingabeszenarien abdecken (z. B. gültig, ungültig, Randfälle) und für den Prüfer gut dokumentiert sind
• Sicherstellen, dass die Benutzerabläufe und das funktionale Verhalten während der Prüfung leicht reproduziert werden können, damit die Prüfer verstehen, wie der Code mit dem Rest der Anwendung interagiert

Lesbarkeit und Konsistenz des Codes

Die Sicherstellung der Lesbarkeit und Konsistenz des Codes ist entscheidend für die Aufrechterhaltung einer sauberen, wartbaren React-Codebasis. Lesbarer und konsistenter Code ermöglicht eine reibungslosere Zusammenarbeit, einfacheres Debugging und eine schnellere Einarbeitung neuer Entwickler. Hier erfahren Sie, wie Sie sicherstellen können, dass Ihre React JS-Entwickler wirklich gute Arbeit geleistet haben.

Befolgen Sie konsistente Benennungskonventionen:

• Stellen Sie sicher, dass Komponenten, Funktionen, Variablen und Dateien konsistenten und sinnvollen Namenskonventionen folgen (verwenden Sie PascalCase für React-Komponentennamen und camelCase für Funktionen, Variablen und Hooks)
• Überprüfen Sie, ob die Dateinamen mit der Komponente oder Funktion übereinstimmen, die sie exportieren; vermeiden Sie Abkürzungen oder übermäßig generische Namen, die den Zweck des Codes verschleiern
• Achten Sie auf eine konsistente Namensgebung für Requisiten und Statusvariablen und stellen Sie sicher, dass sie die Daten, die sie repräsentieren, eindeutig beschreiben (z. B. isLoading, userList)

Behalten Sie klare Komponenten- und Funktionssignaturen bei:

• Stellen Sie sicher, dass Funktions- und Komponentensignaturen einfach und selbsterklärend sind, mit beschreibenden Parameternamen
• Stellen Sie sicher, dass es keine übermäßig komplexen Funktionssignaturen mit übermäßigen Argumenten gibt, während verwandte Parameter gegebenenfalls in Objekten gruppiert werden
• Überprüfen Sie, ob die an Komponenten übergebenen Requisiten prägnant sind, und vermeiden Sie unnötige oder redundante Requisiten, die die Komponentensignatur überladen

// Correct: uses clear and descriptive names
type UserCardProps = {
  username: string;
  age: number;
};

const UserCard: React.FC = ({ username, age }) => {
  return (
    

      
{username}
      
Age: {age}
    
  );
};

// Wrong: component name Card is too generic, prop names are unclear
const Card = ({ u, a }) => {
  return (
    

      
{u}
      
Age: {a}
    
  );
}

Klare und beschreibende Kommentare verwenden:

• Stellen Sie sicher, dass Kommentare verwendet werden, um nicht offensichtliche Logik zu erklären, insbesondere bei Geschäftsregeln oder komplexen Zustandsübergängen
• Überprüfen Sie, ob die Kommentare klar und prägnant sind und wertvollen Kontext liefern, ohne übermäßig ausführlich zu sein
• Stellen Sie sicher, dass sie das “Warum” hinter den Entscheidungen erklären und nicht nur angeben, was der Code tut
• Überprüfen Sie, ob die Inline-Kommentare aktuell und für den Code, den sie beschreiben, relevant sind

// Correct: explains  the purpose of the component
// Displays a user's profile information
const UserProfile = ({ name, age }: { name: string; age: number }) => (
  

    
{name}
    
Age: {age}
  
);

// Wrong: the comment repeats what the code already shows
// This is a UserProfile component
const UserProfile = ({ name, age }) => (
  

    
{name}
    
Age: {age}
  
);

Konsistente Verwendung der JSX-Syntax und -Formatierung:

• Stellen Sie sicher, dass die JSX-Syntax konsistent ist, einschließlich Einrückung, Abstand und Platzierung von Attributen – verwenden Sie einzeiliges JSX für kurze Elemente und mehrzeiliges JSX für Elemente mit mehreren Requisiten oder Kindern
• Überprüfung der korrekten Formatierung von JSX mit konsequenter Verwendung von selbstschließenden Tags für Elemente ohne Kinder (z. B. statt )
• Sicherstellen, dass Requisiten einheitlich ausgerichtet und eingerückt werden, um die Lesbarkeit langer JSX-Attribute zu verbessern

// Correct: uses consistent indentation and proper spacing
const UserProfile = ({ name, age }: { name: string; age: number }) => (
  

    
{name}
    
Age: {age}
  
);
// Wrong: uses inconsistent indentation, making it harder to read
const UserProfile = ({name,age}) => 
{name}
Age: {age}
;

Konsistente Formatierung und Stil des Codes sicherstellen:

• Stellen Sie sicher, dass der Code im gesamten Projekt einem einheitlichen Stil folgt, und verwenden Sie Formatierungstools wie Prettier, um Einrückungen, Abstände und Zeilenumbrüche konsequent durchzusetzen
• Überprüfen Sie, ob die Zeilenlänge auf ein vernünftiges Maß beschränkt ist (z. B. 80-100 Zeichen), damit der Code auf verschiedenen Geräten oder IDEs gut lesbar bleibt
• Überprüfen Sie, ob die Linting-Regeln des Projekts (z. B. ESLint) konsequent befolgt werden, um unnötige Unterschiede oder Formatierungsdiskrepanzen in der gesamten Codebasis zu vermeiden

Verwendung von PropTypes oder TypeScript für Typsicherheit:

• Stellen Sie sicher, dass PropTypes oder TypeScript-Typen konsistent verwendet werden, um die Typen von Requisiten zu definieren, die von Komponenten erwartet werden, um Laufzeitfehler zu vermeiden und die Lesbarkeit des Codes zu verbessern
• Überprüfen Sie, ob Typdefinitionen klar und prägnant sind und ob komplexe Datenstrukturen oder verschachtelte Objekte korrekt definiert sind
• Überprüfen Sie, ob Standardwerte für optionale Requisiten festgelegt sind, entweder durch defaultProps (für JavaScript-Projekte) oder durch die optionale Verkettung und Standardwerte von TypeScript

// Correct: adding prop types if no TypeScript support 
import PropTypes from "prop-types";

const Button = ({ label, onClick }) => {
  return {label};
};

Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
};

// Correct: adding TypeScript interface for props (correct)
import PropTypes from "prop-types";

const Button = ({ label, onClick }) => {
  return {label};
};
Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired,
};

// Wrong: no prop types or TypeScript interface 
const Button = (props: any) => {
  return {props.label};
};

Vermeiden Sie übermäßig komplexe Ausdrücke in JSX:

• Stellen Sie sicher, dass JSX-Ausdrücke einfach und leicht nachvollziehbar sind
• Stellen Sie sicher, dass keine komplexe Logik direkt in JSX eingebettet ist, da dies die Lesbarkeit beeinträchtigen kann
• Überprüfen Sie, ob Berechnungen oder bedingte Logik in Hilfsfunktionen oder Zustandsvariablen verschoben werden, wenn dies erforderlich ist
• Überprüfen Sie die Verwendung von bedingtem Rendering (&&, ? :), um sicherzustellen, dass es nicht übermäßig verschachtelt oder schwer lesbar ist
• Prüfen Sie, ob komplexe Bedingungen in mehrere, kleinere Ausdrücke oder Hilfsfunktionen aufgeteilt sind
• Prüfen Sie, ob sich wiederholende Elemente (z. B. Listenwiedergabe mit Map) prägnant und klar strukturiert sind
• Prüfen Sie, ob Key-Props angemessen verwendet werden, damit React Listenelemente effizient verfolgen kann

// Correct: moves complex logic out of JSX into a function
const getDiscountMessage = (price: number) => {
  return price > 100 ? "You get a discount!" : "No discount available.";
};

const Product = ({ price }: { price: number }) => (
  
{getDiscountMessage(price)}
);
// Correct: stores ternary logic in a variable to improve readability
const Product = ({ price }: { price: number }) => (
  const discountMessage = price > 100 ? "You get a discount!" : "No discount available.";
  
{discountMessage}
);

// Wrong: hard to read because of nested expressions inside JSX
const Product = ({ price }) => (
  
{price > 100 ? "You get a discount!" : "No discount available."}
);

Vermeiden Sie überflüssigen oder toten Code:

• Stellen Sie sicher, dass auskommentierter oder ungenutzter Code aus der Codebasis entfernt wird
• Überprüfen Sie bedingte Logik oder Feature Flags, die unnötigen Code in Produktions-Builds hinterlassen könnten
• Überprüfen Sie, ob duplizierter Code in wiederverwendbare Komponenten oder Hilfsfunktionen umstrukturiert wird, um die Wiederverwendung von Code zu fördern und den Wartungsaufwand zu verringern

Konsistente Handhabung der Destrukturierung von Requisiten und Zuständen:

• Stellen Sie sicher, dass die Destrukturierung bei der Handhabung von Requisiten und Zuständen konsistent verwendet wird, um die Lesbarkeit zu verbessern, indem wiederholte Verweise reduziert werden (z. B. props.user wird zu { user })
• Überprüfen Sie, ob die Destrukturierung am Anfang der Komponente oder des Funktionskörpers angewendet wird, um eine saubere, organisierte Struktur zu erhalten
• Stellen Sie sicher, dass keine Destrukturierung direkt innerhalb von JSX erfolgt, was die Lesbarkeit beeinträchtigen kann

// Correct: destructure in function parameters
const UserProfile = ({ name, age, location }) => {
  return (
    

      
{name}
      
Age: {age}
      
Location: {location}
    
  );
};

// Wrong: access props without destructuring
const UserProfile = (props) => {
  return (
    

      
{props.name}
      
Age: {props.age}
      
Location: {props.location}
    
  );
};

Komponentenstruktur und Wiederverwendbarkeit

Ein wichtiger Teil einer Code-Qualitätsprüfung ist die Sicherstellung, dass die Komponenten modular, wiederverwendbar und gut organisiert sind. Dies ist wichtig, da eine gut strukturierte und wiederverwendbare Komponentenarchitektur der Schlüssel zum Aufbau skalierbarer und wartbarer React-Anwendungen ist. Bei der Überprüfung des React-Codes sollte man sich auf die Struktur und Wiederverwendbarkeit der Komponenten konzentrieren, um sicherzustellen, dass die Anwendung leicht erweiterbar bleibt.

Stellen Sie sicher, dass die Komponenten dem Prinzip der einzigen Verantwortung folgen:

• Vergewissern Sie sich, dass jede Komponente eine klare, einzige Verantwortung hat und sich auf eine einzige Funktionalität konzentriert.
• Stellen Sie sicher, dass Komponenten nicht für zu viele Aufgaben verantwortlich sind (z. B. Rendering der Benutzeroberfläche, Verwaltung komplexer Geschäftslogik und Datenabruf an einem Ort).
• Überprüfen Sie große Komponenten und zerlegen Sie sie in kleinere Unterkomponenten, wenn sie mehrere Aufgaben übernehmen.
• Sicherstellen, dass die Geschäftslogik vom Rendering der Benutzeroberfläche getrennt ist
• Sicherstellen, dass komplexe Logik von Containern oder zustandsbehafteten Komponenten gehandhabt wird, während sich Präsentationskomponenten ausschließlich auf die Darstellung der Benutzeroberfläche konzentrieren

// Correct: keeps single responsibility and reusability
type UserCardProps = {
  name: string;
  age: number;
};

const UserCard: React.FC = ({ name, age }) => (
  

    
{name}
    
Age: {age}
  
);

// Wrong: handles fetching data, loading state and complex rendering logic
const UserCard = () => {
  const [user, setUser] = React.useState(null);

  React.useEffect(() => {
    fetch("/api/user")
      .then((res) => res.json())
      .then((data) => setUser(data));
  }, []);

  if (!user) return 
Loading...
;

  return (
    

      
{user.name}
      
Age: {user.age}
    
  );
};

Förderung der Wiederverwendbarkeit mit generischen Komponenten:

• Stellen Sie sicher, dass gemeinsame UI-Muster (z. B. Schaltflächen, Modals, Formularfelder) in wiederverwendbaren, generischen Komponenten gekapselt sind, die in verschiedenen Teilen der Anwendung verwendet werden können
• Überprüfen Sie Komponenten auf Duplizierung und refaktorisieren Sie ähnliche Codeteile in gemeinsame Komponenten oder Dienstprogramme
• Überprüfen Sie, dass ähnliche Logik nicht an mehreren Stellen wiederholt wird
• Überprüfen Sie, ob die Komponenten mit Blick auf Flexibilität entworfen wurden, indem Sie Requisiten verwenden, um das Verhalten oder Aussehen anzupassen

// Correct: reusable for different cases
const Button = ({ label, onClick, variant = "primary", disabled = false }) => {
  return (
    
      {label}
    
  );
};

// Usage
 console.log("Submitted!")} variant="success" />;
 console.log("Cancelled!")} variant="danger" />;

// Wrong: non-reusable
const SubmitButton = () => {
  return Submit;
};

Richtige Komponentenhierarchie und Verschachtelung verwenden:

• Stellen Sie sicher, dass die Komponenten in einer klaren Hierarchie strukturiert sind, die die logische Struktur der Anwendung widerspiegelt
• Stellen Sie sicher, dass die Komponenten nicht zu tief verschachtelt sind, da dies die Nachvollziehbarkeit und Wartung des Codes erschweren kann
• Überprüfen Sie die Beziehungen zwischen Eltern- und Kind-Komponenten, um sicherzustellen, dass die Daten auf natürliche Weise über Requisiten von den Elternkomponenten zu den Kindern fließen
• Sicherstellen, dass kein übermäßiges Requisiten-Drilling (Weitergabe von Requisiten durch mehrere Schichten) stattfindet, indem bei Bedarf Kontext- oder Zustandsverwaltungsbibliotheken verwendet werden
• Sicherstellen, dass wiederverwendbare Komponenten in geeigneten Verzeichnissen abgelegt werden (z. B. /components/shared für gemeinsame Komponenten), um die Organisation und Zugänglichkeit der gesamten Codebasis zu verbessern

Sicherstellung einer klaren Trennung von Container- und Präsentationskomponenten:

• Stellen Sie sicher, dass die Anwendung Containerkomponenten (die den Zustand, die Logik und das Abrufen von Daten verwalten) von Präsentationskomponenten (die sich auf die Darstellung der Benutzeroberfläche konzentrieren) trennt
• Überprüfen Sie die Präsentationskomponenten, um sicherzustellen, dass sie zustandslos sind und alle erforderlichen Daten und Aktionen über Props erhalten, so dass sie leicht wiederverwendet und getestet werden können
• Überprüfen Sie, ob Container-Komponenten für die Verwaltung des Zustands und das Abrufen von Daten verantwortlich sind, während sie Rendering-Aufgaben an Präsentationskomponenten delegieren

Verwendung von Komposition statt Vererbung:

• Stellen Sie sicher, dass Komponenten durch Komposition und nicht durch Vererbung erstellt werden, da React ein Kompositionsmodell fördert, bei dem kleinere Komponenten zusammengesetzt werden, um komplexere Benutzeroberflächen zu erstellen
• Überprüfen Sie, wie Komponenten komponiert werden, um sicherzustellen, dass wiederverwendbare Bausteine (z. B. Layout-Wrapper, UI-Elemente) effektiv kombiniert werden
• Überprüfen Sie, ob Reacts children prop verwendet wird, um JSX als Inhalt in Komponenten zu übergeben, was eine flexible Komposition ohne Hardcoding von Strukturen innerhalb von Komponenten ermöglicht

// Correct: composition with 'children' is more clear and easy to extend
const Card = ({ title, children }) => {
  return (
    

      
{title}
      
{children}
    
  );
};

// Usage

  
Name: Alice
  
Email: alice@example.com
;

// Wrong: using inheritance instead of composition
class Card extends React.Component {
  render() {
    return (
      

        
{this.props.title}
        
{this.renderContent()}
      
    );
  }

  renderContent() {
    return null; // To be overridden by subclasses
  }
}

class UserProfileCard extends Card {
  renderContent() {
    return (
      <>
        
Name: Alice
        
Email: alice@example.com
      
    );
  }
}

// Usage
;

Vermeiden Sie Hardcoding von Stilen, verwenden Sie Styled Components oder CSS-Module:

• Stellen Sie sicher, dass das Styling konsistent angewendet wird, indem Sie CSS-in-JS-Bibliotheken wie Styled Components oder Emotion oder CSS-Module verwenden, um die Skalierbarkeit und Wartbarkeit der Stile zu gewährleisten
• Überprüfen Sie die Verwendung von Inline-Styles und hartkodierten Werten in JSX, um sicherzustellen, dass diese auf ein Minimum reduziert werden
• Überprüfen Sie, ob wiederverwendbare UI-Elemente (z. B. Schaltflächen, Eingaben) in der gesamten Anwendung über einheitliche Stile verfügen, was sowohl die Wartbarkeit als auch die Benutzerfreundlichkeit verbessert

// Correct: using styled components
import styled from "styled-components";

// Styled button with dynamic props
const Button = styled.button`
  background-color: ${(props) => (props.primary ? "blue" : "gray")};
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  
  &:hover {
    background-color: ${(props) => (props.primary ? "darkblue" : "darkgray")};
  }
`;

// Usage
const App = () => (
  <>
    Primary Button
    Secondary Button
  
);

// Wrong: hardcoded inline styles
const Button = ({ primary, children }) => (
  
    {children}
  
);

const App = () => (
  <>
    Primary Button
    Secondary Button
  
);

Sicherstellen der Zugänglichkeit in wiederverwendbaren Komponenten:

• Stellen Sie sicher, dass wiederverwendbare Komponenten standardmäßig zugänglich sind, und befolgen Sie dabei bewährte Verfahren wie die Bereitstellung geeigneter Aria-Attribute, Beschriftungen und Unterstützung für die Tastaturnavigation
• Überprüfen Sie, ob Schaltflächen, Formularelemente und andere interaktive Komponenten die notwendigen Attribute enthalten, um sie für alle Benutzer zugänglich zu machen (z. B. aria-label, role, tabIndex)
• Überprüfen Sie, ob alle wiederverwendbaren Komponentenbibliotheken oder Designsysteme den Zugänglichkeitsstandards entsprechen, um sicherzustellen, dass die Anwendung inklusiv ist und die Zugänglichkeitsanforderungen erfüllt

// Correct: using aria labels & semantic elements
const IconButton = ({ icon, label, onClick }) => {
  return (
    
      {icon}
    
  );
};

// Wrong: missing aria and wrong elements
const IconButton = ({ icon, onClick }) => {
  return {icon};
};

// Correct: using label and id in forms
const TextInput = ({ label, id, ...props }) => {
  return (
    

      {label}
      
    
  );
};

// Wrong: missing label association
const TextInput = ({ placeholder }) => {
  return ;
};

Richtige Verwendung von React Hooks und Zustandsverwaltung

Der effektive Einsatz von React Hooks und State Management stellt sicher, dass React-Anwendungen vorhersehbar, wartbar und einfach zu skalieren sind. Hooks sind ein zentraler Bestandteil der modernen React-Entwicklung, und wenn man versteht, wie man den Zustand richtig verwaltet, kann man eine bessere Performance und saubereren Code gewährleisten.

Verwenden Sie useState für den lokalen Komponentenzustand:

• Stellen Sie sicher, dass useState richtig für die Verwaltung des lokalen Komponentenzustands verwendet wird
• Überprüfen Sie, ob die Zustandsvariablen die minimal erforderlichen Daten darstellen und vermeiden Sie unnötige oder redundante Zustände
• Überprüfen Sie die Namen der Zustandsvariablen und ihrer Setter, um sicherzustellen, dass sie die Daten und Aktionen, die sie repräsentieren, eindeutig beschreiben (z. B. isModalOpen, setIsModalOpen)
• Überprüfen Sie, ob komplexe Zustandslogik in Hilfsfunktionen oder Zustandsaktualisierungs-Callbacks abstrahiert wird (z. B. setState(prevState => newState)) und vermeiden Sie übermäßige Neuaufrufe oder direkte Manipulationen des Zustands

// Correct: using functional update for safety
const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  return Count: {count};
};

// Wrong: directly modifying state
const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1); // Might cause stale state issues
  };

  return Count: {count};
};

// Correct: using immutable updates for objects
const UserProfile = () => {
  const [user, setUser] = useState({ name: "Alice", age: 25 });

  const updateAge = () => {
    setUser(prevUser => ({ ...prevUser, age: prevUser.age + 1 }));
  };

  return Age: {user.age};
};

// Wrong: mutating state directly
const UserProfile = () => {
  const [user, setUser] = useState({ name: "Alice", age: 25 });

  const updateAge = () => {
    user.age += 1; // Direct mutation!
    setUser(user); // React may not detect this change
  };

  return Age: {user.age};
};

Verwenden Sie useEffect für Nebenwirkungen:

• Stellen Sie sicher, dass useEffect für Seiteneffekte wie Datenabrufe, Abonnements oder die Interaktion mit externen Diensten angemessen verwendet wird
• Sicherstellen, dass keine Seiteneffekte direkt in der Renderlogik platziert werden
• Überprüfen Sie das Abhängigkeitsarray von useEffect, um sicherzustellen, dass es die Variablen, von denen der Effekt abhängt, korrekt wiedergibt (falsche oder fehlende Abhängigkeiten können zu Endlosschleifen oder veralteten Zuständen führen)
• Vergewissern Sie sich, dass innerhalb von useEffect bei Bedarf Bereinigungsfunktionen verwendet werden, insbesondere für Abonnements, Event-Listener oder Timer, um Speicherlecks und unbeabsichtigtes Verhalten zu vermeiden

Vermeiden Sie die übermäßige Verwendung von useEffect für abgeleitete Zustände:

• Stellen Sie sicher, dass useEffect nicht übermäßig verwendet wird, um Zustände abzuleiten, die direkt im Komponentenkörper berechnet werden können; zum Beispiel sollten abgeleitete Daten von Requisiten oder Zuständen innerhalb der Render-Methode oder unter Verwendung von Memoisierung (useMemo) berechnet werden, nicht innerhalb von useEffect
• Überprüfen Sie Komponenten, bei denen der Status innerhalb von useEffect gesetzt wird, und überarbeiten Sie sie, um abgeleitete Daten außerhalb von useEffect zu berechnen, es sei denn, die Logik hängt von externen asynchronen Daten ab

// Correct: using useMemo for expensive computations
const ExpensiveComponent = ({ items }) => {
  const computedValue = useMemo(() => {
    console.log("Running expensive computation...");
    return items.reduce((sum, item) => sum + item.value, 0);
  }, [items]); // Only recalculates when `items` change

  return 
Computed Value: {computedValue}
;
};

// Wrong: using useEffect to set state
const ExpensiveComponent = ({ items }) => {
  const [computedValue, setComputedValue] = useState(0);

  useEffect(() => {
    console.log("Running expensive computation...");
    setComputedValue(items.reduce((sum, item) => sum + item.value, 0));
  }, [items]); // Unnecessary effect

  return 
Computed Value: {computedValue}
;
};

Verwenden Sie useContext für Global State Sharing:

• Stellen Sie sicher, dass useContext für die gemeinsame Nutzung eines globalen oder anwendungsweiten Zustands verwendet wird, um die Notwendigkeit des Prop Drillings durch mehrere Komponenten zu verringern
• Überprüfen Sie den Kontextanbieter und stellen Sie sicher, dass er auf einer geeigneten Ebene im Komponentenbaum verwendet wird, um unnötige Neuaufrufe von untergeordneten Komponenten zu vermeiden
• Stellen Sie sicher, dass der Kontext nur sparsam für wirklich globale Daten (z. B. Authentifizierung, Thema) verwendet wird und der lokale Status innerhalb der Komponenten mit useState oder anderen Hooks verwaltet wird

Nutzen Sie useReducer für komplexe Zustandslogik:

• Stellen Sie sicher, dass useReducer für die Verwaltung komplexer Zustandslogik verwendet wird, insbesondere wenn Zustandsübergänge mehrere Aktionen umfassen oder strukturierte Aktualisierungen erfordern
• Überprüfen Sie die Reducer-Funktion, um sicherzustellen, dass sie rein ist, d. h. dass sie nur von ihrer Eingabe abhängt und keine Seiteneffekte verursacht oder den Zustand direkt verändert
• Überprüfen Sie, ob Aktionstypen und Nutzdaten klar definiert und beschreibend sind, um sicherzustellen, dass die Reduzierungslogik klar und verständlich bleibt

Verwenden Sie useRef für veränderliche Werte und DOM-Manipulationen:

• Stellen Sie sicher, dass useRef für Werte verwendet wird, die über Rendervorgänge hinweg bestehen bleiben müssen, ohne neue Rendervorgänge auszulösen (z. B. DOM-Elemente, Zeitgeber oder veränderliche Variablen)
• Überprüfen Sie die Verwendung von useRef für DOM-Manipulationen oder die Interaktion mit Bibliotheken von Drittanbietern
• Stellen Sie sicher, dass direkte DOM-Manipulationen auf ein Minimum beschränkt werden und dass das Rendering-Modell von React respektiert wird
• Vergewissern Sie sich, dass useRef nicht für die Zustandsverwaltung missbraucht wird – es sollte nur in Fällen verwendet werden, in denen Änderungen an der Referenz keine erneuten Renderings auslösen müssen.

Verwalten Sie asynchrone Zustände mit angemessener Fehlerbehandlung:

• Stellen Sie sicher, dass asynchrone Operationen (z. B. API-Aufrufe, Datenabrufe) innerhalb von useEffect oder anderen Hooks mit einer angemessenen Fehlerbehandlung verwaltet werden; verwenden Sie try-catch-Blöcke oder .catch() für Versprechen, um nicht abgefangene Fehler zu verhindern
• Überprüfen Sie, ob Zustandsvariablen für Lade-, Erfolgs- oder Fehlerzustände (z. B. isLoading, isError) bei der Verwaltung asynchroner Zustände konsistent verwendet werden, um die Benutzerfreundlichkeit bei asynchronen Operationen zu verbessern
• Vergewissern Sie sich, dass asynchrone Operationen abgebrochen werden, wenn die Komponente ausgehängt wird, um zu verhindern, dass der Status auf nicht eingehängte Komponenten gesetzt wird, was zu Speicherlecks oder Fehlern führen kann

Organisieren Sie den globalen Zustand mit Kontext- oder Zustandsverwaltungsbibliotheken:

• Stellen Sie sicher, dass der globale Status (z. B. Authentifizierung, Benutzerpräferenzen oder Themeneinstellungen) entweder mit der React Context API oder mit State Management Libraries wie Redux, Zustand oder Recoil verwaltet wird
• Überprüfen Sie die Verwendung externer State-Management-Bibliotheken, um sicherzustellen, dass sie notwendig sind (für einfachere Anwendungen können React Context und useReducer ausreichend sein, ohne unnötige Komplexität zu erzeugen)
• Überprüfen Sie, ob die globale Zustandsverwaltungslösung mit klaren Aktionen, Reduzierern oder Selektoren eingerichtet ist, um Boilerplate zu minimieren und sicherzustellen, dass die Zustandslogik wartbar ist

Vermeiden Sie häufige Fallstricke mit React Hooks:

• Stellen Sie sicher, dass Hooks in der richtigen Reihenfolge und nur innerhalb von funktionalen Komponenten oder benutzerdefinierten Hooks aufgerufen werden
• Stellen Sie sicher, dass React Hooks nicht innerhalb von Schleifen, Konditionalen oder verschachtelten Funktionen aufgerufen werden
• Überprüfen Sie benutzerdefinierte Hooks, um sicherzustellen, dass sie Best Practices befolgen und wiederverwendbare Logik effektiv kapseln
• Überprüfen Sie, dass benutzerdefinierte Hooks Werte und Funktionen zurückgeben, die ein konsistentes Verhalten in der gesamten Anwendung fördern
• Überprüfen Sie, ob Hooks nicht übermäßig für die Verwaltung einfacher lokaler Zustände oder Logik verwendet werden, die innerhalb des Komponentenkörpers behandelt werden können
• Überprüfen Sie, ob die Verwendung von Hooks einfach und notwendig ist

Fehlerbehandlung und Grenzfälle

Eine React-Checkliste wäre unvollständig ohne eine gründliche Überprüfung der Fehlerbehandlung und der Verwaltung von Boundary Cases. Diese sind essentiell für den Aufbau von robusten React-Anwendungen, die unerwartete Ausfälle und Grenzfälle elegant behandeln können.

Implementieren Sie Fehlergrenzen für eine geordnete Fehlerbehandlung:

• Stellen Sie sicher, dass Fehlergrenzen an geeigneten Stellen im Komponentenbaum implementiert sind, um JavaScript-Fehler in der Benutzeroberfläche abzufangen und einen Absturz der gesamten Anwendung zu verhindern; verwenden Sie componentDidCatch oder erstellen Sie Fehlergrenzenkomponenten mit React.ErrorBoundary
• Überprüfen Sie die Platzierung von Fehlergrenzen, um sicherzustellen, dass sie kritische Abschnitte der Benutzeroberfläche abdecken (z. B. um große oder komplexe Komponenten herum), aber nicht übermäßig verwendet werden, da dies tiefere Probleme in der Codebasis verdecken kann
• Überprüfen Sie, ob Fehlergrenzen sinnvolle Fallback-UI anzeigen (z. B. Fehlermeldungen, Wiederholungsoptionen), um den Benutzer über das Problem zu informieren, ohne technische Details preiszugeben

Ordentlicher Umgang mit API- und Datenabruffehlern:

• Stellen Sie sicher, dass Fehler aus API-Aufrufen oder Datenabrufvorgängen ordnungsgemäß behandelt werden, indem Sie try-catch-Blöcke oder .catch() für Versprechen verwenden
• Stellen Sie sicher, dass keine ungelösten oder unbehandelten Ablehnungen von Versprechen übrig bleiben, da dies zu Laufzeitfehlern führen kann
• Überprüfen Sie, wie Fehlerzustände (z. B. Netzwerkausfälle, API-Fehler) den Benutzern mitgeteilt werden
• Stellen Sie sicher, dass benutzerfreundliche Fehlermeldungen und keine technischen Fehlerdetails angezeigt werden
• Überprüfen Sie, ob Fehlerzustände mit Hilfe geeigneter Zustandsvariablen (z. B. isError, errorMessage) verwaltet werden, und stellen Sie sicher, dass die Benutzeroberfläche Fallback- oder Wiederholungsoptionen für den Fall eines fehlgeschlagenen Datenabrufs bietet

Antizipieren und Behandeln von Randfällen:

• Stellen Sie sicher, dass die Anwendung häufige Randfälle vorhersieht und behandelt, z. B. leere Datensätze, ungültige oder undefinierte Werte oder Benutzereingaben, die die erwarteten Grenzen überschreiten
• Überprüfen Sie die Komponenten zur Listenwiedergabe, um sicherzustellen, dass sie Szenarien behandeln, in denen das Datenfeld leer ist oder ungültige Elemente enthält; stellen Sie für diese Fälle eine Fallback-UI bereit (z. B. “Keine Elemente verfügbar”)
• Überprüfen Sie, ob die Formularkomponenten Randfälle wie übermäßig lange Eingabewerte, ungültige Formate oder unerwartete Benutzereingaben behandeln; verwenden Sie eine Validierungslogik, um zu verhindern, dass ungültige Daten übermittelt werden

Sicherstellung der Fehlerbehandlung für asynchrone Operationen:

• Stellen Sie sicher, dass asynchrone Operationen, wie z. B. das Abrufen von Daten mit Fetch, Axios oder GraphQL, in Fehlerbehandlungsmechanismen (z. B. try-catch oder .catch() für Versprechen) eingebettet sind, um stille Fehler zu vermeiden
• Überprüfen Sie, wie Lade-, Erfolgs- und Fehlerzustände bei asynchronen Operationen gehandhabt werden. Sicherstellen, dass den Benutzern eine angemessene Rückmeldung gegeben wird (z. B. Ladespinner, Fehlermeldungen, Erfolgsbestätigungen)
• Sicherstellen, dass lang andauernde Operationen oder Netzwerkanfragen mit einer angemessenen Fehlerbehandlung und Wiederholungslogik gehandhabt werden, um die Benutzerfreundlichkeit bei Netzwerkproblemen zu verbessern

Validierung und Bereinigung von Benutzereingaben:

• Stellen Sie sicher, dass Benutzereingaben sowohl clientseitig als auch serverseitig ordnungsgemäß validiert werden, um zu verhindern, dass ungültige oder unerwartete Daten Probleme verursachen. Verwenden Sie Validierungsbibliotheken (z.B. Yup, Formik) oder eine eigene Validierungslogik für komplexe Formulare
• Überprüfen Sie die Logik zur Validierung von Eingaben, um sicherzustellen, dass sie häufige Sonderfälle wie leere Zeichenfolgen, Sonderzeichen und übermäßig lange Eingaben abdeckt; stellen Sie hilfreiche Validierungsmeldungen zur Verfügung, um die Benutzer anzuleiten
• Überprüfen Sie, ob die Benutzereingaben bereinigt wurden, um potenzielle Sicherheitsprobleme zu vermeiden, z. B. das Einfügen schädlicher Skripts oder ungültiger Zeichen in Formulare

Handhabung von Standard- und Fallback-Werten für fehlende Daten:

• Sicherstellen, dass beim Zugriff auf potenziell fehlende oder undefinierte Daten Standardwerte bereitgestellt werden, insbesondere beim Umgang mit API-Antworten oder optionalen Requisiten
• Überprüfen Sie die Verwendung von optionalen Verkettungen (?.) und Standard-Parameterwerten (||), um undefinierte oder ungültige Werte angemessen zu behandeln
• Überprüfen Sie, ob die Komponenten bei fehlenden oder unvollständigen Daten geeignete Ersatzinhalte anzeigen, um leere Bildschirme oder UI-Fehler zu vermeiden

Anzeige aussagekräftiger und benutzerfreundlicher Fehlermeldungen:

• Stellen Sie sicher, dass die Fehlermeldungen für die Benutzer klar, prägnant und hilfreich sind
• Stellen Sie sicher, dass keine unbearbeiteten Fehlermeldungen aus API-Antworten oder vom Server angezeigt werden, die möglicherweise Fachjargon enthalten
• Überprüfen Sie Fehlermeldungen in der gesamten Anwendung auf Konsistenz in Ton und Stil und stellen Sie sicher, dass sie den Benutzer zu Korrekturmaßnahmen anleiten (z. B. “Bitte versuchen Sie es erneut” oder “Wenden Sie sich an den Support”)
• Überprüfen Sie, ob kritische Fehler (z. B. Fehler beim Abrufen von Daten oder bei der Übermittlung von Formularen) Handlungsoptionen enthalten, wie z. B. Schaltflächen zur Wiederholung oder Links zu Support-Seiten

Implementierung von Boundary Cases für Komponentenrequisiten und Status

• Sicherstellen, dass Komponenten unerwartete oder falsche Prop-Werte korrekt behandeln
• Überprüfen Sie, ob PropTypes oder TypeScript verwendet werden, um die erwarteten Typen und Strukturen von Requisiten, die an Komponenten übergeben werden, durchzusetzen
• Überprüfen Sie Komponenten, um sicherzustellen, dass sie Randfälle wie fehlende oder unvollständige Requisiten behandeln
• Verwenden Sie Standard-Props oder stellen Sie eine bedingte Logik bereit, um diese Fälle zu behandeln, ohne die Komponente zu zerstören
• Überprüfen Sie, ob Komponenten korrekt dargestellt werden, wenn sie mit verschiedenen Randfällen im Zustand versehen sind, wie leere Arrays, Nullwerte oder Standardzustände

Verwendung defensiver Programmiertechniken:

• Sicherstellen, dass defensive Programmiertechniken verwendet werden, um Laufzeitfehler zu vermeiden, die durch unerwartete Eingaben, Nullreferenzen oder ungültige Daten verursacht werden (z. B. Prüfung auf Null- oder undefinierte Werte, bevor Operationen mit ihnen durchgeführt werden)
• Überprüfen Sie die bedingte Logik, um sicherzustellen, dass sie alle möglichen Randfälle behandelt und verhindert, dass die Anwendung in einen instabilen Zustand gerät, wenn sie unerwartete Daten oder Eingaben erhält
• Überprüfen Sie, ob die Komponenten auf ihre Robustheit hin getestet wurden und ob sie während der Entwicklungs- und Testphasen verschiedene Randfälle behandeln, um unerwartete Abstürze oder unbehandelte Ausnahmen in der Produktion zu vermeiden

Stille Ausfälle vermeiden und Fehler effektiv protokollieren:

• Sicherstellen, dass Fehler sowohl in der Entwicklungs- als auch in der Produktionsumgebung effektiv protokolliert werden
• Sicherstellen, dass Protokollierungstools (z. B. Sentry, LogRocket) verwendet werden, um detaillierte Fehlerinformationen zu erfassen, ohne sie dem Endbenutzer zugänglich zu machen
• Überprüfung des Codes auf potenzielle stille Fehler, d. h. Fehler, die auftreten, aber nicht protokolliert oder dem Benutzer mitgeteilt werden
• Sicherstellen, dass Fehler abgefangen und angemessen behandelt werden, mit Fallback-Logik oder Fehlermeldungen
• Überprüfen Sie, ob die Fehlerprotokolle strukturiert sind und relevante Informationen enthalten (z. B. Komponentenname, Stack-Trace, Benutzeraktion), um die Fehlersuche in Zukunft zu erleichtern

Verwenden Sie korrekte Fehlergrenzen für Komponenten von Drittanbietern:

• Stellen Sie sicher, dass Fehlergrenzen für Komponenten oder Bibliotheken von Drittanbietern gelten, die unerwartete Fehler auslösen können, insbesondere bei der Integration mit komplexem oder unbekanntem Code
• Überprüfen Sie, wie Bibliotheken von Drittanbietern mit Fehlern umgehen, und stellen Sie sicher, dass alle Fehler innerhalb der Anwendung erfasst werden
• Stellen Sie bei der internen Fehlerbehandlung sicher, dass externe Bibliotheken nicht die einzige Quelle sind

Optimierung der Leistung

React ist unglaublich beliebt: 39,5 % der Softwareentwickler weltweit wählen es als ihr bevorzugtes Web-Framework (an zweiter Stelle nach Node.js). Mit zunehmender Komplexität Ihrer Anwendung kann es jedoch zu Leistungseinbußen kommen, die die Benutzerzufriedenheit erheblich beeinträchtigen können. Deshalb ist die React-Performance entscheidend für ein reibungsloses Nutzererlebnis.

Bei der Optimierung der React-Performance konzentrieren wir uns auf Schlüsselbereiche wie die Reduzierung unnötiger Komponenten-Renderings, die Minimierung der Größe von JavaScript-Bündeln und die drastische Verbesserung der Ladezeiten. Wenn wir eine Code-Überprüfung durchführen, teilen wir umsetzbare Techniken zur React-Performance-Optimierung mit Ihnen und zeigen genau die Engpässe und Ineffizienzen auf, die die Reaktionsfähigkeit und Skalierbarkeit Ihrer Anwendung beeinträchtigen könnten.

Verwenden Sie React.memo für die Memoisierung von Komponenten:

• Stellen Sie sicher, dass Komponenten, die nicht häufig neu gerendert werden müssen, in React.memo verpackt werden, um unnötige Neurender zu vermeiden
• Überprüfen Sie, ob Komponenten, die wiederholt die gleichen Props erhalten, mit React.memo versehen werden können, um die Anzahl der Renderings zu reduzieren und die Leistung in großen Komponentenbäumen zu verbessern
• Überprüfen Sie, ob React.memo selektiv für Komponenten verwendet wird, bei denen ein erneutes Rendern kostspielig ist
• Stellen Sie sicher, dass React.memo nicht übermäßig auf einfache oder leichtgewichtige Komponenten angewendet wird, bei denen die Optimierung möglicherweise nicht notwendig ist

Verwenden Sie useMemo und useCallback für teure Berechnungen und Funktionen:

• Stellen Sie sicher, dass useMemo verwendet wird, um teure Berechnungen oder abgeleitete Daten zu memoisieren, um unnötige Neuberechnungen bei jedem Rendering zu vermeiden
• Überprüfen Sie die Verwendung von useCallback, um Callback-Funktionen, die an untergeordnete Komponenten übergeben werden, zu memoisieren, um eine unnötige Neuerstellung von Funktionen zu vermeiden, die dazu führen können, dass untergeordnete Komponenten unnötig neu gerendert werden
• Überprüfen Sie, ob die Abhängigkeits-Arrays für useMemo und useCallback korrekt sind und alle Variablen abdecken, die eine Neuberechnung auslösen können

Unnötige Re-Renders vermeiden:

• Stellen Sie sicher, dass Komponenten-Neugestaltungen minimiert werden, indem Sie überprüfen, ob sich Requisiten oder Statuswerte geändert haben, bevor Sie die Komponente aktualisieren
• Verwenden Sie eine geeignete Vergleichslogik in der shouldComponentUpdate-Lebenszyklusmethode (für Klassenkomponenten) oder durch Verwendung von Hooks wie React.memo und useCallback in funktionalen Komponenten
• Überprüfen Sie Komponenten auf unnötige Zustands- oder Requisitenaktualisierungen, die ein erneutes Rendern auslösen können
• Vergewissern Sie sich, dass nur relevante Daten als Requisiten übergeben werden und dass der Zustand nicht mit denselben Werten aktualisiert wird
• Überprüfen Sie, ob unnötige Requisiten (z. B. unbenutzte oder Standard-Requisiten) nicht an untergeordnete Komponenten weitergegeben werden, um die Wahrscheinlichkeit unbeabsichtigter Re-Renderings zu verringern

Implementieren Sie Lazy Loading für Code-Aufteilung:

• Stellen Sie sicher, dass Code-Splitting mit React.lazy und Suspense implementiert wird, um Komponenten bei Bedarf zu laden, die Größe des anfänglichen Pakets zu reduzieren und die Ladezeiten für Benutzer zu verbessern
• Überprüfen Sie Routen und große Komponenten, um sicherzustellen, dass sie lazy-geladen werden, insbesondere bei Komponenten, die nicht sofort beim Laden der Seite benötigt werden (z. B. Komponenten für Routen oder Modals)
• Überprüfen Sie, ob Suspense-Fallback-Komponenten verwendet werden, um Ladezustände anzuzeigen, während lazy-loaded-Komponenten abgerufen werden; stellen Sie sicher, dass die Fallback-UI klar und benutzerfreundlich ist

Optimieren Sie Listen mit React.Fragment und Key Props:

• Stellen Sie sicher, dass Listen, die mit .map() gerendert werden, eine eindeutige Schlüsselreferenz für jedes Element enthalten, um React dabei zu helfen, den Abgleichsprozess zu optimieren und unnötige Neuaufbereitungen zu vermeiden
• Überprüfen Sie, dass React.Fragment verwendet wird, wo es notwendig ist, um Geschwisterelemente zu gruppieren, ohne dem DOM zusätzliche Knoten hinzuzufügen, insbesondere in Listen oder bedingten Renderings
• Überprüfen Sie, ob das Rendering von Listen effizient ist und unnötige Berechnungen oder erneute Renderings vermieden werden, wenn sich die Daten der Liste nicht geändert haben

Implementierung von unendlichem Scrollen oder Paginierung für große Datensätze:

• Stellen Sie sicher, dass große Datensätze effizient gehandhabt werden, indem Sie Paginierung oder unendliches Scrollen implementieren, anstatt alle Daten auf einmal zu laden
• Überprüfen Sie, ob die Paginierung oder das unendliche Scrollen für Listen oder Tabellen verwendet wird, die große Datenmengen anzeigen, und stellen Sie sicher, dass nur eine begrenzte Anzahl von Elementen auf einmal gerendert wird
• Überprüfen Sie, ob Techniken für träges Laden oder virtuelles Scrollen angewendet werden, um die Anzahl der gleichzeitig gerenderten DOM-Elemente zu minimieren

Verwenden Sie CSS-in-JS oder Code-Splitting für Stile:

• Stellen Sie sicher, dass Stile mit CSS-in-JS-Lösungen wie Styled Components oder Emotion oder durch Code-Splitting von CSS-Dateien optimiert werden, um die Größe der im Voraus geladenen Stile zu reduzieren
• Überprüfen Sie, ob kritische CSS-Dateien zuerst geladen werden, während unwichtige Stile erst bei Bedarf nachgeladen werden
• Überprüfen Sie, ob dynamisches Styling effizient gehandhabt wird, indem Sie Inline-Stile oder die Neuberechnung von Stilen bei jedem Rendering vermeiden, sofern dies nicht erforderlich ist

Minimieren Sie die Größe des JavaScript-Bündels:

• Stellen Sie sicher, dass unnötige oder ungenutzte Bibliotheken aus dem Projekt entfernt werden, um die Größe des JavaScript-Bündels zu minimieren
• Verwenden Sie Tools wie Webpack oder Parcel, um ungenutzten Code zu analysieren und in den Baum zu integrieren
• Überprüfen Sie das Projekt auf große Abhängigkeiten, die durch schlankere Alternativen oder benutzerdefinierte Implementierungen ersetzt werden können, um die Gesamtgröße des Pakets zu reduzieren
• Überprüfen Sie, ob Assets (z. B. Bilder, Schriftarten) optimiert sind und ob große Bibliotheken in kleinere Teile aufgeteilt sind, indem Sie dynamische Importe für Code-Splitting verwenden

Verwenden Sie useRef, um erneute Renderings für veränderliche Daten zu vermeiden:

• Stellen Sie sicher, dass useRef für veränderliche Daten verwendet wird, die keine erneuten Rendervorgänge auslösen müssen, wie z. B. DOM-Referenzen, Zeitgeber oder externe API-Interaktionen
• Überprüfen Sie die Verwendung von useRef zum Speichern von Werten, die über Rendervorgänge hinweg bestehen bleiben, ohne dass die Komponente neu gerendert werden muss, wie z. B. Formularelemente oder Animationswerte
• Stellen Sie sicher, dass useRef nicht für die Verwaltung von Zuständen verwendet wird, die UI-Aktualisierungen auslösen sollen, da dies zu Inkonsistenzen zwischen der UI und dem Anwendungszustand führen kann

Optimieren Sie die Leistung in Formularen und bei der Eingabeverarbeitung:

• Stellen Sie sicher, dass Formulareingaben durch die Verwendung von onChange-Handlern optimiert werden, die den Status nur bei Bedarf aktualisieren
• Sicherstellen, dass nicht bei jedem Tastendruck oder jeder Interaktion das gesamte Formular neu gerendert wird
• Überprüfen Sie Formularkomponenten, um sicherzustellen, dass kontrollierte Komponenten nicht unnötigerweise neu gerendert werden oder Aktualisierungen auslösen; verwenden Sie Techniken wie Debouncing oder useCallback, um die Eingabeverarbeitung zu optimieren
• Überprüfen Sie, ob Formularvalidierungen optimiert sind, indem Sie Bibliotheken wie Formik oder React Hook Form verwenden, die den Formularstatus effizient handhaben und Neuaufbereitungen vermeiden

Implementieren Sie Suspense für Datenabrufe:

• Stellen Sie sicher, dass Suspense für das Abrufen von Daten in Kombination mit dem Concurrent Mode von React verwendet wird, um eine bessere Rendering-Leistung zu ermöglichen, indem das Rendering von Komponenten aufgeschoben oder ausgesetzt wird, bis die Daten verfügbar sind
• Überprüfen Sie die Verwendung von Datenabruf-Bibliotheken (z.B. SWR, React Query), die für React optimiert sind und Caching, Revalidierung und Hintergrundabrufe unterstützen, um den Bedarf an redundanten Datenanfragen zu minimieren
• Überprüfen Sie, ob Ladezustände effektiv mit Suspense oder benutzerdefinierter Logik gehandhabt werden, um sicherzustellen, dass die Benutzeroberfläche reaktionsfähig bleibt, während sie auf Daten wartet

Optimieren Sie Bilder und Medien:

• Sicherstellen, dass Bilder und Mediendateien für die Leistung optimiert sind, indem Techniken wie Lazy Loading (loading=”lazy” für Bilder), responsive Bildgrößen und WebP-Formate verwendet werden, um die Dateigröße und Ladezeit zu verringern
• Überprüfen Sie, ob große Mediendateien (z. B. Videos) zeitversetzt oder bei Bedarf geladen werden, um den anfänglichen Ladeaufwand für Nutzer mit langsamen Verbindungen zu verringern
• Überprüfen Sie, ob Tools wie Bildkomprimierung oder Content Delivery Networks (CDNs) verwendet werden, um optimierte Inhalte bereitzustellen, die Ladezeiten zu verbessern und die Bandbreitennutzung zu reduzieren

Leistungsprofil und Benchmarking

• Stellen Sie sicher, dass Tools zur Erstellung von Leistungsprofilen (z. B. React Profiler, Chrome DevTools) verwendet werden, um Engpässe zu identifizieren, die Renderzeiten von Komponenten zu messen und langsame Bereiche der Anwendung zu optimieren
• Überprüfen Sie Performance-Benchmarks, um herauszufinden, welche Komponenten oder Teile der Anwendung Verlangsamungen verursachen, insbesondere bei Benutzerinteraktionen oder komplexen Renderzyklen
• Überprüfen Sie, ob Optimierungsverfahren (z. B. Memoisierung, Lazy Loading) auf der Grundlage tatsächlicher Leistungsdaten und nicht auf der Grundlage einer verfrühten Optimierung angewendet werden, um sinnvolle Leistungssteigerungen zu gewährleisten

Bewährte Sicherheitspraktiken

React-Sicherheit ist nicht verhandelbar. Ihre React-Anwendungen verarbeiten sensible Benutzerdaten, interagieren mit verschiedenen APIs und arbeiten schließlich in der potenziell unsicheren Umgebung des Browsers eines Benutzers. Aus diesem Grund ist die korrekte Implementierung der besten React-Sicherheitspraktiken absolut entscheidend. Auf diese Weise schützen Sie sowohl Ihre Anwendung als auch deren Benutzer vor einer Reihe von Schwachstellen wie Cross-Site-Scripting (XSS), heimtückischen Datenlecks und zahlreichen anderen gängigen Cyberattacken.

Wenn wir einen Code-Review durchführen, stellen wir durch unser tiefes Eintauchen in die React JS-Sicherheit sicher, dass Ihre Anwendung nicht nur widerstandsfähig gegen Bedrohungen ist, sondern auch alle sensiblen Daten mit äußerster Sorgfalt und Sicherheit behandelt.

Bereinigung von Benutzereingaben zur Verhinderung von XSS-Angriffen:

• Stellen Sie sicher, dass alle Benutzereingaben bereinigt werden, bevor sie in der Benutzeroberfläche angezeigt werden
• Prüfen Sie, ob Bibliotheken wie DOMPurify verwendet werden, um potenziell schädliche Inhalte zu entfernen, insbesondere beim Rendern von HTML oder benutzergenerierten Inhalten
• Überprüfen Sie Komponenten, um sicherzustellen, dass gefährliche Methoden wie “dangerouslySetInnerHTML” vermieden werden, sofern dies nicht unbedingt erforderlich ist (falls verwendet, stellen Sie sicher, dass der Inhalt ordnungsgemäß bereinigt wird, um XSS-Angriffe zu verhindern)
• Überprüfen Sie, ob Bibliotheken von Drittanbietern, die Benutzerdaten verarbeiten (z. B. Rich-Text-Editoren, Formularbibliotheken), den Inhalt vor dem Rendern ordnungsgemäß bereinigen

Sichere Authentifizierung und Autorisierung implementieren:

• Stellen Sie sicher, dass die Authentifizierungsmechanismen sicher sind, indem Sie Standards wie OAuth2 oder JSON Web Tokens (JWT) für die Benutzerauthentifizierung verwenden
• Prüfen Sie, ob die Token sicher gespeichert werden, indem Sie HTTP-only-Cookies verwenden, um einen clientseitigen Zugriff zu verhindern
• Überprüfung der Zugriffskontrollmechanismen, um sicherzustellen, dass Komponenten und Routen auf der Grundlage des Authentifizierungs- und Autorisierungsstatus des Benutzers geschützt sind
• Prüfen Sie, ob PrivateRoute oder gleichwertige Techniken zum Schutz geschützter Routen verwendet werden
• Überprüfen Sie, ob sensible Informationen wie JWT-Tokens, API-Schlüssel oder Benutzeranmeldeinformationen niemals im lokalen Speicher, im Sitzungsspeicher oder direkt im JavaScript-Code gespeichert werden

Schutz vor Cross-Site Request Forgery (CSRF):

• Stellen Sie sicher, dass ein CSRF-Schutz implementiert ist, insbesondere für zustandsändernde Vorgänge (z. B. Formularübertragungen, API-Anfragen)
• Prüfen Sie, ob Anti-CSRF-Tokens verwendet werden, die auf der Serverseite validiert werden
• Überprüfen Sie alle Komponenten zur Formularverarbeitung oder API-Interaktion, um sicherzustellen, dass sie sichere Header und Token (z. B. X-CSRF-Token) zum Schutz vor CSRF-Angriffen verwenden
• Stellen Sie sicher, dass Anfragen, die sensible Daten ändern, gültige CSRF-Tokens erfordern, um sicherzustellen, dass nicht autorisierte Anfragen nicht verarbeitet werden können

Verwenden Sie HTTPS und sichere Cookies:

• Stellen Sie sicher, dass die gesamte Kommunikation zwischen Client und Server mit HTTPS verschlüsselt ist. Vermeiden Sie die Übertragung sensibler Daten (z. B. Authentifizierungs-Token, API-Schlüssel) über ungesicherte HTTP-Verbindungen
• Überprüfen Sie die Cookie-Einstellungen, um sicherzustellen, dass für die Speicherung von Authentifizierungs-Token und Sitzungsinformationen sichere, reine HTTP-Cookies verwendet werden, die den Zugriff über JavaScript verhindern
• Überprüfen Sie, ob das SameSite-Attribut für Cookies gesetzt ist, um einen herkunftsübergreifenden Cookie-Zugriff zu verhindern und das Risiko von CSRF-Angriffen zu verringern

Verhindern Sie die Preisgabe sensibler Daten:

• Stellen Sie sicher, dass sensible Daten (z. B. Kennwörter, Kreditkartennummern) niemals protokolliert oder in den Entwickler-Tools des Browsers offengelegt werden
• Überprüfen Sie, dass keine sensiblen Daten in der Konsole protokolliert oder in Fehlermeldungen gesendet werden
• Überprüfung von API-Anfragen und -Antworten, um sicherzustellen, dass keine sensiblen Daten in den Antworten zurückgegeben werden
• Überprüfen Sie, dass Daten wie Benutzerkennwörter, Token oder personenbezogene Daten (PII) niemals an den Client gesendet werden
• Sicherstellen, dass der clientseitige Speicher (z. B. lokaler Speicher, Sitzungsspeicher) keine sensiblen Daten wie JWT-Tokens oder Benutzeranmeldeinformationen enthält

Implementierung einer Inhaltssicherheitsrichtlinie (CSP):

• Stellen Sie sicher, dass eine Content Security Policy (CSP) implementiert ist, um die Ausführung von nicht autorisierten Skripten oder Ressourcen zu verhindern (hilft, XSS- und Dateninjektionsangriffe abzuschwächen, indem eingeschränkt wird, welche Inhalte auf eine Seite geladen werden können)
• Überprüfen Sie die CSP-Konfiguration, um sicherzustellen, dass nur vertrauenswürdige Quellen (z. B. eigene, zugelassene CDNs) zum Laden von Skripten, Stilen und anderen Assets zugelassen sind
• Stellen Sie sicher, dass keine unsafe-inline- oder unsafe-eval-Direktiven verwendet werden
• Überprüfen Sie, dass alle notwendigen Inline-Skripte oder Stile minimiert und vom CSP ordnungsgemäß behandelt werden, um sicherzustellen, dass sie keine Sicherheitslücken verursachen

Verhindern Sie Clickjacking-Angriffe:

• Stellen Sie sicher, dass der X-Frame-Options-Header auf DENY oder SAMEORIGIN gesetzt ist, um zu verhindern, dass die Anwendung in iframes auf anderen Websites eingebettet wird
• Überprüfen Sie jede legitime Verwendung von iframes (z. B. die Einbettung von Inhalten Dritter), um sicherzustellen, dass Sicherheitsrisiken gemindert werden und iframes sicher verwendet werden
• Überprüfen Sie, ob eingebettete Inhalte, insbesondere aus Drittquellen, vertrauenswürdig und ordnungsgemäß gesichert sind

Validierung von Daten aus APIs und externen Quellen:

• Stellen Sie sicher, dass Daten, die von APIs oder externen Quellen abgerufen werden, ordnungsgemäß validiert werden, bevor sie verarbeitet oder in der Benutzeroberfläche dargestellt werden
• Überprüfen Sie API-Aufrufe und stellen Sie sicher, dass die clientseitige Validierung durch eine serverseitige Validierung ergänzt wird, um sicherzustellen, dass die vom Benutzer bereitgestellten Daten auf dem Server bereinigt und validiert werden
• Überprüfung eingehender Daten auf Integrität und Struktur (z. B. Validierung von JSON-Schemata), um zu verhindern, dass missgebildete oder bösartige Daten in der Anwendung verwendet werden

Verwendung von Ratenbegrenzung und Drosselung für API-Anforderungen:

• Stellen Sie sicher, dass Mechanismen zur Ratenbegrenzung und Drosselung vorhanden sind, um den Missbrauch von APIs zu verhindern, z. B. Brute-Force-Angriffe oder Denial-of-Service-Angriffe (DoS)
• Prüfen Sie, ob diese Schutzmaßnahmen auf der Serverseite implementiert sind, um die Anzahl der Anfragen zu begrenzen, die ein Client innerhalb einer bestimmten Zeit stellen kann
• Überprüfen Sie die Interaktion der Anwendung mit APIs, um sicherzustellen, dass die Anforderungsdrosselung oder die Ratenbeschränkungen beachtet werden
• Überprüfen Sie, ob es keine häufigen, unnötigen API-Aufrufe gibt, die zu einer Überbeanspruchung der Ressourcen führen könnten
• Überprüfen Sie, ob alle externen APIs, die genutzt werden, über angemessene Schutzmechanismen zur Ratenbegrenzung verfügen und ob eine Fehlerbehandlung für ratenbegrenzte Antworten implementiert ist.

Verwenden Sie eine angemessene Fehlerbehandlung, ohne interne Informationen preiszugeben:

• Stellen Sie sicher, dass die Fehlermeldungen, die den Benutzern angezeigt werden, allgemein gehalten sind und keine internen Informationen wie Stack Traces, Serverpfade oder Datenbankdetails preisgeben
• Überprüfen Sie die Fehlerbehandlung in der gesamten Anwendung, um sicherzustellen, dass interne Fehler serverseitig protokolliert werden, aber nicht für den Client sichtbar sind
• Überprüfen Sie, dass sensible Informationen aus Fehlerantworten entfernt werden, bevor sie an den Client gesendet werden, um sicherzustellen, dass potenzielle Angreifer keine Details über das System sammeln können

Überwachung und Protokollierung sicherheitsrelevanter Ereignisse

• Stellen Sie sicher, dass wichtige sicherheitsrelevante Ereignisse, wie z. B. fehlgeschlagene Anmeldeversuche, unbefugte Zugriffsversuche und Datenverletzungen, für zukünftige Analysen und Reaktionen protokolliert werden
• Prüfen Sie, ob ein Protokollierungstool wie Sentry oder LogRocket verwendet wird, um sicherheitsrelevante Vorfälle zu erfassen und zu melden
• Überprüfen Sie die Protokollierungskonfigurationen, um sicherzustellen, dass die Sicherheitsprotokolle sicher gespeichert werden und nur von autorisiertem Personal eingesehen werden können
• Überprüfen Sie, dass keine sensiblen Daten im Klartext protokolliert werden
• Überprüfen Sie, ob Protokollierungs- und Überwachungssysteme vorhanden sind, um potenzielle Sicherheitsbedrohungen in Echtzeit zu erkennen und darauf zu reagieren

Verbessern Sie die Qualität Ihrer React-App mit Redwerk

Wir von Redwerk haben bereits über 250 Projekte für Unternehmen in Nordamerika, Europa, Afrika, Australien und Neuseeland erfolgreich durchgeführt. Wir unterstützen unsere Kunden in jeder Phase des Softwareentwicklungszyklus und helfen ihnen dabei, technische Schulden zu beseitigen, gesunde Programmierpraktiken einzuführen und bewährte Workflows zu implementieren, die die Häufigkeit und Zuverlässigkeit von Software-Releases erhöhen. Hier sind nur einige React JS-Projekte, die von unserer Expertise profitiert haben.

Beschleunigte Bereitstellung von Funktionen für Orderstep

Kunde: Orderstep, ein dänischer Anbieter von SaaS für die Angebotsverwaltung.

Beschränkungen: Ein kleines internes Team, das mit überfälligen Funktionsanfragen von Premium-Nutzern zu kämpfen hatte.

Die Lösung: Redwerk half dabei, die lange versprochenen Benutzerfunktionen rechtzeitig zu liefern. Da das Backend des Webshops bereits fertiggestellt war, hätte die Kompatibilität eines herkömmlichen Frameworks mit dem Frontend umfangreiche Anpassungen erfordert. Um die Vorteile einer Single Page Application (SPA) mit dem bestehenden Setup zu vereinen, haben wir React für die interaktiven Teile des Onlineshops strategisch integriert, während die statischen Seiten ohne Framework auskommen.

Das Ergebnis: Die rechtzeitige Entwicklung der Webshop-Funktion für Premium-Benutzer führte zu einer deutlichen Steigerung der Abonnementeinnahmen.

Schnelles Modul-Upgrade für Cakemail

Kunde: Cakemail, ein kanadisches Scale-up-Unternehmen, das sich auf E-Mail-Marketing-Tools spezialisiert hat.

Zwänge: Eine knappe Frist und die dringende Notwendigkeit, ein wichtiges App-Modul zu aktualisieren.

Die Lösung: Wir haben das Frontend des Formularbereichs vollständig für die nahtlose Integration in die neue Version der Cakemail-App vorbereitet. Mit unserer Hilfe konnte Cakemail den Übergang von Cakemail v4 zu Cakemail v5 vollziehen, ohne die Funktionalität der App zu beeinträchtigen.

Ergebnis: Das Modul für das Abonnementformular wurde in weniger als 90 Tagen erfolgreich umgestaltet, so dass Cakemail seine aktualisierte App-Version wie geplant bereitstellen konnte.

Neuarchitektur der Plattform und Einführung für Evolv

Kunde: Evolv, eine KI-gestützte Plattform zur Optimierung von Erfahrungen mit Sitz in den USA.

Sachzwänge: Der Druck, neue Funktionen für das Wachstum der Nutzerbasis bereitzustellen, kombiniert mit einer umfangreichen Neuarchitektur, die nach einer Abspaltung von Sentient Technologies erforderlich war, überforderte das interne Team.

Die Lösung: Redwerk wurde beauftragt, das Kernprodukt von Evolv zu entwickeln: eine bahnbrechende Optimierungsplattform, die aus einem Webeditor und einem Manager besteht. Der Web-Editor ist die Desktop-Anwendung von Evolv, die es ermöglicht, UX-Verbesserungen ohne direkten Zugriff auf den Quellcode des Kunden zu kodieren und die implementierten Änderungen in der Vorschau anzuzeigen, zu bearbeiten und zu testen. Der Manager ist die Webplattform von Evolv, die erweiterte Testeinstellungen zum Starten von Experimenten bietet. Wir haben die Plattform auch weiterhin gewartet.

Ergebnis: Wir haben das bisherige Angebot Sentient Ascend in die führende KI-gesteuerte Lösung für digitales Wachstum verwandelt. Gemeinsam mit dem Redwerk-Team hat Evolv sein neues Produkt – Evolv 1.0 – erfolgreich auf den Markt gebracht, das nun von zahlreichen Evolv-Kunden genutzt wird.

Ganz gleich, ob Sie React JS-Entwickler suchen, um Ihr internes Team zu verstärken, oder ob Sie fachkundige Unterstützung für eine unparteiische React-Code-Überprüfung benötigen – wir helfen Ihnen gerne weiter. Setzen Sie sich noch heute mit uns in Verbindung, um uns Ihre Anforderungen mitzuteilen und ein klares Verständnis dafür zu bekommen, wie diese erfüllt werden können, einschließlich eines kostenlosen Projektvoranschlags.