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.
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.
Oppgi barn i JSX-enheten din slik:
"js var Bruker, Profil;
// Du skriver i JSX: var app =
// Hva vil bli sendt ut i JS: var app = React.createElement (Bruker, className: "vip-user", React.createElement (Profil, null, "klikk")); "
Bruk Babel REPL til å teste JSX.
Skjemaopprettelse er enkelt med JSX og delkomponenter, for eksempel:
"js var Form = FormComponent;
var App = (