Új React alkalmazás készítése

A legjobb felhasználói és fejlesztői élmény érdekében használj egy integrált eszközláncot.

Ez az oldal néhány népszerű React eszközláncot ír le, amik az alábbi feladatokban segítenek:

• Sok fájl és komponens kezelése.
• Külső npm könyvtárak használata.
• Gyakori hibák korai felfedése.
• CSS és JS élő szerkesztése fejlesztői módban.
• A kimenet optimalizálása a végstádiumhoz.

Az ezen az oldalon ajánlott eszközláncok nem igényelnek konfigurációt a kezdéshez.

Lehet, hogy nincs szükséged eszközláncokra

Ha a fent említett problémák egyikét sem tapasztalod, vagy még nem mozogsz otthon a JavaScript eszközök közt, vedd fontolóra a React hozzáadását egy HTML oldalhoz egy egyszerű <script> címkével, vagy adott esetben JSX-el együtt.

Ez egyben a legegyszerűbb módja a React egy meglévő oldalba való integrálásának. Ha hasznosnak találod, később bármikor hozzáadhatsz egy nagyobb eszközláncot!

Ajánlott eszközláncok

A React csapat főként ezeket a megoldásokat ajánlja:

• Ha tanulod a Reactet vagy egy single-page alkalmazást készítesz, használd a Create React App-t.
• Ha egy Node.js-sel szerveroldalon renderelt weblapot építesz, próbáld ki a Next.js-t.
• Ha egy statikus, tartalom-orientált weblapot építesz, próbáld ki a Gatsby-t.
• Ha egy komponens könyvtárat építesz, vagy egy meglévő kódbázissal integrálsz, próbálj ki egy kissé rugalmasabb eszközláncot.

Create React App

A Create React App egy komfortos környezet a React tanulásához és a legjobb módja egy új single-page alkalmazás készítésére Reactben.

Úgy állítja fel a fejlesztői környezeted, hogy használni tudd a legújabb JavaScript funkciókat, egy kellemes fejlesztői élményt biztosít és optimalizálja az alkalmazásod a végstádiumban. A gépednek rendelkeznie kell Node 10.16 vagy annál újabb, és npm 5.6 vagy annál újabb verzióival. Egy projekt készítéséhez futtasd ezt:

npx create-react-app my-app
cd my-app
npm start

Megjegyzés

Az npx az első sorban nem elírás — ez egy csomag futtató eszköz ami az npm 5.2 óta elérhető.

A Create React App nem kezel szerveroldali logikát vagy adatbázisokat; csak egy frontend építő futószalagot készít, szóval bármilyen backendet használhatsz. A motorháztető alatt Babel-t és webpack-et használ, de semmit nem kell tudnod róluk.

Amikor készen állsz a publikálásra, az npm run build futtatása elkészíti az alkalmazásod egy optimalizált változatát a build mappában. A Create React Appről többet tanulhatsz annak README fájljából és a felhasználói útmutatóból.

Next.js

A Next.js egy népszerű és könnyűsúlyú React keretrendszer statikus és szerver-renderelt alkalmazások építéséhez. Alapból magában foglal stílus és útválasztó (routing) megoldásokat és feltételezi, hogy Node.js-t használsz a szerver környezetben.

Tanuld meg a Next.js használatát a hivatalos útmutatóból.

Gatsby

A Gatsby a legjobb módja statikus weblapok készítésének Reacttel. Lehetővé teszi React komponensek használatát, de előrenderelt HTML-t és CSS-t eredményez, ami garantálja a gyors betöltést.

Tanuld meg a Gatsby használatát a hivatalos útmutatóból és kezdő csomagok egy galériájából.

Kissé rugalmasabb eszközláncok

A következő eszközláncok több rugalmasságot és lehetőséget biztosítanak. Tapasztaltabb felhasználóknak ajánljuk:

• A Neutrino kombinálja a webpack erejét a presetek egyszerűségével, és tartalmaz egy presetet React alkalmazásokhoz és React komponensekhez.
• Az Nx egy full-stack monorepo fejlesztéshez való eszközkészlet, ami egyebek mellett beépített React, Next.js, Express támogatással is rendelkezik.
• A Parcel egy gyors, konfigurálást nem igénylő webalkalmazás csomagoló ami Reacttel is működik.
• A Razzle egy konfigurálást nem igénylő szerveroldali renderelő keretrendszer, de több rugalmasságot biztosít, mint a Next.js.

Eszközlánc készítése a semmiből

Egy JavaScript eszközlánc tipikusan ezekből áll:

• Egy csomagkezelő, mint a Yarn vagy az npm. Ez lehetővé teszi a harmadik féltől származó csomagok hatalmas ökoszisztémájának kihasználását, valamint egyszerű telepítését vagy frissítését.
• Egy csomagoló, mint a webpack vagy a Parcel. Moduláris kód írását teszi lehetővé, amit aztán kisebb csomagokká csomagol a gyorsabb betöltési idő optimalizálása érdekében.
• Egy fordítóprogram, mint a Babel. Modern JavaScript kód írását teszi lehetővé, ami még így is működni fog régebbi böngészőkben.

Ha inkább szeretnél egy saját JavaScript eszközláncot összeállítani a semmiből, akkor nézd meg ezt az útmutatót, ami a Create React App funkcionalitását utánozza.

Ne felejts el meggyőződni róla, hogy az egyedi eszközláncod helyesen van beállítva a végstádiumhoz.