Megosztás a következőn keresztül:

A React áttekintése

Mi az a React JS?

A React egy nyílt forráskódú JavaScript-kódtár az előtérbeli felhasználói felületek létrehozásához. A teljes alkalmazás-keretrendszert biztosító többi JavaScript-kódtártól eltérően a React kizárólag az alkalmazásnézetek létrehozására összpontosít az állapotot karbantartó és felhasználói felületi elemeket létrehozó összetevőknek nevezett beágyazott egységeken keresztül. Az egyes összetevőket elhelyezheti egy weblapon, vagy beágyazhatja az összetevők hierarchiáit egy összetett felhasználói felület létrehozásához.

A React-összetevőket általában JavaScriptben és JSX-ben (JavaScript XML) írják, amely egy JavaScript-bővítmény, amely nagyon hasonlít a HTML-hez, de olyan szintaxisi funkciókkal rendelkezik, amelyek megkönnyítik az olyan gyakori feladatok elvégzését, mint például az eseménykezelők regisztrálása a felhasználói felület elemeihez. A React-összetevők implementálják a renderelési módszert, amely az összetevő felhasználói felületét képviselő JSX-et adja vissza. Egy webalkalmazásban az összetevő által visszaadott JSX-kódot böngészőkompatibilis HTML-kódra fordítja le a rendszer a böngészőben.

Fontos

2025 februárjában a React csapata bejelentette , hogy a React-alkalmazás létrehozása (CRA) elavult az új alkalmazásokhoz. A csapat azt javasolja, hogy a meglévő alkalmazások olyan keretrendszerbe migráljanak, mint a Next.js vagy a React Router, vagy migráljanak egy olyan buildelési eszközre, mint a Vite, a Parcel vagy az RSBuild.

Működik a React a Windows?

Igen. Windows két különböző környezetet támogat a React-alkalmazások fejlesztéséhez:

Mit tudsz kezdeni a Reactal?

Windows számos forgatókönyvet támogat a React-fejlesztők számára, többek között az alábbiakat:

  • Basic webalkalmazások: Ha még nem használta a Reactet, és elsősorban egy alapszintű webalkalmazást szeretne létrehozni a React használatával, javasoljuk, hogy hozzon létre egy React-alkalmazást a Windows rendszeren futó vite frontend eszközkészlettel. Ha éles környezetben üzembe helyezendő webalkalmazást szeretne létrehozni, érdemes lehet megfontolni a a React-alkalmazás létrehozását a Windows Subsystem for Linux (WSL) virtuális előtér-eszközzel, a jobb teljesítmény érdekében, a rendszerhívások kompatibilitását és a helyi fejlesztési környezet és az üzembehelyezési környezet (amely gyakran Linux-kiszolgáló) közötti igazítást is lehetővé teszi.

  • Single-Page Alkalmazások (SPA-k):: Ezek olyan webhelyek, amelyek az aktuális weblap dinamikus újraírásával lépnek kapcsolatba a felhasználóval, és nem a böngésző alapértelmezett beállításai szerint töltik be a teljes új oldalakat. Ha statikus tartalomorientált SPA-webhelyet szeretne létrehozni, javasoljuk, hogy telepítse a Gatsbyt a WSL-n. Ha kiszolgáló által renderelt SPA-webhelyet szeretne létrehozni egy Node.js háttérrendszerrel, javasoljuk, hogy telepítse a Next.js a WSL-en. (Bár Next.js most már statikus fájlkiszolgálót is kínál).

  • Nematív asztali alkalmazások: React Native for Desktop + macOS lehetővé teszi natív asztali alkalmazások létrehozását JavaScripttel, amelyek különböző típusú asztali számítógépeken, laptopokon, táblagépeken, Xbox és Mixed Reality eszközökön futnak. Támogatja a Windows SDK és macOS SDK.

  • Natív mobilalkalmazások: A React Native platformfüggetlen módon hozhat létre Android- és iOS-alkalmazásokat JavaScripttel, amelyek natív platform felhasználói felületi kódra renderelnek. A React Native telepítésének két fő módja van: az Expo CLI és a React natív parancssori felület. A StackOverflow-on jól összehasonlítjuk a kettőt. Az Expo rendelkezik egy iOS és Android rendszerű mobileszközökhöz készült ügyfélalkalmazással az alkalmazások futtatásához és teszteléséhez. Az Android-alkalmazások Windows, React Native és az Expo CLI használatával történő fejlesztésére vonatkozó utasításokért lásd: React Natív androidos fejlesztés Windows.

Telepítési opciók

A React telepítésének számos különböző módja van, valamint egy integrált eszközlánc, amely a legjobban megfelel a használati esethez. Íme néhány a legnépszerűbbek közül.

React-eszközök

