JSX Flashcards
Was ist JSX?
JSX steht für JavaScript XML. Es ist eine Syntaxerweiterung für JavaScript, die von React verwendet wird, um die Struktur von Komponenten zu beschreiben. Es ähnelt HTML, hat aber auch die volle Leistungsfähigkeit von JavaScript.
Beispiel:
const element = <h1>Hello, world!</h1>;
Wie wird JSX in JavaScript umgewandelt?
JSX wird durch einen Prozess namens Transpilierung in reguläres JavaScript umgewandelt. Tools wie Babel nehmen JSX-Code und wandeln ihn in React.createElement()-Aufrufe um, die von React verstanden und gerendert werden können.
Beispiel:
// JSX
const element = <h1>Hello, world!</h1>;
// JavaScript
const element = React.createElement('h1', null, 'Hello, world!');
Wie benutzt man Ausdrücke in JSX?
In JSX können JavaScript-Ausdrücke verwendet werden, indem sie in geschweifte Klammern gesetzt werden. Diese Ausdrücke können Variablen, Funktionen oder beliebige andere JavaScript-Ausdrücke sein.
Beispiel:
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
Wie definiert man Attribute in JSX?
Attribute in JSX werden ähnlich wie in HTML definiert, aber mit camelCase-Schreibweise. Werte für Attribute können als Strings oder in geschweiften Klammern als JavaScript-Ausdrücke angegeben werden.
Beispiel:
const element = <img src={user.avatarUrl} alt={user.name} />;
Wie stellt man Kinder in JSX dar?
Kinder (children) in JSX sind die Elemente oder Komponenten, die innerhalb eines JSX-Tags eingebettet sind. Sie können als Tags, Zeichenketten oder JavaScript-Ausdrücke dargestellt werden.
Beispiel:
const element = (
<div>
<h1>Das ist der Titel</h1>
<p>Das ist der Absatz, der als Kind fungiert.</p>
</div>
);
Wie verwendet man logische Operatoren und Ternäroperatoren in JSX?
Logische Operatoren wie && und Ternäroperatoren können in JSX verwendet werden, um Bedingungen zu definieren, unter denen bestimmte Elemente gerendert werden.
Beispiel:
const isLoggedIn = true;
const element = <div>{isLoggedIn ? <LogoutButton /> : <LoginButton />}</div>;
Was ist der Unterschied zwischen einem Element und einer Komponente in JSX?
Ein Element ist ein Objekt, das eine native DOM-Komponente beschreibt, während eine Komponente in React eine Funktion oder Klasse sein kann, die JSX zurückgibt. Komponenten können wiederverwendet und zusammengesetzt werden, um komplexe UIs zu bilden.
Beispiel:
const element = <h1>Hello, world!</h1>; // Element
function Welcome(props) {
return <h1>Hello, {props.name}</h1>; // Komponente
}
Wie setzt man Kommentare in JSX?
Kommentare in JSX werden in geschweifte Klammern gesetzt und verwenden die Syntax für Mehrzeilenkommentare in JavaScript ({/* Kommentar */}).
Beispiel:
const element = (
<div>
{/* Dies ist ein Kommentar */}
<h1>Hello, world!</h1>
</div>
);
Was sind kontrollierte Komponenten in JSX?
Kontrollierte Komponenten sind Formularelemente wie <input></input>, <textarea> und <select>, deren Werte durch den Zustand von React gesteuert werden. Der Zustand, nicht das DOM, ist die "Quelle der Wahrheit" für diese Werte.</select></textarea>
Beispiel:
class NameForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: ''};
}
handleChange = (event) => {
this.setState({value: event.target.value});
}
render() {
return (
<form>
<label>
Name:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
</form>
);
}
}
Wie integriert man nicht-JSX-Code in eine JSX-Datei?
Nicht-JSX-Code kann in einer JSX-Datei integriert werden, indem man ihn außerhalb der JSX-Syntax in normalen JavaScript-Funktionen oder -Variablen platziert. Dieser Code kann dann innerhalb der JSX-Syntax über geschweifte Klammern eingebunden werden.
Beispiel:
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = <h1>Hello, {formatName(user)}!</h1>;
Wie kann man in JSX einen Style definieren?
Styles in JSX werden als Objekte mit camelCase-Eigenschaften definiert. Diese Objekte werden dann dem style-Attribut eines Elements zugeordnet.
Beispiel:
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')',
};
const element = <div style={divStyle}>Hello World!</div>;
Wie werden Klassen in JSX definiert?
Klassen werden in JSX mit dem className-Attribut anstatt class definiert, da class ein reserviertes Wort in JavaScript ist.
Beispiel:
const element = <div className="sidebar"></div>;
Wie werden Ereignishandler in JSX zugeordnet?
Ereignishandler in JSX werden in camelCase geschrieben und die Funktionen werden in geschweiften Klammern übergeben.
Beispiel:
const handleClick = () => {
console.log('Button clicked');
};
const element = <button onClick={handleClick}>Click me</button>;
Wie bindet man eine Komponente in JSX ein?
Komponenten in JSX werden eingebunden, indem man sie wie HTML-Tags verwendet. Sie können Eigenschaften (props) empfangen und Kinder (children) haben.
Beispiel:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />;
Wie verwendet man Fragmente in JSX?
Fragmente ermöglichen es Ihnen, mehrere Elemente zu gruppieren, ohne zusätzliche Knoten zum DOM hinzuzufügen, indem sie in <></> oder <React.Fragment></React.Fragment> eingefasst werden.
Beispiel:
const element = (
<>
<td>Hello</td>
<td>World</td>
</>
);
