React-sovelluksen asennus ja valmistelu

Tässä oppitunnissa aloitamme asentamalla ja valmistelemalla React-sovelluksen, koska tulevaisuudessa käytämme sitä yhdessä Reduxin kanssa. On olemassa nopeampia tapoja luoda React-sovelluksen malline Reduxilla (mikä muuten ei aina tarkoita helppoa, erityisesti aloittelijoille), jotka on listattu virallisessa dokumentaatiossa, mutta me etenemme alusta alkaen.

Aluksi luomme React-sovelluksen my-app käyttäen Viteä (tämä on trendikäs korvaaja Webpackille). Tätä varten avaamme päätteen ja syötämme seuraavat komennot (ehdotetuissa vaihtoehdoissa, jos sellaisia on, valitsemme Reactin ja sitten JavaScriptin):

npm create vite@latest my-app -- --template react
cd my-app
npm install

Käynnistetään luodun sovelluksen:

npm run dev

Avataan selaimessa ehdotettu linkki http://localhost:5173/ ja näemme tutun alkuruudun. Kaikki toimii.

Poistamme nyt ylimääräiset. Tyhjennetään kansio public. Kansiossa src jätämme vain main.jsx, index.css ja App.jsx (tyhjennämme index.css:n ja App.jsx:n sisällön kokonaan).

Tiedostossa index.html korvaamme otsikon tekstin seuraavalla:

<title>React Redux App</title>

Luo React-sovellus ja varmista, että se toimii.

Poista ylimääräiset tiedostot ja kansiot.