JSX liknar en blandning av XML och HTML. Du använder JSX inom React-kod för att enkelt skapa komponenter för dina appar. JSX omvandlas till JavaScript när React sammanställer koden.
Skönheten i React är att du kan skapa återanvändbar kod och enkelt strukturera din app från en komponentbaserad inställning. Slutligen har klyftan mellan mocking up wireframes av semantiskt bildade idéer och implementering dem aldrig varit närmare.
Här är ett exempel på att JSX används för att göra HTML:
js var div = ; ReactDOM.render (div, document.getElementById ('example'));
För att skapa en komponent, använd bara en lokal variabel som börjar med en stor bokstav, t.ex.:
"js var MyComponent = React.createClass (/... /); var myElement =
ReactDOM.render (myElement, document.getElementById ('example')); "
Obs! Det finns reserverade ord i JSX, eftersom det i grund och botten är javascript, så är sökord som klass
och för
är avskräckta som attributnamn. I stället förväntar React-komponenterna React-egenskaperens namn, t.ex. klassnamn
och htmlFor
, till exempel.
Ange barn i din JSX som så:
"js var User, Profile;
// Du skriver i JSX: var app =
// Vad kommer att bli utmatat i JS: var app = React.createElement (Användare, className: "vip-user", React.createElement (Profile, null, "click"))
Använd Babel REPL för att testa JSX.
Form skapande är enkelt med JSX och delkomponenter, till exempel:
"js var Form = FormComponent;
var App = (