Enkonduko al JSX
Se vi iam realigis retprogramon kun la kadro "React.js", vi eble rimarkis, ke la sintakso por skribi React.js-komponantojn aspektas iomete malsama ol via alia Javascript-kodo. Kvankam plejparte samaj, React-komponantoj estas priskribitaj per specialaj krampoj, la maldekstra kaj ortangula krampo. Ili aspektas kiel sintakso por XML, la "Etendebla Marklingvo". En React.js, ĉi tiu sintakso simile nomiĝas "JSX", kio signifas "Ĝavaskripta XML".
La ĉefa celo de ĉi tiu sintakso estas simpligi skribadon de React-kodo. JSX-kodo ne povas esti interpretita de JVM-oj, tial ĝi devas esti kompilita al vera Javascript-kodo antaŭ uzado - tasko kutime farita de pakistoj kiel Babelo aŭ Webpack.
La kodon Reagi, kiun vi verŝajne neniam verkis
Ĉi tio efike signifas, ke tre verŝajne vi neniam verkis tiajn "verajn" React.js-komponantojn, kiuj generiĝas de via JSX-kodo. Sed ne zorgu, ĉi tio povas esti facile farita sen multe da ĝeno. Fakte vi eĉ povas verki kompletan React-retejon sen iam uzi JSX. La sekva kodpeceto montras kiel aspektas vere React.js-komponanto kun nur Ĝavaskripto.
// 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'
);
Vi eĉ povas provi ĉi tion en via retumilo, sen instali programon! Nur rulumu malsupren al la fino de ĉi tiu paĝo por uzi la ligon en la aldono.
Uzante JSX por simpligi vian kodon
Kiel vi vidas, la ĉefa avantaĝo de la JSX-sintakso estas igi vian UI-rilatan kodon pli simpla skribi kaj pli facile distingi de aliaj partoj de via aplikaĵo, ĉar la XML-simila sintakso donas klaran indikon pri la domajno de la kodo.
Alia bonega karakterizaĵo de JSX estas, ke ĝi nur fariĝas esprimo post la kompila paŝo. Vi do povas uzi ĝin en if-else-asertoj aŭ eĉ konservi ĝian rezulton en variablo. Kaj ĉar React.js-eroj povas enhavi esprimojn kiel infanoj mem, vi povas verki tre komponeblan UI-kodon!
Defaŭlta importado por ĉiu JSX-dosiero
Vi eble rimarkis, ke ĉiu JSX-dosiero en diversaj lerniloj, gvidiloj kaj plej verŝajne eĉ via propra kodo havas la defaŭltan importadon de la Reagbiblioteko inkluzivita, kvankam vi eble neniam nomos ĉi tiun importitan variablon rekte. La kialo malantaŭ ĝi estas, ke post la kompila paŝo, ĉiu JSX-esprimo fariĝas "React.createElement" -voko, kiel vi antaŭe vidis en la kodekzemplo. Tial necesas havi la "Reagi" -variablon de la defaŭlta importado inkluzivita en la amplekso de ĉiu dosiero.
Aspektas kiel HTML, sed ne
Unu kerna limo dum kodado en JSX-sintakso estas la notado de la nomo de via komponanto. Por ke la pakisto ĝuste identigu viajn erojn, ili devas esti unikaj de la normaj HTML-etikedoj, ĉar la sintakso aspektas same.
// 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>
);
}
Sekve estas postulo kodi JSX-elementojn ĉiam en frazkazo, kio signifas, ke la unua litero devas esti majuskla.
La Tajpa Variaĵo
Eble vi rimarkis, ke multaj projektoj ankaŭ uzas TSX kiel dosieron-sufikson por siaj komponaj dosieroj React.js. Ĉi tio estas nur etendo de la originala JSX por esti kongrua kun Typescript. TSX-dosieroj permesas al vi skribi Tajpokodan kodon kune kun JSX-notaj eroj.
Nur la komenco
Ĉi tiu artikolo donis simplan enkondukon al JSX por kodigi reagajn erojn. La ĉefa avantaĝo estas tre konciza sintakso, kiu sentiĝas natura en interreta medio. Vi povas verki tre komponeblajn elementojn kun tre malmulta kodo, kiu sendube estas unu ŝlosila faktoro de la nuna fama kaj populara stato de React. Se vi scivolas, ekzistas multe pli kaj bonegaj detalaj gvidiloj de la teamo React en sia retejo, la ligoj estas en la aldono ĉe la fino de ĉi tiu paĝo.
