Megosztás:

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. Azokkal a más JavaScript könyvtárakkal ellentétben, amelyek teljes alkalmazáskeretrendszert biztosítanak, a React kizárólag az alkalmazás nézetek létrehozására összpontosít, olyan összefoglalt egységeken keresztül, mint az összetevők, melyek képesek a státusz megőrzésére és felhasználói felületi elemek létrehozására. 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 metódust, 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 Create React App (CRA) már nem ajánlott ú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 Windows rendszeren?

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

Mit tudsz kezdeni a Reactal?

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

  • Alapszintű webalkalmazások: Ha még csak most ismerkedik a React szolgáltatással, és elsősorban a React használatával szeretne alapszintű webalkalmazást létrehozni, javasoljuk, hogy hozzon létre Egy React-alkalmazást a Windowsvite előtérbeli eszközével. Ha éles környezetben üzembe helyezendő webalkalmazást szeretne létrehozni, érdemes lehet megfontolni, hozzon létre egy React-alkalmazást a Windows Alrendszer for Linux (WSL)virtuális előtér-eszközével, a jobb teljesítménysebesség, a rendszerhívások kompatibilitása és a helyi fejlesztési környezet és az üzembe helyezési környezet (amely gyakran Linux-kiszolgáló) közötti igazítás érdekében.

  • Single-Page Alkalmazások (SPAs): Ezek olyan webhelyek, amelyek az aktuális weblap dinamikus újraírásával kommunikálnak a felhasználóval egy kiszolgálóról származó új adatokkal, ahelyett hogy a böngésző alapértelmezett módon teljesen új oldalakat töltene be. Ha statikus tartalomorientált SPA-webhelyet szeretne létrehozni, javasoljuk, hogy telepítse Gatsbyt a WSL. Ha kiszolgáló által renderelt SPA-webhelyet szeretne létrehozni egy Node.js háttérrendszerrel, javasoljuk, hogy telepítse Next.js a WSL. (Bár Next.js most már statikus fájlok kiszolgálását is kínálja).

  • natív asztali alkalmazások: React Native for Desktop + macOS lehetővé teszi natív asztali alkalmazások létrehozását JavaScript használatával, 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: 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. Van egy jó összehasonlítás a kettőről a StackOverflowoldalon. 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 fejlesztésére vonatkozó utasításokért Windows alatt a React Native és Expo CLI használatával lásd React Native Android fejlesztéshez Windowson.

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:

  • Kompiláció – A JSX a React alkalmazásokhoz gyakran használt nyelv, de a böngészők ezt a szintaxist közvetlenül nem tudják feldolgozni. Ehelyett a kódot szabványos JavaScript-szintaxisra kell lefordítani, és testre kell szabni a különböző böngészőkben. 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 az alkalmazáshoz szükséges kódot tartalmazza, és a lehető legkevesebb fájlba legyen kombinálva. Ezt a feladatot egy csomagkötegető, például webpack hajtja végre.
  • Csomagkezelési – 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 Yarn és 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. A könnyen beállítható fejlesztési környezet, amely ezt az eszközláncot használja, a Vite , amely létrehoz egy egyszerű egyoldalas alkalmazást. Az Vite használatához csak Node.jsbeállítás szükséges.

  • Windows-fejlesztés esetén kövesse az utasításokat, hogy a Node.js-t telepítse WSL-re vagy Windows-ra.

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 könyvtá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 npm (amely a NodeJS részét képezi) és yarn. Mindkettő támogatja a jól karbantartott csomagok széles tárát, amelyek telepíthetők.
  • React-útválasztó: navigációs összetevők gyűjteménye, amelyek segíthetnek például a webalkalmazás könyvjelzővel ellátott URL-címeivel vagy a React Native-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: JavaScript-modulok fordítását lehetővé tevő buildelési eszköz, más néven modulkötegelő. 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: JavaScript-elemző, minifier, kompresszor és beautifier eszközkészlet.
  • Babel: JavaScript-fordító, amely főként az ECMAScript 2015+ kód visszafelé kompatibilis Verziójává alakítja az ECMAScript 2015+ kódot a jelenlegi és a régebbi böngészőkben vagy környezetekben. Hasznos lehet még az is, ha babel-preset-env használ, hogy ne kelljen mikromenedzselnie a szintaxisátalakításokat vagy a böngésző-polifilleket, és megadhatja, mely internetböngészők legyenek támogatva.
  • ESLint: A JavaScript-kódban talált minták azonosítására és jelentésére szolgáló eszköz, amely segít a kód konzisztensebbé tétele és a hibák elkerülése érdekében.
  • 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 esetekhez nem kapcsolódó 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