Sisällön pilkkominen omaksi komponentiksi

Tähän mennessä olemme sisällyttäneet sisällön kokonaisuudessaan App-komponentin sisälle. Jotta voimme toteuttaa navigoinnin, on pilkotaan sivun yksilöllinen sisältö omaksi komponentikseen.

Tässä vaiheessa luomme myös uuden kansion, johon sijoitamme erityisesti ne komponentit, jotka on kytketty tiettyyn osoitteeseen.

1. Luo src-kansion alle uusi kansio ja anna sen nimeksi pages.

2. Lisää src/pages-kansioon uusi Clicker.jsx-niminen tiedosto ja liitä sen sisällöksi seuraava ohjelmakoodi:

   import Balance from '../components/Balance';
   import Booster from '../components/Booster';
   import Header from '../components/Header';
   import Lemon from '../components/Lemon';
   
   function Clicker(props) {
     return (
       <div className="container clicker">
         <Header>lemon clicker</Header>
         <Balance total={props.stats.clicks} />
         <Lemon onClick={props.handleClick} />
         <Booster value={props.stats.increase} />
       </div>
     );
   }
   
   export default Clicker;
   

   Ohjelmakoodi on todellisuudessa karsittu versio App.jsx-tiedostosta löytyvästä koodista. Isoin ero on se, että Balance-, Lemon- ja Booster-komponenteille välitettävät arvot tulevat props-muuttujan kautta. Lisäksi import-lauseilla tuotavien komponenttien polku on korjattu.

3. Muokkaa src-kansion App.jsx-tiedostoa seuraavasti:

   • Poista tiedoston alusta Balance-, Booster, Header- ja Lemon-komponenttien import-lauseet.
   • Lisää tiedoston alkuun seuraava import-lause:

     import Clicker from './pages/Clicker';
     

   • Muuta komponentin return-lause seuraavanlaiseksi:

       return (
         <div className="root">
           <div className="root_content">
             <Clicker stats={stats} handleClick={handleClick} />
           </div>
           <Menu items={stats.itemstobuy} />
         </div>
       )
     

Näiden muutosten jälkeen sovellus toimii edelleen samalla tavalla kuin aiemmin.

Muutosten vienti versiohallintaan

Viedään viimeisimmät muutokset versiohallintaan.

git add .
git commit -m "siirtää sisällön Clicker-komponentiksi"

siirtää sisällön Clicker-komponentiksi -commit