diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index a03d0e8a5..a2871dab4 100644 --- a/content/docs/add-react-to-a-website.md +++ b/content/docs/add-react-to-a-website.md @@ -1,6 +1,6 @@ --- id: add-react-to-a-website -title: Add React to a Website +title: React hozzáadása egy weblaphoz permalink: docs/add-react-to-a-website.html redirect_from: - "docs/add-react-to-an-existing-app.html" @@ -8,127 +8,128 @@ prev: getting-started.html next: create-a-new-react-app.html --- -Use as little or as much React as you need. +Használj pont annyi Reactet, amennyit szeretnél. Se többet, se kevesebbet. -React has been designed from the start for gradual adoption, and **you can use as little or as much React as you need**. Perhaps you only want to add some "sprinkles of interactivity" to an existing page. React components are a great way to do that. +A React a kezdetektől fogva úgy lett tervezve, hogy fokozatosan lehessen adoptálni és **pontosan annyi Reactet kelljen használnod, amennyire szükség van**. Talán csak néhány "csipetnyi interaktivitást" szeretnél hozzáadni egy meglévő oldalhoz. A React komponensek erre tökéletesen megfelelnek. -The majority of websites aren't, and don't need to be, single-page apps. With **a few lines of code and no build tooling**, try React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets. +A legtöbb weblap nem single-page alkalmazás, és nem is kell annak lenniük. Próbáld a Reactet **csak pár sornyi kóddal és bárminemű kód transzformáló eszköz nélkül** hozzáadni a weblapod egy kis részéhez. Eztután fokozatosan tudod növelni a jelenlétét, vagy megtarthatod néhány dinamikus widgetként. --- -- [Add React in One Minute](#add-react-in-one-minute) -- [Optional: Try React with JSX](#optional-try-react-with-jsx) (no bundler necessary!) +- [React hozzáadása egy perc alatt](#add-react-in-one-minute) +- [Választható: Próbáld ki a Reactet JSX-el](#optional-try-react-with-jsx) (csomagoló nem szükséges!) -## Add React in One Minute {#add-react-in-one-minute} +## React hozzáadása egy perc alatt {#add-react-in-one-minute} -In this section, we will show how to add a React component to an existing HTML page. You can follow along with your own website, or create an empty HTML file to practice. +Ebben a fejezetben megmutatjuk, hogyan adhatsz hozzá egy React komponenst egy meglévő HTML oldalhoz. Tarts velünk a saját weboldaladdal, vagy készíts egy üres HTML fájlt a gyakorláshoz. -There will be no complicated tools or install requirements -- **to complete this section, you only need an internet connection, and a minute of your time.** +Nem lesz szükség komplikált eszközökre vagy követelmények telepítésére -- **ahhoz, hogy be tudd fejezni ezt a fejezetet, csak internetelérésre lesz szükség és egy szabad percedre.** -Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) +Választható: [Töltsd le a teljes példát (Tömörítve 2KB)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) -### Step 1: Add a DOM Container to the HTML {#step-1-add-a-dom-container-to-the-html} +### Első lépés: Adj hozzá egy DOM konténert a HTML-hez {#step-1-add-a-dom-container-to-the-html} -First, open the HTML page you want to edit. Add an empty `
` tag to mark the spot where you want to display something with React. For example: +Először nyisd meg a HTML oldalt, amit szerkeszteni szeretnél. Adj hozzá egy üres `
` címkét és jelöld meg azt a helyet, ahol valamit Reacttel szeretnél megjeleníteni. Például: ```html{3} - +
- + ``` -We gave this `
` a unique `id` HTML attribute. This will allow us to find it from the JavaScript code later and display a React component inside of it. +Ennek a `
`-nek adtunk egy egyedi `id` HTML attribútumot. Ez lehetővé teszi számunkra, hogy ezt később könnyen megtaláljuk JavaScript kódból, és egy React komponenst jelenítsünk meg benne. ->Tip +>Tipp > ->You can place a "container" `
` like this **anywhere** inside the `` tag. You may have as many independent DOM containers on one page as you need. They are usually empty -- React will replace any existing content inside DOM containers. +> Egy ilyen `
` "konténert" **bárhol** elhelyezhetsz a `` címkén belül. Használj annyi különálló DOM konténert egy oldalon, ahányat szeretnél. Ezek általában üresek -- a React ki fogja cserélni a DOM konténerek meglévő tartalmát. -### Step 2: Add the Script Tags {#step-2-add-the-script-tags} +### Második lépés: Add hozzá a script címkéket {#step-2-add-the-script-tags} -Next, add three ` - + ``` -The first two tags load React. The third one will load your component code. +A két első címke a Reactet töltik be. A harmadik a komponensed kódját fogja betölteni. -### Step 3: Create a React Component {#step-3-create-a-react-component} +### Harmadik lépés: Készíts egy React komponenst {#step-3-create-a-react-component} -Create a file called `like_button.js` next to your HTML page. +Készíts egy fájlt a HTML oldalad mellett és nevezd el `like_button.js`-nek. -Open **[this starter code](https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** and paste it into the file you created. +Nyisd meg **[ezt a kezdő kódot](https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** és másold be a tartalmát a fájlba, amit készítettél. ->Tip +>Tipp > ->This code defines a React component called `LikeButton`. Don't worry if you don't understand it yet -- we'll cover the building blocks of React later in our [hands-on tutorial](/tutorial/tutorial.html) and [main concepts guide](/docs/hello-world.html). For now, let's just get it showing on the screen! +> Ez a kód egy `LikeButton` nevű React komponenst definiál. Ne aggódj, ha még nem érted -- később át fogjuk venni a React építőelemeit a [gyakorlati tutoriálunkban](/tutorial/tutorial.html) és a [főbb koncepciók útmutatónkban](/docs/hello-world.html). Egyelőre elég, ha meggyőződünk róla, hogy megjelenik a képernyőn! -After **[the starter code](https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add two lines to the bottom of `like_button.js`: + +Adj hozzá két sort a `like_button.js` alján **[a kezdő kód](https://gist.github.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** után: ```js{3,4} -// ... the starter code you pasted ... +// ... a kezdő kód, amit bemásoltál ... const domContainer = document.querySelector('#like_button_container'); ReactDOM.render(e(LikeButton), domContainer); ``` -These two lines of code find the `
` we added to our HTML in the first step, and then display our "Like" button React component inside of it. +Ez a két sor kód megtalálja a `
`-et, amit a HTML-hez adtunk az első lépésben, és megjeleníti benne a "Tetszik" React komponens gombunkat. -### That's It! {#thats-it} +### És ennyi! {#thats-it} -There is no step four. **You have just added the first React component to your website.** +Nincs negyedik lépés. **Ezzel hozzáadtad az első React komponenst a weblapodhoz.** -Check out the next sections for more tips on integrating React. +Még több React integrálási tippért olvass tovább. -**[View the full example source code](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** +**[Nézd meg a példa teljes forráskódját](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** -**[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** +**[Töltsd le a teljes példát (Tömörítve 2KB)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** -### Tip: Reuse a Component {#tip-reuse-a-component} +### Tipp: Egy komponens újrafelhasználása {#tip-reuse-a-component} -Commonly, you might want to display React components in multiple places on the HTML page. Here is an example that displays the "Like" button three times and passes some data to it: +Általában több helyen akarsz React komponenseket megjeleníteni a HTML oldaladon. Íme egy példa, ami a "Tetszik" gombot háromszor jeleníti meg és valamennyi adatot is átad neki: -[View the full example source code](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) +[Nézd meg a példa teljes forráskódját](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) -[Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) +[Töltsd le a teljes példát (Tömörítve 2KB)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) ->Note +>Megjegyzés > ->This strategy is mostly useful while React-powered parts of the page are isolated from each other. Inside React code, it's easier to use [component composition](/docs/components-and-props.html#composing-components) instead. +> Ez a stratégia akkor a leghatásosabb, ha az oldal Reacttel hajtott részei elzártak egymástól. A React kódon belül egyszerűbb inkább [komponens kompozíciót](/docs/components-and-props.html#composing-components) használni. -### Tip: Minify JavaScript for Production {#tip-minify-javascript-for-production} +### Tipp: Csökkentsük a JavaScript méretét a publikáláshoz {#tip-minify-javascript-for-production} -Before deploying your website to production, be mindful that unminified JavaScript can significantly slow down the page for your users. +Mielőtt a weboldalt végstádiumba publikálod, tartsd szem előtt, hogy a nem tömörített JavaScript kód jelentősen lelassíthatja az oldalad a felhasználók számára. -If you already minify the application scripts, **your site will be production-ready** if you ensure that the deployed HTML loads the versions of React ending in `production.min.js`: +Ha már csökkented az alkalmazásod scriptjeinek a méretét, **az oldalad készen áll a végstádiumra**, amennyiben a publikált HTML oldalad a `production.min.js` végződésű React verziót tölti be: ```js ``` -If you don't have a minification step for your scripts, [here's one way to set it up](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). +Ha nincs kódcsökkentő lépésed a scriptekhez, [itt egy módja, hogyan tudod ezt beállítani](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). -## Optional: Try React with JSX {#optional-try-react-with-jsx} +## Választható: Próbáld ki a Reactet JSX-el {#optional-try-react-with-jsx} -In the examples above, we only relied on features that are natively supported by the browsers. This is why we used a JavaScript function call to tell React what to display: +A fenti példákban csak a böngészők által alapból támogatott funkciókra hagyatkoztunk. Ezért használtunk egy JavaScript függvény meghívást, hogy közöljük a Reacttel, mit jelenítsen meg: ```js const e = React.createElement; -// Display a "Like"