JSX sistemoje "React" - kaip ją naudoti

Vartotojo sąsajų (VSA) kūrimą naudojant "React" supaprastina JSX - sintaksinis "JavaScript" plėtinys. JSX leidžia "JavaScript" naudoti į HTML panašią sintaksę, todėl komponentų kūrimas tampa intuityvesnis. Šiame vadove sužinosite, kaip veiksmingai naudoti JSX kuriant komponentus "React", ir gausite vertingų įžvalgų apie tai, kaip JSX veikia užkulisiuose.

Pagrindinės žinios

• JSX yra "JavaScript" sintaksės plėtinys, leidžiantis kurti į HTML panašias struktūras.
• JSX perkeliama į įprastą "JavaScript", kad būtų užtikrintas suderinamumas su naršyklėmis.
• Naudodami metodą createElement galite kurti "React" elementus tiesiogiai be JSX.
• Tarp įprastinio HTML ir JSX yra tam tikrų skirtumų, į kuriuos reikėtų atsižvelgti.

Žingsnis po žingsnio vadovas

1 žingsnis: JSX pristatymas

Pirmiausia atidarykite savo " React" programą ir pažvelkite į pagrindinę jos struktūrą. Pastebėsite, kad jūsų projekte jau naudojamas JSX. Paprastas JSX pavyzdys būtų toks:

. Galite tai išbandyti atitinkamai pritaikydami pagrindinį savo programos komponentą.

2 žingsnis: Supraskite JSX sintaksę

Kai savo kode naudojate JSX, jis atrodo kaip HTML. Tačiau atkreipkite dėmesį, kad šis kodas tiesiogiai neveiks įprastoje "JavaScript" aplinkoje. Pabandę paleisti JSX kodą naršyklėje, gausite sintaksės klaidą. Taip yra todėl, kad JSX reikia išversti į tinkamą "JavaScript" naudojant transpilerį.

3 žingsnis: darbas su React.createElement

Kad suprastumėte, kaip veikia JSX, pažvelkite į "React" metodą createElement. Šiuo metodu galite sukurti "React" elementą, perduodami žymės pavadinimą, galbūt rekvizitus ir vaikus. Taigi vietoj JSX kodo galite naudoti tokį kodą:

React.createElement('div', null, 'Hello World')

Šis kodas duoda tokį patį rezultatą kaip ir JSX išraiška.

4 veiksmas: Įterpti elementai su createElement

Norėdami sukurti sudėtingesnį elementą su įterptomis struktūromis, galite kelis kartus iškviesti createElement. Tarkime, norite sukurti div elementą, esantį kito div elemento viduje. Štai pavyzdys:

React.createElement('div', null, React.createElement('div', null, "Hello World") );

Taip sukuriamas išorinis div, kuriame yra vidinis div su tekstu Hello World.

5 žingsnis: komponentų naudojimas JSX

Jei norite sukurti savo komponentus, galite tiesiogiai naudoti JSX jiems įterpti. Apibrėžkite paprastą funkciją, grąžinančią jūsų komponentą, ir tada naudokite ją JSX:

Funkcija MyComponent() { return <div>Hello from MyComponent</div>; }

// Savo pagrindiniame atvaizdavimo bloke: <ReactDOM.createRoot(document.getElementById('root')).render();

Tada šis komponentas bus teisingai atvaizduotas jūsų programoje.

6 žingsnis: HTML ir JSX skirtumai

Atkreipkite dėmesį, kad kai kurie JSX atributai rašomi kitaip nei įprastiniame HTML. Pavyzdžiui, klasė JSX vadinama className, nes klasė yra rezervuotas raktažodis "JavaScript". Pavyzdžiui, galite parašyti taip:

<div className="my-class">Turinys</div>

Apibendrinimas

JSX naudojimas "React" sistemoje leidžia kurti ir struktūrizuoti naudotojo sąsajas deklaratyviu būdu. Nors JSX pateikia į HTML panašią sintaksę, ji viduje išverčiama į "JavaScript", o tai pagerina skaitomumą ir palaikymą. Šiame vadove aptarti JSX pagrindai, metodo createElement naudojimas ir svarbūs JSX ir HTML skirtumai. Šių sąvokų supratimas yra labai svarbus kuriant veiksmingas "React" programas.