Bruk JSX og React

Hva du skal skape

JSX ligner en blanding av XML og HTML. Du bruker JSX innenfor React-kode for å enkelt lage komponenter for appene dine. JSX forvandles til JavaScript når React samler koden.

Den vakre React er at du kan lage gjenbrukbar kode og enkelt strukturere appen din fra en komponentbasert tankegang. Til slutt har gapet mellom å stryke opp wireframes av semantisk dannede ideer og implementere dem aldri vært nærmere.

Din første smak av JSX

Her er et eksempel på at JSX brukes til å gjengi HTML:

js var div =

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

For å opprette en komponent, bruk bare en lokal variabel som starter med en stor bokstav, f.eks .:

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

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

Merk: Det er reservert ord i JSX, da det egentlig er JavaScript, så søkeord som klasse og til er motet som attributtnavn. I stedet forventer React-komponentene React-eiendomsnavnet, for eksempel klassenavn og htmlFor, for eksempel.

Nesting Tags

Oppgi barn i JSX-enheten din slik:

"js var Bruker, Profil;

// Du skriver i JSX: var app = klikk ;

// Hva vil bli sendt ut i JS: var app = React.createElement (Bruker, className: "vip-user", React.createElement (Profil, null, "klikk")); "

Testing JSX

Bruk Babel REPL til å teste JSX.

Underkomponenter og navneområder

Skjemaopprettelse er enkelt med JSX og delkomponenter, for eksempel:

"js var Form = FormComponent;

var App = (