'N Inleiding tot JSX
As u ooit 'n webprogram met die raamwerk "React.js" geïmplementeer het, het u miskien opgemerk dat die sintaksis vir die skryf van React.js -komponente 'n bietjie anders lyk as u ander Javascript -kode. Alhoewel dit meestal dieselfde is, word React -komponente beskryf deur middel van spesiale hakies, die linker- en reghoekige hakies. Hulle lyk net soos sintaksis vir XML, die 'Uitbreidbare opmaaktaal'. In React.js word hierdie sintaksis op dieselfde manier 'JSX' genoem, wat 'Javascript XML' beteken.
Die hoofdoel van hierdie sintaksis is om die skryf van React -kode te vereenvoudig. JSX -kode kan nie deur JVM's geïnterpreteer word nie, daarom moet dit voor die gebruik in die regte Javascript -kode saamgestel word - 'n taak wat gewoonlik deur bondelaars soos Babel of Webpack uitgevoer word.
Die Reageer -kode wat u waarskynlik nog nooit geskryf het nie
Dit beteken effektief dat dit baie waarskynlik is dat u nog nooit sulke 'ware' React.js -komponente geskryf het wat uit u JSX -kode gegenereer word nie. Maar moenie bekommerd wees nie, dit kan maklik gedoen word sonder veel moeite. U kan selfs 'n volledige React -webtoepassing skryf sonder om ooit JSX te gebruik. Die volgende kodefragment wys hoe 'n werklik React.js -komponent met slegs Javascript daar uitsien.
// A common JSX-element.
<Header title="Lorem ipsum" variant="primary">
I am a subtitle
</Header>
//
// ...
//
// After the compilation step:
React.createElement(
Header,
{title: 'Lorem ipsum', variant: "primary"},
'I am a subtitle'
);
U kan dit selfs in u blaaier probeer sonder om sagteware te installeer! Blaai net na die einde van hierdie bladsy om die skakel in die bylaag te gebruik.
Gebruik JSX om u kode te vereenvoudig
Soos u kan sien, is die grootste voordeel van die JSX-sintaksis dat u UI-verwante kode makliker is om te skryf en makliker te onderskei van ander dele van u toepassing, aangesien die XML-agtige sintaksis 'n duidelike aanduiding van die domein van die kode bied.
Nog 'n groot kenmerk van JSX is dat dit net 'n uitdrukking word na die opstelstap. U kan dit dus gebruik in if-else-stellings of selfs die resultaat daarvan in 'n veranderlike stoor. En omdat React.js -komponente uitdrukkings as kinders self kan bevat, kan u 'n baie saamgestelde UI -kode skryf!
'N Standaard invoer vir elke JSX-lêer
U het miskien opgemerk dat elke JSX-lêer in verskillende tutoriale, gidse en waarskynlik selfs u eie kode die standaardinvoer uit die React-biblioteek bevat, alhoewel u hierdie ingevoerde veranderlike nooit direk kan noem nie. Die rede hiervoor is dat elke JSX-uitdrukking na die opstelstap 'n "React.createElement" -oproep word, soos u al in die kodevoorbeeld gesien het. Daarom is die 'Reageer' -veranderlik van die standaardinvoer nodig in die omvang van elke lêer.
Lyk soos HTML, maar is nie
Een belangrike beperking by die kodering in JSX-sintaksis is die notasie van die naam van u komponent. Vir die bundel om u komponente korrek te identifiseer, moet dit uniek wees van die standaard HTML-etikette, aangesien die sintaksis dieselfde lyk.
// 1. A valid example.
function Header(props){
return (
<div>
<h1>{props.title}</h1>
{props.children}
</div>
);
}
// 2. Invalid, only uppercase for React elements.
function header(props){
return (
// ...
);
}
// 3. Invalid, only uppercase
// when calling React components.
function Page(props){
// Notice the invalid 'layout':
return (
<div style={{ margin: 12 }}>
<layout>{/* ... */}</layout/>
</div>
);
}
Dit is dus 'n vereiste om JSX -elemente altyd in sinomhulsel te kodeer, wat beteken dat die eerste letter hoofletters moet wees.
Die Typescript -variant
U het moontlik opgemerk dat baie projekte ook TSX as agtervoegsel vir hul React.js -komponentlêers gebruik. Dit is slegs 'n uitbreiding van die oorspronklike JSX om versoenbaar te wees met Typescript. Met TSX-lêers kan u 'n Typescript-kode saam met JSX-notasie-komponente skryf.
Net die begin
Hierdie artikel bied 'n eenvoudige inleiding tot JSX vir die kodering van React -komponente. Die grootste voordeel is 'n baie bondige sintaksis wat natuurlik voel in 'n webomgewing. U kan baie saamstelbare elemente skryf met baie min kode, wat ongetwyfeld 'n belangrike faktor is in die huidige beroemde en gewilde toestand van React. As u nuuskierig is, is daar baie meer en uitstekende gedetailleerde gidse deur die React -span op hul webwerf, die skakels is in die bylae aan die einde van hierdie bladsy.
