Home Page

content/home/examples/a-component-using-external-plugins.js

@@ -2,7 +2,7 @@ class MarkdownEditor extends React.Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
-    this.state = { value: 'Hello, **world**!' };
+    this.state = { value: 'Helló, **világ**!' };
   }
 
   handleChange(e) {
@@ -17,16 +17,16 @@ class MarkdownEditor extends React.Component {
   render() {
     return (
       <div className="MarkdownEditor">
-        <h3>Input</h3>
+        <h3>Bemenet</h3>
         <label htmlFor="markdown-content">
-          Enter some markdown
+          Írj egy kis markdown-t
         </label>
         <textarea
           id="markdown-content"
           onChange={this.handleChange}
           defaultValue={this.state.value}
         />
-        <h3>Output</h3>
+        <h3>Kimenet</h3>
         <div
           className="content"
           dangerouslySetInnerHTML={this.getRawMarkup()}

content/home/examples/a-component-using-external-plugins.md

@@ -1,7 +1,7 @@
 ---
-title: A Component Using External Plugins
+title: Külső bővítményt használó komponens
 order: 3
 domid: markdown-example
 ---
 
-React allows you to interface with other libraries and frameworks. This example uses **remarkable**, an external Markdown library, to convert the `<textarea>`'s value in real time.
+A React lehetővé teszi, hogy más könyvtárakkal és keretrendszerekkel kommunikálj. Ez a példa a **remarkable**-t használja, ami egy külső Markdown könyvtár, mely a `<textarea>` értékét valós időben konvertálja.

content/home/examples/a-simple-component.js

@@ -2,13 +2,13 @@ class HelloMessage extends React.Component {
   render() {
     return (
       <div>
-        Hello {this.props.name}
+        Helló {this.props.name}
       </div>
     );
   }
 }
 
 ReactDOM.render(
-  <HelloMessage name="Taylor" />,
+  <HelloMessage name="Tamás" />,
   document.getElementById('hello-example')
 );

content/home/examples/a-simple-component.md

@@ -1,9 +1,9 @@
 ---
-title: A Simple Component
+title: Egyszerű komponens
 order: 0
 domid: hello-example
 ---
 
-React components implement a `render()` method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by `render()` via `this.props`.
+A React komponensek azt mutatják, ami a `render()` metódusban visszatér, beviteli adattól függően. Ez a példa JSX-t használ, aminek a szintaxisa az XML-re hasonlít. A komponens beviteli adata le van küldve a komponensnek, amihez a `render()` metódus a `this.props` segítségével fér hozzá.
 
-**JSX is optional and not required to use React.** Try the [Babel REPL](babel://es5-syntax-example) to see the raw JavaScript code produced by the JSX compilation step.
+**A JSX szintaxis használata nem kötelező a Reactben.** Hogy lásd a nyers JavaScript kódot amit a JSX fordítása generál, próbáld ki a [Babel REPL](babel://es5-syntax-example)-t.

content/home/examples/a-stateful-component.js

@@ -21,7 +21,7 @@ class Timer extends React.Component {
   render() {
     return (
       <div>
-        Seconds: {this.state.seconds}
+        Másodperc: {this.state.seconds}
       </div>
     );
   }

content/home/examples/a-stateful-component.md

@@ -1,7 +1,7 @@
 ---
-title: A Stateful Component
+title: Állapot-teljes komponens
 order: 1
 domid: timer-example
 ---
 
-In addition to taking input data (accessed via `this.props`), a component can maintain internal state data (accessed via `this.state`). When a component's state data changes, the rendered markup will be updated by re-invoking `render()`.
+A beviteli adaton kívül (ami `this.props`-ként érhető el), egy komponens a saját belső állapotát is kezelni tudja (ez `this.state`-ként érhető el). Ha egy komponens állapota megváltozik, a renderelt tartalom frissítve lesz a `render()` metódus újrahívásával.

content/home/examples/an-application.js

@@ -9,19 +9,19 @@ class TodoApp extends React.Component {
   render() {
     return (
       <div>
-        <h3>TODO</h3>
+        <h3>Teendők</h3>
         <TodoList items={this.state.items} />
         <form onSubmit={this.handleSubmit}>
           <label htmlFor="new-todo">
-            What needs to be done?
+            Mik a teendők?
           </label>
           <input
             id="new-todo"
             onChange={this.handleChange}
             value={this.state.text}
           />
           <button>
-            Add #{this.state.items.length + 1}
+            Hozzáad #{this.state.items.length + 1}
           </button>
         </form>
       </div>

content/home/examples/an-application.md

@@ -1,7 +1,7 @@
 ---
-title: An Application
+title: Alkalmazás
 order: 2
 domid: todos-example
 ---
 
-Using `props` and `state`, we can put together a small Todo application. This example uses `state` to track the current list of items as well as the text that the user has entered. Although event handlers appear to be rendered inline, they will be collected and implemented using event delegation.
+A `props` és `state` segítségével össze tudunk rakni egy kis Teendők alkalmazást. Ez a példa a `state` állapotot használja a jelenlegi listaelemek és a felhasználó beviteli inputjának a nyomonkövetésére. Annak ellenére hogy az esemény kezelők helyben vannak renderelve, azok össze lesznek gyűjtve, és esemély továbbítással lesznek implementálva.

content/home/marketing/component-based.md

@@ -1,8 +1,8 @@
 ---
-title: Component-Based
+title: Komponens alapú
 order: 1
 ---
 
-Build encapsulated components that manage their own state, then compose them to make complex UIs.
+Hogy komplex felhasználói felületeket tudj létrehozni, építs egységbefoglalt komponenseket amik gondoskodnak a saját állapotukról és kombináld őket.
 
-Since component logic is written in JavaScript instead of templates, you can easily pass rich data through your app and keep state out of the DOM.
+Mivel a komponens logikáját sémák helyett JavaScriptben írod, könnyedén tudsz adatot mozgatni az alkalmazásban, és így az állapotok a DOM-on kívül maradnak.

content/home/marketing/declarative.md

@@ -1,8 +1,8 @@
 ---
-title: Declarative
+title: Deklaratív
 order: 0
 ---
 
-React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
+A React segítségével könnyen készíthetsz interaktív felhasználói felületeket. Tervezz egyszerű nézeteket az applikáció minden egyes állapotához, és a React gondoskodik arról, hogy adatváltozáskor csak a megfelelő komponensek frissüljenek és legyenek újrarenderelve.
 
-Declarative views make your code more predictable and easier to debug.
+A deklaratív nézetek kiszámíthatóbbá teszik a kódot, valamint megkönnyítik a hibakeresést is.

content/home/marketing/learn-once-write-anywhere.md

@@ -1,8 +1,8 @@
 ---
-title: Learn Once, Write Anywhere
+title: Tanuld meg egyszer, használd mindenhol
 order: 2
 ---
 
-We don't make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
+Mi nem feltételezünk semmit a technológiai stack-ed többi részéről, szóval nyugodtan fejleszthetsz új funkciókat a Reactben anélkül, hogy a meglévő kódot módosítanod kellene.
 
-React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).
+A React segítségével szerver oldalon is renderelhetsz Node-al, és mobil alkalmazásokat is írhatsz a [React Native](https://facebook.github.io/react-native/)-ben.

gatsby-config.js

@@ -11,7 +11,7 @@ module.exports = {
     title: 'React: A JavaScript library for building user interfaces',
     siteUrl: 'https://hu.reactjs.org',
     rssFeedTitle: 'React',
-    rssFeedDescription: 'A JavaScript library for building user interfaces',
+    rssFeedDescription: 'JavaScript könyvtár felhasználói felületek létrehozásához',
   },
   mapping: {
     'MarkdownRemark.frontmatter.author': 'AuthorYaml',

src/components/CodeEditor/CodeEditor.js

@@ -105,7 +105,7 @@ class CodeEditor extends Component {
                 color: colors.white,
               }}>
               <MetaTitle onDark={true}>
-                Live JSX Editor
+                Élő JSX szerkesztő
                 <label
                   css={{
                     fontSize: 14,

src/components/TitleAndMetaTags/TitleAndMetaTags.js

@@ -11,7 +11,7 @@ import {urlRoot} from 'site-constants';
 // $FlowFixMe This is a valid path
 import languages from '../../../content/languages.yml';
 
-const defaultDescription = 'A JavaScript library for building user interfaces';
+const defaultDescription = 'JavaScript könyvtár felhasználói felületek létrehozásához';
 
 type Props = {
   title: string,

src/pages/index.js

@@ -50,7 +50,7 @@ class Home extends Component {
     return (
       <Layout location={location}>
         <TitleAndMetaTags
-          title="React &ndash; A JavaScript library for building user interfaces"
+          title="React &ndash; JavaScript könyvtár felhasználói felületek létrehozásához"
           canonicalUrl={createCanonicalUrl('/')}
         />
         <div css={{width: '100%'}}>
@@ -133,7 +133,7 @@ class Home extends Component {
                         fontSize: 30,
                       },
                     }}>
-                    A JavaScript library for building user interfaces
+                    JavaScript könyvtár felhasználói felületek létrehozásához
                   </p>
                   <Flex
                     valign="center"
@@ -151,12 +151,12 @@ class Home extends Component {
                       <ButtonLink
                         to="/docs/getting-started.html"
                         type="primary">
-                        Get Started
+                        Kezdjük
                       </ButtonLink>
                     </CtaItem>
                     <CtaItem>
                       <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                        Take the Tutorial
+                        Próbáld ki a tutoriált
                       </ButtonLink>
                     </CtaItem>
                   </Flex>
@@ -294,12 +294,12 @@ class Home extends Component {
                 }}>
                 <CtaItem>
                   <ButtonLink to="/docs/getting-started.html" type="primary">
-                    Get Started
+                    Kezdjük
                   </ButtonLink>
                 </CtaItem>
                 <CtaItem>
                   <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                    Take the Tutorial
+                    Próbáld ki a tutoriált
                   </ButtonLink>
                 </CtaItem>
               </Flex>