From f497daa83b747a057a6526e53674190777b5e52e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Wed, 22 May 2019 01:00:46 +0200 Subject: [PATCH 1/7] =?UTF-8?q?=F0=9F=8C=90=F0=9F=9A=A7=20WIP:=20initial?= =?UTF-8?q?=20Tutorial=20translation?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/tutorial/nav.yml | 54 ++++++++++----------- content/tutorial/tutorial.md | 91 ++++++++++++++++++------------------ 2 files changed, 73 insertions(+), 72 deletions(-) diff --git a/content/tutorial/nav.yml b/content/tutorial/nav.yml index 8d498ab14..69beecce8 100644 --- a/content/tutorial/nav.yml +++ b/content/tutorial/nav.yml @@ -1,111 +1,111 @@ -- title: Tutorial +- title: Tutoriál items: - id: before-we-start-the-tutorial - title: Before We Start the Tutorial + title: Mielőtt Elkezdjük a Tutoriált href: /tutorial/tutorial.html#before-we-start-the-tutorial forceInternal: true subitems: - id: what-are-we-building - title: What Are We Building? + title: Mit Készítünk? href: /tutorial/tutorial.html#what-are-we-building forceInternal: true - id: prerequisites - title: Prerequisites + title: Előfeltételek href: /tutorial/tutorial.html#prerequisites forceInternal: true - id: setup-for-the-tutorial - title: Setup for the Tutorial + title: Beállítások a Tutoriálhoz href: /tutorial/tutorial.html#setup-for-the-tutorial forceInternal: true subitems: - id: setup-option-1-write-code-in-the-browser - title: "Option 1: Write Code in the Browser" + title: "1. Opció: Kódolj a Böngésződben" href: /tutorial/tutorial.html#setup-option-1-write-code-in-the-browser forceInternal: true - id: setup-option-2-local-development-environment - title: "Option 2: Local Development Environment" + title: "2. Opció: Helyi Fejlesztői Környezet" href: /tutorial/tutorial.html#setup-option-2-local-development-environment forceInternal: true - id: help-im-stuck - title: Help, I'm Stuck! + title: Segítség, Elakadtam! href: /tutorial/tutorial.html#help-im-stuck forceInternal: true - id: overview - title: Overview + title: Áttekintés href: /tutorial/tutorial.html#overview forceInternal: true subitems: - id: what-is-react - title: What Is React? + title: Mi az a React? href: /tutorial/tutorial.html#what-is-react forceInternal: true - id: inspecting-the-starter-code - title: Inspecting the Starter Code + title: Kezdő Kód Ellenőrzése href: /tutorial/tutorial.html#inspecting-the-starter-code forceInternal: true - id: passing-data-through-props - title: Passing Data Through Props + title: Adattovábbítás Prop-okkal href: /tutorial/tutorial.html#passing-data-through-props forceInternal: true - id: making-an-interactive-component - title: Making an Interactive Component + title: Készíts egy Interaktív Komponenst href: /tutorial/tutorial.html#making-an-interactive-component forceInternal: true - id: developer-tools - title: Developer Tools + title: Fejlesztői Eszközök href: /tutorial/tutorial.html#developer-tools forceInternal: true - id: completing-the-game - title: Completing the Game + title: Játék Befejezése href: /tutorial/tutorial.html#completing-the-game forceInternal: true subitems: - id: lifting-state-up - title: Lifting State Up + title: Állapot Felemelése href: /tutorial/tutorial.html#lifting-state-up forceInternal: true - id: why-immutability-is-important - title: Why Immutability Is Important + title: Miért Fontos a Megváltoztathatatlanság href: /tutorial/tutorial.html#why-immutability-is-important forceInternal: true - id: function-components - title: Function Components + title: Függvény Komponensek href: /tutorial/tutorial.html#function-components forceInternal: true - id: taking-turns - title: Taking Turns + title: Szerepváltás href: /tutorial/tutorial.html#taking-turns forceInternal: true - id: declaring-a-winner - title: Declaring a Winner + title: Győztes Kinevezése href: /tutorial/tutorial.html#declaring-a-winner forceInternal: true - id: adding-time-travel - title: Adding Time Travel + title: Időutazás Hozzáadása href: /tutorial/tutorial.html#adding-time-travel forceInternal: true subitems: - id: storing-a-history-of-moves - title: Storing a History of Moves + title: Lépéstörténet Tárolása href: /tutorial/tutorial.html#storing-a-history-of-moves forceInternal: true - id: lifting-state-up-again - title: Lifting State Up, Again + title: Állapot Felemelése, Újra href: /tutorial/tutorial.html#lifting-state-up-again forceInternal: true - id: showing-the-past-moves - title: Showing the Past Moves + title: Korábbi Lépések Mutatása href: /tutorial/tutorial.html#showing-the-past-moves forceInternal: true - id: picking-a-key - title: Picking a Key + title: Azonosító Kulcs Választása href: /tutorial/tutorial.html#picking-a-key forceInternal: true - id: implementing-time-travel - title: Implementing Time Travel + title: Időutazás Implementálása href: /tutorial/tutorial.html#implementing-time-travel forceInternal: true - id: wrapping-up - title: Wrapping Up + title: Összegzés href: /tutorial/tutorial.html#wrapping-up forceInternal: true diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 191381cab..73b782a08 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -1,6 +1,6 @@ --- id: tutorial -title: "Tutorial: Intro to React" +title: "Tutoriál: Bevezetés a React-be" layout: tutorial sectionid: tutorial permalink: tutorial/tutorial.html @@ -12,46 +12,47 @@ redirect_from: - "docs/tutorial-zh-CN.html" --- -This tutorial doesn't assume any existing React knowledge. +Ez a tutoriál nem feltételez korábbi React ismereteket. -## Before We Start the Tutorial {#before-we-start-the-tutorial} +## Mielőtt Elkezdjük a Tutoriált {#before-we-start-the-tutorial} -We will build a small game during this tutorial. **You might be tempted to skip it because you're not building games -- but give it a chance.** The techniques you'll learn in the tutorial are fundamental to building any React apps, and mastering it will give you a deep understanding of React. +Ebben a tutoriálban egy kis játékot fogunk készíteni. **Csábító lehet átugrani, mivel nem játékokat készítesz -- de azért adj neki egy esélyt.** A technikák amiket itt tanulsz alapvetőek bármilyen React alkalmazáshoz, és ha ezeket sikerül elsajátítanod, úgy sokkal jobban meg fogod érteni a React működését. ->Tip +>Tipp > ->This tutorial is designed for people who prefer to **learn by doing**. If you prefer learning concepts from the ground up, check out our [step-by-step guide](/docs/hello-world.html). You might find this tutorial and the guide complementary to each other. +>Ez a tutoriál azoknak szól, akik a **gyakorlatias tanulást** szeretik. Ha te az alap koncepciók tanulását preferálod, nézd meg a [lépésről-lépésre útmutatónkat](/docs/hello-world.html). Elképzelhető, hogy ezt a tutoriált és az útmutatót egymást kiegészítőnek találod majd. -The tutorial is divided into several sections: +Ez a tutoriál szekciókra van felosztva: -* [Setup for the Tutorial](#setup-for-the-tutorial) will give you **a starting point** to follow the tutorial. -* [Overview](#overview) will teach you **the fundamentals** of React: components, props, and state. -* [Completing the Game](#completing-the-game) will teach you **the most common techniques** in React development. -* [Adding Time Travel](#adding-time-travel) will give you **a deeper insight** into the unique strengths of React. +* [Beállítások a Tutoriálhoz](#setup-for-the-tutorial) ad egy **kezdőpontot** a tutoriál követéséhez +* [Áttekintés](#overview) megtanítja a React **alapokat**: komponensek, prop-ok, és a state (állapot). +* [Játék Befejezése](#completing-the-game) segít a **leggyakoribb technikák** elsajátításában a React-ben. +* [Időutazás Hozzáadása](#adding-time-travel) egy **átfogóbb képet** ad a React egyedi erősségeiről. -You don't have to complete all of the sections at once to get the value out of this tutorial. Try to get as far as you can -- even if it's one or two sections. +Hogy eredményes légy, nem kötelező befejezned minden egyes szekciót egyszerre. Próbálj meg olyan messzire eljutni, amennyire tudsz -- akkor is, ha ez egy vagy két szekció. -### What Are We Building? {#what-are-we-building} +### Mit Készítünk? {#what-are-we-building} -In this tutorial, we'll show how to build an interactive tic-tac-toe game with React. +Ebben a tutoriálban megmutatjuk, hogy hogyan készíthetsz egy tic-tac-toe játékot React-ben. -You can see what we'll be building here: **[Final Result](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. If the code doesn't make sense to you, or if you are unfamiliar with the code's syntax, don't worry! The goal of this tutorial is to help you understand React and its syntax. + +Itt megnézheted, hogy mit is készítünk: **[Végeredmény](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. Ha a kódot nem teljesen érted, vagy ha nem világos a szintaxis, ne aggódj! A tutoriál célja, hogy megértesse veled a Reactet, és annak szintaxisát. -We recommend that you check out the tic-tac-toe game before continuing with the tutorial. One of the features that you'll notice is that there is a numbered list to the right of the game's board. This list gives you a history of all of the moves that have occurred in the game, and is updated as the game progresses. +Ajánljuk, hogy mielőtt folytatnád ezt a tutoriált, olvass utána a tic-tac-toe játéknak. Egy funkció amit felfedezhetsz az az, hogy a jobb oldalon van egy számozott lista a játék táblájáról. Ez egy az összes korábbi lépést tartalmazó lista, ami a játék menete során folyamatosan frissítve van. You can close the tic-tac-toe game once you're familiar with it. We'll be starting from a simpler template in this tutorial. Our next step is to set you up so that you can start building the game. -### Prerequisites {#prerequisites} +### Előfeltételek {#prerequisites} We'll assume that you have some familiarity with HTML and JavaScript, but you should be able to follow along even if you're coming from a different programming language. We'll also assume that you're familiar with programming concepts like functions, objects, arrays, and to a lesser extent, classes. If you need to review JavaScript, we recommend reading [this guide](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript). Note that we're also using some features from ES6 -- a recent version of JavaScript. In this tutorial, we're using [arrow functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), and [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) statements. You can use the [Babel REPL](babel://es5-syntax-example) to check what ES6 code compiles to. -## Setup for the Tutorial {#setup-for-the-tutorial} +## Beállítások a Tutoriálhoz {#setup-for-the-tutorial} There are two ways to complete this tutorial: you can either write the code in your browser, or you can set up a local development environment on your computer. -### Setup Option 1: Write Code in the Browser {#setup-option-1-write-code-in-the-browser} +### "1. Opció: Kódolj a Böngésződben" {#setup-option-1-write-code-in-the-browser} This is the quickest way to get started! @@ -59,7 +60,7 @@ First, open this **[Starter Code](https://codepen.io/gaearon/pen/oWWQNa?editors= You can now skip the second setup option, and go to the [Overview](#overview) section to get an overview of React. -### Setup Option 2: Local Development Environment {#setup-option-2-local-development-environment} +### "2. Opció: Helyi Fejlesztői Környezet"t {#setup-option-2-local-development-environment} This is completely optional and not required for this tutorial! @@ -116,15 +117,15 @@ We recommend following [these instructions](https://babeljs.io/docs/editors/) to -### Help, I'm Stuck! {#help-im-stuck} +### Segítség, Elakadtam! {#help-im-stuck} If you get stuck, check out the [community support resources](/community/support.html). In particular, [Reactiflux Chat](https://discord.gg/0ZcbPKXt5bZjGY5n) is a great way to get help quickly. If you don't receive an answer, or if you remain stuck, please file an issue, and we'll help you out. -## Overview {#overview} +## Áttekintés {#overview} Now that you're set up, let's get an overview of React! -### What Is React? {#what-is-react} +### Mi az a React? {#what-is-react} React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called "components". @@ -170,7 +171,7 @@ JSX comes with the full power of JavaScript. You can put *any* JavaScript expres The `ShoppingList` component above only renders built-in DOM components like `
` and `
  • `. But you can compose and render custom React components too. For example, we can now refer to the whole shopping list by writing ``. Each React component is encapsulated and can operate independently; this allows you to build complex UIs from simple components. -## Inspecting the Starter Code {#inspecting-the-starter-code} +## Kezdő Kód Ellenőrzése {#inspecting-the-starter-code} If you're going to work on the tutorial **in your browser,** open this code in a new tab: **[Starter Code](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**. If you're going to work on the tutorial **locally,** instead open `src/index.js` in your project folder (you have already touched this file during the [setup](#setup-option-2-local-development-environment)). @@ -184,7 +185,7 @@ By inspecting the code, you'll notice that we have three React components: The Square component renders a single ` ); @@ -243,17 +244,17 @@ class Square extends React.Component { } ``` -If you click on a Square now, you should see an alert in your browser. +Ha most kattintasz a Square-re, egy értesítést kell láss a böngésződben. ->Note +>Megjegyzés > ->To save typing and avoid the [confusing behavior of `this`](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/), we will use the [arrow function syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) for event handlers here and further below: +>A kevesebb gépelés és a [`this` félreérthető viselkedésének](https://yehudakatz.com/2011/08/11/understanding-javascript-function-invocation-and-this/) elkerülése érdekében, innentől a [nyílfunkció szintaxist](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) fogjuk használni az eseménykezelőkhöz: > >```javascript{4} >class Square extends React.Component { > render() { > return ( -> > ); @@ -261,13 +262,13 @@ If you click on a Square now, you should see an alert in your browser. >} >``` > ->Notice how with `onClick={() => alert('click')}`, we're passing *a function* as the `onClick` prop. React will only call this function after a click. Forgetting `() =>` and writing `onClick={alert('click')}` is a common mistake, and would fire the alert every time the component re-renders. +>Vedd észre hogy, az `onClick={() => alert('kattintás')}` segítségével *egy függvényt* küldünk le prop-ként `onClick` néven. A React csak kattintás után fogja meghívni ezt a függvényt. Gyakori hiba csak ennyit írni `onClick={alert('kattintás')}`, és elfelejteni `() =>` részt. Ez meghívná a függvényt a komponens minden újrarenderelésénél. -As a next step, we want the Square component to "remember" that it got clicked, and fill it with an "X" mark. To "remember" things, components use **state**. +Következő lépésként azt próbáljuk elérni, hogy a Square komponens "emlékezzen" arra hogy rá lett kattintva, és töltse ki magát egy "X"-el. Ahhoz hogy komponensek "emlékezni" tudjanak, **state**-t (állapotot) használnak. -React components can have state by setting `this.state` in their constructors. `this.state` should be considered as private to a React component that it's defined in. Let's store the current value of the Square in `this.state`, and change it when the Square is clicked. +React komponensekben állapotot a `this.state` segítségével deklarálhatunk a konstruktorban. A `this.state` állapotra úgy kell tekintenünk, hogy az privát legyen abban az osztályban amiben az definálva lett. Tároljuk a Square jelenlegi értékét a `this.state` objektumban, és változtassuk azt meg, ha a Square-re kattintunk. -First, we'll add a constructor to the class to initialize the state: +Először is adjunk hozzá egy konstruktort az osztályhoz, hogy inicializáljuk az állapotot: ```javascript{2-7} class Square extends React.Component { @@ -280,7 +281,7 @@ class Square extends React.Component { render() { return ( - ); @@ -288,17 +289,17 @@ class Square extends React.Component { } ``` ->Note +>Megjegyzés > ->In [JavaScript classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), you need to always call `super` when defining the constructor of a subclass. All React component classes that have a `constructor` should start it with a `super(props)` call. +>[JavaScript osztályokban](https://developer.mozilla.org/hu/docs/Web/JavaScript/Reference/Classes), mindig meg kell hívnod `super` metódust amikor definiálod a konstruktort egy alosztályban. Minden React komponens osztály ami rendelkezik egy `constructor`-al, egy `super(props)` hívással kell, hogy kezdődjön. -Now we'll change the Square's `render` method to display the current state's value when clicked: +Most pedig változtassuk meg a Square `render` metódusát, hogy az állapot jelenlegi értékét mutassa: -* Replace `this.props.value` with `this.state.value` inside the ` @@ -1023,9 +1024,9 @@ Let's `map` over the `history` in the Game's `render` method: let status; if (winner) { - status = 'Winner: ' + winner; + status = 'Győztes: ' + winner; } else { - status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); + status = 'Következő játékos ' + (this.state.xIsNext ? 'X' : 'O'); } return ( @@ -1047,60 +1048,60 @@ Let's `map` over the `history` in the Game's `render` method: **[Nézd meg a teljes kódot ezen a ponton](https://codepen.io/gaearon/pen/EmmGEa?editors=0010)** -For each move in the tic-tac-toes's game's history, we create a list item `
  • ` which contains a button ` @@ -1111,9 +1112,9 @@ In the Game component's `render` method, we can add the key as `
  • ` **[Nézd meg a teljes kódot ezen a ponton](https://codepen.io/gaearon/pen/PmmXRE?editors=0010)** -Clicking any of the list item's buttons throws an error because the `jumpTo` method is undefined. Before we implement `jumpTo`, we'll add `stepNumber` to the Game component's state to indicate which step we're currently viewing. +Bármelyik lista bejegyzés gombjára kattintva egy hiba ugrik fel, mert a `jumpTo` metódus nincs definiálva. Mielőtt implementálnánk a `jumpTo` metódust, hozzáadjuk a `stepNumber`-t a Game komponens állapotához hogy jelezzük melyik lépést látjuk éppen. -First, add `stepNumber: 0` to the initial state in Game's `constructor`: +Először is add hozzá a `stepNumber: 0`-t a kezdeti állapothoz a Game `contructor`-ban: ```js{8} class Game extends React.Component { @@ -1129,11 +1130,11 @@ class Game extends React.Component { } ``` -Next, we'll define the `jumpTo` method in Game to update that `stepNumber`. We also set `xIsNext` to true if the number that we're changing `stepNumber` to is even: +Ezután definiáljuk a `jumpTo` metódust a Game komponensben hogy frissíteni tudjuk a `stepNumber`-t. Valamint az `xIsNext` értékét is igazra állítjuk, ha a szám amit változtatunk páros szám: ```javascript{5-10} handleClick(i) { - // this method has not changed + // ez a metódus nem változott } jumpTo(step) { @@ -1144,15 +1145,15 @@ Next, we'll define the `jumpTo` method in Game to update that `stepNumber`. We a } render() { - // this method has not changed + // ez a metódus nem változott } ``` -We will now make a few changes to the Game's `handleClick` method which fires when you click on a square. +Most pedig csinálunk egy pár változtatást a Game `handleClick` metódusában ami akkor lesz meghívva ha egy négyzetre kattintasz. -The `stepNumber` state we've added reflects the move displayed to the user now. After we make a new move, we need to update `stepNumber` by adding `stepNumber: history.length` as part of the `this.setState` argument. This ensures we don't get stuck showing the same move after a new one has been made. +A `stepNumber` állapot amit hozzáadtunk most már tükrözi a lépést amit a felhasználó lát. Ha egyet lépünk, frissítenünk kell a `stepNumber`-t azzal hogy ezt hozzáadjuk a `this.setState` argumentumához: `stepNumber: history.length`. Ez biztosítja azt, hogy ne ragadjunk le annál hogy mindig ugyanazt a lépést mutassuk minden új lépés után. -We will also replace reading `this.state.history` with `this.state.history.slice(0, this.state.stepNumber + 1)`. This ensures that if we "go back in time" and then make a new move from that point, we throw away all the "future" history that would now become incorrect. +Lecseréljük a `this.state.history` olvasását is erre: `this.state.history.slice(0, this.state.stepNumber + 1)`. Ez biztosítja azt, hogy ha "visszautazunk az időben" és egy újat lépünk, akkor eldobjuk a "jövő" lépéseit amik így már helytelenek lennének. ```javascript{2,13} handleClick(i) { @@ -1173,7 +1174,7 @@ We will also replace reading `this.state.history` with `this.state.history.slice } ``` -Finally, we will modify the Game component's `render` method from always rendering the last move to rendering the currently selected move according to `stepNumber`: +Végezetül módosítjük a Game komponent `render` metódusát hogy ahelyett hogy mindig a legutolsó lépést renderelje, renderelje inkább a kiválasztott lépést a `stepNumber` szerint: ```javascript{3} render() { @@ -1181,33 +1182,33 @@ Finally, we will modify the Game component's `render` method from always renderi const current = history[this.state.stepNumber]; const winner = calculateWinner(current.squares); - // the rest has not changed + // más változás nincs ``` -If we click on any step in the game's history, the tic-tac-toe board should immediately update to show what the board looked like after that step occurred. +Ha most rákattintunk bármelyik lépésre a játéktörténetben, a tic-tac-toa tábla azonnal frissül hogy azt az állást mutassa ami a rákattintott lépés után történt. **[Nézd meg a teljes kódot ezen a ponton](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)** ### Összegzés {#wrapping-up} -Congratulations! You've created a tic-tac-toe game that: +Gratulálunk! Készítettél egy tic-tac-toe játékot ami: -* Lets you play tic-tac-toe, -* Indicates when a player has won the game, -* Stores a game's history as a game progresses, -* Allows players to review a game's history and see previous versions of a game's board. +* Lehetővé teszi a tic-tac-toe játszását, +* Kihirdeti a győztest, +* Elmenti a játék lépéstörténetét a játék közben, +* Lehetővé teszi a játékosoknak újranézni a játéktábla korábbi állásait. -Nice work! We hope you now feel like you have a decent grasp on how React works. +Szép munka! Reméljük hogy ezek után te is úgy érzed, sikerült megragadnod a React működésének lényegét. -Check out the final result here: **[Final Result](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. +Nézd meg a végeredményt itt: **[Végeredmény](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. -If you have extra time or want to practice your new React skills, here are some ideas for improvements that you could make to the tic-tac-toe game which are listed in order of increasing difficulty: +Ha van egy kis extra időd, vagy szeretnéd gyakorolni az új React képességeidet, íme pár ötlet a tic-tac-toe játék tökéletesítéséhez, nehézség szerinti növekvő sorrendben: -1. Display the location for each move in the format (col, row) in the move history list. -2. Bold the currently selected item in the move list. -3. Rewrite Board to use two loops to make the squares instead of hardcoding them. -4. Add a toggle button that lets you sort the moves in either ascending or descending order. -5. When someone wins, highlight the three squares that caused the win. -6. When no one wins, display a message about the result being a draw. +1. Mutasd minden lépés pozícióját a (oszlop, sor) formátumban a lépéstörténet listában. +2. Tedd kövérré a jelenleg kiválasztott element a lépés listában. +3. Írd át a Board komponenst úgy, hogy az két ciklust használjon négyzetek készítéséhez belekódolás helyett. +4. Adj hozzá egy kapcsoló gombot ami lehetővé teszi a lépések szortírozását növekvő vagy csökkenő sorrendben. +5. Ha valaki nyer, emeld ki a három négyzetet ami lehetővé tette a játékosnak hogy nyerjen. +6. Ha senki sem nyer, mutass egy üzenetet döntetlen eredményéről. -Throughout this tutorial, we touched on React concepts including elements, components, props, and state. For a more detailed explanation of each of these topics, check out [the rest of the documentation](/docs/hello-world.html). To learn more about defining components, check out the [`React.Component` API reference](/docs/react-component.html). +Ezen a tutoriálon keresztül érintettük a React koncepcióit mint elemek, komponensek, prop-ok és állapotot. Ezen témák részletesebb magyarázatához nézd meg a [dokumentáció többi részét](/docs/hello-world.html). Ha többet szeretnél tanulni komponensek definiálásról, nézd meg a [`React.Component` API hivatkozását](/docs/react-component.html). \ No newline at end of file From cc6ed15464b9ddc9824e788eb69e4ecdc7dad8d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Sun, 8 Mar 2020 13:31:43 +0100 Subject: [PATCH 5/7] update tutorial after self review --- content/docs/nav.yml | 2 +- content/tutorial/tutorial.md | 285 +++++++++++++++++------------------ 2 files changed, 142 insertions(+), 145 deletions(-) diff --git a/content/docs/nav.yml b/content/docs/nav.yml index 13d4c0cb2..aa2d27e74 100644 --- a/content/docs/nav.yml +++ b/content/docs/nav.yml @@ -58,7 +58,7 @@ - id: jsx-in-depth title: JSX-ről mélyebben - id: optimizing-performance - title: A teljesítmény optimalizálása + title: Teljesítmény optimalizálása - id: portals title: Portálok - id: profiler diff --git a/content/tutorial/tutorial.md b/content/tutorial/tutorial.md index 74ccbdba7..7ac21ecf6 100644 --- a/content/tutorial/tutorial.md +++ b/content/tutorial/tutorial.md @@ -1,6 +1,6 @@ --- id: tutorial -title: "Tutoriál: Bevezetés a React-be" +title: "Tutoriál: Bevezetés a Reactbe" layout: tutorial sectionid: tutorial permalink: tutorial/tutorial.html @@ -20,44 +20,42 @@ Ebben a tutoriálban egy kis játékot fogunk készíteni. **Csábító lehet á >Tipp > ->Ez a tutoriál azoknak szól, akik a **gyakorlatias tanulást** szeretik. Ha te az alap koncepciók tanulását preferálod, nézd meg a [lépésről-lépésre útmutatónkat](/docs/hello-world.html). Elképzelhető, hogy ezt a tutoriált és az útmutatót egymást kiegészítőnek találod majd. +>Ez a tutoriál azoknak szól, akik a **gyakorlatias tanulást** szeretik. Ha te az alap koncepciók tanulását preferálod, nézd meg a [lépésről-lépésre útmutatónkat](/docs/hello-world.html). Elképzelhető, hogy ezt a tutoriált és az útmutatót egymás kiegészítésének találod majd. Ez a tutoriál szekciókra van felosztva: -* [Beállítások a Tutoriálhoz](#setup-for-the-tutorial) ad egy **kezdőpontot** a tutoriál követéséhez -* [Áttekintés](#overview) megtanítja a React **alapokat**: komponensek, prop-ok, és a state (állapot). -* [Játék Befejezése](#completing-the-game) segít a **leggyakoribb technikák** elsajátításában a React-ben. -* [Időutazás Hozzáadása](#adding-time-travel) egy **átfogóbb képet** ad a React egyedi erősségeiről. +* [Beállítások a Tutoriálhoz](#setup-for-the-tutorial) ad egy **kezdőpontot** a tutoriál követéséhez. +* [Áttekintés](#overview) megtanítja a React **alapokat**: komponensek, propok, és a state (állapot). +* [Játék befejezése](#completing-the-game) segít a **leggyakoribb technikák** elsajátításában a Reactben. +* [Időutazás hozzáadása](#adding-time-travel) egy **átfogóbb képet** ad a React egyedi erősségeiről. -Hogy eredményes légy, nem kötelező befejezned minden egyes szekciót egyszerre. Próbálj meg olyan messzire eljutni, amennyire tudsz -- akkor is, ha ez egy vagy két szekció. +Nem kell minden egyes szekciót egyszerre befejezned, hogy eredményes légy. Próbálj meg olyan messzire eljutni, amennyire tudsz -- akkor is, ha ez egy, vagy két szekció. ### Mit készítünk? {#what-are-we-building} -Ebben a tutoriálban megmutatjuk, hogy hogyan készíthetsz egy tic-tac-toe játékot React-ben. +Ebben a tutoriálban megmutatjuk, hogy hogyan készíthetsz egy tic-tac-toe játékot Reactben. - Itt megnézheted, hogy mit is készítünk: **[Végeredmény](https://codepen.io/gaearon/pen/gWWZgR?editors=0010)**. Ha a kódot nem teljesen érted, vagy ha nem világos a szintaxis, ne aggódj! A tutoriál célja, hogy megértesse veled a Reactet, és annak szintaxisát. -Ajánljuk, hogy mielőtt folytatnád ezt a tutoriált, olvass utána a tic-tac-toe játéknak. Egy funkció amit felfedezhetsz az az, hogy a jobb oldalon van egy számozott lista a játék táblájáról. Ez egy az összes korábbi lépést tartalmazó lista, ami a játék menete során folyamatosan frissítve van. +Ajánljuk, hogy mielőtt folytatnád ezt a tutoriált, olvass utána a tic-tac-toe játéknak. Az egyik funkció amit észrevehetsz, az a jobb oldalon lévő számozott lista a játék táblájáról. Ez a lista tartalmazza az összes korábbi lépést, ami a játék menete során folyamatosan frissül. -Ha megismerkedtél a tic-tac-toe játékkal, nyugodtan zárd be. Ez a tutoriál egy egyszerű sablont használ kiindulópontnak. A következő lépés felkészíteni téged, hogy elkezdhessük fejleszteni a játékot. +Ha megismerkedtél a tic-tac-toe játékkal, nyugodtan zárd be. Ez a tutoriál egy egyszerű sablont használ kiindulópontként. A következő lépés felkészíteni téged, hogy elkezdhessük a játék fejlesztését. ### Előfeltételek {#prerequisites} -Feltételezzük, hogy van már valami tapasztalatod a HTML-el és Javascript-tel, de a tutoriál követése akkor sem lehet probléma, ha egy másik programózi nyelvből jösz. Továbbá feltételezzük, hogy olyan programozói koncepciók mint a függvények, objektumok, tömbök és - egy bizonyos fokig - az osztályok is ismertek számodra. +Feltételezzük, hogy van már valami tapasztalatod a HTML-el és JavaScripttel, de a tutoriál követése akkor sem lehet probléma, ha egy másik programozói nyelvből jössz. Továbbá feltételezzük, hogy olyan programozói koncepciók, mint a függvények, objektumok, tömbök és - egy bizonyos fokig - az osztályok is ismertek számodra. -Ha először szeretnéd átnézni a JavaScript-et akkor [ezt az útmutatót](https://developer.mozilla.org/hu/docs/Web/JavaScript/a_javascript_ujboli_bemutatasa) ajánljuk. Megjegyzés: Ebben a tutoriálban pár ES6 (a JavaScript jelenlegi verziója) funkciót is használunk, többek között [nyílfunkciókat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [osztályokat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), és [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) utasításokat. A [Babel REPL](babel://es5-syntax-example) segítségével leellenőrízheted, hogy az ES6 mivé lesz lefordítva. +Ha először szeretnéd átnézni a JavaScriptet, akkor [ezt az útmutatót](https://developer.mozilla.org/hu/docs/Web/JavaScript/a_javascript_ujboli_bemutatasa) ajánljuk. Megjegyzés: Ebben a tutoriálban pár ES6 (a JavaScript jelenlegi verziója) funkciót is használunk, többek között [nyílfunkciókat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions), [osztályokat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes), [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let), és [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const) utasításokat. A [Babel REPL](babel://es5-syntax-example) segítségével leellenőrízheted, hogy az ES6 mivé lesz lefordítva. ## Beállítások a Tutoriálhoz {#setup-for-the-tutorial} -Ezt a tutoriált két féle képpen is elvégezheted: kódolhatsz a böngésződből, vagy felállíthatsz egy helyi fejlesztői környezetet. +Ezt a tutoriált kétféleképpen is elvégezheted: kódolhatsz a böngésződből, vagy felállíthatsz egy helyi fejlesztői környezetet. ### "1. Opció: kódolj a böngésződben" {#setup-option-1-write-code-in-the-browser} -A leggyorsabban így kezdhetsz neki! +A leggyorsabban így állhatsz neki! - -Először is nyisd meg a **[Kezdő kódot](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** egy új fülben. Az új fül egy új, üres tic-tac-toe táblát és a React kódot kell hogy mutassa. Ez a React az amit ebben a tutoriálban szerkeszteni fogunk. +Először is nyisd meg a **[Kezdő kódot](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)** egy új fülön. Az új fül egy új, üres tic-tac-toe táblát, és a React kódot kell hogy mutassa. Ez a React az, amit ebben a tutoriálban szerkeszteni fogunk. Ugord át a második opciót, és a React áttekintéséhez menj az [Áttekintés](#overview) szekcióhoz. @@ -71,16 +69,16 @@ Ez az opció szabadon választható, és nem kötelező a tutoriál elvégzésé Választható: Instrukciók helyi környezetből való követéshez, a kedvenc szövegszerkesztődhöz -Ahhoz hogy követni tudd a tutoriált egy általad választott szerkesztőből, ez az opció kicsivel több beállítást igényel. Íme a lépések: +Ahhoz, hogy követni tudd a tutoriált egy általad választott szerkesztőből, ez az opció kicsivel több beállítást igényel. Íme a lépések: -1. Győzödj meg róla, hogy a [Node.js](https://nodejs.org/en/) egy jelenlegi verziója telepítve van. +1. Győződj meg róla, hogy a [Node.js](https://nodejs.org/en/) egy jelenlegi verziója telepítve van. 2. Kövesd a [Create React App telepítési útmutatóját](/docs/create-a-new-react-app.html#create-react-app) egy új projekt létrehozásához. ```bash npx create-react-app my-app ``` -3. Törölj minden fájlt az új projekt `src/` mappábjában +3. Törölj minden fájlt az új projekt `src/` mappájában. > Megjegyzés: > @@ -90,13 +88,13 @@ npx create-react-app my-app cd my-app cd src -# Ha Mac-et vagy Linux-ot használsz: +# Ha Macet, vagy Linuxot használsz: rm -f * -# Vagy ha Windows-on vagy: +# Vagy ha Windowson vagy: del * -# Ezután lépj vissza a projekt mappára +# Ezután lépj vissza a projekt mappába cd .. ``` @@ -104,7 +102,7 @@ cd .. 5. Hozz létre egy `index.js` fájlt a `src/` mappában, tartalma pedig legyen [ez a JS kód](https://codepen.io/gaearon/pen/oWWQNa?editors=0010). -6. Add hozzá a következő három sort az `index.js` fájl tetejéhez a `src/` mappában: +6. Add hozzá a következő három sort az `index.js` fájl tetejéhez, a `src/` mappában: ```js import React from 'react'; @@ -112,7 +110,7 @@ import ReactDOM from 'react-dom'; import './index.css'; ``` -Ha mindent jól csináltál, és most lefuttatod az `npm start` parancsot a projekt mappájában és megnyitod a `http://localhost:3000`-t a böngészőben, egy üres tic-tac-toe mezőt kell, hogy láss. +Ha mindent jól csináltál, és most lefuttatod az `npm start` parancsot a projekt mappájában, és megnyitod a `http://localhost:3000`-t a böngészőben, egy üres tic-tac-toe mezőt kell, hogy láss. Szintaxis kiemeléshez a következő [instrukciókat](https://babeljs.io/docs/editors) ajánljuk. @@ -120,8 +118,7 @@ Szintaxis kiemeléshez a következő [instrukciókat](https://babeljs.io/docs/ed ### Segítség, elakadtam! {#help-im-stuck} -Ha bármikor elekadsz, a [közösségi támogatási források](/community/support.html) segíthet. Különösen a [Reactiflux Chat](https://discord.gg/reactiflux) lehet hasznos, ha gyorsan szeretnél segítséget kapni. Ha nem érkezik válasz, vagy még mindig el vagy akadva, nyiss egy issue-t és segítünk. -If you get stuck, check out the [community support resources](/community/support.html). In particular, [Reactiflux Chat](https://discord.gg/reactiflux) is a great way to get help quickly. If you don't receive an answer, or if you remain stuck, please file an issue, and we'll help you out. +Ha bármikor elakadsz, a [közösségi támogatási források](/community/support.html) segíthet. Különösen a [Reactiflux Chat](https://discord.gg/reactiflux) lehet hasznos, ha gyorsan szeretnél segítséget kapni. Ha nem érkezik válasz, vagy még mindig el vagy akadva, nyiss egy issue-t és segítünk. ## Áttekintés {#overview} @@ -129,9 +126,9 @@ Most hogy minden készen áll, kezdjük a React áttekintésével! ### Mi az a React? {#what-is-react} -A React egy deklaratív, effektív, és rugalmas JavaScript könyvtár felhasználói felületek készítéséhez. Lehetővé teszi komplex felhasználói felületek összeállítását izolált kódrészletekből, amiket "komponenseknek" hívunk. +A React egy deklaratív, effektív, és rugalmas JavaScript könyvtár, felhasználói felületek készítéséhez. Lehetővé teszi komplex felhasználói felületek összeállítását izolált kódrészletekből, amiket "komponenseknek" hívunk. -A React rendelkezik egy pár komponens típussal, de most kezdjük a `React.Comoponent` aloszállyal: +A React rendelkezik egy pár komponenstípussal, de most kezdjük a `React.Comoponent` alosztállyal: ```javascript class ShoppingList extends React.Component { @@ -152,11 +149,11 @@ class ShoppingList extends React.Component { // Példa használata: ``` -Nemsokára beszélünk a vicces XML szerű tag-ek ről is. A komponsensek segítségével mondjuk meg a React-nek, hogy mit szeretnénk látni a képernyőn. Ha az adatunk megváltozik, a React hatékonyan frissíti és újrarendereli a komponensünket. +Nemsokára beszélünk a vicces XML szerű címkékről is. A komponensek segítségével mondjuk meg a Reactnek, hogy mit szeretnénk látni a képernyőn. Ha az adatunk megváltozik, a React hatékonyan frissíti és újrarendereli a komponensünket. -Itt a ShoppingList egy **React komponens osztály**, vagy **React komponens típus**. Egy komponens paramétereket fogad, amiket **props**-nak hívunk (angol "properties" rövidítése), és egy nézet hierarchiát ad vissza a `render` metóduson keresztül. +Itt a ShoppingList egy **React komponensosztály**, vagy **React komponenstípus**. Egy komponens paramétereket fogad, amiket **props**-nak hívunk (angol "properties" rövidítése), és egy nézethierarchiát ad vissza, a `render` metóduson keresztül. -A `render` metódus egy *leírását* adja vissza annak, amit a képernyőn szeretnél látni. A React fogja a leírást és megjeleníti az eredményt. Pontosabban a `render` metódus egy **React elem**-et ad vissza, ami egy könnyűsúlyú leírása annak, amit renderelni kell. A legtöbb React fejlesztő egy speciális szintaxist használ, ezt "JSX"-nek hívják, ami könnyebbé teszi ezen a struktúrák írását. A `
    ` szintaxist `React.createEelement('div')`-é transzformáljuk kompiláláskor. A fenti példa egyenértékű az alábbival: +A `render` metódus egy *leírását* adja vissza annak, amit a képernyőn szeretnél látni. A React fogja a leírást, és megjeleníti az eredményt. Pontosabban, a `render` metódus egy **React elem**-et ad vissza, ami egy könnyűsúlyú leírása annak, amit renderelni kell. A legtöbb React fejlesztő egy speciális szintaxist használ, ezt "JSX"-nek hívják, ami könnyebbé teszi ezen a struktúrák írását. A `
    ` szintaxist `React.createEelement('div')`-té transzformáljuk kompiláláskor. A fenti példa egyenértékű az alábbival: ```javascript return React.createElement('div', {className: 'shopping-list'}, @@ -169,31 +166,31 @@ return React.createElement('div', {className: 'shopping-list'}, Ha érdekel a `createElement()` részletesebb leírása, nézd meg az [API referenciát](/docs/react-api.html#createelement), de ebben a tutoriálban ezt nem fogjuk használni. A JSX-et viszont igen. -A JSX rendelkezik a JavaScript minden erejével. A JSX-ben *bármilyen* JavaScript kifejezést tehetsz kapcsos zárójelek közé. Minden React elem egy JavaScript objektum amit váltózokban tárolhatsz, vagy körbeküldhetsz a programodban. +A JSX rendelkezik a JavaScript minden erejével. A JSX-be *bármilyen* JavaScript kifejezést tehetsz, kapcsos zárójelek közé. Minden React elem egy JavaScript objektum, amit változókban tárolhatsz, vagy körbeküldhetsz a programodban. A fenti `ShoppingList` komponens csak beépített DOM komponenseket renderel, mint a `
    ` és az `
  • `. De összeállíthatsz és renderelhetsz egyedi React komponenseket is. Például a `` írásával utalhatunk az egész bevásárlólistára. Minden React komponens elzártan és függetlenül operálhat; ez lehetővé teszi számodra komplex felhasználói kezelőfelületek építését egyszerű komponensekből. ## Kezdő kód ellenőrzése {#inspecting-the-starter-code} -Ha a tutoriálon a **böngésződből** fogsz dolgozni, nyisd meg ezt a kódot egy új fülön: **[Kezdő Kód](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**. Ha **helyi környezetben** fogsz dolgozni, nyisd meg a `src/index.js` fájlt a projekt mappádban (már korábban szerkesztetted a fájlt a [beállítások](#setup-option-2-local-development-environment) részben). +Ha a tutoriálon a **böngésződből** fogsz dolgozni, nyisd meg ezt a kódot egy új fülön: **[Kezdő kód](https://codepen.io/gaearon/pen/oWWQNa?editors=0010)**. Ha **helyi környezetben** fogsz dolgozni, nyisd meg a `src/index.js` fájlt a projekt mappádban (már korábban szerkesztetted a fájlt a [beállítások](#setup-option-2-local-development-environment) részben). -Ez a Kezdő Kód szolgál alapul ahhoz amit készítünk. A CSS stíluslapot megadtuk, hogy csak a React-re és a tic-tac-toe játék programozására kelljen fókuszálnod. +Ez a Kezdő kód az alapja annak, amit készítünk. A CSS stíluslapot megadtuk, hogy csak a Reactre és a tic-tac-toe játék programozására kelljen fókuszálnod. -A kód tanulmányozásával megállapíthatod, hogy három féle React komponensünk van: +A kód tanulmányozásával megállapíthatod, hogy háromféle React komponensünk van: * Square * Board * Game -A Square komponens egy egyszerű `