Accentsconagua

Verwenden von JSX und React

Code
Share
Was Sie erstellen werden

JSX ähnelt einer Mischung aus XML und HTML. Sie verwenden JSX innerhalb von React-Code, um auf einfache Weise Komponenten für Ihre Apps zu erstellen. JSX wird in JavaScript umgewandelt, wenn React den Code kompiliert.

Das Schöne an React ist, dass Sie wiederverwendbaren Code erstellen und Ihre App ganz einfach aus einer komponentenbasierten Denkweise strukturieren können. Schließlich ist die Kluft zwischen dem Verspotten von Wireframes semantisch gebildeter Ideen und deren Umsetzung nie näher gekommen.

Ihr erster Vorgeschmack auf JSX

Hier ist ein Beispiel für die Verwendung von JSX zum Rendern von HTML:

js var div =

; ReactDOM.render (div, document.getElementById ('example'));

Um eine Komponente zu erstellen, verwenden Sie einfach eine lokale Variable, die mit einer beginnt Großbuchstabe, z.B.:

"js var MyComponent = React.createClass (/… /); var myElement = ;

ReactDOM.render (myElement, document.getElementById ('example')); "

Hinweis: Es gibt reservierte Wörter in JSX, da es sich im Wesentlichen um JavaScript nach allen Schlüsselwörtern wie Klasse und zum werden als Attributnamen entmutigt. Reakt-Komponenten erwarten stattdessen die React-Eigenschaftennamen wie Klassenname und htmlFor, zum Beispiel.

Verschachtelungs-Tags

Geben Sie Kinder in Ihrem JSX so an:

"js var Benutzer, Profil;

// Sie schreiben in JSX: var app = klicken ;

// Was wird in JS ausgegeben: var app = React.createElement (User, className: "vip-user", React.createElement (Profile, null, "click"));)

JSX testen

Testen Sie JSX mit der Babel REPL.

Unterkomponenten und Namensräume

Die Formularerstellung ist mit JSX und Unterkomponenten beispielsweise einfach:

"js var Form = FormComponent;

var App = (

Code
×