React projekt beállítása a Create React App segítségével

React az egyik legnépszerűbb JavaScript-könyvtár front-end alkalmazások fejlesztéséhez. Ez egy nyílt forráskódú könyvtár, amelyet eredetileg a Facebook fejlesztett ki. A React gyorsan népszerűvé vált a gyors alkalmazások létrehozásában a JSX – egy olyan programozási paradigma, amely a JavaScriptet HTML-szerű szintaxissal ötvözi.

Korábban egy React projekt beállítása bonyolult folyamat lett volna. A következő összetevők manuális konfigurálását igényelte:

• Egy build rendszer
• Kód transzpiler (a modern szintaxisokat a böngésző által olvasható kódokká alakítja)
• A projekt alapvető könyvtárszerkezete

Szerencsére azok az idők már rég elmúltak, köszönhetően a Create React App. Ez egy csodálatos eszköz, amely automatizálja mindezeket a lépéseket. A Create React App gondoskodik a kód transzpilálásáról, ellenőrzéséről (linting), teszteléséről és a build rendszerekről. Emellett tartalmaz egy szervert is, amely támogatja a hot reloadingot, ami a weboldalak frissítését jelenti a változtatások elvégzésekor. Természetesen mindez egy szervezett könyvtárszerkezeten belül történik.

Röviden, nem kell átmenni az olyan build rendszerek manuális konfigurálásának nehézségein, mint a Webpack, vagy az olyan transzpilerekén, mint a Babel. Mivel kevesebb dolog miatt kell aggódnod, teljesen a front-end fejlesztésre koncentrálhatsz. A Create React App lehetővé teszi, hogy minimális előkészülettel vágj bele a React használatába.

Ebben az útmutatóban bemutatjuk, hogyan kell használni a Create React App-ot, és hogyan hozhatsz létre egy működő alap React alkalmazást. Ez alapul szolgálhat bármely jövőbeli alkalmazásprojekthez.

Előfeltételek

Az ebben az útmutatóban bemutatott lépések végrehajtásához előzetesen konfigurálnod kell a következő szoftvereket.

• • Egy megfelelően konfigurált Ubuntu szerver. Követheted a Ubuntu szerver konfigurálása a CloudSigma-n.
  • A legújabb verziójú Node.js telepítve. Itt található egy lépésről lépésre követhető útmutató a Node.js telepítéséről Ubuntu-ra.

1. lépés: Dedikált npm projektkönyvtár létrehozása

A Node.js csomagokhoz az npm az alapértelmezett csomagkezelő. Az npm eszközt fogjuk használni egy dedikált projektkönyvtár létrehozásához. Ez olyan fontos fájloknak ad majd otthont, mint a package.json, amelyek a projekttel kapcsolatos összes metaadatot és a további Node.js függőségi modulokat tárolják. A JSON a JavaScript objektumokon alapuló adatmegosztás szabványos formátuma. Lásd ezt az útmutatót, ha többet szeretnél megtudni a JSON-ról.

Először hozz létre egy dedikált könyvtárat:

Ezután megmondjuk az npm-nek, hogy indítson el egy fejlesztői környezetet a fájlon belül. Ez létrehozza a projekthez szükséges package.json fájlt. Válts könyvtárat:

Futtasd az npm init parancsot:

Megjegyzés: ha azt szeretnéd, hogy ez a könyvtár egy git tárhely része legyen, akkor ajánlott azt először beállítani. Az inicializáló szkript automatikusan észleli azt, és mindent ennek megfelelően konfigurál. Ha végzett, lennie kell egy package.json fájlnak a könyvtárban. Ellenőrizd egy szövegszerkesztővel:

2. lépés: React projekt létrehozása a Create React App segítségével

Ebben a lépésben meghívjuk a Create React App-ot a minta React projektünk létrehozásához. Ez a szkript mindent átmásol egy új könyvtárba az összes függőséggel együtt. Az npm csomagkezelőhöz tartozik az npx eszköz is. Ez a futtatható csomagok futtatására szolgál. Ezzel fogjuk futtatni a Create React App szkriptet anélkül, hogy ténylegesen letöltenénk a projektet.

A végrehajtás futtatni fogja a create-react-app parancsot a megadott könyvtárban. Emellett futtatni fogja az npm install parancsokat a függőségek telepítéséhez. Az egyszerűség kedvéért a cloudsigma-react-react-tutorial nevet fogjuk használni. Futtasd a következő parancsot:

A folyamat végén a következő értesítést fogod látni. Ez a sikeres telepítést jelző üzenet. Azt a helyet is jelzi, ahol a projekt létrejött.

