We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev

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

These docs are old and won’t be updated. Go to react.dev for the new React docs.

See Start a New React Project for the recommended ways to create an app.

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!

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.

Hasznos volt ez az oldal?Az oldal szerkesztése