suchen

Heim >Web-Frontend >js-Tutorial >JSX (JavaScript XML): Vereinfachung der UI-Entwicklung in React

JSX (JavaScript XML): Vereinfachung der UI-Entwicklung in React

Barbara Streisand
Barbara StreisandOriginal
2025-01-03 17:23:45775Durchsuche

JSX (JavaScript XML): Simplifying UI Development in React

JSX (JavaScript XML): Eine Schlüsselfunktion von React

JSX (JavaScript XML) ist eine Syntaxerweiterung für JavaScript, die es Entwicklern ermöglicht, HTML-ähnlichen Code direkt in JavaScript-Dateien zu schreiben. Es ist eine der Kernfunktionen von React und verbessert das Entwicklungserlebnis, indem es eine klare und präzise Beschreibung der Struktur von Benutzeroberflächen (UI) ermöglicht.

Hier finden Sie alles, was Sie über JSX wissen müssen:

1. Was ist JSX?

Mit JSX können Sie XML-ähnliche Tags schreiben, die HTML-Elemente oder React-Komponenten in JavaScript darstellen. Während JSX wie HTML aussieht, ist es das nicht – unter der Haube wird JSX mit Tools wie Babel in Standard-JavaScript kompiliert.

  • Beispiel für JSX: 
  const Greeting = () => {
    return <h1>Hello, World!</h1>;
  };
  • Kompiliertes JavaScript: 
  const Greeting = () => {
    return React.createElement('h1', null, 'Hello, World!');
  };

2. Hauptmerkmale von JSX

a. Ausdrücke einbetten

Sie können JavaScript-Ausdrücke in JSX einbetten, indem Sie sie in geschweifte Klammern {} einschließen.

  • Beispiel: 
  const name = "Alice";
  const Greeting = () => <h1>Hello, {name}!</h1>;

b. Attribute

JSX unterstützt Attribute ähnlich wie HTML, jedoch mit CamelCase-Benennung für Eigenschaften.

  • Beispiel: 
  const Button = () => <button className="btn" onClick={() => alert('Clicked!')}>Click Me</button>;

c. Verschachtelte Elemente

Sie können Elemente ineinander verschachteln, um eine vollständige UI-Struktur zu erstellen.

  • Beispiel: 
  const App = () => (
    <div>
      <h1>Welcome</h1>
      <p>This is a nested JSX structure.</p>
    </div>
  );

d. Bedingtes Rendern

Verwenden Sie JavaScript-Logik, um Elemente bedingt darzustellen.

  • Beispiel: 
  const isLoggedIn = true;
  const App = () => (
    <div>
      {isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Log In</h1>}
    </div>
  );

3. Warum JSX verwenden?

a. Deklarative Syntax

JSX bietet eine deklarative Möglichkeit, die Benutzeroberfläche zu definieren, wodurch der Code lesbarer wird und dem tatsächlichen UI-Design näher kommt.

b. Integration mit JavaScript

Da JSX nur syntaktischer Zucker für JavaScript-Funktionen ist, ermöglicht es die nahtlose Integration von Logik, Status und Requisiten in Ihre UI-Definitionen.

c. Verbesserte Entwicklererfahrung

JSX erleichtert das Schreiben, Verstehen und Debuggen des UI-Codes im Vergleich zu herkömmlichen React.createElement()-Aufrufen.

4. JSX-Regeln und Best Practices

a. Muss ein einzelnes übergeordnetes Element zurückgeben

JSX muss ein einzelnes Root-Element zurückgeben. Verwenden Sie ein

oder ein React-Fragment (<>...), um mehrere Elemente zu gruppieren.

  • Beispiel: 
  const Greeting = () => {
    return <h1>Hello, World!</h1>;
  };

b. Selbstschließende Tags

Für Elemente ohne untergeordnete Elemente verwenden Sie selbstschließende Tags.

  • Beispiel: 
  const Greeting = () => {
    return React.createElement('h1', null, 'Hello, World!');
  };

c. Vermeiden Sie Inline-Styling (wenn möglich)

Obwohl JSX Inline-Styling über das Style-Attribut unterstützt, verwenden Sie für eine bessere Wartbarkeit CSS-in-JS-Bibliotheken oder externe Stylesheets.

  • Inline-Styling-Beispiel: 
  const name = "Alice";
  const Greeting = () => <h1>Hello, {name}!</h1>;

b. Werte richtig entkommen

JSX entgeht automatisch gefährlichen Eingaben, um XSS-Angriffe zu verhindern. Zum Beispiel:

  • {userInput}
    wird entkommen