A - béta v - cikkekben olyan bemutatása lesz a React és egyéb technológiáknak, melyekben elmondom én hogyan kezdtem el tanulni a React-ot pl. Azon felül hogy vettem egy kurzust Udemy-n vagy kaptam vagy 8 könyvet, ami nagyon sok hasznos dolgot takar, már a kezdeti fázisban be vagyok zsongva hogy alkossak is valamit. Először arra gondoltam hogy backend nélkül hozok létre egy sima kis portfolió site-ot, de annak nem sok értelmét látom Reactban csak simán, szóval emiatt megspékelem kis izgalommal is és a blogom kezdem el megírni. 

Ez az cikk arra szolgál, bemutassa a bénázásaim, hogy ne érezd azt, hogy mindenki úgy kezdi, hogy mindent tud egyből. Mivel kezdő vagyok a React és Node-ban is, emiatt az összes problémát le fogom írni, és azt is hogy mire kerestem rá, hol akadtam el, hogyan oldottam meg. Nem egy nap alatt fog megszületni a cikk, mivel nem egy napos tanulás eredményét irom majd le. 

Először is gágel a barátom, és rákerestem arra hogy: How to create a React App with a backend (A How to keresések elég fontosak, hogy jól tudjunk keresni neten), amire sok találat között próbáltam olyan platformot választani amiről már sokat hallottam jó értelemben. A freecodecamp-en nyitottam meg egy útmutatót mely elsőre hasznosnak bizonyul. Én az a fajta ember vagyok aki jobban szereti az olvasott tutorialokat, szakmai doksikat, mint a videókat. Ahogy építem az appot, mellette úgy írom a cikket egyből. A cikkben angolul írom azokat a kifejezéseket, amiket alapból angolul használunk magyar szóhasználatban is, ha ezekre nem tudod a válaszokat nézz utána, ezzel is fejlesztve az angol szakmai tudásod. 

Eszközök amikre szükségem lesz a freecodecamp szerint: 

1. Meg kell győzödnöm arról hogy van npm a gépemen, (erre egy biztos igen a válaszom, hiszen napi szinten használom a munkaim során, de végigmegyek ezeken is hátha valakinek ez is hasznos). Az "Ninja Pumpkin Mutants", vagy most éppen "Noxious Plant Miasma" az egy package manager, amit csomagok kezelésére használunk. (ezeket a neveket a npmjs.com logó fölötti fejlélcében olvashatod. :D ❤ ) 
   
   Az open source fejlesztők mindenhonnan használják az npmj.com-ot csomagok megosztására és kölcsönzésére, és sok cég használja az npm-et a privát fejlesztések kezelésére is. Maga az npm pedig egy javascript package manager Node JavaScript platform számára, npm install után szervezetten node_modules mappában megtalálhatóak a csomagok melyeknél a függőségeket (dependency) a node inteligenssen kezeli. Általában ezek közül a parancsok (commanc cli) közül hármat használunk leggyakrabban, npm init, npm install vagy az npm uninstall.
   
   Használata:
   
   Ha pl. akarjuk kezelni ezeket a függőségeket a projektünkben, akkor letrehoztuk ugye a projekt mappát, majd terminálba bemegyünk a mappa gyökerébe (cd project_name) majd nyomunk egy npm init-et, ezzel inicializáljuk (beindítjuk). Ez a háttérben egy exec műveletté alakul, sok kérdés megválaszolásával lértehoz egy package.json file-t, ami egy JSON-fájl, amely a Javascript/Node-projekt gyökerében található. A projektre vonatkozó metaadatokat tárolja, és a projekt függőségei, szkriptjei, verziói és még sok más kezelésére használják. Ezután az npm install  kiadásával lehúzzuk a projektünkbe ezt a csomagot, aminek a saját doksijában megtaláljuk az npm-re vonatkozó configurációs beállításokat. 
   
   
2. Kell egy code editor, IDE, én ez esetben a VSCode-ot használom, amit a cikk is ajánl nekem. 
3. Meg kell győzödnöm arról hogy van GIT a gépemre telepítve, ez is pipa. Ha nem használtad még a GIT-et soha, akkor először azt nézd át mire jó neked.  Ez szükséges lesz később az alkalmazásunk Herokuval (A Heroku egy felhőplatform, amely lehetővé teszi a számunkra, hogy alkalmazásokat építsünk, kihelyezzük az APP-unkat) való üzembe helyezéséhez. (deploy), és a kódunk verziókövetéséhez. 
   
4. És kell egy heroku account hogy később a segítségével teljesen ingyenesen közzétehessem az alkalmazásom. (ezt pillanatok alatt létrehoztam)

1. lépés: Létrehozom a Node (Express) backend-et

A gépem LINUX ubuntu, verziószáma: Ubuntu 22.04 LTS. (de Mac-en és Win-en is terminált használok, csak ott a git bash-t szoktam) Emiatt is, meg alapból is a terminál műveleteket preferálom, mert nekem gyorsabb parancsokat megtanulni, mint emlékezni hova kell kattintgatni GUI felületeken. A gépemen van egy work mappa azon belül létrehoztam két mappát, mkdir react_projects és azon belul mkdir coder_blog amiben a konkrét kód lesz. A coder_blog gyökerében a terminálba kiadom az npm init -y parancsot ami ugyanaz mint a sima init annyi különbséggel hogy ez egyből létrehozza a package.json fájlt. Majd nyomok egy code . - ot, ami megnyitja a vscoe-ot ott ahol kiadtuk ezt a parancsot, ez esetben az egész coder_blog mappát. 

• Létrehoztam egy mappát server néven, és ebbe elhelyezek egy index.js fájlt. 
• Express.js segítségével lérte kell hoznom egy webszervert, ami majd a 3001-es porton fog futni. 

// server/index.js

const express = require("express");

const PORT = process.env.PORT || 3001;

const app = express();

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

• Installálom az express-t az npi i expess paranccsal. Ezzel létrejön egy node_modules mappa, és egy package.lock.json fájl automatikusan generálva, ami részletesebben mutatja a csomag függőségeit, verzióját, frissítéseit. 
• Ezután a gyökér mappán belül a package.json-ralesz szükségünk, amibe létree kell hoznom a script-et amivel el tudom indítani a webszervert lokálisan. A script neve npm start lesz és a test helyére kerül a "script"-be. 

// server/package.json

...
"scripts": {
  "start": "node server/index.js"
},
...

•  Ha lefutattom az npm start scriptet  a terminálban akkor ezt az üzenetet kell kapnom: 

npm start

> node server/index.js

Server listening on 3001

2. lépés: API végpont létrehozása

• a Node és Express-t API-ként hasznéljuk majd.  Az alábbi kód végpontot hoz létre az /api útvonalhoz, amit az app.listen fuction elé helyezünk

// server/index.js
...

app.get("/api", (req, res) => {
  res.json({ message: "Hello from server!" });
});

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

 Ha valamit változtatunk a kódunkban,akkor ujra kell indítanunk a szervert. Ctrl + C és újra npm run start. 

Ezután írjuk be ezt az útvonalat a bongészőbe: http://localhost:3001/api és meg is kapjuk az üzenetet: {"message":"Hello from server!"}. 

3. lépés Hozzuk létre a frontend-et React-al. 

Ez az a rész ahol sok időt fogok tölteni, az-az amíg nem lesz meg a teljes frontend, nem megyek át a backendre. Annyi hogy az alapokat felépítem az alapján amit a freecodecamp is ír és valami kezdeti fázisu miniprojektet deployolok majd. 

• Nyitok egy másik tab-ot a terminálba (CTRL + SHIFT + T) majd beirom ezt a parancsot 
  
  npx create-react-app client
• Ezzel létrehoztam egy client névvel ellátott React projektet, minden függőséggel együtt. Ennek a package.json fájljába hozzá kell adunk egy proxy tulajdonságot a script-ek után, ami a hálózati kérésekért felel, tudatjuk az appunkkal hogy a szerverünk melyik porton fut. 

client/package.json

...
"proxy": "http://localhost:3001",
...

Ezután beleléptem a client mappába a terminálban (cd client) és futtatom a react start scriptet (npm run start) ami elindítja a localis feluletet ahol a frontend fut, ez esetben a 3000-es port. 

4. lépés: HTTP-kéréseket  kell küldenem a React appból a szervernek az /api végpont használatával, amit már korábban létrehoztam

Ehhez az src mappában található App.js komponenshez lépek, és HTTP kérést küldök a useEffect Hook használatával. (magyar). Magyarul talán úgy lehetne írni ezt hogy hatásokat kezelő objektum A useEffect hook. Esetünkben a data lesz egy hatás. 

A Fetch API használatával egyszerű GET-kérést küldök a backend-nek, majd az adatokat JSON-ként küldjük vissza. Ezt az adatot egy data változóba tároljuk el. 

Ez lehetővé teszi, hogy az üzenetet megjelenítsük oldalunkon, ha van. A JSX-ünkben egy feltételt használunk, hogy ha még nincsenek meg az adataink, akkor írjuk ki a „Loading...” szöveget.

• Átírom a // client/src/App.js fájlt.  és megjelenítem a {"message":"Hello from server!"} üzenetet. 

// client/src/App.js

import React from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetch("/api")
      .then((res) => res.json())
      .then((data) => setData(data.message));
  }, []);

  return (
    <section className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{!data ? "Loading..." : data}</p>
      </header>
    </section>
  );
}

export default App;

A useState Hook-al eltároljuk a data állapotát (állapotváltozó deklarálás), A változónkat data-nak hívják, de nevezhetnénk akárminek. A useState segítségével sikerül „megőrizni” bizonyos értékeket a függvényhívások között – egy új módja annak, hogy pontosan ugyanazokat a képességeket használjuk, amelyeket a this.state biztosít egy osztályban. Általában a változók „eltűnnek”, amikor a függvény kilép, de az állapotváltozókat a React megőrzi.A belső állapot egy React app elég fontos része. Ha a komponensen belül meghívjuk ezt a useState-et, az vissza fog térni egy két elemű tömbbel. A tömb első eleme az aktuális állapotot tartalmazza, a második eleme pedig egy function, amit ha meghívunk és beleteszünk értéket azzal  beállítjuk a következő állapotot. Ezt szokás array destructuring-el két változóba bekötni, hogy könnyebb legyen rájuk referálni. (const [data, setData] = React.useState(null);) Lehetőség van inicializálni a belső állapotot, a useStat functionba értéket bedobni. Ami az én kódomban a null. 
 
Ezeket az alapokat a Reacthoz egy udemy képzésen tanulom én is - React - The Complete Guide (incl Hooks, React Router, Redux)  Ezt még én szerencsére olcsóbban vettem, ha kell valakinek szivesen megadom a belépőm és tudja nézni igyenesen is, persze csak ha már én végeztem vele. Mert mutatja hogy hol járok. ill. volt már pár kisebb Reactos feladatom melóban, ami inkább max javítás volt, szóval láttam már Reactos komponenseket etc. de ez a freecodecamp-es anyag elég jól leir mindent, mint ahogy én most ezt magyarul is. egyelőre ennek az utasításait követem. Ha nem így lett volna már első lépésként git-be tettem volna a projektet mert így szoktam meg. Ill. van egy magyar programozó akinek figyelemmel kísérem a munkait pár éve és van egy kurzus oldala ahol szintén van react kurzus. 

folyt. köv.