From 265bf374294aeadd1691bc90e01ad3fe8e2d1b7b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Tue, 23 Jul 2019 23:28:16 +0200 Subject: [PATCH 1/3] =?UTF-8?q?=F0=9F=8C=90=F0=9F=9A=A7=20WIP:=20translate?= =?UTF-8?q?=20glossary?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/reference-glossary.md | 54 +++++++++++++++--------------- 1 file changed, 27 insertions(+), 27 deletions(-) diff --git a/content/docs/reference-glossary.md b/content/docs/reference-glossary.md index bdf3587a5..36600638f 100644 --- a/content/docs/reference-glossary.md +++ b/content/docs/reference-glossary.md @@ -1,63 +1,63 @@ --- id: glossary -title: Glossary of React Terms +title: React kifejezések szójegyzéke layout: docs category: Reference permalink: docs/glossary.html --- -## Single-page Application {#single-page-application} +## Single-page applikáció {#single-page-application} -A single-page application is an application that loads a single HTML page and all the necessary assets (such as JavaScript and CSS) required for the application to run. Any interactions with the page or subsequent pages do not require a round trip to the server which means the page is not reloaded. +Egy single-page, vagy egyoldalas applikáció egy olyan alkalmazás, ami a futáshoz egyetlen HTML oldalt és az összes szükséges egyéb fájlt (pl.: JavaScript és CSS) tölti be. Bármilyen interakció az oldallal vagy alárendelt oldalakkal nem igényel a szerver felé kérést, ami azt jelenti, az oldal nem töltődik újra. -Though you may build a single-page application in React, it is not a requirement. React can also be used for enhancing small parts of existing websites with additional interactivity. Code written in React can coexist peacefully with markup rendered on the server by something like PHP, or with other client-side libraries. In fact, this is exactly how React is being used at Facebook. +A React-ben tudsz single-page applikációkat készíteni, de ez nem követelmény. A React arra is jó, ha egy létező weboldal kisebb részeit szeretnéd feljavítani extra interaktivitással. A React-ben írt kód békésen együtt tud élni a szerveren renderelt kóddal, mint például PHP, vagy más kliens-oldali könyvtárakkal. Valójában a Facebook-nál is pont így használjuk a React-et. -## ES6, ES2015, ES2016, etc {#es6-es2015-es2016-etc} +## ES6, ES2015, ES2016, stb. {#es6-es2015-es2016-etc} -These acronyms all refer to the most recent versions of the ECMAScript Language Specification standard, which the JavaScript language is an implementation of. The ES6 version (also known as ES2015) includes many additions to the previous versions such as: arrow functions, classes, template literals, `let` and `const` statements. You can learn more about specific versions [here](https://en.wikipedia.org/wiki/ECMAScript#Versions). +Ezek a mozaikszavak mind az ECMAScript nyelv specifikáció standard legújabb verziójaira utalnak aminek a JavaScript nyelv az egyik implementációja. Az ES6-os verzió (ES2015-ként is ismert) sok újdonságot tartalmaz a korábbi verziókhoz képest, mint például: nyíl függvények, osztályok, sablon literálok, `let` és `const` állítások. Az egyes verziókról [itt](https://en.wikipedia.org/wiki/ECMAScript#Versions) tanulhatsz többet. -## Compilers {#compilers} +## Fordítóprogramok {#compilers} -A JavaScript compiler takes JavaScript code, transforms it and returns JavaScript code in a different format. The most common use case is to take ES6 syntax and transform it into syntax that older browsers are capable of interpreting. [Babel](https://babeljs.io/) is the compiler most commonly used with React. +Egy JavaScript fordítóprogram fogja a JavaScript kódot, transzformálja és visszaadja azt JavaScript kódként egy másik formátumban. Leggyakoribb esetben az ES6 szintaxis transzformálására használt, annak érdekében hogy a régebbi böngészők is értelmezni tudják a kódot. A React esetében egyik leggyakrabban használt ilyen fordítóprogram a [Babel](https://babeljs.io/). -## Bundlers {#bundlers} +## Kötegelők {#bundlers} -Bundlers take JavaScript and CSS code written as separate modules (often hundreds of them), and combine them together into a few files better optimized for the browsers. Some bundlers commonly used in React applications include [Webpack](https://webpack.js.org/) and [Browserify](http://browserify.org/). +A kötegelők fogják a különálló (gyakran több száz) modulokban írt JavaScript és CSS kódot , és egyesítik azt néhány böngészőkre jobban optimalizált fájlban. Néhány, a React alkalmazások esetében gyakran használt kötegelő például a [Webpack](https://webpack.js.org/) és a [Browserify](http://browserify.org/). -## Package Managers {#package-managers} +## Csomag kezelők {#package-managers} -Package managers are tools that allow you to manage dependencies in your project. [npm](https://www.npmjs.com/) and [Yarn](https://yarnpkg.com/) are two package managers commonly used in React applications. Both of them are clients for the same npm package registry. +A csomag kezelők olyan eszközök, amik lehetővé teszik egy projekt függőségeinek a kezelését. Az [npm](https://www.npmjs.com/) és a [Yarn](https://yarnpkg.com/) két gyakran használt csomag kezelő a React alkalmazások esetében. Mindkettő egy kliens ugyanazon az npm csomag regisztrátorhoz. ## CDN {#cdn} -CDN stands for Content Delivery Network. CDNs deliver cached, static content from a network of servers across the globe. +A CDN a Content Delivery Network (tartalom szolgáltató hálózat) rövidítése. A CDN-ek gyorsítótárazott, statikus tartalmat szolgáltatnak egy világot átszelő szerverhálón keresztül. ## JSX {#jsx} -JSX is a syntax extension to JavaScript. It is similar to a template language, but it has full power of JavaScript. JSX gets compiled to `React.createElement()` calls which return plain JavaScript objects called "React elements". To get a basic introduction to JSX [see the docs here](/docs/introducing-jsx.html) and find a more in-depth tutorial on JSX [here](/docs/jsx-in-depth.html). +A JSX egy JavaScript szintaxis kiegészítés. Hasonló egy sablon nyelvhez, de a JavaScript teljes erejével rendelkezik. A JSX le van fordítva `React.createElement()` hívásokra, ami egyszerű JavaScript objektumokat térít vissza, amiket "React elemeknek" hívunk. Egy egyszerű bevezetőért [nézd meg a dokumentációt itt](/docs/introducing-jsx.html), egy mélyebbre ható JSX tutoriálért pedig nézd meg [ezt](/docs/jsx-in-depth.html). -React DOM uses camelCase property naming convention instead of HTML attribute names. For example, `tabindex` becomes `tabIndex` in JSX. The attribute `class` is also written as `className` since `class` is a reserved word in JavaScript: +A React DOM camelCase konvenciókat használ tulajdonságok elnevezésére HTML attribútum nevek helyett. Például a `tabindex` JSX-ben `tabIndex`-é válik. A `class` attribútumot is `className`-ként kell írjuk, mivel a `class` a JavaScript-ben egy fenntartott szó: ```js const name = 'Clementine'; ReactDOM.render( -

