Skip to content

Commit 7c85af4

Browse files
Merge pull request #8 from reactjs/rendering-elements
Rendering Elements translation
2 parents ae8c2fe + 9f683c3 commit 7c85af4

File tree

2 files changed

+28
-28
lines changed

2 files changed

+28
-28
lines changed

content/docs/rendering-elements.md

+27-27
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,75 @@
11
---
22
id: rendering-elements
3-
title: Rendering Elements
3+
title: Elemek renderelése
44
permalink: docs/rendering-elements.html
55
redirect_from:
66
- "docs/displaying-data.html"
77
prev: introducing-jsx.html
88
next: components-and-props.html
99
---
1010

11-
Elements are the smallest building blocks of React apps.
11+
Az elemek a React alkalmazások legkisebb építőegységei.
1212

13-
An element describes what you want to see on the screen:
13+
Egy elem azt írja le amit a képernyőn szeretnél látni:
1414

1515
```js
16-
const element = <h1>Hello, world</h1>;
16+
const element = <h1>Helló, világ</h1>;
1717
```
1818

19-
Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.
19+
A böngésző DOM elemeivel szemben, a React elemek sima objektumok, és olcsó őket gyártani. Azért hogy a React elemek megegyezzenek a DOM-mal és frissítve legyenek, a React DOM a felelős.
2020

21-
>**Note:**
21+
>**Megjegyzés:**
2222
>
23-
>One might confuse elements with a more widely known concept of "components". We will introduce components in the [next section](/docs/components-and-props.html). Elements are what components are "made of", and we encourage you to read this section before jumping ahead.
23+
>Könnyű lehet összetéveszteni az elemeket a szélesebb körben ismert "komponensek" fogalmával. A komponenseket a [következő fejezetben](/docs/components-and-props.html) fogjuk bemutatni. A komponensek elemekből "tevődnek össze", és bátorítunk hogy olvasd el ezt a fejezetet mielőtt előre ugranál.
2424
25-
## Rendering an Element into the DOM {#rendering-an-element-into-the-dom}
25+
## Egy elem renderelése a DOM-ba {#rendering-an-element-into-the-dom}
2626

27-
Let's say there is a `<div>` somewhere in your HTML file:
27+
Tegyük fel, hogy van egy `<div>` valahol a HTML fájlodban:
2828

2929
```html
3030
<div id="root"></div>
3131
```
3232

33-
We call this a "root" DOM node because everything inside it will be managed by React DOM.
33+
Ezt hívjuk "gyökér" DOM csomópontnak, mert mindent ami benne van azt a React DOM fogja kezelni.
3434

35-
Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.
35+
A React-el készített alkalmazásoknak általában egy gyökér DOM csomópontjuk van. Ha egy már meglévő alkalmazásba akarod a React-et integrálni, annyi elszigetelt gyökér DOM csomópontot vehetsz fel, amennyit szeretnél.
3636

37-
To render a React element into a root DOM node, pass both to `ReactDOM.render()`:
37+
Egy React elem gyökér DOM csomópontba való rendereléséhez, add meg mindkettőt paraméterként a `ReactDOM.render()` metódusnak:
3838

3939
`embed:rendering-elements/render-an-element.js`
4040

4141
[](codepen://rendering-elements/render-an-element)
4242

43-
It displays "Hello, world" on the page.
43+
Ez egy "Helló, világ"-ot jelenít meg az oldalon.
4444

45-
## Updating the Rendered Element {#updating-the-rendered-element}
45+
## A renderelt elem frissítése {#updating-the-rendered-element}
4646

47-
React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.
47+
A React elemek [megváltoztathatatlanok](https://en.wikipedia.org/wiki/Immutable_object). Ha egyszer készítettél egy elemet, már nem tudod annak gyermekeit vagy attribútumait módosítani. Egy elem olyan mint egy sima képkocka egy filmben: az felhasználói felületet reprezentálja egy adott pillanatban.
4848

49-
With our knowledge so far, the only way to update the UI is to create a new element, and pass it to `ReactDOM.render()`.
49+
Az eddigi tudásunkkal az egyetlen módja a felhasználói felületünk frissítésének ha egy új elemet hozunk létre, és megadjuk paraméterként a `ReactDOM.render()`-nek.
5050

51-
Consider this ticking clock example:
51+
Vedd ezt a ketyegő óra példát:
5252

5353
`embed:rendering-elements/update-rendered-element.js`
5454

5555
[](codepen://rendering-elements/update-rendered-element)
5656

57-
It calls `ReactDOM.render()` every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback.
57+
Ez minden másodpercben meghívja a `ReactDOM.render()`-t a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) visszahívó metódusából.
5858

59-
>**Note:**
59+
>**Megjegyzés:**
6060
>
61-
>In practice, most React apps only call `ReactDOM.render()` once. In the next sections we will learn how such code gets encapsulated into [stateful components](/docs/state-and-lifecycle.html).
61+
>Gyakorlatban a legtöbb React alkalmazás csak egyszer hívja meg a `ReactDOM.render()` metódust. A következő fejezetben megtanuljuk, hogy hogyan tudunk ilyen kódot egységbe foglalni [állapot-teljes komponensekkel](/docs/state-and-lifecycle.html).
6262
>
63-
>We recommend that you don't skip topics because they build on each other.
63+
>Ajánljuk, hogy ne ugord át ezeket a témákat, mert egymásra építenek.
6464
65-
## React Only Updates What's Necessary {#react-only-updates-whats-necessary}
65+
## A React csak akkor frissít, ha szükséges {#react-only-updates-whats-necessary}
6666

67-
React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.
67+
A React DOM összehasonlítja az elemeket és azok gyermekeit a korábbiakkal, és csak azokat a változtatásokat eszközöli a DOM-on, amik a DOM kívánt állapotának eléréséhez szükségesek.
6868

69-
You can verify by inspecting the [last example](codepen://rendering-elements/update-rendered-element) with the browser tools:
69+
Ezt megerősítheted a [legutolsó példa](codepen://rendering-elements/update-rendered-element) vizsgálatával a böngészői eszközökkel:
7070

71-
![DOM inspector showing granular updates](../images/docs/granular-dom-updates.gif)
71+
![A DOM vizsgáló fokozatos frissítést mutat](../images/docs/granular-dom-updates.gif)
7272

73-
Even though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by React DOM.
73+
Hacsak egy elemet is készítünk ami leírja a teljes felhasználói felület fát minden egyes kettyenéshez, a React DOM akkor is csak a megváltozott szövegcsomópontok tartalmát fogja frissíteni.
7474

75-
In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs.
75+
Tapasztalataink szerint úgy gondolni a felhasználói felületre hogy az hogyan is nézzen ki egy adott pillanatban ahelyett hogy hogyan fog változni az idő múlásával, egy csomó programhibát gátol meg.

gatsby-config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ module.exports = {
6060
{
6161
resolve: 'gatsby-remark-code-repls',
6262
options: {
63-
defaultText: '<b>Try it on CodePen</b>',
63+
defaultText: '<b>Próbáld ki a CodePen-en</b>',
6464
directory: `${__dirname}/examples/`,
6565
externals: [
6666
`//unpkg.com/react/umd/react.development.js`,

0 commit comments

Comments
 (0)