Reagieren Sie JSX

Was ist JSX?

JSX steht für JavaScript-XML.

JSX ermöglicht es uns, HTML in React zu schreiben.

JSX erleichtert das Schreiben und Hinzufügen von HTML in React.

JSX codieren

JSX ermöglicht es uns, HTML-Elemente in JavaScript zu schreiben und sie ohne createElement()  und/oder appendChild()Methoden im DOM zu platzieren.

JSX konvertiert HTML-Tags in Reaktionselemente.

Hier sind zwei Beispiele. Der erste verwendet JSX und der zweite nicht:

const myelement = <h1>I Love JSX!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));

const myelement = React.createElement('h1', {}, 'I do not use JSX!');

ReactDOM.render(myelement, document.getElementById('root'));

Wie Sie im ersten Beispiel sehen können, ermöglicht uns JSX, HTML direkt im JavaScript-Code zu schreiben.

JSX ist eine auf ES6 basierende Erweiterung der JavaScript-Sprache und wird zur Laufzeit in reguläres JavaScript übersetzt.

Ausdrücke in JSX

Mit JSX können Sie Ausdrücke in geschweiften Klammern schreiben { }.

Der Ausdruck kann eine React-Variable oder -Eigenschaft oder ein beliebiger anderer gültiger JavaScript-Ausdruck sein. JSX führt den Ausdruck aus und gibt das Ergebnis zurück:

const myelement = <h1>React is {5 + 5} times better with JSX</h1>;

Einfügen eines großen HTML-Blocks

Um HTML in mehreren Zeilen zu schreiben, setzen Sie den HTML-Code in Klammern:

const myelement = (
  <ul>
    <li>Apples</li>
    <li>Bananas</li>
    <li>Cherries</li>
  </ul>
);

Ein Top-Level-Element

Der HTML-Code muss in EIN Element der obersten Ebene eingeschlossen werden.

Wenn Sie also zwei Absätze schreiben möchten, müssen Sie sie wie ein Element in ein übergeordnetes Element diveinfügen.

const myelement = (
  <div>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </div>
);

Alternativ können Sie ein "Fragment" verwenden, um mehrere Zeilen umzubrechen. Dadurch wird verhindert, dass dem DOM unnötigerweise zusätzliche Knoten hinzugefügt werden.

Ein Fragment sieht aus wie ein leeres HTML-Tag: <></>.

const myelement = (
  <>
    <p>I am a paragraph.</p>
    <p>I am a paragraph too.</p>
  </>
);

Elemente müssen geschlossen sein

JSX folgt XML-Regeln, und daher müssen HTML-Elemente ordnungsgemäß geschlossen werden.

const myelement = <input type="text" />;

Attribut class = className

Das classAttribut ist ein häufig verwendetes Attribut in HTML, aber da JSX als JavaScript gerendert wird und das classSchlüsselwort ein reserviertes Wort in JavaScript ist, dürfen Sie es in JSX nicht verwenden.

JSX löste dies, indem classNamestattdessen verwendet wurde. Wenn JSX gerendert wird, übersetzt es className Attribute in classAttribute.

const myelement = <h1 className="myclass">Hello World</h1>;

Bedingungen - if-Anweisungen

React unterstützt ifAnweisungen, aber nicht innerhalb von JSX.

Um bedingte Anweisungen in JSX verwenden zu können, sollten Sie die if Anweisungen außerhalb von JSX platzieren, oder Sie könnten stattdessen einen ternären Ausdruck verwenden:

Option 1:

Schreiben Sie ifAnweisungen außerhalb des JSX-Codes:

const x = 5;
let text = "Goodbye";
if (x < 10) {
  text = "Hello";
}

const myelement = <h1>{text}</h1>;

Option 2:

Verwenden Sie stattdessen ternäre Ausdrücke:

const x = 5;

const myelement = <h1>{(x) < 10 ? "Hello" : "Goodbye"}</h1>;

const paragraph = React.createElement(, {}, 'This is a paragraph without using JSX!');

ReactDOM.render(paragraph, document.getElementById('root'));