Frontend vs Backend

A modern weboldalak két részre bomlanak fel, ezek pedig a Frontend és a Backend. Ez a kettő rész teljesen el van különítve egymástól, ámbár szorosan együttműködnek egy "csatornán" keresztül, amit API-nak hívunk. Lényegében a Frontend felel a weboldal megjelenéséért, ezt látja a felhasználó, a Backend pedig az oldalon megfelelő adatokért. Nagyon leegyszerűsített példával elmondható az, hogy ha elmegyünk boltba venni valamit akkor a bolt a Frontend, mivel mi itt tudunk interakcióba lépni a termékekkel, viszont azt nem látjuk hogyan került a polcra a termék és a gyártási folyamatát sem (Backend).

Pár szó a Reactról

A React egy JavaScript nyelven alapuló Frontend keretrendszer, ami alkalmas felhasználói felületek építésére komponensekből. A React "gyárilag" csak az állapot kezelésen és megjelenítésen dolgozik, de számtalan további könyvtárral tudjuk bővíteni a tudását, mint például az útvonal választás.

Mik a komponensek?

A komponenseket az oldal "Lego kockáinak" lehetne mondani, mivel egy weboldal több komponensből épül fel, ezeknek lehetnek saját tulajdonságaik, viselkedésük, erről mutatok egy példát.

De miért jó nekünk ez a felépítés?

Mivel így elég egyszer megírnunk a kép komponenst, és amikor a listában létrehozzuk őket, elég csak átadni a kép címét, amit meg kell jelenítenie, nem kell külön megírnunk őket egyesével. Illetve, ha esetleg egy másik oldalon is szeretnénk megjeleníteni mondjuk az első 4 képet, akkor elég csak beimportálni a kép komponenst a megfelelő értékekkel.

Mik azok az állapotok? 

Az állapotokkal lehet megadni, hogy mikor frissüljön az oldalunk tartalma anélkül, hogy újratöltenénk a teljes oldalt, illetve lehetőségünk van csak egy adott komponenst frissíteni. Ha maradunk a fenti példánál és beírunk valamit a kereső komponensbe, akkor a képlista komponensben szűrésre kerülnek a képek anélkül, hogy újra kellene frissítenünk az oldalt teljesen.

Telepítés (önmagában)

Szükséges szoftverek

• XAMPP webszerver csomag (8.1.4), ez tartalmazza az Apache2 webszervert, illetve egy MySQL adatbázis szervert, telepítése egyszerű, végig next majd install.Itt viszont van egy kisebb hiba, amit ki kell javítanunk. Ugyanis, ha bezárjuk a programot hibaüzeneteket kapunk.Ahhoz hogy ezt megszüntessük, meg kell nyitni a xampp mappáját (alapértelmezetten C:\xampp), itt a xampp-control.ini file-ra jobb kattintunk (fogaskerék ikonos) -> tulajdonságok -> Biztonság -> Szerkesztés és bepipáljuk Mindenkinél az Írást -> Alkalmaz -> Ok -> OkHa ezt megtettük, többet nem találkozhatunk a fentebb lévő hibával.
• Visual Studio Code, programozói felület, ebben fogjuk írni a kódokat. Telepítése egyszerű.Ha fent van, nyissuk meg és töltsünk le benne egy bővítményt, ami a munkánkat fogja segíteni.Bal oldalt nyomjunk rá a 4 kockás ikonra, majd a keresőbe írjuk be, hogy "react" és nyomjunk rá az installra.
• NodeJS (16.14.2) javascript rendszerre, ez szükséges az alkalmazásunk futtatásához

Ha ezekkel megvagyunk nem árt letesztelni hogy sikerült-e a telepítés. Ezt úgy tehetjük meg hogy nyitunk egy parancssort (startmenü keresőbe Node.js command prompt), majd írjuk be az alábbi sorokat:php -vnode -vnpm -v

Ha kiírja a verziót akkor itt már nincs több dolgunk viszont, ha hibát ír:

Nyissuk meg a rendszer változóit, ezt úgy tehetjük meg hogy beírjuk a keresőbe, hogy környezeti változók, ha bejött az ablaka akkor pedig Speciális -> Környezeti változók itt a Rendszerváltozók alatt keressük meg a Path változót, jelöljük ki majd Szerkesztés, itt adjuk hozzá egyesével az eléréseinket az "Új" opcióval. Ha ez megvolt Ok mind2 ablakon és már menni is fognak a parancsok.

