From d65c76a814118859f8dbb3f3c66810960c2fd262 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Sat, 29 Feb 2020 21:55:06 +0100 Subject: [PATCH 1/3] translate react-dom-server-api --- content/docs/reference-react-dom-server.md | 42 +++++++++++----------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/content/docs/reference-react-dom-server.md b/content/docs/reference-react-dom-server.md index 80c030377..7d279c24a 100644 --- a/content/docs/reference-react-dom-server.md +++ b/content/docs/reference-react-dom-server.md @@ -6,30 +6,30 @@ category: Reference permalink: docs/react-dom-server.html --- -The `ReactDOMServer` object enables you to render components to static markup. Typically, it's used on a Node server: +A `ReactDOMServer` objektum komponensek statikus sémává való renderelését teszi lehetővé. Tipikusan egy Node szerveren használt: ```js -// ES modules +// ES modulok import ReactDOMServer from 'react-dom/server'; // CommonJS var ReactDOMServer = require('react-dom/server'); ``` -## Overview {#overview} +## Áttekintés {#overview} -The following methods can be used in both the server and browser environments: +A következő metódusok mind böngésző-, és szerverkörnyezetben is használhatóak: - [`renderToString()`](#rendertostring) - [`renderToStaticMarkup()`](#rendertostaticmarkup) -These additional methods depend on a package (`stream`) that is **only available on the server**, and won't work in the browser. +Ezek a további metódusok függenek a `stream` csomagtól, tehát **csak a szerveren elérhetőek** és nem fognak működni a böngészőben. - [`renderToNodeStream()`](#rendertonodestream) - [`renderToStaticNodeStream()`](#rendertostaticnodestream) * * * -## Reference {#reference} +## Referencia {#reference} ### `renderToString()` {#rendertostring} @@ -37,9 +37,9 @@ These additional methods depend on a package (`stream`) that is **only available ReactDOMServer.renderToString(element) ``` -Render a React element to its initial HTML. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes. +Egy React elemet renderel annak kezdetleges HTML formájába. A React egy HTML sztringet ad vissza. Ezzel a metódussal HTML-t tudsz generálni a szerveren és ezt a sémát le tudod küldeni a kezdetleges lekérésben egy gyorsabb oldalbetöltésért és hogy lehetővé tedd a keresőmotorknak az oldalad vizsgálatát SEO optimalizálás céljából. -If you call [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience. +Ha a [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) metódust egy olyan csomóponton hívod meg ami már rendelkezik ezzel a szerveroldali sémával, a React megőrzi azt és csak eseménykezelőket csatol hozzá, ezzel lehetővé téve a gyors első alkalombeli betöltési élményt. * * * @@ -49,9 +49,9 @@ If you call [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on a node that ReactDOMServer.renderToStaticMarkup(element) ``` -Similar to [`renderToString`](#rendertostring), except this doesn't create extra DOM attributes that React uses internally, such as `data-reactroot`. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save some bytes. +A [`renderToString`](#rendertostring)-hez hasonló, kivéve hogy nem hoz létre extra DOM attribútumokat - mint például a `data-reactroot`- amiket a React használ belsőleg. Ez akkor hasznos ha a Reactet egy szimpla statikus oldal generátorként akarod használni, mivel az extra attribútumok lecsupaszításával pár bájtot meg lehet takarítani. -If you plan to use React on the client to make the markup interactive, do not use this method. Instead, use [`renderToString`](#rendertostring) on the server and [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on the client. +Ha a Reactet a kliens oldalon tervezed használni hogy interaktívvá tedd a sémát, ne használd ezt a metódust. Helyette használd a [`renderToString`](#rendertostring)-t a szerveren és a [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate)-t a kliensen. * * * @@ -61,15 +61,15 @@ If you plan to use React on the client to make the markup interactive, do not us ReactDOMServer.renderToNodeStream(element) ``` -Render a React element to its initial HTML. Returns a [Readable stream](https://nodejs.org/api/stream.html#stream_readable_streams) that outputs an HTML string. The HTML output by this stream is exactly equal to what [`ReactDOMServer.renderToString`](#rendertostring) would return. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes. +Egy React elemet renderel annak kezdetleges HTML formájába. Egy [Readable streamet](https://nodejs.org/api/stream.html#stream_readable_streams) ad vissza, ami egy HTML sztringet ad ki. A folyam HTML kimenete tökéletesen megegyezik azzal amit a [`ReactDOMServer.renderToString`](#rendertostring) adna vissza. Ezt a metódust a szerveren tudod arra használni, hogy le tudd küldeni a sémát a kezdetleges lekérésben gyorsabb oldalbetöltésért és hogy lehetővé tedd a keresőmotorknak az oldalad vizsgálatát SEO optimalizálás céljából. -If you call [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience. +Ha a [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) metódust egy olyan csomóponton hívod meg ami már rendelkezik ezzel a szerveroldali sémával, a React megőrzi azt és csak eseménykezelőket csatol hozzá, ezzel lehetővé téve a gyors első alkalombeli betöltési élményt. -> Note: +> Megjegyzés: > -> Server-only. This API is not available in the browser. +> Csakis a szerveren működik. Ez az API nem elérhető a böngészőben. > -> The stream returned from this method will return a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like [iconv-lite](https://www.npmjs.com/package/iconv-lite), which provides transform streams for transcoding text. +> Az ezen metódus által visszaadott folyam (stream) egy utf-8-ban kódolt bájtfolyamot ad vissza. Ha a folyamra egy másik kódolási formában van szükséged, nézz utána projekteknek mint például az [iconv-lite](https://www.npmjs.com/package/iconv-lite), ami folyamok transzformálását teszi lehetővé szövegek transzkódolásához. * * * @@ -79,14 +79,14 @@ If you call [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on a node that ReactDOMServer.renderToStaticNodeStream(element) ``` -Similar to [`renderToNodeStream`](#rendertonodestream), except this doesn't create extra DOM attributes that React uses internally, such as `data-reactroot`. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save some bytes. +A [`renderToNodeStream`](#rendertonodestream)-hez hasonló, kivéve hogy nem hoz létre extra DOM attribútumokat - mint például a `data-reactroot`- amiket a React használ belsőleg. Ez akkor hasznos ha a Reactet egy szimpla statikus oldal generátorként akarod használni, mivel az extra attribútumok lecsupaszításával pár bájtot meg lehet takarítani. -The HTML output by this stream is exactly equal to what [`ReactDOMServer.renderToStaticMarkup`](#rendertostaticmarkup) would return. +A folyam HTML kimenete tökéletesen megegyezik azzal amit a [`ReactDOMServer.renderToStaticMarkup`](#rendertostaticmarkup) adna vissza. -If you plan to use React on the client to make the markup interactive, do not use this method. Instead, use [`renderToNodeStream`](#rendertonodestream) on the server and [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) on the client. +Ha a Reactet a kliens oldalon tervezed használni hogy interaktívvá tedd a sémát, ne használd ezt a metódust. Helyette használd a [`renderToNodeStream`](#rendertonodestream)-t a szerveren és a [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate)-t a kliensen. -> Note: +> Megjegyzés: > -> Server-only. This API is not available in the browser. +> Csakis a szerveren működik. Ez az API nem elérhető a böngészőben. > -> The stream returned from this method will return a byte stream encoded in utf-8. If you need a stream in another encoding, take a look at a project like [iconv-lite](https://www.npmjs.com/package/iconv-lite), which provides transform streams for transcoding text. +> Az ezen metódus által visszaadott folyam (stream) egy utf-8-ban kódolt bájtfolyamot ad vissza. Ha a folyamra egy másik kódolási formában van szükséged, nézz utána projekteknek mint például az [iconv-lite](https://www.npmjs.com/package/iconv-lite), ami folyamok transzformálását teszi lehetővé szövegek transzkódolásához. From 4c3b7c3b73b17cff387ace9a9fa7c1672fea5655 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Sat, 29 Feb 2020 22:39:29 +0100 Subject: [PATCH 2/3] small changes in wording, fixing typos --- content/docs/reference-react-dom-server.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/content/docs/reference-react-dom-server.md b/content/docs/reference-react-dom-server.md index 7d279c24a..8fe5939de 100644 --- a/content/docs/reference-react-dom-server.md +++ b/content/docs/reference-react-dom-server.md @@ -37,7 +37,7 @@ Ezek a további metódusok függenek a `stream` csomagtól, tehát **csak a szer ReactDOMServer.renderToString(element) ``` -Egy React elemet renderel annak kezdetleges HTML formájába. A React egy HTML sztringet ad vissza. Ezzel a metódussal HTML-t tudsz generálni a szerveren és ezt a sémát le tudod küldeni a kezdetleges lekérésben egy gyorsabb oldalbetöltésért és hogy lehetővé tedd a keresőmotorknak az oldalad vizsgálatát SEO optimalizálás céljából. +Egy React elemet renderel annak kezdetleges HTML formájába. A React egy HTML sztringet ad vissza. Ezzel a metódussal HTML-t tudsz generálni a szerveren és ezt a sémát le tudod küldeni a kezdetleges lekérésben egy gyorsabb oldalbetöltésért, valamint hogy lehetővé tedd az oldalad vizsgálatát keresőmotoroknak SEO optimalizálás céljából. Ha a [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) metódust egy olyan csomóponton hívod meg ami már rendelkezik ezzel a szerveroldali sémával, a React megőrzi azt és csak eseménykezelőket csatol hozzá, ezzel lehetővé téve a gyors első alkalombeli betöltési élményt. @@ -49,7 +49,7 @@ Ha a [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) metódust egy olyan cs ReactDOMServer.renderToStaticMarkup(element) ``` -A [`renderToString`](#rendertostring)-hez hasonló, kivéve hogy nem hoz létre extra DOM attribútumokat - mint például a `data-reactroot`- amiket a React használ belsőleg. Ez akkor hasznos ha a Reactet egy szimpla statikus oldal generátorként akarod használni, mivel az extra attribútumok lecsupaszításával pár bájtot meg lehet takarítani. +A [`renderToString`](#rendertostring)-hez hasonló, kivéve hogy nem hoz létre extra DOM attribútumokat - mint például a `data-reactroot` - amiket a React belsőleg használ. Ez akkor hasznos ha a Reactet egy szimpla statikus oldalgenerátorként akarod használni, mivel az extra attribútumok lecsupaszításával pár bájtot meg lehet takarítani. Ha a Reactet a kliens oldalon tervezed használni hogy interaktívvá tedd a sémát, ne használd ezt a metódust. Helyette használd a [`renderToString`](#rendertostring)-t a szerveren és a [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate)-t a kliensen. @@ -61,7 +61,7 @@ Ha a Reactet a kliens oldalon tervezed használni hogy interaktívvá tedd a sé ReactDOMServer.renderToNodeStream(element) ``` -Egy React elemet renderel annak kezdetleges HTML formájába. Egy [Readable streamet](https://nodejs.org/api/stream.html#stream_readable_streams) ad vissza, ami egy HTML sztringet ad ki. A folyam HTML kimenete tökéletesen megegyezik azzal amit a [`ReactDOMServer.renderToString`](#rendertostring) adna vissza. Ezt a metódust a szerveren tudod arra használni, hogy le tudd küldeni a sémát a kezdetleges lekérésben gyorsabb oldalbetöltésért és hogy lehetővé tedd a keresőmotorknak az oldalad vizsgálatát SEO optimalizálás céljából. +Egy React elemet renderel annak kezdetleges HTML formájába. Egy [Readable stream](https://nodejs.org/api/stream.html#stream_readable_streams)-et ad vissza, ami pedig egy HTML sztringet. A folyam HTML kimenete tökéletesen megegyezik azzal amit a [`ReactDOMServer.renderToString`](#rendertostring) adna vissza. Ezzel a metódussal HTML-t tudsz generálni a szerveren és ezt a sémát le tudod küldeni a kezdetleges lekérésben egy gyorsabb oldalbetöltésért, valamint hogy lehetővé tedd az oldalad vizsgálatát keresőmotoroknak SEO optimalizálás céljából. Ha a [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) metódust egy olyan csomóponton hívod meg ami már rendelkezik ezzel a szerveroldali sémával, a React megőrzi azt és csak eseménykezelőket csatol hozzá, ezzel lehetővé téve a gyors első alkalombeli betöltési élményt. @@ -79,7 +79,7 @@ Ha a [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) metódust egy olyan cs ReactDOMServer.renderToStaticNodeStream(element) ``` -A [`renderToNodeStream`](#rendertonodestream)-hez hasonló, kivéve hogy nem hoz létre extra DOM attribútumokat - mint például a `data-reactroot`- amiket a React használ belsőleg. Ez akkor hasznos ha a Reactet egy szimpla statikus oldal generátorként akarod használni, mivel az extra attribútumok lecsupaszításával pár bájtot meg lehet takarítani. +A [`renderToNodeStream`](#rendertonodestream)-hez hasonló, kivéve hogy nem hoz létre extra DOM attribútumokat - mint például a `data-reactroot` - amiket a React belsőleg használ. Ez akkor hasznos ha a Reactet egy szimpla statikus oldalgenerátorként akarod használni, mivel az extra attribútumok lecsupaszításával pár bájtot meg lehet takarítani. A folyam HTML kimenete tökéletesen megegyezik azzal amit a [`ReactDOMServer.renderToStaticMarkup`](#rendertostaticmarkup) adna vissza. From 6a82e9840c7c993468dafe3b541b00ad66c52367 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Tue, 3 Mar 2020 12:12:28 +0100 Subject: [PATCH 3/3] Apply suggestions from code review Co-Authored-By: Orsi --- content/docs/reference-react-dom-server.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/content/docs/reference-react-dom-server.md b/content/docs/reference-react-dom-server.md index 8fe5939de..4a8a5e49f 100644 --- a/content/docs/reference-react-dom-server.md +++ b/content/docs/reference-react-dom-server.md @@ -39,7 +39,7 @@ ReactDOMServer.renderToString(element) Egy React elemet renderel annak kezdetleges HTML formájába. A React egy HTML sztringet ad vissza. Ezzel a metódussal HTML-t tudsz generálni a szerveren és ezt a sémát le tudod küldeni a kezdetleges lekérésben egy gyorsabb oldalbetöltésért, valamint hogy lehetővé tedd az oldalad vizsgálatát keresőmotoroknak SEO optimalizálás céljából. -Ha a [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) metódust egy olyan csomóponton hívod meg ami már rendelkezik ezzel a szerveroldali sémával, a React megőrzi azt és csak eseménykezelőket csatol hozzá, ezzel lehetővé téve a gyors első alkalombeli betöltési élményt. +Ha a [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) metódust egy olyan csomóponton hívod meg, ami már rendelkezik ezzel a szerveroldali sémával, a React megőrzi azt és csak eseménykezelőket csatol hozzá, ezzel lehetővé téve a gyors első alkalombeli betöltési élményt. * * * @@ -49,9 +49,9 @@ Ha a [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) metódust egy olyan cs ReactDOMServer.renderToStaticMarkup(element) ``` -A [`renderToString`](#rendertostring)-hez hasonló, kivéve hogy nem hoz létre extra DOM attribútumokat - mint például a `data-reactroot` - amiket a React belsőleg használ. Ez akkor hasznos ha a Reactet egy szimpla statikus oldalgenerátorként akarod használni, mivel az extra attribútumok lecsupaszításával pár bájtot meg lehet takarítani. +A [`renderToString`](#rendertostring)-hez hasonló, kivéve, hogy nem hoz létre extra DOM attribútumokat - mint például a `data-reactroot` - amiket a React belsőleg használ. Ez akkor hasznos, ha a Reactet egy szimpla statikus oldalgenerátorként akarod használni, mivel az extra attribútumok lecsupaszításával pár bájtot meg lehet takarítani. -Ha a Reactet a kliens oldalon tervezed használni hogy interaktívvá tedd a sémát, ne használd ezt a metódust. Helyette használd a [`renderToString`](#rendertostring)-t a szerveren és a [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate)-t a kliensen. +Ha a Reactet a kliens oldalon tervezed használni, hogy interaktívvá tedd a sémát, ne használd ezt a metódust. Helyette használd a [`renderToString`](#rendertostring)-t a szerveren és a [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate)-t a kliensen. * * * @@ -61,9 +61,9 @@ Ha a Reactet a kliens oldalon tervezed használni hogy interaktívvá tedd a sé ReactDOMServer.renderToNodeStream(element) ``` -Egy React elemet renderel annak kezdetleges HTML formájába. Egy [Readable stream](https://nodejs.org/api/stream.html#stream_readable_streams)-et ad vissza, ami pedig egy HTML sztringet. A folyam HTML kimenete tökéletesen megegyezik azzal amit a [`ReactDOMServer.renderToString`](#rendertostring) adna vissza. Ezzel a metódussal HTML-t tudsz generálni a szerveren és ezt a sémát le tudod küldeni a kezdetleges lekérésben egy gyorsabb oldalbetöltésért, valamint hogy lehetővé tedd az oldalad vizsgálatát keresőmotoroknak SEO optimalizálás céljából. +Egy React elemet renderel annak kezdetleges HTML formájába. Egy [Readable stream](https://nodejs.org/api/stream.html#stream_readable_streams)-et ad vissza, ami pedig egy HTML sztringet. A folyam HTML kimenete tökéletesen megegyezik azzal, amit a [`ReactDOMServer.renderToString`](#rendertostring) adna vissza. Ezzel a metódussal HTML-t tudsz generálni a szerveren és ezt a sémát le tudod küldeni a kezdetleges lekérésben egy gyorsabb oldalbetöltésért, valamint hogy lehetővé tedd az oldalad vizsgálatát keresőmotoroknak SEO optimalizálás céljából. -Ha a [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) metódust egy olyan csomóponton hívod meg ami már rendelkezik ezzel a szerveroldali sémával, a React megőrzi azt és csak eseménykezelőket csatol hozzá, ezzel lehetővé téve a gyors első alkalombeli betöltési élményt. +Ha a [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) metódust egy olyan csomóponton hívod meg, ami már rendelkezik ezzel a szerveroldali sémával, a React megőrzi azt és csak eseménykezelőket csatol hozzá, ezzel lehetővé téve a gyors első alkalombeli betöltési élményt. > Megjegyzés: > @@ -79,11 +79,11 @@ Ha a [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate) metódust egy olyan cs ReactDOMServer.renderToStaticNodeStream(element) ``` -A [`renderToNodeStream`](#rendertonodestream)-hez hasonló, kivéve hogy nem hoz létre extra DOM attribútumokat - mint például a `data-reactroot` - amiket a React belsőleg használ. Ez akkor hasznos ha a Reactet egy szimpla statikus oldalgenerátorként akarod használni, mivel az extra attribútumok lecsupaszításával pár bájtot meg lehet takarítani. +A [`renderToNodeStream`](#rendertonodestream)-hez hasonló, kivéve, hogy nem hoz létre extra DOM attribútumokat - mint például a `data-reactroot` - amiket a React belsőleg használ. Ez akkor hasznos, ha a Reactet egy szimpla statikus oldalgenerátorként akarod használni, mivel az extra attribútumok lecsupaszításával pár bájtot meg lehet takarítani. -A folyam HTML kimenete tökéletesen megegyezik azzal amit a [`ReactDOMServer.renderToStaticMarkup`](#rendertostaticmarkup) adna vissza. +A folyam HTML kimenete tökéletesen megegyezik azzal, amit a [`ReactDOMServer.renderToStaticMarkup`](#rendertostaticmarkup) adna vissza. -Ha a Reactet a kliens oldalon tervezed használni hogy interaktívvá tedd a sémát, ne használd ezt a metódust. Helyette használd a [`renderToNodeStream`](#rendertonodestream)-t a szerveren és a [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate)-t a kliensen. +Ha a Reactet a kliens oldalon tervezed használni, hogy interaktívvá tedd a sémát, ne használd ezt a metódust. Helyette használd a [`renderToNodeStream`](#rendertonodestream)-t a szerveren és a [`ReactDOM.hydrate()`](/docs/react-dom.html#hydrate)-t a kliensen. > Megjegyzés: >