JSX (JavaScript)
JSX ( JavaScript Syntax Extension i czasami określany jako JavaScript XML ) to rozszerzenie składni języka JavaScript , które zapewnia sposób strukturyzowania renderowania komponentów przy użyciu składni znanej wielu programistom powszechnie używanej w React . Jest podobny w wyglądzie do HTML .
React są zwykle pisane przy użyciu JSX, chociaż nie muszą, ponieważ komponenty mogą być również napisane w czystym JavaScript. JSX jest tworzony przez Meta (dawniej Facebook ). Jest podobny do innej składni rozszerzenia stworzonej przez Meta dla PHP o nazwie XHP .
Narzut
Przykład kodu JSX:
const Aplikacja = () => { return ( < div > < p > Nagłówek </ p > < p > Treść </ p > < p > Stopka </ p > </ div > ); }
Elementy zagnieżdżone
Wiele elementów na tym samym poziomie musi być owiniętych w pojedynczy element React, taki jak pokazany powyżej element <div> , fragment wyznaczony przez <Fragment> lub w jego skróconej formie <> , albo zwrócony jako tablica.
Atrybuty
JSX zapewnia szereg atrybutów elementów zaprojektowanych w celu odzwierciedlenia atrybutów dostarczanych przez HTML. Atrybuty niestandardowe mogą być również przekazywane do komponentu. Wszystkie atrybuty zostaną odebrane przez komponent jako rekwizyty.
wyrażenia JavaScript
Wyrażenia JavaScript (ale nie instrukcje ) mogą być używane wewnątrz JSX z nawiasami klamrowymi {} :
< h1 > {10+1} </ h1 >
Powyższy przykład wyrenderuje:
< h1 > 11 </ h1 >
Wyrażenia warunkowe
Instrukcje if-else nie mogą być używane w JSX, ale zamiast tego można używać wyrażeń warunkowych. Poniższy przykład wyrenderuje { i === 1 ? „true” : „false” } jako ciąg „true”, ponieważ i jest równe 1.
const App = () => { const i = 1 ; return ( < div > < h1 > { i === 1 ? 'true' : 'false' } </ h1 > </ div > ); }
Powyższe spowoduje:
< div > < h1 > true </ h1 > </ div >
Funkcje i JSX mogą być używane w trybie warunkowym:
const App = () => { const sekcje = [ 1 , 2 , 3 ]; return ( < div > { sections . map (( n , i ) => ( /* „klucz” jest używany przez reakcję do śledzenia elementów listy i ich zmian */ /* Każdy „klucz” musi być unikalny */ < klucz div = {
0
"sekcja-" + n } > Sekcja { n } { i === && < rozpiętość > ( pierwsza ) </ rozpiętość > } </ div > ))} </ div > ); }
Powyższe spowoduje:
< div > < div > Sekcja 1 < span > (pierwsza) </ span ></ div > < div > Sekcja 2 </ div > < div > Sekcja 3 </ div > </ div >
Kod napisany w JSX wymaga konwersji za pomocą narzędzia takiego jak Babel , zanim będzie zrozumiały dla przeglądarek internetowych. Przetwarzanie to jest zwykle wykonywane podczas tworzenia oprogramowania przed wdrożeniem aplikacji .