Summary  
This chapter introduces JSX, a JavaScript syntax extension that lets you embed HTML-like markup and JavaScript expressions directly within your code to define UI elements.

General domain of usage  
User interface development

Reactissa käytetään JavaScriptin syntaksilaajennusta nimeltä **JSX (JavaScript XML)** käyttöliittymien rakentamiseen. JSX mahdollistaa HTML-tyylisen koodin kirjoittamisen suoraan JavaScriptin sisällä.

## JavaScript HTML:n sisällä
Yksi JSX:n eduista on, että se yhdistää JavaScriptin ominaisuudet HTML:ään. JavaScript-lausekkeita ja -logiikkaa voidaan käyttää suoraan HTML-tyylisessä koodissa. JavaScriptin upottamiseksi se sijoitetaan aaltosulkeisiin, esimerkiksi näin: `{ JavaScript code }`.

## Miten JSX toimii: Esimerkki
Tarkastellaan JSX:ää käytännössä yksinkertaisella esimerkillä. Oletetaan, että haluamme renderöidä otsikkoelementin React-sovelluksessa:
```jsx
const element = <h1>Hello, React!</h1>;
```
Tässä esimerkissä käytämme JSX:ää luodaksemme vakion nimeltä `element`, joka sisältää `<h1>`-elementin tekstillä "Hello, React!".


>Huomio
>
> Kulissien takana React ottaa tämän JSX-koodin ja renderöi sen tehokkaasti DOM:iin, mikä tekee siitä saumattoman ja tehokkaan tavan rakentaa käyttöliittymiä.

Mikä on oikea tapa luoda HTML-elementti, joka näyttää merkkijonon `Hey there, React Developer!`?

Opi rakentamaan dynaamisia, interaktiivisia käyttöliittymiä Reactilla. Ymmärrä keskeiset käsitteet, kuten JSX, virtuaalinen DOM ja uudelleenkäytettävä komponenttipohjainen arkkitehtuuri. Hyödynnä tyylittelytekniikoita käyttämällä sisäisiä tyylejä, ulkoista CSS:ää ja CSS-moduuleja skaalautuvaa suunnittelua varten. Hallitse tilaa ja sivuvaikutuksia tehokkaasti React Hookien avulla ja jaa dataa komponenttien välillä Contextin kautta.

Ymmärrä Reactin ydinkäsitteet. Opit tuntemaan JSX:n (JavaScript XML), uudelleenkäytettävien käyttöliittymäkomponenttien rakentamisen sekä elementtien renderöinnin. Lisäksi perehdyt tiedon keräämisen ja ehdollisen renderöinnin merkitykseen React-sovelluksissa. Tämän osion lopussa hallitset Reactin keskeiset periaatteet, mikä luo vahvan pohjan seuraavien osioiden edistyneemmille aiheille.

Tutustu erilaisiin tapoihin lisätä tyylejä React-sovelluksiin. Opit, kuinka tyylejä sovelletaan yksittäisiin komponentteihin, käytetään dynaamisia tyylejä sekä ylläpidetään skaalautuvaa ja ylläpidettävää tyylittelytapaa projekteissasi.

Tehokkaita ominaisuuksia modernissa React-kehityksessä. Hookit mullistavat tapamme kirjoittaa funktiokomponentteja tarjoten tiiviin ja intuitiivisen tavan hallita tilaa ja suorittaa sivuvaikutuksia. Konteksti puolestaan mahdollistaa datan jakamisen komponenttipuun läpi ilman propseja. Hookien ja kontekstin yhdistäminen mahdollistaa tehokkaan tilanhallinnan ja yksinkertaistetun datan jakamisen React-sovelluksissa.

Vaiheittainen opas reaalimaailman React-projektin aloittamiseen. Kehitysympäristön perustamisesta projektin rakenteen ja keskeisten työkalujen ymmärtämiseen saat tiedot ja varmuuden React-matkasi aloittamiseen.

JSX:n Esittely HTML:n Kirjoittamiseen JavaScriptissä

JavaScript HTML:n sisällä

Miten JSX toimii: Esimerkki

1. Mitä JSX tarkoittaa Reactissa?

2. Mikä on oikea tapa luoda HTML-elementti, joka näyttää merkkijonon `Hey there, React Developer!`?

Awesome!

JSX:n Esittely HTML:n Kirjoittamiseen JavaScriptissä

JavaScript HTML:n sisällä

Miten JSX toimii: Esimerkki

1. Mitä JSX tarkoittaa Reactissa?

2. Mikä on oikea tapa luoda HTML-elementti, joka näyttää merkkijonon `Hey there, React Developer!`?

JSX:n Esittely HTML:n Kirjoittamiseen JavaScriptissä

JavaScript HTML:n sisällä

Miten JSX toimii: Esimerkki

1. Mitä JSX tarkoittaa Reactissa?

2. Mikä on oikea tapa luoda HTML-elementti, joka näyttää merkkijonon Hey there, React Developer!?

Awesome!

JSX:n Esittely HTML:n Kirjoittamiseen JavaScriptissä

JavaScript HTML:n sisällä

Miten JSX toimii: Esimerkki

1. Mitä JSX tarkoittaa Reactissa?

2. Mikä on oikea tapa luoda HTML-elementti, joka näyttää merkkijonon Hey there, React Developer!?

2. Mikä on oikea tapa luoda HTML-elementti, joka näyttää merkkijonon `Hey there, React Developer!`?

2. Mikä on oikea tapa luoda HTML-elementti, joka näyttää merkkijonon `Hey there, React Developer!`?