Använda JSX och React

Vad du ska skapa

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.

Din första smak av JSX

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.

Nesting Tags

Ange barn i din JSX som så:

"js var User, Profile;

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

// Vad kommer att bli utmatat i JS: var app = React.createElement (Användare, className: "vip-user", React.createElement (Profile, null, "click"))

Testa JSX

Använd Babel REPL för att testa JSX.

Underkomponenter och namnområden

Form skapande är enkelt med JSX och delkomponenter, till exempel:

"js var Form = FormComponent;

var App = (