Az egyszerű React-összetevő egyszerű szövegszerkesztőben való írása jó bevezetés a Reactbe, az így létrehozott kód terjedelmes, nehezen karbantartható és üzembe helyezhető, és lassú. Vannak olyan gyakori feladatok, amelyeket a produkciós alkalmazásoknak végre kell hajtaniuk. Ezeket a feladatokat más JavaScript-keretrendszerek kezelik, amelyeket az alkalmazás függőségként vesz igénybe. Ilyen feladat például:

  • Fordítás – A JSX a React-alkalmazásokhoz gyakran használt nyelv, de a böngészők nem tudják közvetlenül feldolgozni ezt a szintaxist. Ehelyett a kódot szabványos JavaScript-szintaxisra kell lefordítani, és testre kell szabni a különböző böngészőkben. A Babel egy JSX-t támogató fordító példája.
  • Bundling – Mivel a teljesítmény kulcsfontosságú a modern webalkalmazások számára, fontos, hogy az alkalmazás JavaScript-kódja csak a szükséges kódot tartalmazza az alkalmazáshoz, és a lehető legkevesebb fájlba legyen kombinálva. Ezt a feladatot egy csomagkötegelő, például a webpack végzi El Önnek.
  • Csomagkezelés – A csomagkezelők megkönnyítik a külső csomagok funkcióinak alkalmazását, beleértve azok frissítését és a függőségek kezelését. A gyakran használt csomagkezelők közé tartozik a Yarn és az npm.

Az alkalmazás létrehozását, létrehozását és üzembe helyezését segítő keretrendszereket együttesen eszközláncnak nevezzük. Az eszközláncot használó, könnyen beállítható fejlesztési környezet a Vite , amely egy egyszerű, egyoldalas alkalmazást hoz létre Önnek. A Vite használatához csak a Node.jsszükséges beállítás szükséges.

React natív összetevő könyvtára

A React natív alkalmazásokban használható összetevők a következők:

  • Alapvető összetevők – A React Natív keretrendszer részeként fejlesztett és támogatott összetevők.
  • Közösségi összetevők – A közösség által fejlesztett és karbantartott összetevők.
  • Natív összetevők – Azokat az összetevőket, amelyeket saját maga hoz létre, platform-natív kóddal, és regisztrálja őket, hogy elérhetők legyenek a React Native-ból.

A React natív címtár a célplatform által szűrhető összetevőtárak listáját tartalmazza.

Fullstack React eszközlánc beállításai

A React egy kódtár, nem keretrendszer, ezért további eszközökre lehet szükség egy összetettebb alkalmazás létrehozásához. A React használata mellett érdemes lehet megfontolni a következő használatát:

  • Csomagkezelő: A React két népszerű csomagkezelője az npm (amely a NodeJS részét képezi) és a Yarn. Mindkettő támogatja a jól karbantartott csomagok széles tárát, amelyek telepíthetők.
  • React Router: navigációs összetevők gyűjteménye, amelyek segíthetnek például a webalkalmazás könyvjelzőzhető URL-címeivel vagy a React natív verziójában való navigálás összeállítható módjával. A React valójában csak az állapotkezeléssel és az állapot DOM-ba való renderelésével foglalkozik, ezért a React-alkalmazások létrehozásához általában egy olyan útválasztási kódtárat kell használni, mint a React Router.
  • Redux: Kiszámítható állapottároló, amely segít az adatfolyam-architektúrában. Ez valószínűleg nem olyan dolog, amire szüksége van, amíg el nem jut a fejlettebb React-fejlesztéshez. Idézve Dan Abramovot, a Redux egyik létrehozóját: "Ne használja a Reduxot, amíg nincsenek problémái a React használatával."
  • Webpack: Egy buildelési eszköz, amellyel JavaScript-modulokat, más néven modulkötegetőt állíthat össze. Amikor a WebPack feldolgozza az alkalmazást, belsőleg létrehoz egy függőségi grafikont, amely leképezi a projekthez szükséges összes modult, és létrehoz egy vagy több csomagot.
  • Uglify: A JavaScript elemző, minifier, kompresszor és beautifier eszközkészlet.
  • Babel: JavaScript-fordító, amely főként az ECMAScript 2015+ kód visszafelé kompatibilis JavaScript-verzióvá alakítására használható a jelenlegi és a régebbi böngészőkben vagy környezetekben. Hasznos lehet a babel-preset-env használata is, így nem kell részletesen kezelnie a szintaxis-átalakításokat vagy a polyfillokat, és megadhatja, hogy mely internetböngészőket szeretne támogatni.
  • ESLint: A JavaScript-kódban található minták azonosítására és jelentésére szolgáló eszköz, amellyel egységesebbé teheti a kódot, és elkerülheti a hibákat.
  • Enzim: A React JavaScript-tesztelési segédprogramja, amely megkönnyíti a React-összetevők kimenetének tesztelését.
  • Jest: Egy tesztelési keretrendszer, amely a Babellel együttműködve segít idiomatikus JavaScript-tesztek írásában a React-alkalmazásokban.
  • Mocha: Egy tesztelési keretrendszer, amely a Node.js és a böngészőben fut, hogy segítsen az aszinkron tesztelésben, jelentéskészítésben és a megfelelő tesztelési esetekre vonatkozó nem használt kivételek leképezésében.

React-tanfolyamok és oktatóanyagok

Íme néhány ajánlott hely a React megismeréséhez és mintaalkalmazások létrehozásához:

További erőforrások

  • Last updated on