3. lépés: A React-Scripts alkalmazása

Most röviden áttekintjük a különböző react-scripteket, amelyek a telepítés során lettek telepítve.

• • Lefuttatjuk a test scriptet a tesztkód végrehajtásához.
  • A build script létrehozza a projektünk minifikált verzióját (az éles környezethez).
  • Végül az eject script teljes ellenőrzést biztosít a testreszabás felett.

Először ellenőrizze a React projektkönyvtár tartalmát:

Íme az egyes fájlok leírása:

• • node_modules/: Ez a könyvtár tartalmazza az összes külső JavaScript könyvtárat, amelyet az alkalmazás használni fog. Ritkán szükséges itt babrálni.
  • public/: Néhány alapvető HTML-, JSON- és képfájlt tartalmaz. Ez szolgál a projekt gyökereként.
  • src/: Ez a könyvtár tartalmazza a projektünk React JavaScript kódjait. Itt fogjuk tölteni az időnk nagy részét. Ezt a könyvtárat részletesebben az útmutató következő részében fogjuk felfedezni.
  • .gitignore: Ez egy olyan fájl, amely leírja, hogy a git mely könyvtárakat fogja figyelmen kívül hagyni, például a node_modules könyvtárat. Általában jobb kizárni azokat a könyvtárakat, amelyek nagy fájlokat tartalmaznak, vagy olyan naplófájlokat tárolnak, amelyeket nem szükséges bevonni a verziókezelésbe. Ebben az esetben néhány React-specifikus könyvtárat is tartalmazni fog.
  • README.md: Ez egy markdown fájl, amely sok hasznos információt tartalmaz a Create React App-ról. Például tartalmazza a parancsok összefoglalóját és a haladó konfigurációhoz vezető linkeket. Egyelőre nincs dolgunk vele. Ahogy azonban a projekt halad előre, további dokumentációt fog hozzáadni a projekthez.

A package.json és package-lock.json fájlokat az npm használja. A kezdeti npx parancs futtatásakor jött létre az alapprojekt. Amikor a további függőségek telepítésre kerültek, létrejött a package-lock.json. npm a package-lock.json fájlt használja annak biztosítására, hogy a csomagok pontosan megegyezzenek a verziókkal. Így ha valaki más telepíti a projektet, ő is teljesen azonos függőségeket kap. Mivel ez automatikusan jön létre és kezelődik, ritkán kell hozzányúlnia.

Az utolsó fájl, amiről beszélnünk kell, a package.json. Ez metaadatokat tartalmaz a projektről. Például a metaadatok tartalmazhatják a projekt címét, verziószámát és függőségeit. Tartalmazza azokat a scripteket is, amelyeket a projekt futtatásához használhat. Ellenőrizze a package.json fájl tartalmát:

Ez egy JSON fájl, különböző objektumokkal. Nézze meg a scripts objektumot. Négy különböző scriptet tartalmaz:

• • start
  • build
  • test
  • eject

Ezek a scriptek fontosságuk szerint vannak felsorolva. A start script elindítja a helyi fejlesztői szervert. A következőkben részletesen bemutatjuk, hogyan használhatja a többi scriptet.

• • The Build Script

Egy npm script futtatásához a parancsszerkezet a következő:

A build script futtatásához használja a következő parancsot:

Ez elindítja a kódok használható csomaggá történő fordításának folyamatát. Ha végzett, ellenőrizze a kimeneti könyvtárat:

Vegye figyelembe, hogy egy új build/ könyvtár érhető el. Ez a többi fájl minifikált és optimalizált verzióját tartalmazza. Javasoljuk, hogy tegye be a .gitignore fájlba, mivel a build script segítségével bármikor újra előállíthatjuk.

• • The Test Script

A test script azon scriptek közé tartozik, amelyek futtatásához az npm esetében nincs szükség a run paraméterre. Azonban azzal is jól fog működni. Futtatásakor ez a script elindít egy Jest nevű tesztfuttatót. A tesztelő megkeresi az összes olyan projektfájlt, amelynek a kiterjesztése .spec.js vagy test.js , és lefuttatja ezeket a fájlokat.

A következő npm parancs fogja futtatni a test scriptet:

Néhány dolgot érdemes megjegyezni a kimenetben. Emlékszik, hogy a tesztfuttató csak bizonyos kiterjesztésű fájlokat keres? Ebben az esetben csak egyetlen tesztcsomag van (csak egy fájl .test.js kiterjesztés). Csak egyetlen tesztet tartalmaz. A Jest képes automatikusan felismerni a teszteket a kódhierarchiában, így bátran beágyazhatja a teszteket egy könyvtárba.

