Ensimmäinen React-sovelluksesi Vitellä

Näytän sinulle: projektin asetus

Vite (lausutaan “veet”, ranskaksi “nopea”) on työkalu joka valmistaa valmiin React-projektin luurangon puolestasi. Avaa terminaali ja siirry sinne minne haluat projektin (kuten työpöydälle):

cd Desktop
npm create vite@latest my-react-web -- --template react

Vite saattaa kysyä jotain – vahvista Enterillä. Sitten:

cd my-react-web
npm install
npm run dev -- --port 3901

• npm install lataa kaiken mitä projekti tarvitsee (kestää hetken – React ja apurit ladataan node_modules-kansioon).
• npm run dev -- --port 3901 käynnistää kehityspalvelimen. Terminaali näyttää osoitteen http://localhost:3901. Avaa se selaimessasi.

Näetkö pyörivän logon ja otsikon “Vite + React”? Onnittelut – ensimmäinen React-sovelluksesi pyörii! 🎉

Kierros projektissa

Avaa my-react-web-kansio VS Codessa (File → Open Folder). Siellä näyttää olevan paljon tiedostoja, mutta vain kolme on tärkeitä nyt:

Ohita loput toistaiseksi (älä koskaan avaa tai poista node_modules, package.json on projektin pakettilista).

Ensimmäinen muutos koodiin

Avaa src/App.jsx. Poista kaikki ja kirjoita:

function App() {
  const name = "Jake";

  return (
    <div>
      <h1>Hi, this is {name}!</h1>
      <p>This is my first React app.</p>
    </div>
  );
}

export default App;

Tallenna – ja sivu selaimessa muuttui itsestään. Tässä mitä katsot:

• App-komponentti on funktio joka palauttaa HTML:ää (tätä merkintää kutsutaan JSX:ksi).
• {name} – aaltosulkeet lisäävät JavaScriptiä HTML:ään. Mitä tahansa: muuttuja, laskutoimitus {2 + 3}, jopa ehto.
• export default App – “tarjoan tämän komponentin muille tiedostoille” (main.jsx on se joka ottaa sen).

JSX:ssä on kaksi omituisuutta joihin totut: class:n sijaan kirjoitat className (class on varattu sana JavaScriptissä), ja komponentin pitää palauttaa yksi käärivä elementti (siksi <div> ympärillä kaikkea).

Nyt sinun vuorosi 💪

1. Aseta projekti oppaan mukaan ja saa se käyntiin.
2. Muokkaa App.jsx:ä: otsikko nimelläsi, kappale siitä mitä rakennat, ja muuttuja age jonka näytät lauseessa I am {age} years old.
3. Poista tahallaan sulkutagi ja katso miltä virhe näyttää – Vite näyttää sen suoraan selaimessa rivinumerolla. Sitten korjaa se.
4. Pysäytä palvelin (Ctrl+C terminaalissa) ja käynnistä uudelleen (npm run dev -- --port 3901) – jotta koko sykli tulee tutuksi.

Mitä opit tästä oppitunnista

• npm create vite@latest asettaa projektin, npm install lataa paketit, npm run dev käynnistää localhostin.
• Koodia kirjoitat src/App.jsx:ään: komponentti on funktio joka palauttaa JSX:ää, {} lisää JavaScriptiä HTML:ään.
• JSX:ssä: className class:n sijaan, aina yksi käärivä elementti.

© 2026 Ing. Martin Polak / AlgoRhino · Sisällön käyttöehdot