My name is {name}!

, +

A nevem {name}!

, document.getElementById('root') ); ``` -## [Elements](/docs/rendering-elements.html) {#elements} +## [Elemek](/docs/rendering-elements.html) {#elements} React elements are the building blocks of React applications. One might confuse elements with a more widely known concept of "components". An element describes what you want to see on the screen. React elements are immutable. ```js -const element =

Hello, world

; +const element =

Helló, világ

; ``` Typically, elements are not used directly, but get returned from components. -## [Components](/docs/components-and-props.html) {#components} +## [Komponensek](/docs/components-and-props.html) {#components} React components are small, reusable pieces of code that return a React element to be rendered to the page. The simplest version of React component is a plain JavaScript function that returns a React element: @@ -79,7 +79,7 @@ class Welcome extends React.Component { Components can be broken down into distinct pieces of functionality and used within other components. Components can return other components, arrays, strings and numbers. A good rule of thumb is that if a part of your UI is used several times (Button, Panel, Avatar), or is complex enough on its own (App, FeedStory, Comment), it is a good candidate to be a reusable component. Component names should also always start with a capital letter (`` **not** ``). See [this documentation](/docs/components-and-props.html#rendering-a-component) for more information on rendering components. -### [`props`](/docs/components-and-props.html) {#props} +### [`prop`-ok](/docs/components-and-props.html) {#props} `props` are inputs to a React component. They are data passed down from a parent component to a child component. @@ -118,7 +118,7 @@ class Welcome extends React.Component { } ``` -### [`state`](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) {#state} +### [`state`, vagy helyi állapot](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) {#state} A component needs `state` when some data associated with it changes over time. For example, a `Checkbox` component might need `isChecked` in its state, and a `NewsFeed` component might want to keep track of `fetchedPosts` in its state. @@ -126,11 +126,11 @@ The most important difference between `state` and `props` is that `props` are pa For each particular piece of changing data, there should be just one component that "owns" it in its state. Don't try to synchronize states of two different components. Instead, [lift it up](/docs/lifting-state-up.html) to their closest shared ancestor, and pass it down as props to both of them. -## [Lifecycle Methods](/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) {#lifecycle-methods} +## [Életciklus metódusok](/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) {#lifecycle-methods} Lifecycle methods are custom functionality that gets executed during the different phases of a component. There are methods available when the component gets created and inserted into the DOM ([mounting](/docs/react-component.html#mounting)), when the component updates, and when the component gets unmounted or removed from the DOM. - ## [Controlled](/docs/forms.html#controlled-components) vs. [Uncontrolled Components](/docs/uncontrolled-components.html) + ## [Kontrollált](/docs/forms.html#controlled-components) vs. [kontrollálatlan komponensek](/docs/uncontrolled-components.html) React has two different approaches to dealing with form inputs. @@ -140,7 +140,7 @@ An *uncontrolled component* works like form elements do outside of React. When a In most cases you should use controlled components. -## [Keys](/docs/lists-and-keys.html) {#keys} +## [Kulcsok](/docs/lists-and-keys.html) {#keys} A "key" is a special string attribute you need to include when creating arrays of elements. Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside an array to give the elements a stable identity. @@ -148,19 +148,19 @@ Keys only need to be unique among sibling elements in the same array. They don't Don't pass something like `Math.random()` to keys. It is important that keys have a "stable identity" across re-renders so that React can determine when items are added, removed, or re-ordered. Ideally, keys should correspond to unique and stable identifiers coming from your data, such as `post.id`. -## [Refs](/docs/refs-and-the-dom.html) {#refs} +## [Ref-ek](/docs/refs-and-the-dom.html) {#refs} React supports a special attribute that you can attach to any component. The `ref` attribute can be an object created by [`React.createRef()` function](/docs/react-api.html#reactcreateref) or a callback function, or a string (in legacy API). When the `ref` attribute is a callback function, the function receives the underlying DOM element or class instance (depending on the type of element) as its argument. This allows you to have direct access to the DOM element or component instance. Use refs sparingly. If you find yourself often using refs to "make things happen" in your app, consider getting more familiar with [top-down data flow](/docs/lifting-state-up.html). -## [Events](/docs/handling-events.html) {#events} +## [Események](/docs/handling-events.html) {#events} Handling events with React elements has some syntactic differences: * React event handlers are named using camelCase, rather than lowercase. * With JSX you pass a function as the event handler, rather than a string. -## [Reconciliation](/docs/reconciliation.html) {#reconciliation} +## [Összeegyeztetés](/docs/reconciliation.html) {#reconciliation} When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called "reconciliation". From 8ac26a37da0b07f9504d332777f4fb07ccb63d5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Wed, 24 Jul 2019 22:47:13 +0200 Subject: [PATCH 2/3] =?UTF-8?q?=F0=9F=8C=90=20translate=20Glossary?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/docs/reference-glossary.md | 76 +++++++++++++++--------------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/content/docs/reference-glossary.md b/content/docs/reference-glossary.md index 36600638f..687eac9dd 100644 --- a/content/docs/reference-glossary.md +++ b/content/docs/reference-glossary.md @@ -1,6 +1,6 @@ --- id: glossary -title: React kifejezések szójegyzéke +title: React szójegyzék layout: docs category: Reference permalink: docs/glossary.html @@ -11,7 +11,7 @@ permalink: docs/glossary.html Egy single-page, vagy egyoldalas applikáció egy olyan alkalmazás, ami a futáshoz egyetlen HTML oldalt és az összes szükséges egyéb fájlt (pl.: JavaScript és CSS) tölti be. Bármilyen interakció az oldallal vagy alárendelt oldalakkal nem igényel a szerver felé kérést, ami azt jelenti, az oldal nem töltődik újra. -A React-ben tudsz single-page applikációkat készíteni, de ez nem követelmény. A React arra is jó, ha egy létező weboldal kisebb részeit szeretnéd feljavítani extra interaktivitással. A React-ben írt kód békésen együtt tud élni a szerveren renderelt kóddal, mint például PHP, vagy más kliens-oldali könyvtárakkal. Valójában a Facebook-nál is pont így használjuk a React-et. +A React-ben tudsz single-page applikációkat készíteni, de ez nem kötelező. A React arra is jó lehet, ha egy létező weboldal kisebb részeit szeretnéd feljavítani extra interaktivitással. A React-ben írt kód békésen együtt tud élni a szerveren renderelt kóddal, mint például PHP, vagy más kliens-oldali könyvtárakkal. Valójában a Facebook-nál is pont így használjuk a React-et. ## ES6, ES2015, ES2016, stb. {#es6-es2015-es2016-etc} @@ -19,15 +19,15 @@ Ezek a mozaikszavak mind az ECMAScript nyelv specifikáció standard legújabb v ## Fordítóprogramok {#compilers} -Egy JavaScript fordítóprogram fogja a JavaScript kódot, transzformálja és visszaadja azt JavaScript kódként egy másik formátumban. Leggyakoribb esetben az ES6 szintaxis transzformálására használt, annak érdekében hogy a régebbi böngészők is értelmezni tudják a kódot. A React esetében egyik leggyakrabban használt ilyen fordítóprogram a [Babel](https://babeljs.io/). +Egy JavaScript fordítóprogram fogja a JavaScript kódot, transzformálja és visszaadja azt egy másik JavaScript kódformátumban. Leggyakrabban az ES6 szintaxis transzformálására használt, azért hogy a régebbi böngészők is értelmezni tudják a kódot. A React esetében egyik leggyakrabban használt ilyen fordítóprogram a [Babel](https://babeljs.io/). ## Kötegelők {#bundlers} -A kötegelők fogják a különálló (gyakran több száz) modulokban írt JavaScript és CSS kódot , és egyesítik azt néhány böngészőkre jobban optimalizált fájlban. Néhány, a React alkalmazások esetében gyakran használt kötegelő például a [Webpack](https://webpack.js.org/) és a [Browserify](http://browserify.org/). +A kötegelők fogják a különálló (gyakran több száz) modulokban megírt JavaScript és CSS kódot, és egyesítik azt néhány böngészőkre jobban optimalizált fájlban. Néhány, a React alkalmazások esetében gyakran használt kötegelő például a [Webpack](https://webpack.js.org/) és a [Browserify](http://browserify.org/). ## Csomag kezelők {#package-managers} -A csomag kezelők olyan eszközök, amik lehetővé teszik egy projekt függőségeinek a kezelését. Az [npm](https://www.npmjs.com/) és a [Yarn](https://yarnpkg.com/) két gyakran használt csomag kezelő a React alkalmazások esetében. Mindkettő egy kliens ugyanazon az npm csomag regisztrátorhoz. +A csomag kezelők olyan eszközök, amik lehetővé teszik egy projekt függőségeinek a kezelését. Az [npm](https://www.npmjs.com/) és a [Yarn](https://yarnpkg.com/) két gyakran használt csomag kezelő a React alkalmazások esetében. Mindkettő egy kliens ugyanahhoz az npm csomag regisztrátorhoz. ## CDN {#cdn} @@ -40,7 +40,7 @@ A JSX egy JavaScript szintaxis kiegészítés. Hasonló egy sablon nyelvhez, de A React DOM camelCase konvenciókat használ tulajdonságok elnevezésére HTML attribútum nevek helyett. Például a `tabindex` JSX-ben `tabIndex`-é válik. A `class` attribútumot is `className`-ként kell írjuk, mivel a `class` a JavaScript-ben egy fenntartott szó: ```js -const name = 'Clementine'; +const name = 'Klaudia'; ReactDOM.render(

