create-a-new-react-app.md

id	title	permalink	redirect_from	prev	next
create-a-new-react-app	Új React alkalmazás készítése	docs/create-a-new-react-app.html	docs/add-react-to-a-new-app.html	add-react-to-a-website.html	cdn-links.html

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 {#you-might-not-need-a-toolchain}

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 {#recommended-toolchains}

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 {#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 8.10 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 {#nextjs}

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 {#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 {#more-flexible-toolchains}

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.

• 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 {#creating-a-toolchain-from-scratch}

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 eszökzlá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.