` elembe.
```js{12}
function formatName(user) {
@@ -58,7 +58,7 @@ const user = {
const element = (
- Hello, {formatName(user)}!
+ Helló, {formatName(user)}!
);
@@ -70,86 +70,86 @@ ReactDOM.render(
[](codepen://introducing-jsx)
-We split JSX over multiple lines for readability. While it isn't required, when doing this, we also recommend wrapping it in parentheses to avoid the pitfalls of [automatic semicolon insertion](https://stackoverflow.com/q/2846283).
+A JSX-et több sorra bontottuk az olvashatóság érdekében. Bár ez nem kötelező, de ha így csinálod akkor azt javasoljuk, hogy tedd zárójelek közé, hogy elkerüld az [automatikus pontosvessző beillesztésének](https://stackoverflow.com/q/2846283) buktatóit.
-### JSX is an Expression Too {#jsx-is-an-expression-too}
+### A JSX egy kifejezés is {#jsx-is-an-expression-too}
-After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.
+A fordítás után a JSX kifejezések normál JavaScript hívásokká válnak, és JavaScript objektumokra értékelődnek ki.
-This means that you can use JSX inside of `if` statements and `for` loops, assign it to variables, accept it as arguments, and return it from functions:
+Ez azt jelenti, hogy a JSX-et használhatod `if` utasításokban és `for` ciklusokban, hozzárendelheted változókhoz, és paraméterként vagy visszatérési értékként is használhatod egy függvény esetében:
```js{3,5}
function getGreeting(user) {
if (user) {
- return Hello, {formatName(user)}!
;
+ return Helló, {formatName(user)}!
;
}
- return Hello, Stranger.
;
+ return Helló, idegen.
;
}
```
-### Specifying Attributes with JSX {#specifying-attributes-with-jsx}
+### Attribútumok meghatározása a JSX segítségével {#specifying-attributes-with-jsx}
-You may use quotes to specify string literals as attributes:
+Idézőjelek segítségével megadhatsz karakterláncokat attribútumként:
```js
const element =
;
```
-You may also use curly braces to embed a JavaScript expression in an attribute:
+Kapcsos zárójelekkel beágyazhatsz JavaScript kifejezést egy attribútumba:
```js
const element = 
;
```
-Don't put quotes around curly braces when embedding a JavaScript expression in an attribute. You should either use quotes (for string values) or curly braces (for expressions), but not both in the same attribute.
+Ne használj idézőjeleket kapcsos zárójelek körül, mikor JavaScript kifejezést ágyazol be egy attribútumba. Használhatsz idézőjeleket (karakterláncokhoz) vagy kapcsos zárójelet (kifejezésekhez), de mindkettőt egy attribútumon belül ne.
->**Warning:**
+>**Figyelem:**
>
->Since JSX is closer to JavaScript than to HTML, React DOM uses `camelCase` property naming convention instead of HTML attribute names.
+>Mivel a JSX közelebb áll a JavaScripthez, mint a HTML-hez, a REACT DOM a `camelCase` elnevezési stílust használja a HTML attribútumnevek helyett.
>
->For example, `class` becomes [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) in JSX, and `tabindex` becomes [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex).
+>Például a `class` JSX-ben [`className`](https://developer.mozilla.org/en-US/docs/Web/API/Element/className)-re változik, a `tabindex`-et pedig [`tabIndex`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex)-ként tudjuk használni.
-### Specifying Children with JSX {#specifying-children-with-jsx}
+### Gyermekek megadása JSX-ben {#specifying-children-with-jsx}
-If a tag is empty, you may close it immediately with `/>`, like XML:
+Ha egy címke üres, akkor azonnal lezárhatod egy `/>` (önlezáró) taggel, mint ahogy XML-ben is:
```js
const element = ;
```
-JSX tags may contain children:
+A JSX-címkék gyermekeket is tartalmazhatnak:
```js
const element = (
-
Hello!
- Good to see you here.
+ Helló!
+ Jó itt látni.
);
```
-### JSX Prevents Injection Attacks {#jsx-prevents-injection-attacks}
+### A JSX megakadályozza az injekciós támadásokat {#jsx-prevents-injection-attacks}
-It is safe to embed user input in JSX:
+A felhasználói bevitel beágyazása a JSX-be biztonságos:
```js
const title = response.potentiallyMaliciousInput;
-// This is safe:
+// Ez biztonságos:
const element = {title}
;
```
-By default, React DOM [escapes](https://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) any values embedded in JSX before rendering them. Thus it ensures that you can never inject anything that's not explicitly written in your application. Everything is converted to a string before being rendered. This helps prevent [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks.
+Alapértelmezés szerint a React DOM [szanitálja](https://stackoverflow.com/questions/7381974/which-characters-need-to-be-escaped-on-html) az összes JSX-be beágyazott értéket, mielőtt azokat megjelenítené. Így biztosítja azt, hogy soha nem tudsz bármi olyat injektálni, amit kifejezetten nem a te alkalmazásodban írtak. Minden átalakul karakterlánccá, mielőtt megjelenítésre kerül. Ez segít megelőzni az [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) típusú támadásokat.
-### JSX Represents Objects {#jsx-represents-objects}
+### A JSX objektumokat reprezentál {#jsx-represents-objects}
-Babel compiles JSX down to `React.createElement()` calls.
+A Babel a JSX-et `React.createElement()` hívásokra fordítja le.
-These two examples are identical:
+Ez a két példa megegyezik:
```js
const element = (
- Hello, world!
+ Helló, világ!
);
```
@@ -158,27 +158,27 @@ const element = (
const element = React.createElement(
'h1',
{className: 'greeting'},
- 'Hello, world!'
+ 'Helló, világ!'
);
```
-`React.createElement()` performs a few checks to help you write bug-free code but essentially it creates an object like this:
+A `React.createElement()` végrehajt pár ellenőrzést a hibamentes kód megírásának érdekében, de alapvetően ehhez hasonló objektumokat hoz létre:
```js
-// Note: this structure is simplified
+// Megjegyzés: ez a szerkezet egyszerűsített
const element = {
type: 'h1',
props: {
className: 'greeting',
- children: 'Hello, world!'
+ children: 'Helló, világ!'
}
};
```
-These objects are called "React elements". You can think of them as descriptions of what you want to see on the screen. React reads these objects and uses them to construct the DOM and keep it up to date.
+Ezeket az objektumokat "React elemeknek" nevezzük. Gondolhatunk rájuk úgy, mint annak a leírása amit a képernyőn látni szeretnénk. A React olvassa ezeket az objektumokat és arra használja, hogy a DOM-ot felépítse és naprakészen tartsa.
-We will explore rendering React elements to the DOM in the next section.
+A következő szekcióban megvizsgáljuk a React elemek DOM-ba való renderelését.
->**Tip:**
+>**Tipp:**
>
->We recommend using the ["Babel" language definition](https://babeljs.io/docs/editors) for your editor of choice so that both ES6 and JSX code is properly highlighted. This website uses the [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) color scheme which is compatible with it.
+>Javasoljuk, hogy általad használt kódszerkesztőben használd a ["Babel" nyelvdefiníciót](https://babeljs.io/docs/editors), így az ES6 és JSX kódrészek is helyesen lesznek kiemelve. Ez a weboldal a [Oceanic Next](https://labs.voronianski.com/oceanic-next-color-scheme/) színsémát használja, ami ezzel kompatibilis.