A nevem {name}!

, document.getElementById('root') @@ -49,58 +49,58 @@ ReactDOM.render( ## [Elemek](/docs/rendering-elements.html) {#elements} -React elements are the building blocks of React applications. One might confuse elements with a more widely known concept of "components". An element describes what you want to see on the screen. React elements are immutable. +A React elemek a React alkalmazások építőkockái. Könnyen összetévszthetnő a sokkal ismertebb "komponensek" fogalmával. Egy elem azt írja le, amit a képernyőn szeretnél látni. A React elemek megváltoztathatatlanok. ```js const element =

Helló, világ

; ``` -Typically, elements are not used directly, but get returned from components. +Az elemeket általában nem közvetlenül használjuk, hanem egy komponens téríti őket vissza. ## [Komponensek](/docs/components-and-props.html) {#components} -React components are small, reusable pieces of code that return a React element to be rendered to the page. The simplest version of React component is a plain JavaScript function that returns a React element: +A React komponensek kis, újrafelhasználható kódrészletek, amik React elemeket térítenek vissza, amiket az oldalra renderelünk. A React komponens legegyszerűbb verziója egy egyszerű JavaScript függvény ami egy React elemet térít vissza: ```js function Welcome(props) { - return

Hello, {props.name}

; + return

Helló, {props.name}

; } ``` -Components can also be ES6 classes: +A komponensek lehetnek ES6 osztályok is: ```js class Welcome extends React.Component { render() { - return

Hello, {this.props.name}

; + return

Helló, {this.props.name}

; } } ``` -Components can be broken down into distinct pieces of functionality and used within other components. Components can return other components, arrays, strings and numbers. A good rule of thumb is that if a part of your UI is used several times (Button, Panel, Avatar), or is complex enough on its own (App, FeedStory, Comment), it is a good candidate to be a reusable component. Component names should also always start with a capital letter (`` **not** ``). See [this documentation](/docs/components-and-props.html#rendering-a-component) for more information on rendering components. +A komponensket le tudjuk bontani különálló funkcionális részekre és használni azokat más komponensekben. A komponensek vissza tudnak téríteni más komponenseket, tömböket, sztringeket, és számokat. Egy jó ökölszabály, hogy ha a kezelőfelületed egy része többször is használva van, (Button, Panel, Avatar), vagy elég komplex saját magában is (App, FeedStory, Comment) akkor ez egy jó jelölt lehet egy újrafelhasználható komponens készítéséhez. A komponenseket mindig nagybetűvel kezdjük (`` **nem** ``). Több információért a komponensek rendereléséről nézd meg [ezt a dokumentációt](/docs/components-and-props.html#rendering-a-component). ### [`prop`-ok](/docs/components-and-props.html) {#props} -`props` are inputs to a React component. They are data passed down from a parent component to a child component. +A `props`, vagy prop-ok a React komponens bemenetei. Adatot tartalmaznak, amiket szülő komponensekből küldünk le gyermek komponenseknek. -Remember that `props` are readonly. They should not be modified in any way: +Jegyezd meg, hogy a `props` csakis olvasható. Soha, semmilyen körülmények között ne módosítsd őket: ```js -// Wrong! +// Helytelen! props.number = 42; ``` -If you need to modify some value in response to user input or a network response, use `state` instead. +Ha valamilyen értéket kell módósítani egy felhasználó vagy hálózaton érkező bemenetre válaszolva, használd inkább a `state`-t. ### `props.children` {#propschildren} -`props.children` is available on every component. It contains the content between the opening and closing tags of a component. For example: +A `props.children` minden komponensen elérhető. Tartalma minden ami egy komponens kezdő és záró címkéi között van. Például: ```js -Hello world! +Helló, világ! ``` -The string `Hello world!` is available in `props.children` in the `Welcome` component: +A `Helló, világ!` sztring elérhető a `props.children`-ben a `Welcome` komponensben: ```js function Welcome(props) { @@ -108,7 +108,7 @@ function Welcome(props) { } ``` -For components defined as classes, use `this.props.children`: +Osztálykomponensek esetében használd a `this.props.children`-t: ```js class Welcome extends React.Component { @@ -120,47 +120,47 @@ class Welcome extends React.Component { ### [`state`, vagy helyi állapot](/docs/state-and-lifecycle.html#adding-local-state-to-a-class) {#state} -A component needs `state` when some data associated with it changes over time. For example, a `Checkbox` component might need `isChecked` in its state, and a `NewsFeed` component might want to keep track of `fetchedPosts` in its state. +Egy komponensnek `state`-re, helyi állapotra van szüksége, ha az azzal párosított adat az idő során változni fog. Például egy `Checkbox` komponensnek szüksége lehet egy `isChecked` értékre az állapotában, vagy egy `NewsFeed` komponens talán nyomon akarja követni a `fetchedPosts`-okat annak helyi állapotában. -The most important difference between `state` and `props` is that `props` are passed from a parent component, but `state` is managed by the component itself. A component cannot change its `props`, but it can change its `state`. +A legfontosabb különbség a `state` és a `props` között, hogy a `props` szülő komponensekből van leküldve, amíg a `state`-t a komponens maga kezeli. Egy komponens nem változtathatja meg annak saját `props` értékeit, de a `state`-t igen. -For each particular piece of changing data, there should be just one component that "owns" it in its state. Don't try to synchronize states of two different components. Instead, [lift it up](/docs/lifting-state-up.html) to their closest shared ancestor, and pass it down as props to both of them. +Minden változó adatot egyetlen komponens kell hogy "birtokoljon" a saját állapotában. Ne próbálj állapotokat szinkronizálni két különböző komponensben. Ehelyett [emeld fel az állapotot](/docs/lifting-state-up.html) a legközelebbi közös ősbe, és küldd le azt prop-ként mindkét komponensnek. ## [Életciklus metódusok](/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) {#lifecycle-methods} -Lifecycle methods are custom functionality that gets executed during the different phases of a component. There are methods available when the component gets created and inserted into the DOM ([mounting](/docs/react-component.html#mounting)), when the component updates, and when the component gets unmounted or removed from the DOM. +Az életciklus metódusok egyedi funkciók, amik egy komponens különböző fázisaiban vannak elvégezve. Vannak elérhető metódusok ahhoz, amikor egy komponens létrejön és a DOM-ba van illesztve ([előkészítés](/docs/react-component.html#mounting)), amikor a komponens frissül, és amikor a komponens le van választva és eltávolítva a DOM-ból. ## [Kontrollált](/docs/forms.html#controlled-components) vs. [kontrollálatlan komponensek](/docs/uncontrolled-components.html) -React has two different approaches to dealing with form inputs. +A React két különböző módon kezeli az űrlap bemeneteket. -An input form element whose value is controlled by React is called a *controlled component*. When a user enters data into a controlled component a change event handler is triggered and your code decides whether the input is valid (by re-rendering with the updated value). If you do not re-render then the form element will remain unchanged. +Egy olyan bemeneti űrlap elemet aminek az értékét a React irányítja, *kontrollált komponensnek* hívunk. Amikor egy felhasználó adatot ír be egy kontrollált komponensbe, egy változás eseménykezelő lesz meghívva és a kódod eldönti hogy a bevitt érték érvényes-e (a frissített érték újrarenderelésével). Ha nem renderelsz újra, az űrlap elem változatlan marad. -An *uncontrolled component* works like form elements do outside of React. When a user inputs data into a form field (an input box, dropdown, etc) the updated information is reflected without React needing to do anything. However, this also means that you can't force the field to have a certain value. +Egy *kontrollálatlan komponens* ugyanúgy működik, mint az űrlap elemek a React-en kívül. Amikor a felhasználó adatot ír be egy űrlap mezőbe (egy input doboz, legördülő menü, stb.) a frissített információ anélkül lesz tükrözve, hogy a React-nek bármit is tennie kéne. Azonban ez azt is jelenti, hogy nem tudsz egy mezőt arra kényszeríteni, hogy egy bizonyos értéket vegyen fel. -In most cases you should use controlled components. +A legtöbb esetben próbálj kontrollált komponenseket használni. ## [Kulcsok](/docs/lists-and-keys.html) {#keys} -A "key" is a special string attribute you need to include when creating arrays of elements. Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside an array to give the elements a stable identity. +A "key", vagy kulcs egy speciális sztring attribútum amit elemtömbök létrehozásakor az elemeknek kell tartalmaznia. A kulcsok segítenek a React-nek azonosítani melyik elemek változtak, lettek hozzáadva, vagy törölve. A kulcsokat egy tömbön belül kell hozzáadni, hogy az elemek egy stabil azonossággal rendelkezzenek. -Keys only need to be unique among sibling elements in the same array. They don't need to be unique across the whole application or even a single component. +A kulcsoknak csak testvér elemek között kell egyedinek lenniük ugyanabban a tömbben. Nem kell, hogy egyediek legyenek az egész alkalmazásban vagy akár egy szimpla komponensben sem. -Don't pass something like `Math.random()` to keys. It is important that keys have a "stable identity" across re-renders so that React can determine when items are added, removed, or re-ordered. Ideally, keys should correspond to unique and stable identifiers coming from your data, such as `post.id`. +Ne használj olyasmit, mint a `Math.random()` kulcsnak. Fontos, hogy a kulcsoknak "stabil azonosságuk" legyen újrarenderelések között, hogy a React el tudja dönteni melyik elemek lettek hozzáadva, törölve, átrendezve. Ideális esetben a kulcsoknak meg kell felelniük az adatból származó egyedi és stabil azonosítóknak, mint például a `post.id`. ## [Ref-ek](/docs/refs-and-the-dom.html) {#refs} -React supports a special attribute that you can attach to any component. The `ref` attribute can be an object created by [`React.createRef()` function](/docs/react-api.html#reactcreateref) or a callback function, or a string (in legacy API). When the `ref` attribute is a callback function, the function receives the underlying DOM element or class instance (depending on the type of element) as its argument. This allows you to have direct access to the DOM element or component instance. +A React támogat egy speciális attribútumot, amit bármelyik komponenshez tudsz kötni. A `ref` attribútum lehet egy objektum amit a [`React.createRef()` függvény](/docs/react-api.html#reactcreateref) készített, vagy egy visszahívó függvény, vagy egy sztring (korábbi API-ben). Ha a `ref` attribútum egy visszahívó függvény, a függvény fogadja a mögöttes DOM elemet vagy osztály példányt (az elem típusától függően) argumentumként. Ez lehetővé teszi, hogy közvetlenül irányítsuk a DOM elemet vagy komponens példányt. -Use refs sparingly. If you find yourself often using refs to "make things happen" in your app, consider getting more familiar with [top-down data flow](/docs/lifting-state-up.html). +Bánj takarékosan a ref-ekkel. Ha azt veszed észre magadon, hogy túl gyakran használod őket csak azért hogy a "dolgok csak simán működjenek" az alkalmazásodban, fontold meg a [fentről-lefelé adatfolyam](/docs/lifting-state-up.html) technika megismerését. ## [Események](/docs/handling-events.html) {#events} -Handling events with React elements has some syntactic differences: +A React esemény kezeléseinek vannak néhány szintaxis beli különbségei: -* React event handlers are named using camelCase, rather than lowercase. -* With JSX you pass a function as the event handler, rather than a string. +* A React eseménykezelők camelCase neveket használnak, kisbetűk helyett. +* JSX-el sztring helyett egy függvényt adsz meg esemélykezelőnek. ## [Összeegyeztetés](/docs/reconciliation.html) {#reconciliation} -When a component's props or state change, React decides whether an actual DOM update is necessary by comparing the newly returned element with the previously rendered one. When they are not equal, React will update the DOM. This process is called "reconciliation". +Amikor egy komponens egyik prop-ja vagy helyi állapota megváltozik, a React eldönti, hogy egy tényleges DOM frissítés is szükséges-e, az újonnan visszatérített, és az előző renderelés elemeinek összehasonlításával. Ha azok nem egyenlőek, a React frissíti a DOM-ot. Ezt a folyamatot hívjuk "összeegyeztetésnek". \ No newline at end of file From 81b1c66a667a76c0c068ae0e61ef38916892e6f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Mon, 2 Mar 2020 22:44:34 +0100 Subject: [PATCH 3/3] Apply suggestions from code review Co-Authored-By: Orsi --- content/docs/reference-glossary.md | 32 +++++++++++++++--------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/content/docs/reference-glossary.md b/content/docs/reference-glossary.md index 687eac9dd..683da6acc 100644 --- a/content/docs/reference-glossary.md +++ b/content/docs/reference-glossary.md @@ -15,7 +15,7 @@ A React-ben tudsz single-page applikációkat készíteni, de ez nem kötelező. ## ES6, ES2015, ES2016, stb. {#es6-es2015-es2016-etc} -Ezek a mozaikszavak mind az ECMAScript nyelv specifikáció standard legújabb verziójaira utalnak aminek a JavaScript nyelv az egyik implementációja. Az ES6-os verzió (ES2015-ként is ismert) sok újdonságot tartalmaz a korábbi verziókhoz képest, mint például: nyíl függvények, osztályok, sablon literálok, `let` és `const` állítások. Az egyes verziókról [itt](https://en.wikipedia.org/wiki/ECMAScript#Versions) tanulhatsz többet. +Ezek a mozaikszavak mind az ECMAScript nyelv specifikáció standard legújabb verziójaira utalnak, aminek a JavaScript nyelv az egyik implementációja. Az ES6-os verzió (ES2015-ként is ismert) sok újdonságot tartalmaz a korábbi verziókhoz képest, mint például: nyíl függvények, osztályok, sablon literálok, `let` és `const` állítások. Az egyes verziókról [itt](https://en.wikipedia.org/wiki/ECMAScript#Versions) tanulhatsz többet. ## Fordítóprogramok {#compilers} @@ -25,9 +25,9 @@ Egy JavaScript fordítóprogram fogja a JavaScript kódot, transzformálja és v A kötegelők fogják a különálló (gyakran több száz) modulokban megírt JavaScript és CSS kódot, és egyesítik azt néhány böngészőkre jobban optimalizált fájlban. Néhány, a React alkalmazások esetében gyakran használt kötegelő például a [Webpack](https://webpack.js.org/) és a [Browserify](http://browserify.org/). -## Csomag kezelők {#package-managers} +## Csomagkezelők {#package-managers} -A csomag kezelők olyan eszközök, amik lehetővé teszik egy projekt függőségeinek a kezelését. Az [npm](https://www.npmjs.com/) és a [Yarn](https://yarnpkg.com/) két gyakran használt csomag kezelő a React alkalmazások esetében. Mindkettő egy kliens ugyanahhoz az npm csomag regisztrátorhoz. +A csomagkezelők olyan eszközök, amik lehetővé teszik egy projekt függőségeinek a kezelését. Az [npm](https://www.npmjs.com/) és a [Yarn](https://yarnpkg.com/) két gyakran használt csomagkezelő a React alkalmazások esetében. Mindkettő egy kliens ugyanahhoz az npm csomag regisztrátorhoz. ## CDN {#cdn} @@ -49,17 +49,17 @@ ReactDOM.render( ## [Elemek](/docs/rendering-elements.html) {#elements} -A React elemek a React alkalmazások építőkockái. Könnyen összetévszthetnő a sokkal ismertebb "komponensek" fogalmával. Egy elem azt írja le, amit a képernyőn szeretnél látni. A React elemek megváltoztathatatlanok. +A React elemek a React alkalmazások építőkockái. Könnyen összetéveszthető a sokkal ismertebb "komponens" fogalmával. Egy elem azt írja le, amit a képernyőn szeretnél látni. A React elemek megváltoztathatatlanok. ```js const element =

Helló, világ

; ``` -Az elemeket általában nem közvetlenül használjuk, hanem egy komponens téríti őket vissza. +Az elemeket általában nem közvetlenül használjuk, hanem egy komponens adja őket vissza. ## [Komponensek](/docs/components-and-props.html) {#components} -A React komponensek kis, újrafelhasználható kódrészletek, amik React elemeket térítenek vissza, amiket az oldalra renderelünk. A React komponens legegyszerűbb verziója egy egyszerű JavaScript függvény ami egy React elemet térít vissza: +A React komponensek kis, újrafelhasználható kódrészletek, amik React elemeket adnak vissza, amiket az oldalra renderelünk. A React komponens legegyszerűbb verziója egy egyszerű JavaScript függvény, ami egy React elemet ad vissza: ```js function Welcome(props) { @@ -77,7 +77,7 @@ class Welcome extends React.Component { } ``` -A komponensket le tudjuk bontani különálló funkcionális részekre és használni azokat más komponensekben. A komponensek vissza tudnak téríteni más komponenseket, tömböket, sztringeket, és számokat. Egy jó ökölszabály, hogy ha a kezelőfelületed egy része többször is használva van, (Button, Panel, Avatar), vagy elég komplex saját magában is (App, FeedStory, Comment) akkor ez egy jó jelölt lehet egy újrafelhasználható komponens készítéséhez. A komponenseket mindig nagybetűvel kezdjük (`` **nem** ``). Több információért a komponensek rendereléséről nézd meg [ezt a dokumentációt](/docs/components-and-props.html#rendering-a-component). +A komponenseket le tudjuk bontani különálló funkcionális részekre és használni azokat más komponensekben. A komponensek vissza tudnak adni más komponenseket, tömböket, sztringeket és számokat. Egy jó ökölszabály, hogy ha a kezelőfelületed egy részét több helyen is használod (Button, Panel, Avatar), vagy elég komplex saját magában is (App, FeedStory, Comment), akkor ez egy jó jelölt lehet egy újrafelhasználható komponens készítéséhez. A komponenseket mindig nagybetűvel kezdjük (`` **nem** ``). Több információért a komponensek rendereléséről nézd meg [ezt a dokumentációt](/docs/components-and-props.html#rendering-a-component). ### [`prop`-ok](/docs/components-and-props.html) {#props} @@ -122,19 +122,19 @@ class Welcome extends React.Component { Egy komponensnek `state`-re, helyi állapotra van szüksége, ha az azzal párosított adat az idő során változni fog. Például egy `Checkbox` komponensnek szüksége lehet egy `isChecked` értékre az állapotában, vagy egy `NewsFeed` komponens talán nyomon akarja követni a `fetchedPosts`-okat annak helyi állapotában. -A legfontosabb különbség a `state` és a `props` között, hogy a `props` szülő komponensekből van leküldve, amíg a `state`-t a komponens maga kezeli. Egy komponens nem változtathatja meg annak saját `props` értékeit, de a `state`-t igen. +A legfontosabb különbség a `state` és a `props` között, hogy a `props` szülő komponensekből van átadva, amíg a `state`-t a komponens maga kezeli. Egy komponens nem változtathatja meg annak saját `props` értékeit, de a `state`-t igen. -Minden változó adatot egyetlen komponens kell hogy "birtokoljon" a saját állapotában. Ne próbálj állapotokat szinkronizálni két különböző komponensben. Ehelyett [emeld fel az állapotot](/docs/lifting-state-up.html) a legközelebbi közös ősbe, és küldd le azt prop-ként mindkét komponensnek. +Minden változó adatot egyetlen komponens kell, hogy "birtokoljon" a saját állapotában. Ne próbálj állapotokat szinkronizálni két különböző komponensben. Ehelyett [emeld fel az állapotot](/docs/lifting-state-up.html) a legközelebbi közös ősbe, és küldd le azt prop-ként mindkét komponensnek. ## [Életciklus metódusok](/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class) {#lifecycle-methods} -Az életciklus metódusok egyedi funkciók, amik egy komponens különböző fázisaiban vannak elvégezve. Vannak elérhető metódusok ahhoz, amikor egy komponens létrejön és a DOM-ba van illesztve ([előkészítés](/docs/react-component.html#mounting)), amikor a komponens frissül, és amikor a komponens le van választva és eltávolítva a DOM-ból. +Az életciklus metódusok egyedi funkciók, amik egy komponens különböző fázisaiban hajtódnak végre. Vannak elérhető metódusok ahhoz, amikor egy komponens létrejön és a DOM-ba van illesztve ([előkészítés](/docs/react-component.html#mounting)), amikor a komponens frissül, és amikor a komponens le van választva és eltávolítva a DOM-ból. ## [Kontrollált](/docs/forms.html#controlled-components) vs. [kontrollálatlan komponensek](/docs/uncontrolled-components.html) A React két különböző módon kezeli az űrlap bemeneteket. -Egy olyan bemeneti űrlap elemet aminek az értékét a React irányítja, *kontrollált komponensnek* hívunk. Amikor egy felhasználó adatot ír be egy kontrollált komponensbe, egy változás eseménykezelő lesz meghívva és a kódod eldönti hogy a bevitt érték érvényes-e (a frissített érték újrarenderelésével). Ha nem renderelsz újra, az űrlap elem változatlan marad. +Egy olyan bemeneti űrlap elemet aminek az értékét a React irányítja, *kontrollált komponensnek* hívunk. Amikor egy felhasználó adatot ír be egy kontrollált komponensbe, egy változás eseménykezelő lesz meghívva és a kódod eldönti, hogy a bevitt érték érvényes-e (a frissített érték újrarenderelésével). Ha nem renderelsz újra, az űrlap elem változatlan marad. Egy *kontrollálatlan komponens* ugyanúgy működik, mint az űrlap elemek a React-en kívül. Amikor a felhasználó adatot ír be egy űrlap mezőbe (egy input doboz, legördülő menü, stb.) a frissített információ anélkül lesz tükrözve, hogy a React-nek bármit is tennie kéne. Azonban ez azt is jelenti, hogy nem tudsz egy mezőt arra kényszeríteni, hogy egy bizonyos értéket vegyen fel. @@ -142,7 +142,7 @@ A legtöbb esetben próbálj kontrollált komponenseket használni. ## [Kulcsok](/docs/lists-and-keys.html) {#keys} -A "key", vagy kulcs egy speciális sztring attribútum amit elemtömbök létrehozásakor az elemeknek kell tartalmaznia. A kulcsok segítenek a React-nek azonosítani melyik elemek változtak, lettek hozzáadva, vagy törölve. A kulcsokat egy tömbön belül kell hozzáadni, hogy az elemek egy stabil azonossággal rendelkezzenek. +A "key", vagy kulcs egy speciális sztring attribútum, amit elemtömbök létrehozásakor az elemeknek kell tartalmaznia. A kulcsok segítenek a Reactnek azonosítani melyik elemek változtak, lettek hozzáadva vagy törölve. A kulcsokat egy tömbön belül kell hozzáadni, hogy az elemek egy stabil azonossággal rendelkezzenek. A kulcsoknak csak testvér elemek között kell egyedinek lenniük ugyanabban a tömbben. Nem kell, hogy egyediek legyenek az egész alkalmazásban vagy akár egy szimpla komponensben sem. @@ -152,15 +152,15 @@ Ne használj olyasmit, mint a `Math.random()` kulcsnak. Fontos, hogy a kulcsokna A React támogat egy speciális attribútumot, amit bármelyik komponenshez tudsz kötni. A `ref` attribútum lehet egy objektum amit a [`React.createRef()` függvény](/docs/react-api.html#reactcreateref) készített, vagy egy visszahívó függvény, vagy egy sztring (korábbi API-ben). Ha a `ref` attribútum egy visszahívó függvény, a függvény fogadja a mögöttes DOM elemet vagy osztály példányt (az elem típusától függően) argumentumként. Ez lehetővé teszi, hogy közvetlenül irányítsuk a DOM elemet vagy komponens példányt. -Bánj takarékosan a ref-ekkel. Ha azt veszed észre magadon, hogy túl gyakran használod őket csak azért hogy a "dolgok csak simán működjenek" az alkalmazásodban, fontold meg a [fentről-lefelé adatfolyam](/docs/lifting-state-up.html) technika megismerését. +Bánj takarékosan a ref-ekkel. Ha azt veszed észre magadon, hogy túl gyakran használod őket csak azért, hogy a "dolgok csak simán működjenek" az alkalmazásodban, fontold meg a [fentről-lefelé adatfolyam](/docs/lifting-state-up.html) technika megismerését. ## [Események](/docs/handling-events.html) {#events} -A React esemény kezeléseinek vannak néhány szintaxis beli különbségei: +A React eseménykezelésének van néhány szintaxisbeli különbsége: * A React eseménykezelők camelCase neveket használnak, kisbetűk helyett. -* JSX-el sztring helyett egy függvényt adsz meg esemélykezelőnek. +* JSX-el sztring helyett egy függvényt adsz meg eseménykezelőnek. ## [Összeegyeztetés](/docs/reconciliation.html) {#reconciliation} -Amikor egy komponens egyik prop-ja vagy helyi állapota megváltozik, a React eldönti, hogy egy tényleges DOM frissítés is szükséges-e, az újonnan visszatérített, és az előző renderelés elemeinek összehasonlításával. Ha azok nem egyenlőek, a React frissíti a DOM-ot. Ezt a folyamatot hívjuk "összeegyeztetésnek". \ No newline at end of file +Amikor egy komponens egyik prop-ja vagy helyi állapota megváltozik, a React eldönti, hogy egy tényleges DOM frissítés is szükséges-e az újonnan visszatérített és az előző renderelés elemeinek összehasonlításával. Ha azok nem egyenlőek, a React frissíti a DOM-ot. Ezt a folyamatot hívjuk "összeegyeztetésnek".