Ezenkívül a Jest nem csak egyszer futtatja le a tesztet, majd kilép. Folyamatosan futtatja a tesztet a terminálban. Ha bármilyen változtatás történik a forráskódban, újra lefuttatja a teszteket. A Jest azt is lehetővé teszi, hogy korlátozza, mely tesztek fussanak le. Például a 0 megnyomásával utasíthatja a Jestet, hogy csak a megváltozott fájlokat tesztelje. Ahogy a tesztcsomagok növekednek, ez az opció rengeteg időt takarít meg. A Jest tesztfuttatóból való kilépéshez nyomja meg a q.

• • Az Eject szkript

A eject szkript átmásolja az összes függőséget és konfigurációs fájlt a projektbe, teljes irányítást biztosítva a kód felett. Ezzel azonban eltávolítja a projektet a Create React App integrált eszközláncából. Ha egyszer lefuttatta, nincs lehetőség a visszavonására.

A Create React App előnye, hogy leveszi a válláról a számos konfiguráció terhét. Bármely modern JavaScript-alkalmazás felépítéséhez rengeteg, egymással együttműködő eszközre van szükség. A Create React App kezeli az összes konfigurációt Ön helyett, így a projekt ejectelése azt jelenti, hogy ezután mindent manuálisan kell elvégeznie.

A Create React App egyik észrevehető hátránya, hogy mivel az összes konfigurációt maga kezeli, nem teszi lehetővé a projekt teljes testreszabását. A legtöbb projekt esetében ez nem jelent problémát. Ha azonban teljes mértékben kézben szeretné tartani a projektet, akkor ki kell ejectelnie a kódot. Az ejectelés után nem fog tudni frissíteni a Create React App új verzióira. Minden fejlesztést manuálisan kell kezelnie.

4. lépés: A szerver elindítása

Most elindítjuk a helyi szervert, és futtatjuk a projektet egy webböngészőben. A szerver elindításához egy másik szkript áll rendelkezésünkre. A végrehajtásához nincs szükség az npm run parancsra. Futtatásakor a szkript elindít egy helyi szervert, futtatja a projekt kódját, elindít egy figyelőt (watcher), és figyeli a kód változásait. A változások közvetlenül megjelennek a böngészőben. A következő parancs elindítja a szervert:

A kimenet megmutatja azt az URL-címet, amelyen a projektet böngészőben megtekintheti. Különböző információkat is mutat a futó projektről. Nyissa meg az URL-t egy böngészőben:

Ahogy a kimenet mutatja, a Create React App a 3000 portot használja a projekt kiszolgálására. Ha a port már használatban van, a Create React App a következő elérhető portot fogja használni. Ha be van állítva tűzfal, annak engedélyeznie kell a forgalmat a 3000 portra (vagy arra a portra, amelyet a Create React App jelez). További információkat tudhat meg az UFW tűzfal kezeléséről itt.

A szerverből való kilépéshez nyomja meg a Ctrl+C billentyűkombinációt a terminálablakban. Ez leállítja a futó folyamatot (a szerverpéldányt).

5. lépés: A kezdőlap módosítása

Ezután megtanuljuk, hogyan módosíthatjuk a public/ könyvtárban tárolt kódokat. Ez tartalmazza az alap HTML oldalt, és a projekt gyökereként szolgál. Bár a jövőben lehet, hogy nem kell tovább szerkesztenie, ez szolgál a projekt alapjául.

Először indítsa el a szervert az npm paranccsal, majd lépjen a public/ könyvtárba:

A könyvtár olyan fájlokat fog tartalmazni, mint a favicon.ico, logo192.png, logo512.png stb. Ezek olyan ikonok, amelyeket a weboldalt meglátogató felhasználó látna a lapján, böngészőjében vagy telefonján. A böngésző automatikusan kiválasztja a megfelelő méretűt. Idővel majd lecseréli őket a projektjének megfelelő ikonokra. Egyelőre hagyjuk őket békén.

A manifest.json fájl strukturált metaadatokat tartalmaz. Leírja a projektet, felsorolja az elérhető ikonokat és egyebeket.

A robots.txt fájl információkat tartalmaz a webes keresőrobotok számára. A keresőrobotok végigpásztázzák a világhálót, és indexelik az oldalakat a keresőmotorok számára. Nincs szükség a fájl módosítására, hacsak nincs rá különösebb oka. Például előfordulhat, hogy bizonyos, konkrét tartalomra mutató URL-eket szeretne nehezebben hozzáférhetővé tenni. Adja hozzá a helyet a robots.txt fájlhoz, és a keresőmotorok nem fogják indexelni.

