Első randi a React-el – Gyorstalpaló 1.

Ez lesz az első randink a React-el. Először telepíteni fogjuk, aztán egy kicsit távolabbról szemügyre vesszük. Még semmi komoly, nehogy elijesszük (magunkat) :).

A React telepítéséhez szükség van egyetlen előfeltételre. Feltéve, ha a saját gépeden akarsz garázdálkodni (mert vannak online „játszóterek” is, mint például a CodePen). Na, de most ne onlájnkodjunk, hanem játsszunk a saját gépen. Ehhez nem kell ide más, mint a Node.

Hogy ismételjem azt, amit egy másik bejegyzésben írtam:

„Tehát kell neked a node! A nodejs.org oldalon a Downloads menüpont alól tudod letölteni és telepíteni a Te operációs rendszerednek megfelelő NodeJS csomagot. Két fajta verzió érhető el mindig. Az egyik az LTS, azaz Long Term Supported. Ez az, ami a legstabilabb létező verzió, ennek letöltése AJÁNLOTT! A másik a Current, az aktuálisan a legfrissebb újításokkal rendelkező verzió. Semmiképp nem javasolt, hogy kereskedelmi forgalomba kerülő alkalmazást ezzel fejlesszünk, mert hibákat tartalmazhat.„

Hogyan kezdjem el a tanulást?

Ezen nem kell sokat filozolfálni: React alkalmazást kell csinálni :). Nekem legalábbis sosem jöttek be azok a módszerek, hogy olvassak el száraz dokumentációkat.

Szóval, ha nekiállsz és csinálod, akkor időközben belejössz. Ezzel sokkal, de sokkal többet lehet tanulni, mint könyvből vagy dokumentációból olvasva.

Ez persze nem azt jelenti, hogy a dokumentáció nem fontos! Sőt a React dokumentációja kifejezetten jó és van magyar nyelven is. Ráadásul tele példákkal. De azért hozzá kell tennem, hogy azok a példák is csak kiollózott kódrészletek, amik természetesen jól el vannak azért magyarázva.

Új alkalmazás készítése

A legelső dolog az legyen a Node telepítése után, hogy

• csinálsz a gépeden egy könyvtárat a React projektjeidnek
• belemész ebbe a könyvtárba
• indítasz egy parancssort, vagy terminált attól függ milyen rendszeren dolgozol (én Windows)
• és kiadod ezt a parancsot: npx create-react-app sajatAlkalmazasodNeve

A sajatAlkalmazasodNeve lehetőleg valami ékezet nélküli szöveg legyen. Ha követni szeretnéd azt, amit én csinálok egy több részből álló React-es gyorstalpalóban, akkor nyugodtan add neki ezt a nevet: cyberdyne-system

Tehát a teljes parancs, amit terminálban kiadsz:

npx create-react-app cyberdyne-system

Ha a Node fel van telepítve a gépedre, akkor el fog indulni a create-react-app programocska és a konzolba írva tájékoztat arról, hogy hogyan áll a telepítés. Amikor a végére ér, akkor annyit látsz a konzolban, hogy „Happy Hacking!”.

Kipróbáláshoz menj bele az alkalmazásod könyvtárába a következő parancssal (nálam ez így néz ki):

cd cyberdyne-system

Az alkalmazás indításához pedig add ki ezt:

npm start

Az ENTER lenyomása után kis idő eltelével az alapértelmezett böngésző programodban elindul az alkalmazás a localhost:3000 címen.

Az alkalmazásunk könyvtárszerkezete

Működik az előbb telepített első kis React alkalmazásunk. Ez akár kérdés is lehetne :). Ha igen, akkor örülünk neki.

Megnézzük, hogyan néz ki a gépen a React app könyvtárának felépítése. Csak azt említem meg, ami igazán fontos.

package.json

A fő könyvtárban találod. Ez egy olyan fájl, ami fontos infókat tárol a projektről / csomagról. Tehát, hogy mik azok a könyvtárak vagy csomagok, amik az alkalmazás működéséhez szükségesek. Ebből a fájlból első látásra két dolog érdekelhet minket. Az egyik a dependencies rész, a másik a scripts rész, ezt nézzük meg legelőször:

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

Itt vannak az alkalmazásunknak kiadható parancsok rövidített formái. Tehát amit az npm start paranccsal tudunk indítani, amögött a react-scripts start parancsa áll.

A react-scripts az egyik a rengeteg csomag közül, amit a create-react-app leráncigált a gépünkre és a node_modules könyvtárban lakik. Igazából mindegyik ilyen parancs mögött egy javascript fájl van, ha belemegyünk és megnézzük a node_modules/react-scripts/scripts tartalmát.

Egyelőre a másik említésre méltó szakasza a package.json fájlnak az a függőségek része:

"dependencies": {
    "@testing-library/jest-dom": "^5.16.2",
    "@testing-library/react": "^12.1.2",
    "@testing-library/user-event": "^13.5.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0"
  },

Erről is csak annyit most, hogy itt vannak azok a csomagok, amiktől függ az, hogy egyáltalán React alkalmazást tudjunk írni. Most nem is kell erről többet tudni.

package-lock.json

A főkönyvtárban található package-lock.json fájlban be vannak „fagyasztva” az alkalmazásban használt csomagok (és azok függőségeinek) verziói. Ez biztosítja azt, hogy minden fejlesztő aki az alkalmazást fejleszti, pontosan ugyanazokat a verziószámú csomagokat használja. Így nincs az, hogy Pisti a 16.8-as React-et, Béla pedig a 17-eset. Mindegyik azt a React verziót használja, amit a package-lock.json tartalmaz.

.gitignore

Szintén a főkönyvtárban van ez a konfigurációs fájl, ami azt mondja meg, hogy mi az amit nem szeretnénk, hogy a git push paranccsal felkerüljön a Github-ra.

src mappa

Az src mappában van az appunk forrása. Itt van az egész alkalmazás logikája. Ebben a könyvtárban, töltik a programozók idejüknek 99%-át. Ebből is az egyik legfontosabb az App.js, amit, ha nagyon leegyszerűsítünk, akkor ez tartalmazza az alkalmazás kódját. Persze, ahogy majd később látni fogjuk az App.js-t bármire le tudjuk cserélni.

public mappa

Ebből a legfontosabb számunkra az index.html. Ezen belül is a root id-val rendelkező HTML div elem. Ez a div tartalmazza az alkalmazásunkat. A React ebbe a div-be gyömöszöli azt bele. Ez az src mappa másik legfontosabb állományában, az index.js-ben történik meg. Az index az alkalmazásunk belépési pontja.

node_modules mappa

Ez a ne bántsd! könyvtár. Azokat a cuccokat tartalmazza, amiket az alkalmazás használ és te is használsz akkor, amikor az alkalmazásodat fejleszted. Jobb, ha békén hagyod, nem másolsz bele semmit, és nem törölsz belőle semmit.

Merre tovább?

Talán ez a bejegyzés már így is túl hosszúra nyúlt. Igyekeztem nem túl töményen fogalmazni és csak azokat említettem meg, amik tényleg a legfontosabbak. Semmi sallang, semmi túl tolás.

A következő az lesz, hogy elkezdjük az alapozást, megnézzük hogyan működik a React, hogyan dobog az ő kicsi szíve.

Vide jó 🙂

Aki jobban szereti a „mutogató” magyarázatot, annak itt egy videó is, amit ehhez készítettem: