A React egy olyan könyvtár, amely segítségünkre van az egyoldalas online alkalmazások front-end felületeinek összerakásában és létrehozásában, illetve kihasználja a virtuális DOM erejét.
A React a Facebook házon belüli projektje volt, és 2013-ban tették nyílt forráskódúvá. A ReactJS alkalmazása felfelé ívelő görbét mutat, mivel egyre többen ismerik fel az előnyeit. Különböző induló vállalkozások és már működő cégek is átveszik a technológiát, hogy fejlesszék technológiai eszköztárukat.
Azoknak, akik egy UNIX alapú rendszeren pl. Linux dolgoznak, könnyű dolguk van. A disztribúció lerakatából (repository) néhány kattintással mindent feltelepíthetnek. Ebben a cikkben lépésről lépésre bemutatjuk, hogyan telepítheted a Reactot Windowsra. Rengeteg cikk szól arról, hogyan kell beállítani a webfejlesztői környezetet MacOS-en, de nagyon kevés arról, hogyan kell Windowson telepíteni. Különösen akkor hiányzik egy jó kiindulópont, ha valaki Windowson szeretne belépni a React.js világába.
Előfeltételek
Ahhoz, hogy a React-ot Windows-ra is fel tudd telepíteni, gépednek legalább az alábbi minimális konfigurációval kell rendelkeznie:
- Windows XP, Windows 7 (32/64 bit) vagy újabb
- Minimum 4 GB RAM vagy több
- 10 GB szabad hely a merevlemezen
- Legalább egy böngésző Chrome, Firefox, Microsoft Edge etc.
- Node.js
- Működő internet kapcsolat, legalább 512kbps sávszélesség
- Legalább egy kódszerkesztő a programod teszteléséhez és a hibajavításhoz; pl. az alábbiak valamelyike (mi a Visual Studio Code-ot ajánljuk):
- Atom
- Sublime
- Visual studio code
Node.js és NPM Windows-on
Mivel a React fejlesztéséhez a Windowson JavaScriptet fogsz használni, a Node.js és az NPM telepítése elkerülhetetlen. A Node.js egy JavaScript futtató, amely lehetővé teszi a JavaScript futtatását a böngészőn kívül is. Az alapjául szolgáló Node csomagkezelő (NPM = Node Package Manager) segítségével a parancssorból a projektünkhöz szükséges könyvtárakat telepíthetünk, például a React.js-t. Az alábbiakban bemutatjuk majd, hogyan működik ez a parancssori telepítés a Windows-felhasználók esetében.
A Node.js Windowsra történő telepítéséhez a Node.js weboldalára kell mennünk, hogy letölthessük azt a Windows Node verziót, amely a legtöbb felhasználó számára ajánlott. Ezt azután telepíteni kell. Az NPM része a letöltött és telepített Node.js csomagnak.
Megjegyzés: A Node.js telepítésének és kezelésének alternatív módja a Windows gépen az nvm-windows. Ha még csak most kezded a webfejlesztést, kezdetben nem javasolnánk. Később azonban nagy segítséget jelenthet. nvm-windows a Unix rendszerekhez készült népszerű nvm csomag megfelelője. A neve Node Version Manager. Segít a Node.js verzió frissítésében és több Node.js verzió kezelésében.
Visual Studio Code Windowson
Rengeteg kódszerkesztő és integrált fejlesztési környezet (IDE = Integrated Development Environment) létezik webes alkalmazások fejlesztésére. Személyes, projekt- vagy vállalati igényeidtől függően választhat a könnyű szerkesztőprogramoktól a teljes értékű IDE-kig. A Visual Studio Code egy köztes megoldás. Sok Windowson, de MacOS-en és Linuxon is jól használható alkalmazás. Ezért mi is ezt ajánljuk a React alkalmazások fejlesztésének megkezdéséhez Windowson. A telepítés Windows gépen egyszerű: Navigáljunk a Visual Studio Code hivatalos weboldalára, és töltsük le a VS Code legújabb, 32 vagy 64 bites verzióját. Ezt követően telepítsük, és ellenőrizzük, hogy minden rendben működik-e, amikor elindítjuk.
Ha egy másik szerkesztőt/IDE-t szeretnél használni, az szíved joga, de ne feledd, hogy a következő lépések közül néhány a Visual Studio Code-ra épül. Ha jártas vagy a számítástechnikában, ezeket a lépéseket a saját szerkesztődben/IDE-dben te is meg tudod tenni.
Node és NPM a VS Code integrált termináljában
Ha még csak most kezded a webfejlesztést, hozz létre egy külön mappát a gépén az összes webfejlesztési projekted kezelésére. Rajtad múlik, hogy a mappát almappákra osztod-e. Lehet például egy mappa a React alkalmazásoknak, egy másik pedig a sima Node.js alkalmazásoknak. Ha megvan a projektek mappája, nyisd meg azt a VS Code programból.
A Visual Studio Code-ban meg kell tudnod nyitni egy fület, amelynek alján a "Terminal" nevű lap van. Ez az integrált parancssoros ablak (terminal) a Visual Studio Code-ban, ahol telepítheted a node csomagokat az NPM segítségével, vagy hogy elindíthatod/tesztelheted a projektedet. Rajtad áll, hogy az integrált terminált vagy egy másik parancssori felületet használsz a Windows gépeden.
Ezután ellenőrizd, hogy a Node.js telepítése Windowsra sikeres volt-e. A parancssorba írd be a következő parancsokat. Ezeknek ki kell adniuk a Node.js és az NPM verzióit.
node --version npm --version
Megjegyzés: A legtöbb esetben simán működnie kell. Ha a node vagy az npm érvénytelen parancs választ adnak, akkor a Windowsban ellenőrizni kell a környezeti változókat.
A „create-react-app” a React számára Windowson
Most már telepítheted az első node csomagodat az npm segítségével a parancssorban. Rendszerszinten (globálisan) telepíted a -g jelzővel. A globális telepítés miatt mindig hozzáférhetsz majd a parancssorban. Később, amikor a -g jelző nélkül telepítesz egy node csomagot a projektedhez, csak a projektedben lévő node csomaghoz (node modulhoz) lesz hozzáférésed. Most a parancssoron (a Visual Studio Code-ban) írd be a következő parancsot a create-react-app telepítéséhez:
npm install -g create-react-app
A create-react-app lehetővé teszi a React alkalmazások előzetes konfiguráció nélkül történő indítását. Nincs értelme túl korán belebonyolódni a Webpack és a Babel révén történő eszközhasználatba. Ha elolvasod a "The Road to React" című szöveget, akkor a create-react-app-ot is használni fogod. Ez a legegyszerűbb módja a React megtanulásának anélkül, hogy az összes körülötte lévő eszközzel foglalkoznod kéne. Az első React.js alkalmazásodat az npx segítségével (ami az npm-en keresztül érkezik) Windowson a create-react-app segítségével töltheted be, ha megadod neki az alkalmazásod nevét a parancssorban:
npx create-react-app my-app
Ezután a parancssoron belül átlépsz a projektbe, és elindíthatod azt az npm-el:
cd my-app npm start
A parancssornak egy olyan kimenetet kell visszaadnia, amely megmutatja, hogy a böngészőben hol találhatod meg az alkalmazást. Az alapértelmezettnek a localhost:8080-nak kell lennie. Ha csak IE-t vagy Edge-et használsz a Windows gépeden, akkor tudom ajánlani, hogy telepítsd a Chrome-ot is, hogy elérd a fejlesztői környezetet és a React Developer Tools nevű Chrome bővítményt. Másrészt most előnyben vagy a MacOS fejlesztőkkel szemben, mert az Internet Explorerben és az Edge-ben is elvégezheted a webes alkalmazásaid hibajavítását (debug).
Ha most még csak megtanulni szeretnéd a Reactot, akkor elkezdheted olvasni Az út a React megtanulásához (The Road to learn React) című angol nyelvű online könyvet. Ez egy gyakorlatias könyv, amely lépésről lépésre végigvezet egy React alkalmazás felépítésének lépésein. Útközben a JavaScript ES5-ről a JavaScript ES6-ra fogsz áttérni, és rengeteg gyakorló feladatot kapsz, hogy fejleszthesd a React-ismereteidet.
Választható: Git for Visual Studio Code és Windows
Előfordulhat, hogy egy bizonyos ponton meg akarod osztani a projektjeidet a GitHubon, vagy együtt akarsz működni másokkal a git verziókezelőn keresztül. Ha a GitHubot szeretnéd használni, mint a választott platformot, akkor a hivatalos weboldalukon keresztül hozz létre egy fiókot. A GitHub egy közösségi fejlesztői platform, ahol követhetsz más fejlesztőket és közreműködőket, lájkolhatod (csillagozhatod) a projektjeiket, vagy együttműködhetsz nyílt forráskódú projektekben más emberekkel.
Ahhoz, hogy a git elérhető legyen a parancssorban és a Visual Studio Code-ban, telepítened kell a git csomagot. Az összes utasítást megtalálod a hivatalos git weboldalon. Itt is le kell töltened az operációs rendszeredhez tartozó telepítőt a 32 vagy 64 bites verzióval. Ezt követően a parancssorban ellenőrizni tudod a git verzióját:
git --version
Ha nem jelenik meg a Visual Studio Code-ban, akkor lehet, hogy újra kell indítanod a programot. Ezt követően láthatónak kell lennie, hogy a Visual Studio Code rendelkezik git integrációval is. Az integrált git használata nagyon kényelmes, de most már a parancssorból is használhatjuk azt.
A ReactJS egy TypeScript nyelven írt könyvtár. A JavaScript modern verziójának szintaxisát használja, amelyet az ES6 és magasabb verziója ír le.
A ReactJS segítségével épített alkalmazások az egyszeri újrafelhasználhatóság elvét alkalmazzák. Ez arra az elvre épül, hogy a weboldalak és alkalmazások komponensekből, egyirányú folyamattal épüljenek fel . A Reactben létezik az állapotok és a megváltoztathatatlanság fogalma. A szülő és a gyermek komponensek tekintetében a komponensek hierarchiával rendelkeznek. A React esetében egy komponens úgy képzelhető el, mint egy kódrészlet, amely a tiszta függvények elvén alapul.
