Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create a New React App translation #43

Merged
merged 4 commits into from Mar 2, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
81 changes: 41 additions & 40 deletions content/docs/create-a-new-react-app.md
@@ -1,92 +1,93 @@
---
id: create-a-new-react-app
title: Create a New React App
title: Új React alkalmazás készítése
permalink: docs/create-a-new-react-app.html
redirect_from:
- "docs/add-react-to-a-new-app.html"
prev: add-react-to-a-website.html
next: cdn-links.html
---

Use an integrated toolchain for the best user and developer experience.
A legjobb felhasználói és fejlesztői élmény érdekében használj egy integrált eszközláncot.

This page describes a few popular React toolchains which help with tasks like:
Ez az oldal néhány népszerű React eszközláncot ír le, amik az alábbi feladatokban segítenek:

* Scaling to many files and components.
* Using third-party libraries from npm.
* Detecting common mistakes early.
* Live-editing CSS and JS in development.
* Optimizing the output for production.
* 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.

The toolchains recommended on this page **don't require configuration to get started**.
Az ezen az oldalon ajánlott eszközláncok **nem igényelnek konfigurációt a kezdéshez**.

## You Might Not Need a Toolchain {#you-might-not-need-a-toolchain}
## Lehet, hogy nincs szükséged eszközláncokra {#you-might-not-need-a-toolchain}