Az index.html az alkalmazásunk gyökere. Amikor hozzáférünk az alkalmazáshoz, ez az a fájl, amely kiszolgálásra kerül. Ezt a fájlt látja a kijelzőn. Vessünk rá egy gyors pillantást. Nyissa meg egy szövegszerkesztőben:

Ez egy meglehetősen rövid fájl. Vegye figyelembe, hogy nincsenek képek vagy szavak a <body> részben. A React a saját motorjával építi fel ezeket a tartalmakat, és JavaScript segítségével fecskendezi be őket. A Reactnak azonban tudnia kell, hová kell befecskendeznie a kódot. A index.html fájl szolgál erre a célra.

Változtassuk meg a <title> elemet erre: My React App:

Ezután mentse el a fájlt, és zárja be a szerkesztőt. Most ellenőrizze a weboldalt a böngészőben:

Mint látható, a lap címe megváltozott erre: My React App. Ha nem változott meg automatikusan, töltse be újra az oldalt az F5 vagy Ctrl+R.

Térjünk vissza a szövegszerkesztőhöz. Minden React projektnek egy gyökérelemből kell indulnia. Egyetlen oldalon több is lehet belőlük. Azonban legalább egy kötelező. Ez mondja meg a Reactnak, hogy hová tegye az összes generált HTML kódot. Az index.html fájlunkban keresse meg a <div id="root"> elemet. Ez az a <div>, amelyet a React a jövőbeni változtatásokhoz használni fog. Próbálja meg megváltoztatni az id értékét erről: root erre: base:

 

 

Ezután frissítse az oldalt a böngészőben. Nem fog megjelenni semmilyen tartalom. Ahogy a Firefox Webfejlesztői eszközei mutatják, hibát jelez:

Térjen vissza a szövegszerkesztőhöz, és változtassa vissza az id értékét erre: root:

6. lépés: Címsor tag és stílusmódosítások

Eddig elindítottuk a helyi szervert, és kisebb változtatásokat végeztünk a gyökér HTML fájlon. Most a src/ könyvtárban található React komponensekkel fogunk dolgozni. Módosításokat fogunk végezni a CSS és JavaScript kódokon. A változtatások automatikusan érvényesülnek a hot reloading (gyors újratöltés) segítségével.

Ha a szerver leállt, indítsa el az npm segítségével. Ezután nézze meg a src/ könyvtár tartalmát:

Több JavaScript és CSS fájl is található itt. Egyenként végigmegyünk rajtuk.

• ServiceWorker.js

Ez egy fontos fájl, ha progresszív webalkalmazásokat (PWA) szeretne készíteni. Ez a service worker különféle funkciókat kínál, mint például a push értesítések, offline gyorsítótárazás stb. Egyelőre hagyjuk így.

• SetupTests.js és App.test.js

Ahogy a fájlok elnevezése is sugallja, ezeket a fájlok tesztelésére használják. Amikor futtattuk a test szkriptet az npm segítségével, az ezeket a fájlokat futtatta. A setupTests.js fájl tartalmaz néhány egyedi expect metódust.

Nézzük meg az App.test.js fájlt. Nyissa meg egy szövegszerkesztőben:

Egy alapvető tesztet tartalmaz, amely azt vizsgálja, hogy a learn react kifejezés szerepel-e a dokumentumban. Ha nyitva van a böngészőlap, láthatja ezt a kifejezést az oldalon. Más egységtesztekkel ellentétben a React tesztek eltérőek. Mivel a komponensek vizuális információkat, például jelölőnyelvet (és az adatmanipulációs logikát) is tartalmazhatnak, a hagyományos egységtesztelés nem működik egyszerűen. Ebből a szempontból a React tesztelést inkább a funkcionális vagy integrációs tesztelés egy formájaként lehet leírni.

• CSS fájlok

Különböző stílusfájlok állnak rendelkezésre: App.css, index.css, és logo.svg. A Reactban többféle módszert is követhet a stílusok kialakítására. A legegyszerűbb módja a sima CSS írása, mivel ehhez nincs szükség további konfigurációra.

Lehetősége van a CSS-t közvetlenül egy komponensbe importálni. Ez lehetővé teszi a CSS fájlok felosztását, hogy azok csak egy adott komponensre vonatkozzanak. Valójában nem választja el a CSS-t a JavaScripttől. Ehelyett az összes releváns elemet (CSS, JavaScript, képek és jelölőnyelv) egy csoportba fogja össze.

