A React az egyik legnépszerűbb könyvtár a felhasználói felületek készítésére, a Next.js pedig az egyik legnépszerűbb keretrendszer a felhasználói felületek készítésére.
A Next.js a React használatával készült. Szóval sok hasonlóság van köztük. Nyilvánvaló, hogy összekeverjük a kettőt.
Merüljünk el mélyen ebbe a kettőbe, és nézzük meg, miben különböznek a zavar tisztázásában. Kezdjük a React-tal.
Tartalomjegyzék
Reagálás: Kezdő lépések
A React egy nyílt forráskódú könyvtár a felhasználói felületek JavaScript használatával történő létrehozásához. A React egyoldalas webalkalmazások létrehozására szolgál. Mit értek egyoldalas alkalmazások alatt? Az alkalmazás egyetlen HTML dokumentummal fog rendelkezni, és szükség szerint frissíti.
Az egyoldalas webalkalmazások létrehozása jelenleg a legmagasabb csúcson van. És elmondhatjuk, hogy a React a legnépszerűbb könyvtár jelenleg ezen a területen. Nem túlzás.
Számos React csomag érhető el, amelyek megkönnyítik a fejlesztők életét. Ha webalkalmazásokról van szó, a React segítségével bármilyen típusú webes alkalmazást készíthetünk.
A Reactet a Facebook fejlesztette ki. Most már bárki hozzájárulhat ehhez. És a Facebook karbantartja.
Nézzük meg a React néhány funkcióját.
Virtuális DOM
A webalkalmazások frissítik annak bizonyos részeit anélkül, hogy más részeit most befolyásolnák, például megjelenítik a betöltőt az adatok lekérése közben, és frissítik a webalkalmazás adott részét a letöltött adatokkal. Ez a DOM frissítése a böngészőben, ha technikailag beszélünk.
Az olyan könyvtárak nélkül, mint a React, a vanília JavaScript használatával csináltuk volna, ami nem hatékony, mivel a DOM-műveletek nagyon költségesek. A React bevezeti a virtuális DOM koncepcióját a probléma kezelésére.
A virtuális DOM a valódi DOM másolata. Ha vannak frissítések, a React először frissíti azokat a virtuális DOM-ban, és összehasonlítja a valódi DOM-mal. És a React csak akkor frissíti a valódi DOM-ot, ha változások és csak megváltozott részek vannak. Így kevesebb műveletet hajt végre valódi DOM-on, jelentősen csökkentve a frissítési időt.
Az olyan könyvtárak nélkül, mint a React, a web nagyon lassú lett volna.
Alkatrészek
Az összetevők a React felhasználói felületének építőkövei. Azt mondhatjuk, hogy a Reactban minden összetevő. Ezek az összetevők újra felhasználhatók a React alkalmazásban.
Tegyük fel, hogy van egy gombunk, amelynek van néhány stíluskészlete. A Reactban létrehozhatunk egy olyan komponenst, amely a gombnak a neki átadott tulajdonságok alapján stílusokkal történő megjelenítéséért felel. A kellékek segítségével tetszés szerint testreszabhatjuk ezt a gombkomponenst. Így tudjuk újra felhasználni az összetevőket a React alkalmazásban.
Az összetevők segíthetnek alkalmazásunkat kis felhasználói felület blokkokba rendezni. Elrendezhetjük őket tetszés szerint.
JSX
Írhatunk HTML-t JSX-nek nevezett JS-ben. Úgy néz ki, mint a HTML, de ez JSX. Használhatjuk a JavaScriptet a JSX-szel, és ezzel együtt elérhetjük az összes HTML attribútumot.
A JSX a felhasználói felület szerkezetének meghatározására szolgál. Minden összetevő JSX-et ad vissza, amely a DOM-ban lesz renderelve.
Egyirányú adatfolyam
Az összetevők közötti adatáramlás szükséges ahhoz, hogy kisebbek legyenek. Ha nincs adatáramlásunk a komponensek között, akkor mindent egyetlen komponensben kell befogadnunk.
A reagálás követi az egyirányú adatáramlást, amely a szülőtől a gyermekig terjed. A szülőkomponensek adatait átadhatjuk a React gyermekkomponenseinek. A gyermekkomponens nem módosíthatja közvetlenül a szülőkomponens állapotát. Ezt a visszahívások átadásával lehet megtenni.
Az egyirányú adatáramlás egyszerűvé teszi a hibakeresést. Az összetevők sokkal egyszerűbbnek tűnnek, mivel nem minden összetevőnek kell fenntartania az állapotot.
A React tanulása nagyon egyszerű, ha ismeri a JavaScriptet. A React dokumentumok elegendőek a kezdéshez.
Next.js: Kezdő lépések
A Next.js egy react keretrendszer webes alkalmazások készítésére. A React tetejére épül. Vercel készítette. Tehát a React összes funkciója elérhető lesz benne. Mi a különleges a Next.js-ben? Lássunk néhány olyan funkciót, amelyek különlegessé teszik a reakciókomponenseken kívül.
Renderelés előtt
A Next.js minden oldalt előre renderel. Ha előre rendereli, az oldal gyorsan betöltődik a böngészőbe statikus HTML-lel. Később betölti az oldalhoz szükséges JavaScriptet. Javítja az oldal teljesítményét és SEO-ját.
Kétféle előrenderelés van benne. Az egyik a Static Site Generation (SSG), a másik a Server Side Rendering (SSR). Az SSG létrehozza a HTML-kódot az összeállításkor, és ugyanazt más kérésekre is felhasználja.
Az SSR minden kérésnél előállítja a HTML-kódot, így egy kicsit lassabb, mint az SSG. A Next.js az SSG használatát javasolja mindaddig, amíg az SSR használata nem kötelező.
A Next.js előtölti azokat az oldalakat is, amelyek hivatkozásokat tartalmaznak (a hivatkozás komponenssel) az aktuális megtekintési oldalon. Ez a nagyszerű funkció nagyon gyorsan betölti az oldalakat mozgás közben.
útvonalválasztás
A Next.js beépített útválasztó rendszerrel érkezik. Támogatja a címtár alapú útválasztási rendszert. Az útvonal létrehozásához oldalakat kell létrehoznunk egy bizonyos könyvtárban. Ennek eléréséhez egy csomagot kell használnunk.
API-k
Létrehozhatunk API-kat a Next.js-szel, mint például az expressz. Új lehetőséget nyit meg full-stack alkalmazások létrehozására a Next.js segítségével. Lehet, hogy nem olyan hatékony, mint egy dedikált szerveroldali keretrendszer, de elvégzi a feladatot.
Más funkciók
Vannak más funkciók is, mint például a képoptimalizálás, a beépített CSS-támogatás, az egyes oldalak metacímkéi (a jobb SEO érdekében), stb.; az eddig látott összes szolgáltatás a Next.js kiegészítő szolgáltatása a React funkciókon felül.
A Next.js nagy népszerűségre tett szert megjelenése óta. A Next.js tanulása nagyon hasznos, ha ismeri a Reactot. De nem kötelező először megtanulni reagálni. Először bárkivel kezdheted. A JavaScript mindkettőjük számára kötelező.
Eddig a React és a Next.js különböző funkcióit láttuk. Hasonlítsuk össze mindkettőt.
React vs. Next.js
Sok hasonlóság van a React és a Next.js között. Ön már tudja, miért van köztük sok hasonlóság. Alapfogalmaik ugyanazok. Hasonlítsunk össze néhány dolgot ezek közül.
Kód
Lássunk egy egyszerű Hello Worldet! A react és next.js komponense.
Reagál
function App() {
return (
<div className="app">
Hello World!
</div>
);
}
export default App;
Next.js
export default function Home() {
return (
<div className="app">
Hello World!
</div>
)
}
Ha látja a kódot, nincs különbség köztük.
Mappa szerkezete
A React egy olyan könyvtár, amelynek nincs különösebb mappastruktúrája. A mappákat és fájlokat preferenciánk és használati esetünk alapján rendezhetjük el.
A Next.js-nek szintén nincs szigorú követendő mappastruktúrája. De az oldalak mappán belül csak az útválasztáshoz kell oldalakat létrehoznunk. Ez az egyetlen korlátozás a next.js fájlban. Elrendezhetjük az összes többi mappát és fájlt, mint például a react.
Teljesítmény
A Next.js alkalmazások egy kicsit gyorsabbak a React alkalmazásokhoz képest. A Next.js előmegjelenítési technikákat használ ezek elkészítéséhez. De ez nem azt jelenti, hogy ne tudnánk gyorsítani a React alkalmazásokat. Ugyanezt érhetjük el a React-tal is. Ehhez extra erőfeszítéseket kell tennünk.
Gépelt
A TypeScript fontos szerepet játszik a nagy alkalmazásokban. TypeScript nélkül a legtöbb fejlesztő mérges lesz az alkalmazások hibakeresésére. Ne aggódjon, a React és a Next.js is támogatja a TypeScriptet.
Más funkciók
Mind a React, mind a Next.js-t nagymértékben karbantartják az alkotók. A közösség nagyon nagy mindkettőjük számára, összehasonlítva más front-end könyvtárakkal és keretrendszerekkel. Ha bárhol elakadunk a React és a Next.js alkalmazások fejlesztése közben, nagy eséllyel az interneten találjuk meg a megoldást.
Ezek dokumentációja nagyon jó az induláshoz. Mire várunk? A használat megkezdéséhez lépjen a React és a Next.js dokumentációba.
Összegzés
FeaturesReactNext.jsCode A JavaScript ismerete elegendő a React alkalmazások kódolásához. A kód hasonló a Reacthoz, mivel föléje épült.MappaszerkezetNe írjon elő szigorú irányelveket a mappaszerkezetekre. A mappaszerkezet egy részét szabja meg, amelyet követni kell (oldalak útválasztás).TypeScriptIt támogatja a gépírást.Támogatja a gépírást is.Szerveroldali renderelésNincs beépített támogatása a szerveroldali megjelenítéshez.Beépített támogatása van a szerveroldali megjelenítéshez előzetes lekéréssel (SSG és SSR)PerformanceA egy kicsit lassabb a Next.js-hez képestKicsit gyorsabb a React.Community & Maintenance A Facebook által jól karbantartott, nagy nyílt forráskódú közösség támogatja. A Vercel is remekül karbantartja. Ezenkívül nyílt forráskódú közösségi támogatással is rendelkezik. Dokumentáció és tanulásJól dokumentált, még a kezdők számára is. Bármikor elkezdheti használni, ha ismeri a JavaScriptet.Jó dokumentációja van, és a tanulás gyorsabb lesz, ha ismeri a React fogalmait.React vs. Next.js
Melyiket válasszam?
Nos, erre a kérdésre senki nem tud válaszolni. Különböző dolgoktól függ, mint például a projekt típusa, mit csinál, a célja stb.; ezek összes jellemzőjét és követelményeit végigjárva megállapíthatjuk.
Egy dolog, ami alapján gyorsan következtethetünk, az a SEO. Ha a projektje sok SEO-t igényel, jobb, ha a Next.js-t választja.
Minden forgatókönyvben különböző tényezőket vettünk figyelembe, hogy levonjuk a következtetést. Ha nem tudunk következtetést levonni, akkor jobb, ha a Reactot választjuk. A korai szakaszban pedig mindig válthatunk másikra, mivel a kódmigráció nem tart sok időt. Tudod az okát, hogy miért nem kell sok idő 😄.
Mindkettőnek jó közössége van. Szinte minden olyan problémára talál megoldást, amellyel a React és a Next.js használata során szembesül, mivel ezeket széles körben használják a frontend tartományban. Rengeteg csomagot találsz webalkalmazások készítéséhez. Ugyanazokat a csomagokat használhatjuk a Reactban és a Next.js-ben is.
A döntéseket mindig nehéz meghozni. De ne félj döntéseket hozni 😜.
Következtetés
Azt mondhatjuk, hogy a Next.js a React szuperkészlete. A Next.js több funkcióval és az azt használó React funkciókkal együtt jön létre. Összehasonlításuk tehát nem ideális. Ennek ellenére megtettük 😅. Mindenesetre most van egy felső szintű ötlete a React és a Next.js esetében.
Mint látható, nincs sok különbség köztük, kivéve a Next.js extra funkcióit, ami nyilvánvaló. Mára ennyi. Zárjuk be ezt egy kis javaslattal.
Javasoljuk, hogy először kezdje el a React-tal, ha egy front-end keretrendszert szeretne megtanulni. A React koncepciók révén a Next.js tanulása a torta egy darabja lesz.
Felfedezhet néhány legjobb forrást a ReactJS megtanulásához.