Translate '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: 'Witaj, **świecie**!' };
   }
 
   handleChange(e) {
@@ -17,16 +17,16 @@ class MarkdownEditor extends React.Component {
   render() {
     return (
       <div className="MarkdownEditor">
-        <h3>Input</h3>
+        <h3>Dane wejściowe</h3>
         <label htmlFor="markdown-content">
-          Enter some markdown
+          Wpisz kod z użyciem składni Markdown
         </label>
         <textarea
           id="markdown-content"
           onChange={this.handleChange}
           defaultValue={this.state.value}
         />
-        <h3>Output</h3>
+        <h3>Wynik</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: Korzystanie z zewnętrznej biblioteki
 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.
+React pozwala na używanie innych bibliotek i frameworków. W tym przykładzie skorzystaliśmy z **remarkable**, zewnętrznej biblioteki obsługującej składnię Markdown, aby w czasie rzeczywistym przekształcać wartość z pola `<textarea>`.

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

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

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

@@ -1,9 +1,9 @@
 ---
-title: A Simple Component
+title: Prosty komponent
 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`.
+Komponenty reactowe zawierają metodę `render()`, która na podstawie danych wejściowych oblicza, co powinno zostać wyświetlone. W tym przykładzie użyliśmy podobnej do XML-a składni o nazwie JSX. Dane przekazane do komponentu można odczytać ze zmiennej `this.props`.
 
-**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.
+**Używanie składni JSX nie jest wymagane w Reakcie.** W środowisku [Babel REPL](babel://es5-syntax-example) możesz podejrzeć surowy kod, powstały w wyniku kompilacji składni JSX.

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

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

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

@@ -1,7 +1,7 @@
 ---
-title: A Stateful Component
+title: Komponent ze stanem
 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()`.
+Poza danymi wejściowymi do komponentu (dostępnymi w zmiennej `this.props`), komponent może zarządzać swoim wewnętrznym stanem (dostępnym pod `this.state`).  Przy każdej zmianie stanu komponentu następuje ponownie wywołanie metody `render()`, co skutkuje zaktualizowaniem wyrenderowanej struktury.

content/home/examples/an-application.js

@@ -9,19 +9,19 @@ class TodoApp extends React.Component {
   render() {
     return (
       <div>
-        <h3>TODO</h3>
+        <h3>Do zrobienia</h3>
         <TodoList items={this.state.items} />
         <form onSubmit={this.handleSubmit}>
           <label htmlFor="new-todo">
-            What needs to be done?
+            Co jest do zrobienia?
           </label>
           <input
             id="new-todo"
             onChange={this.handleChange}
             value={this.state.text}
           />
           <button>
-            Add #{this.state.items.length + 1}
+            Dodaj #{this.state.items.length + 1}
           </button>
         </form>
       </div>

content/home/examples/an-application.md

@@ -1,7 +1,7 @@
 ---
-title: An Application
+title: Aplikacja
 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.
+Przy pomocy zmiennych `props` oraz `state` możemy stworzyć małą aplikację z listą zadań. Ten przykład wykorzystuje `state` do śledzenia zmian w liście elementów oraz wartości z pola tekstowego. Mimo że uchwyty do obsługi zdarzeń wydają się tu być renderowane wraz z komponentem, to tak naprawdę zostaną one zebrane i odpowiednio zaimplementowane przy użyciu mechanizmu obsługi zdarzeń.

content/home/marketing/component-based.md

@@ -1,8 +1,8 @@
 ---
-title: Component-Based
+title: Oparty na komponentach
 order: 1
 ---
 
-Build encapsulated components that manage their own state, then compose them to make complex UIs.
+Twórz izolowane komponenty, które zarządzają własnym stanem, a później łącz je w złożony UI.
 
-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.
+Jako że logika komponentów pisana jest w JavaScripcie, a nie w szablonach, przekazywanie skomplikowanych struktur danych i przechowywanie stanu aplikacji poza drzewem DOM staje się łatwiejsze.

content/home/marketing/declarative.md

@@ -1,8 +1,8 @@
 ---
-title: Declarative
+title: Deklaratywny
 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.
+React znacznie ułatwia tworzenie interaktywnych UI. Zaprojektuj proste widoki obsługujące stan aplikacji, a React zajmie się sprawną aktualizacją i ponownym renderowaniem odpowiednich komponentów.
 
-Declarative views make your code more predictable and easier to debug.
+Deklaratywne widoki sprawiają, że kod staje się bardziej przewidywalny i łatwiejszy do debugowania.

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

@@ -1,8 +1,8 @@
 ---
-title: Learn Once, Write Anywhere
+title: Naucz się raz, używaj wszędzie
 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.
+React działa w izolacji od reszty stosu technologicznego, dzięki czemu możesz w nim tworzyć nowe funkcjonalności, bez konieczności przepisywania istniejącego kodu.
 
-React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).
+React potrafi również renderować po stronie serwera przy użyciu Node, a także napędzać aplikacje mobilne za pomocą [React Native](https://facebook.github.io/react-native/).

src/components/TitleAndMetaTags/TitleAndMetaTags.js

@@ -8,7 +8,7 @@
 import Helmet from 'react-helmet';
 import React from 'react';
 
-const defaultDescription = 'A JavaScript library for building user interfaces';
+const defaultDescription = 'Biblioteka javascriptowa do tworzenia interfejsów użytkownika';
 
 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; biblioteka javascriptowa do tworzenia interfejsów użytkownika"
           ogUrl={createOgUrl('index.html')}
         />
         <div css={{width: '100%'}}>
@@ -133,7 +133,7 @@ class Home extends Component {
                         fontSize: 30,
                       },
                     }}>
-                    A JavaScript library for building user interfaces
+                    Biblioteka javascriptowa do tworzenia interfejsów użytkownika
                   </p>
                   <Flex
                     valign="center"
@@ -148,12 +148,12 @@ class Home extends Component {
                       <ButtonLink
                         to="/docs/getting-started.html"
                         type="primary">
-                        Get Started
+                        Rozpocznij
                       </ButtonLink>
                     </CtaItem>
                     <CtaItem>
                       <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                        Take the Tutorial
+                        Przejdź do samouczka
                       </ButtonLink>
                     </CtaItem>
                   </Flex>
@@ -285,12 +285,12 @@ class Home extends Component {
               <Flex valign="center">
                 <CtaItem>
                   <ButtonLink to="/docs/getting-started.html" type="primary">
-                    Get Started
+                    Rozpocznij
                   </ButtonLink>
                 </CtaItem>
                 <CtaItem>
                   <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                    Take the Tutorial
+                    Przejdź do samouczka
                   </ButtonLink>
                 </CtaItem>
               </Flex>