Keskitaso🔧 Refaktorointi

Komponentin jakaminen osiin

Jaa suuri komponentti pienempiin osiin.

Prompti

Jaa seuraava React-komponentti pienempiin, uudelleenkäytettäviin osiin.

Komponentti:
[KOODI]

Kriteerit jakamiselle:
- Jokainen osa tekee yhden asian hyvin
- Loogiset kokonaisuudet
- Uudelleenkäytettävyys
- Helppo testata

Luo:
1. Jaetut komponentit
2. Props-rajapinnat (TypeScript)
3. Selitys jaosta

Suomenkieliset vinkit

Voit sekoittaa suomea ja englantia — teknisiä termejä ei tarvitse kääntää
Suomenkieliset promptit tuottavat suomenkielisiä koodikommentteja ja muuttujanimiä
Lisää 'vastaa suomeksi' promptin loppuun jos AI vastaa englanniksi

Muuttujat

Korvaa nämä hakasulkeissa olevat muuttujat omilla tiedoillasi:

[KOODI]

Esimerkki

Täytetty prompti

Jaa seuraava React-komponentti pienempiin, uudelleenkäytettäviin osiin.

Komponentti:
function ProductPage({ product }) {
  return (
    <div>
      <img src={product.image} alt={product.name} />
      <h1>{product.name}</h1>
      <p>{product.description}</p>
      <span>{product.price}€</span>
      <button onClick={() => addToCart(product)}>Lisää koriin</button>
      <div>
        <h2>Arvostelut</h2>
        {product.reviews.map(review => (
          <div key={review.id}>
            <span>{review.rating}/5</span>
            <p>{review.comment}</p>
            <span>{review.author}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Kriteerit jakamiselle:
- Jokainen osa tekee yhden asian hyvin
- Loogiset kokonaisuudet
- Uudelleenkäytettävyys
- Helppo testata

Luo:
1. Jaetut komponentit
2. Props-rajapinnat (TypeScript)
3. Selitys jaosta