Sisällön välitys

Joissain tilanteissa on tarve, että komponenttia voisi käyttää samalla tavalla kuin esimerkiksi HTML:n otsikkoelementtiä, kuten esimerkiksi:

<Header>lemon clicker</Header>

Tämä onnistuu Reactissa niille tekniikoilla, joita olemme jo aiemmin käyttäneet.

Luo components-kansioon uusi Header.jsx -niminen tiedosto ja liitä sen sisällöksi seuraava ohjelmakoodi.
```
function Header(props) {

  return (
    <div className="header">
      <h1>{props.children}</h1>
    </div>
  );

}

export default Header;
```
React sijoittaa komponenttikutsun yhteydessä annetun sisällön automaattisesti children-nimiselle arvolle. Tämän sisällön voi sijoittaa ihan samalla tavalla kuin muut komponentille välitetyt arvot.

Tämä esimerkkikomponentti poikkeaa kahdesta aikaisemmasta siinä, että tässä komponentissa välitettyä arvoa ei napattu erikseen omaan muuttujaansa vaan käytettiin suoraan props-muuttujan kautta h1-elementin sisällä. Ei ole isoa merkitystä sillä, kumpaa tapaa käytetään. Välimuuttujan käyttö lisää yhden ylimääräisen muuttujan, joka kuluttaa marginaalisesti resursseja. Tämän kaltaisen sovelluksen näkökulmasta tällä ei ole juurikaan merkitystä.
Muokkaa src-kansiossa olevaa App.jsx-tiedostoa. Lisää tiedoston alkuun seuraava ohjelmarivi.
```
import Header from './components/Header';
```
Muuta komponentin return-lause seuraavan kaltaiseksi:
```
  return (
    <>
      <div>
        <Header>lemon clicker</Header>
        <Balance total="157" />
        <Lemon />
        <Booster value="3.2" />
      </div>  
    </>
  )
```
1. Avaa sovellus selaimessa. Nyt aikaisempien sisältöjen yläpuolelle on ilmestynyt lemon clicker -otsikkoteksti.

Muutosten vienti versiohallintaan

Viedään viimeisimmät muutokset versiohallintaan.

git add .
git commit -m "lisää Header-komponentin"

lisää Header-komponentin -commit