Nyissa meg az App.css fájlt egy szövegszerkesztővel:

Ez egy szabványos CSS fájl, különleges CSS előfeldolgozók nélkül. Később hozzáadhatja őket, ha szeretné. Create React App igyekszik semleges maradni, miközben szilárd, azonnal használható élményt nyújt.

Végezzünk egy módosítást, és nézzük meg működés közben. Változtassa meg a background-color értékét a következőre: blue:

Ellenőrizze a változást a böngészőben:

• • Index.js

Most itt az ideje, hogy módosítsuk a React JavaScript kódot. Nyissa meg a index.js fájlt egy szövegszerkesztővel:

A tetején a következőket importálja: React, ReactDOM, index.css, App, valamint a serviceWorker fájlt. A React importálásával behúzzuk a JSX JavaScriptté alakításához szükséges kódot. ReactDOM az a kód, amely összeköti a React kódunkat az alapelemmel ( index.html, például). Nézze meg a következő sort:

Ez arra utasítja a Reactot, hogy keressen egy id azonosítót a root címke alapján, és oda illessze be a React kódokat. <App/> a gyökérelem, és minden onnan ágazik el.

Vegye figyelembe, hogy CSS fájlokat is importáltunk (például index.css) de valójában nem csináltunk vele semmit. Az importálással valójában arra utasítjuk a Webpack-et a React scripteken keresztül, hogy foglalja bele a CSS kódokat a végső lefordított csomagba. Ellenkező esetben a CSS stílusok nem fognak megjelenni.

• App.js

Ezután vessünk egy pillantást a App.js fájlra. Nyissa meg egy szövegszerkesztőben:

 

Lássuk, hogyan befolyásolja a tartalom módosítása a projektünket. Változtassa meg a <p>tag tartalmát:

Ezután mentse el a fájlt, és ellenőrizze a változásokat a böngészőben:

Voila! Elvégezte az első React komponens módosításait!

Még egy dologra érdemes figyelni. Nézze meg a következő elemet: <img>:

Vegye figyelembe, hogy a logo kapcsos zárójelek közé kerül. Amikor attribútumokat adunk át (amelyek nem karakterláncok vagy számok), azokat kapcsos zárójelek közé kell tenni. Ekkor a React JavaScript objektumként fogja kezelni őket karakterláncok helyett.

Ebben az esetben az alkalmazás valójában nem importálja a képet. Ehelyett ez egy hivatkozás a képre. Amikor a Webpack felépíti a projektet, a képet a megfelelő helyre teszi. Ezt ellenőrizhetjük a böngészőben. Nyissa meg a Webfejlesztő eszközöket a Firefoxban:

A Webpack egyedi fájlútvonalakat szeretne hozzárendelni az összes képhez. Így még ha a képeket azonos névvel is importálták, különböző útvonaluk lesz.

7. lépés: A projekt felépítése

Ebben a lépésben megtanuljuk, hogyan kell a projektet telepíthető csomaggá fordítani. Indítsa el a terminált, és futtassa a projekt build scriptjét:

A fordító létrehozza a dedikált build/ könyvtárat, ahová a kimenetet helyezi. Ha meg szeretné nézni, mit csinál a fordítási folyamat, nyissa meg a index.html fájlt a build/ könyvtárból:

Mint látható, az összes kód le van fordítva és minimalizálva (minified) a legkisebb használható állapotra. Az olvashatóság nem szempont, mivel ez nem a nyilvánosság felé mutatott kódrészlet. A minimalizált kódok kevesebb helyet foglalnak el, miközben megőrzik minden funkciójukat. Ellentétben azokkal a nyelvekkel, ahol a szóközök nagyon fontosak (például a Python), a webes nyelvek (HTML, CSS és JavaScript) nem igényelnek megfelelő térközt ahhoz, hogy a böngésző értelmezni tudja őket.

Záró gondolatok

Ebben az útmutatóban sikeresen bemutattuk, hogyan hozhat létre React alkalmazást. Néhány alapvető konfigurációt is bemutattunk JavaScript build eszközök használatával, bonyolult technikai részletek nélkül. Ez a Create React App által kínált legfőbb érték. Nem kell mindent tudnia ahhoz, hogy elkezdhesse a React használatát. Megteheti, hogy nem tanulja meg a bonyolult build lépéseket, miközben kizárólag a React kódra összpontosít.

Itt azt is bemutattuk, hogyan kell elindítani, tesztelni és felépíteni egy React projektet. Ezek a parancsok alapvető fontosságúak minden méretű projekt esetében.

Jó kódolást!