JSX (JavaScript)
JSX ( JavaScript Syntax Extension och ibland hänvisad till som JavaScript XML ) är ett tillägg till JavaScript - språksyntaxen som ger ett sätt att strukturera komponentrendering med syntax som är bekant för många utvecklare som ofta används i React . Det liknar HTML till utseendet .
React- komponenter skrivs vanligtvis med JSX, även om de inte behöver vara det eftersom komponenter också kan vara skrivna i rent JavaScript. JSX är skapad av Meta (tidigare Facebook ). Det liknar en annan tilläggssyntax skapad av Meta för PHP som heter XHP .
Pålägg
Ett exempel på JSX-kod:
const App = () => { return ( < div > < p > Rubrik </ p > < p > Innehåll </ p > < p > Sidfot </ p > </ div > ); }
Kapslade element
Flera element på samma nivå måste lindas in i ett enda React-element, till exempel <div> -elementet som visas ovan, ett fragment avgränsat av <Fragment> eller i dess förkortning <> , eller returneras som en array.
Attribut
JSX tillhandahåller en rad elementattribut utformade för att spegla de som tillhandahålls av HTML. Anpassade attribut kan också skickas till komponenten. Alla attribut kommer att tas emot av komponenten som rekvisita.
JavaScript-uttryck
JavaScript- uttryck (men inte satser ) kan användas i JSX med parenteser {} :
< h1 > {10+1} </ h1 >
Exemplet ovan kommer att återge:
< h1 > 11 </ h1 >
Villkorliga uttryck
If–else-satser kan inte användas i JSX men villkorliga uttryck kan användas istället. Exemplet nedan kommer att återge { i === 1 ? 'true' : 'false' } som strängen 'true' eftersom i är lika med 1.
const App = () => { const i = 1 ; return ( < div > < h1 > { i === 1 ? 'true' : 'false' } </ h1 > </ div > ); }
Ovanstående kommer att återge:
< div > < h1 > sant </ h1 > </ div >
Funktioner och JSX kan användas i villkor:
0
const App = () => { const sektioner = [ 1 , 2 , 3 ]; return ( < div > { sektioner . map (( n , i ) => ( /* 'nyckel' används av react för att hålla reda på listobjekt och deras ändringar */ /* Varje 'nyckel' måste vara unik */ < div- nyckel = { "sektion-" + n } > Avsnitt { n } { i === && < span > ( första ) </ span > } </ div > ))} </ div > ); }
Ovanstående kommer att återge:
< div > < div > Avsnitt 1 < span > (första) </ span ></ div > < div > Avsnitt 2 </ div > < div > Avsnitt 3 </ div > </ div >
Kod skriven i JSX kräver konvertering med ett verktyg som Babel innan den kan förstås av webbläsare. Denna bearbetning utförs vanligtvis under en mjukvarubyggeprocess innan applikationen distribueras .