Mehrere Möglichkeiten zum Schreiben von Kommentaren in React

Hilfreiche Kommentare zu schreiben ist einer der Schlüssel zu einem effizienteren Codierungsprozess. Sie machen es viel einfacher, bestehende Webanwendungen zu warten, zu debuggen und darauf aufzubauen. Sobald Programmierer mit einem Projekt fertig sind, gehen sie zu anderen Aufgaben über und vergessen die Details des Codes, den sie gerade geschrieben haben. Programmierer können Kommentare verwenden, um ihre Denkweise zu beschreiben und die komplexesten Teile des Codes zu erklären. Kommentare ermöglichen es Ihnen, später zurückzukehren und den Code leicht herauszufinden. Sie können Ihnen viel Zeit sparen, wenn Sie eine Funktion hinzufügen, debuggen oder auf vorhandenem Code aufbauen müssen.

React-Komponenten sollten im Idealfall sehr einfach und leicht verständlich sein, aber das ist nicht immer der Fall. Manchmal sind der Zweck und die Funktionalität der Komponente unklar. Das Schreiben von Kommentaren ermöglicht es Ihnen, Teile von schwierigem Code zu erklären.

Kommentare in React - JSX-Syntax

JSX ist eine HTML-ähnliche Syntax, die das Schreiben von React-Anwendungen erleichtert. Es ermöglicht Entwicklern, eine App intuitiv zu strukturieren, anstatt Dutzende Male die Methoden React.createElement() aufzurufen. Compiler kümmern sich um die Übersetzung von JSX-Code in Vanilla-JavaScript.

React-Komponenten bestehen aus regulärem JavaScript und JSX. Sie können für beide Kommentare Kommentare schreiben, aber Sie müssen ein wenig zusätzliche Arbeit leisten, um Kommentare in JSX zu schreiben. Die Entwickler von React haben sich entschieden, keine regulären JavaScript-Kommentare in JSX zuzulassen. Sie haben auch nicht vor, in Zukunft eine separate Kommentarfunktion für JSX hinzuzufügen.

In regulärem JavaScript können Sie die normale Syntax zum Schreiben von Kommentaren verwenden. So schreiben Sie Kommentare außerhalb von JSX:

class App extends Component {
  render() {
    // single line comment
    /*
    multi
    line
    comment 
    */
    return <h1>Hi! Try edit me</h1>;
  }
}

Obwohl es HTML sehr ähnlich ist, unterscheidet sich die Syntax zum Schreiben von Kommentaren in JSX von HTML. Sie können den Anfang und das Ende des Kommentars nicht mit den Tags <!-- und --> markieren.

Stattdessen müssen Sie geschweifte Klammern verwenden, mit denen Sie Vanilla-JavaScript-Ausdrücke in JSX schreiben können. Ohne die geschweiften Klammern werden die Kommentare in JSX als normaler Text geparst. Sie können mehrzeilige JavaScript-Kommentare in JSX eingeben, solange sie zwischen geschweiften Klammern stehen.

Hier ist ein Beispiel:

class App extends Component {
  render() {
    return  (
    <div>
    <h1>Sample heading</h1>
    {/* The heading text is large */}
    </div>
    )
  }
}

Sie können auch Kommentare in mehreren Zeilen schreiben, solange Sie das End-Tag verschieben und beide Tags noch zwischen geschweiften Klammern stehen.

Das Schreiben von einzeiligen Kommentaren in JSX ist etwas komplizierter. Sie können nichts wie {//comment} schreiben, weil das //-Tag automatisch die gesamte Zeile auskommentiert, einschließlich der schließenden geschweiften Klammer. Wenn Sie einzeilige Kommentare hinzufügen möchten, stellen Sie sicher, dass sich die schließenden geschweiften Klammern in der nächsten Zeile befinden. Schauen wir uns das Beispiel an:

class App extends Component {
  render() {
    return  (
    <div>
    <h1>Sample heading</h1>
    {// comment
    }
    </div>
    )
  }
}

Diese Syntax kann etwas verwirrend sein. Die meisten React-Entwickler halten sich an die mehrzeilige Syntax, um den Anfang und das Ende des Kommentars klar abzugrenzen.

Wenn Sie mehr darüber erfahren möchten, können Sie das Kommentieren in JSX auf playcode erkunden.