JSX: syntaksi ja transpilaus
Kirjoita JSX:ää, ymmärrä, miten Babel kääntää sen React.createElement-kutsuiksi, ja noudata sääntöjä: yksi juurielementti, className ja itsensä sulkevat tagit
JSX: syntaksi ja transpilaus on ilmainen Frontend Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea koko oppitunnin alta ilmaiseksi ja harjoitella sen jälkeen käytännössä selaimessa sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla. Oppitunti kuuluu Frontend Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mikä JSX on?
JSX (JavaScript XML) on syntaksilaajennus, jonka avulla JavaScriptin sisällä voi kirjoittaa HTML:n kaltaista merkintää. Se ei ole selaimen ominaisuus — Babel tai TypeScript muuntaa sen JavaScript-funktiokutsuiksi ennen suorittamista.
JSX:n transpilointi
Babel muuntaa JSX:n React.createElement()-kutsuiksi. Uuden JSX-muunnoksen (React 17+) ansiosta Reactia ei tarvitse tuoda erikseen — Babel lisää tarvittavat tuonnit automaattisesti.
// JSX:
const element = <h1 className="title">Hello</h1>;
// Compiled to (new transform):
import { jsx as _jsx } from 'react/jsx-runtime';
const element = _jsx('h1', { className: 'title', children: 'Hello' });JSX:n säännöt: yksi juurielementti
JSX-lausekkeilla on oltava täsmälleen yksi juurielementti. Kääri sisarukset <div>-elementtiin tai käytä Fragmentteja (<></> tai <React.Fragment>), jotta DOM:iin ei lisätä ylimääräisiä solmuja.
// Error: adjacent elements need a wrapper
return (
<h1>Title</h1>
<p>Body</p>
);
// Use Fragment:
return (
<>
<h1>Title</h1>
<p>Body</p>
</>
);className ja htmlFor
JSX-attribuutit käyttävät camelCase-merkintää. Koska class ja for ovat JavaScriptin varattuja sanoja, käytä niiden sijaan className- ja htmlFor-attribuutteja.
<div className="card active">
<label htmlFor="email">Email</label>
<input id="email" type="email" />
</div>Itse sulkeutuvat tunnisteet
JSX:ssä kaikkien tunnisteiden on oltava oikein suljettuja. Elementtien, joilla ei ole lapsia, on käytettävä itse sulkevaa kauttaviivaa: <img />, <br />, <input />.
Lausekkeet JSX:ssä: {}
Upota mikä tahansa JavaScript-lauseke JSX:ään aaltosulkeilla. Muuttujat, funktiokutsut, ternäärioperaattorit ja aritmeettiset lausekkeet toimivat. Lauseet (if, for) eivät toimi.
const name = 'Alice';
const count = 5;
return (
<div>
<h1>Hello, {name}!</h1>
<p>You have {count} messages.</p>
<p>Double: {count * 2}</p>
{isLoggedIn ? <Dashboard /> : <Login />}
</div>
);JSX ja merkkijonot
Vierekkäiset tekstit ja JSX-lausekkeet yhdistetään automaattisesti. Tekstiä ja lausekkeita voi yhdistellä vapaasti elementin sisällä.
<p>Welcome, {user.name}! You joined on {formatDate(user.createdAt)}.</p>Minkään renderöinti: null ja false
Palauta null tai false, jos mitään ei pidä renderöidä. Molemmat ovat kelvollisia JSX-arvoja, jotka eivät tuota DOM-tulostetta. Tämä on hyödyllistä ehdollisessa renderöinnissä.
function Banner({ show }: { show: boolean }) {
if (!show) return null; // renders nothing
return <div className="banner">Important notice!</div>;
}style-attribuutti — olio-syntaksi
JSX:n sisäiset tyylit määritetään oliona, ei merkkijonona. Ominaisuuksien nimet kirjoitetaan camelCase-muodossa.
<div style={{ backgroundColor: '#f7fafc', padding: '16px', borderRadius: '8px' }}>
Styled box
</div>JSX on JavaScriptiä
Koska JSX käännetään JavaScriptiksi, sitä voi sijoittaa muuttujiin, palauttaa funktioista, välittää propseina ja tallentaa taulukoihin. React-elementit ovat tavallisia JavaScript-olioita.
const elements = ['apple', 'banana', 'cherry'].map(fruit => (
<li key={fruit}>{fruit}</li>
));
return <ul>{elements}</ul>;TypeScript ja JSX: .tsx-tiedostot
Käytä .tsx-tunnistetta TypeScript-tiedostoissa, jotka sisältävät JSX:ää. TypeScript tarkistaa JSX:n tyypit ja havaitsee proppien tyyppivirheet sekä puuttuvat propit jo käännösvaiheessa.
Pikatarkistus
Miksi JSX:ssä käytetään className-attribuuttia class-attribuutin sijaan?
Kertaus: JSX
JSX on syntaktista lyhennystä kutsulle React.createElement(). Jokaisella lausekkeella on oltava yksi juurielementti tai Fragment. Käytä varattujen sanojen attribuutteina className- ja htmlFor-nimiä. Sulje kaikki tyhjät elementit itse sulkeutuvina. Upota lausekkeet merkinnällä {}. Palauta null/false, jos mitään ei pidä renderöidä. Sisäiset tyylit käyttävät camelCase-muotoista olio-syntaksia. JSX on JavaScriptiä — käsittele sitä arvona.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 41
- Oppitunnit
- 163
Usein kysytyt kysymykset
Onko oppitunti ”JSX: syntaksi ja transpilaus” ilmainen?
Kyllä – oppitunnin ”JSX: syntaksi ja transpilaus” koko tekstin voi lukea täällä verkossa ilmaiseksi. Jos haluat harjoitella interaktiivisesti sisäänrakennetulla koodieditorilla ja ympäri vuorokauden käytettävissä olevan tekoälytuutorin avulla sekä avata koko Frontend Academy-kurssin, päivitä CoddyKit PROhon. Frontend Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”JSX: syntaksi ja transpilaus”?
Kirjoita JSX:ää, ymmärrä, miten Babel kääntää sen React.createElement-kutsuiksi, ja noudata sääntöjä: yksi juurielementti, className ja itsensä sulkevat tagit Harjoittelet Frontend Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Frontend Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Frontend Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”JSX: syntaksi ja transpilaus”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Frontend Academy-oppitunnilla?
Kyllä. Jokainen Frontend Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- JSX: syntaksi ja transpilaus
- Funktionaaliset komponentit ja propsit
- useState-hook: tila ja uudelleenrenderöinnit
- Listat, avaimet ja ehdollinen renderöinti