If you don't experience the problems described above or don't feel comfortable using JavaScript tools yet, consider [adding React as a plain `<script>` tag on an HTML page](/docs/add-react-to-a-website.html), optionally [with JSX](/docs/add-react-to-a-website.html#optional-try-react-with-jsx).
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](/docs/add-react-to-a-website.html), vagy adott esetben [JSX-el együtt](/docs/add-react-to-a-website.html#optional-try-react-with-jsx).

This is also **the easiest way to integrate React into an existing website.** You can always add a larger toolchain if you find it helpful!
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!

## Recommended Toolchains {#recommended-toolchains}
## Ajánlott eszközláncok {#recommended-toolchains}

The React team primarily recommends these solutions:
A React csapat főként ezeket a megoldásokat ajánlja:

- Ha **tanulod a Reactet** vagy **egy [single-page](/docs/glossary.html#single-page-application) alkalmazást készítesz,** használd a [Create React App](#create-react-app)-t.
- Ha egy **Node.js-sel szerveroldalon renderelt weblapot** építesz, próbáld ki a [Next.js](#nextjs)-t.
- Ha egy **statikus, tartalom-orientált weblapot** építesz, próbáld ki a [Gatsby](#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](#more-flexible-toolchains).

- If you're **learning React** or **creating a new [single-page](/docs/glossary.html#single-page-application) app,** use [Create React App](#create-react-app).
- If you're building a **server-rendered website with Node.js,** try [Next.js](#nextjs).
- If you're building a **static content-oriented website,** try [Gatsby](#gatsby).
- If you're building a **component library** or **integrating with an existing codebase**, try [More Flexible Toolchains](#more-flexible-toolchains).

### Create React App {#create-react-app}

[Create React App](https://github.com/facebookincubator/create-react-app) is a comfortable environment for **learning React**, and is the best way to start building **a new [single-page](/docs/glossary.html#single-page-application) application** in React.
A [Create React App](https://github.com/facebookincubator/create-react-app) egy komfortos környezet a **React tanulásához** és a legjobb módja **egy új [single-page](/docs/glossary.html#single-page-application) alkalmazás** készítésére Reactben.

It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 8.10 and npm >= 5.6 on your machine. To create a project, run:
Ú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:

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

>Note
>Megjegyzés
>
>`npx` on the first line is not a typo -- it's a [package runner tool that comes with npm 5.2+](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b).
>Az `npx` az első sorban nem elírás -- ez egy [csomag futtató eszköz ami az npm 5.2 óta elérhető](https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b).

Create React App doesn't handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses [Babel](https://babeljs.io/) and [webpack](https://webpack.js.org/), but you don't need to know anything about them.
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](https://babeljs.io/)-t és [webpack](https://webpack.js.org/)-et használ, de semmit nem kell tudnod róluk.

When you're ready to deploy to production, running `npm run build` will create an optimized build of your app in the `build` folder. You can learn more about Create React App [from its README](https://github.com/facebookincubator/create-react-app#create-react-app--) and the [User Guide](https://facebook.github.io/create-react-app/).
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](https://github.com/facebookincubator/create-react-app#create-react-app--) és a [felhasználói útmutatóból](https://facebook.github.io/create-react-app/).

### Next.js {#nextjs}

[Next.js](https://nextjs.org/) is a popular and lightweight framework for **static and server‑rendered applications** built with React. It includes **styling and routing solutions** out of the box, and assumes that you're using [Node.js](https://nodejs.org/) as the server environment.
A [Next.js](https://nextjs.org/) 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](https://nodejs.org/)-t használsz a szerver környezetben.

Learn Next.js from [its official guide](https://nextjs.org/learn/).
Tanuld meg a Next.js használatát [a hivatalos útmutatóból](https://nextjs.org/learn/).

### Gatsby {#gatsby}

[Gatsby](https://www.gatsbyjs.org/) is the best way to create **static websites** with React. It lets you use React components, but outputs pre-rendered HTML and CSS to guarantee the fastest load time.
A [Gatsby](https://www.gatsbyjs.org/) 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.

Learn Gatsby from [its official guide](https://www.gatsbyjs.org/docs/) and a [gallery of starter kits](https://www.gatsbyjs.org/docs/gatsby-starters/).
Tanuld meg a Gatsby használatát [a hivatalos útmutatóból](https://www.gatsbyjs.org/docs/) és [kezdő csomagok egy galériájából](https://www.gatsbyjs.org/docs/gatsby-starters/).

### More Flexible Toolchains {#more-flexible-toolchains}
### Kissé rugalmasabb eszközláncok {#more-flexible-toolchains}

The following toolchains offer more flexibility and choice. We recommend them to more experienced users:
A következő eszközláncok több rugalmasságot és lehetőséget biztosítanak. Tapasztaltabb felhasználóknak ajánljuk:

- **[Neutrino](https://neutrinojs.org/)** combines the power of [webpack](https://webpack.js.org/) with the simplicity of presets, and includes a preset for [React apps](https://neutrinojs.org/packages/react/) and [React components](https://neutrinojs.org/packages/react-components/).
- A **[Neutrino](https://neutrinojs.org/)** kombinálja a [webpack](https://webpack.js.org/) erejét a presetek egyszerűségével, és tartalmaz egy presetet [React alkalmazásokhoz](https://neutrinojs.org/packages/react/) és [React komponensekhez](https://neutrinojs.org/packages/react-components/).

- **[Parcel](https://parceljs.org/)** is a fast, zero configuration web application bundler that [works with React](https://parceljs.org/recipes.html#react).
- A **[Parcel](https://parceljs.org/)** egy gyors, konfigurálást nem igénylő webalkalmazás csomagoló ami [Reacttel is működik](https://parceljs.org/recipes.html#react).

- **[Razzle](https://github.com/jaredpalmer/razzle)** is a server-rendering framework that doesn't require any configuration, but offers more flexibility than Next.js.
- A **[Razzle](https://github.com/jaredpalmer/razzle)** egy konfigurálást nem igénylő szerveroldali renderelő keretrendszer, de több rugalmasságot biztosít, mint a Next.js.

## Creating a Toolchain from Scratch {#creating-a-toolchain-from-scratch}
## Eszközlánc készítése a semmiből {#creating-a-toolchain-from-scratch}

A JavaScript build toolchain typically consists of:
Egy JavaScript eszközlánc tipikusan ezekből áll:

* A **package manager**, such as [Yarn](https://yarnpkg.com/) or [npm](https://www.npmjs.com/). It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
* Egy **csomagkezelő**, mint a [Yarn](https://yarnpkg.com/) vagy az [npm](https://www.npmjs.com/). 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.

* A **bundler**, such as [webpack](https://webpack.js.org/) or [Parcel](https://parceljs.org/). It lets you write modular code and bundle it together into small packages to optimize load time.
* Egy **csomagoló**, mint a [webpack](https://webpack.js.org/) vagy a [Parcel](https://parceljs.org/). 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.

* A **compiler** such as [Babel](https://babeljs.io/). It lets you write modern JavaScript code that still works in older browsers.
* Egy **fordítóprogram**, mint a [Babel](https://babeljs.io/). 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.

If you prefer to set up your own JavaScript toolchain from scratch, [check out this guide](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658) that re-creates some of the Create React App functionality.
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](https://blog.usejournal.com/creating-a-react-app-from-scratch-f3c693b84658), ami a Create React App funkcionalitását utánozza.

Don't forget to ensure your custom toolchain [is correctly set up for production](/docs/optimizing-performance.html#use-the-production-build).
Ne felejts el meggyőződni róla, hogy az egyedi eszközláncod [helyesen van beállítva a végstádiumhoz](/docs/optimizing-performance.html#use-the-production-build).
2 changes: 1 addition & 1 deletion content/docs/nav.yml
Expand Up @@ -5,7 +5,7 @@
- id: add-react-to-a-website
title: Add hozzá a React-et egy weblaphoz
- id: create-a-new-react-app
title: Készíts egy új React alkalmazást
title: Új React alkalmazás készítése
- id: cdn-links
title: CDN linkek
- id: release-channels
Expand Down