Az első különálló projektünk

Ha sikeresen feltelepítettünk mindent, akkor már lassan a célban vagyunk.Elsőnek nyissuk meg a XAMPP alkalmazást, majd az Apache sorban nyomjunk rá a startra, ilyenkor elindul a webszerverünk

Majd nyissunk meg egy parancssort a fentebb említett módon (start menü keresőbe Node.js command prompt), majd lépjünk be a xampp mappánkba az alábbi paranccsal: cd c:\xampp\htdocs

A htdocs mappában vannak a webszervernek a fájljai.Hozzuk létre a legelső projektünket az alábbi sorral:

npx create-react-app my-app

Ilyenkor szól nekünk hogy fel kell telepíteni a react packaget, ezt úgy tehetjük meg, hogy nyomunk egy y és entert a parancssorban, ha lefutott, írjuk be a következő sort hogy belépjünk a projektünk mappájába:

cd my-app

Ahhoz, hogy elinduljon a react applikációnk adjuk ki a következő parancsot:

npm start

Itt lehet, hogy engedélyt kér a tűzfalhoz, ezt adjuk meg neki, ha pedig minden sikeresen lefutott meg fogja nyitni a böngészőnket, és ezt kell látnunk:

Ha le szeretnénk állítani, akkor a parancssorban nyomjunk CTRL+C kombinációt, utána írjunk be egy y-t és enter.

Telepítés (Laravel-lel)

Szükséges szoftverek

A fentebb említetteken kívül (XAMPP, VSCode, NodeJS) szükséges a Composer nevű PHP csomagkezelő, az oldalán célszerű az installer-t választani, itt csak nyomogatni kell a továbbra.

Ha sikerrel jártunk a fentebb leírt módon nyissunk meg egy konzolt, és írjuk be hogy composer -v, ilyenkor látnunk kell a verziószámát.

De, ha nem látjuk írjuk be a környezeti változókba az elérését (ezt fentebb leírtam, hogy hogyan kell) az alapértelmezett elérése:

C:\ProgramData\ComposerSetup\bin

Ezután következhet a Laravel telepítés.

Nyissunk meg egy parancssort a fentebb említett módon (start menü keresőbe Node.js command prompt), majd lépjünk be a xampp mappánkba az alábbi paranccsal: cd c:\xampp\htdocs

Majd töltsük le a Laravel-t a következő paranccsal:

composer global require laravel/installer

Hozzunk létre egy új Laravel projektet (itt a react-laravel a projekt neve):

laravel new react-laravel

Ha elkészült, menjünk bele a mappájába.

cd react-laravel

A biztonság kedvéért adjunk meg 2 parancsot:

composer i

npm i

Ezekről a parancsokról a későbbiekben bővebben szó lesz.

Teszteljük le a Laravel működését:

php artisan serve

Írjuk be a böngészőbe, hogy 127.0.0.1:8000, ilyenkor a Laravel oldalának kell megjelennie:

Ha sikeresen betöltött, menjünk vissza a konzolunkba és nyomjuk meg a CTRL+C-t, hogy bezárjuk a szervert.

React telepítés

Írjuk be az alábbi sorokat:

composer require laravel/ui

php artisan ui react

npm install resolve-url-loader@^5.0.0 --save-dev --legacy-peer-deps

"Buildeljük" le az oldalunkat:

npm install && npm run dev

Nyissuk meg a VSCode-ot:

code .

Írjuk át a /resources/views/welcome.blade.php-t az alábbi módon:

Töröljük ki a body teljes tartalmát,majd írjuk be az example div-et és a script elérését az alábbi kód alapján:

Majd mentsük le a CTRL+s megnyomásával, menjünk vissza a konzolunkra, buildeljük le az oldalt és indítsuk el a szervert:

npm run dev

php artisan serve

Teszteljük le a React működését, írjuk be a böngészőbe hogy 127.0.0.1:8000, ilyenkor az alábbi oldalt kell látnunk:

Ez az első React komponensünk, amely a Laravel keretrendszerrel együttesen működik.

Ennek a komponensnek a forrása a resources / js / components / Example.js fájlban található.