Translate homepage

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

@@ -2,31 +2,29 @@ class MarkdownEditor extends React.Component {
   constructor(props) {
     super(props);
     this.handleChange = this.handleChange.bind(this);
-    this.state = { value: 'Hello, **world**!' };
+    this.state = {value: 'Salan, **dünya**!'};
   }
 
   handleChange(e) {
-    this.setState({ value: e.target.value });
+    this.setState({value: e.target.value});
   }
 
   getRawMarkup() {
     const md = new Remarkable();
-    return { __html: md.render(this.state.value) };
+    return {__html: md.render(this.state.value)};
   }
 
   render() {
     return (
       <div className="MarkdownEditor">
-        <h3>Input</h3>
-        <label htmlFor="markdown-content">
-          Enter some markdown
-        </label>
+        <h3>Daxiletmə</h3>
+        <label htmlFor="markdown-content">Markdown daxil edin</label>
         <textarea
           id="markdown-content"
           onChange={this.handleChange}
           defaultValue={this.state.value}
         />
-        <h3>Output</h3>
+        <h3>Nəticə</h3>
         <div
           className="content"
           dangerouslySetInnerHTML={this.getRawMarkup()}
@@ -38,5 +36,5 @@ class MarkdownEditor extends React.Component {
 
 ReactDOM.render(
   <MarkdownEditor />,
-  document.getElementById('markdown-example')
+  document.getElementById('markdown-example'),
 );

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

@@ -1,7 +1,7 @@
 ---
-title: A Component Using External Plugins
+title: Xarici Pluginlər ilə Komponent
 order: 3
 domid: markdown-example
 ---
 
-React is flexible and provides hooks that allow 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 sizə digər kitabxana və freymvorklara inteqrasiya etmək üçün metodlar ilə təmin edir. Bu nümunədə **remarkable** xarici Markdown kitabxanası işlənərək `<textarea>` elementinin dəyəri markdown-a real zamanda çevrilir.

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

@@ -1,14 +1,10 @@
 class HelloMessage extends React.Component {
   render() {
-    return (
-      <div>
-        Hello {this.props.name}
-      </div>
-    );
+    return <div>Salam {this.props.name}</div>;
   }
 }
 
 ReactDOM.render(
-  <HelloMessage name="Taylor" />,
-  document.getElementById('hello-example')
-);
+  <HelloMessage name="Fuad" />,
+  document.getElementById('hello-example'),
+);

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

@@ -1,9 +1,9 @@
 ---
-title: A Simple Component
+title: Sadə 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`.
+React komponenti daxil olan məlumatları qəbul edib nəyi göstəriləcəyini qaytaran, `render()` funskiyasını tətbiq edir. Bu nümunədə XML-ə oxşayan sintaksis - JSX işlənilir. Daxil olunan məlumat `this.props` ilə `render` funskiyasından oxuna bilər.
 
-**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.
+**JSX məcburi deyil və React işlətmək üçün tələb olunmur.** JSX kompilyasiyasından yaradılan Javascript kodunu görmək üçün [Babel REPL](babel://es5-syntax-example) sınayın.

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

@@ -1,12 +1,12 @@
 class Timer extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { seconds: 0 };
+    this.state = {seconds: 0};
   }
 
   tick() {
     this.setState(state => ({
-      seconds: state.seconds + 1
+      seconds: state.seconds + 1,
     }));
   }
 
@@ -19,15 +19,8 @@ class Timer extends React.Component {
   }
 
   render() {
-    return (
-      <div>
-        Seconds: {this.state.seconds}
-      </div>
-    );
+    return <div>{this.state.seconds} saniyə</div>;
   }
 }
 
-ReactDOM.render(
-  <Timer />,
-  document.getElementById('timer-example')
-);
+ReactDOM.render(<Timer />, document.getElementById('timer-example'));

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

@@ -1,7 +1,7 @@
 ---
-title: A Stateful Component
+title: Vəziyyətli Komponent
 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()`.
+Daxil olunan məlumatdan (`this.props` ilə oxunur) əlavə, komponent daxili vəziyyət məlumatlarını saxlaya bilər (`this.state` ilə  oxunur). Komponent vəziyyətində dəyişikliklər olduqda, render olunmuş nişan `render()` funskiyasının çağrılmağı ilə yenilənir.

content/home/examples/an-application.js

@@ -1,7 +1,7 @@
 class TodoApp extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { items: [], text: '' };
+    this.state = {items: [], text: ''};
     this.handleChange = this.handleChange.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
   }
@@ -12,24 +12,20 @@ class TodoApp extends React.Component {
         <h3>TODO</h3>
         <TodoList items={this.state.items} />
         <form onSubmit={this.handleSubmit}>
-          <label htmlFor="new-todo">
-            What needs to be done?
-          </label>
+          <label htmlFor="new-todo">Nə etmək lazımdır?</label>
           <input
             id="new-todo"
             onChange={this.handleChange}
             value={this.state.text}
           />
-          <button>
-            Add #{this.state.items.length + 1}
-          </button>
+          <button>Əlavə Et #{this.state.items.length + 1}</button>
         </form>
       </div>
     );
   }
 
   handleChange(e) {
-    this.setState({ text: e.target.value });
+    this.setState({text: e.target.value});
   }
 
   handleSubmit(e) {
@@ -39,11 +35,11 @@ class TodoApp extends React.Component {
     }
     const newItem = {
       text: this.state.text,
-      id: Date.now()
+      id: Date.now(),
     };
     this.setState(state => ({
       items: state.items.concat(newItem),
-      text: ''
+      text: '',
     }));
   }
 }
@@ -60,7 +56,4 @@ class TodoList extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <TodoApp />,
-  document.getElementById('todos-example')
-);
+ReactDOM.render(<TodoApp />, document.getElementById('todos-example'));

content/home/examples/an-application.md

@@ -1,7 +1,7 @@
 ---
-title: An Application
+title: Bir Applikasiya
 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.
+Gəlin `props` və `state` işlədərək kiçik bir Todo applikasiya yaradaq. Bu nümunədə `state` ilə cari elementlərin siyayısını, həmçinin istifadəçinin daxil etdiyi mətni izləyir. Hadisə işləyicilərinin sətirdaxili olmağına baxmayaraq, bu işləyicilər toplanır və hadisə deleqasiyası tərəfindən tətbiq edilir.

content/home/marketing/component-based.md

@@ -1,8 +1,8 @@
 ---
-title: Component-Based
+title: Komponent Əsasında
 order: 1
 ---
 
-Build encapsulated components that manage their own state, then compose them to make complex UIs.
+Öz halını idarə edən inkapsulasiyalı komponentlər düzəldib, sonra komponentləri tərtib edərək kompleks UI yaradın.
 
-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.
+Komponent məntiqi şablon əvəzinə JavaScriptdə yazıldığından, siz asanlıqla zəngin məlumatları öz applikasiyanıza göndərərək vəziyyəti DOMdan kənarda saxlaya bilərsiniz.

content/home/marketing/declarative.md

@@ -1,8 +1,8 @@
 ---
-title: Declarative
+title: Deklarativ
 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 interaktiv UI yaranmasını çox asanlaşdırır. Applikasiyanızın hər bir halı üçün sadə görünüşlər yaradın. Məlumatlar dəyişən zaman React düzgün komponentləri səmərəli şəkildə dəyişir və render edir.
 
-Declarative views make your code more predictable and easier to debug.
+Deklarativ görünüşlər sizini kodunuzu daha proqnozlaşdırıla bilən və asan dibuq olunan edir.

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

@@ -1,8 +1,8 @@
 ---
-title: Learn Once, Write Anywhere
+title: Bir dəfə öyrən, Hər yerdə yaz
 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.
+Biz, sizin qalan texnologiya stekiniz haqqında heç bir təxmin etmirik. Bu səbədən siz mövcud kodunuzu yenidən yazmadan, yeni xüsusiyyətləri Reactdə yaza bilərsiniz.
 
-React can also render on the server using Node and power mobile apps using [React Native](https://facebook.github.io/react-native/).
+React həmçinin Node ilə serverdə render edə və mobil applikasiyaları [React Native](https://facebook.github.io/react-native/) ilə dəstəkləyə bilər.

src/components/CodeEditor/CodeEditor.js

@@ -56,12 +56,12 @@ class CodeEditor extends Component {
     if (showBabelErrorMessage) {
       errorMessage = (
         <span>
-          Babel could not be loaded.
+          Babel yüklənə bilmədi
           <br />
           <br />
-          This can be caused by an ad blocker. If you're using one, consider
-          adding reactjs.org to the whitelist so the live code examples will
-          work.
+          Bu ad bloker işlətməkdən ola bilər. Əgər siz ad blocker
+          işlədirsinizsə, canlı kod nümunələrini görmək üçün reactjs.org
+          domenini ağ siyahıya atınş
         </span>
       );
     } else if (error != null) {
@@ -99,7 +99,7 @@ class CodeEditor extends Component {
                 color: colors.white,
               }}>
               <MetaTitle onDark={true}>
-                Live JSX Editor
+                Canlı JSX Redaktoru
                 <label
                   css={{
                     fontSize: 14,
@@ -200,7 +200,7 @@ class CodeEditor extends Component {
                   padding: '0 10px',
                   backgroundColor: colors.divider,
                 }}>
-                <MetaTitle>Result</MetaTitle>
+                <MetaTitle>Nəticə</MetaTitle>
               </div>
               <div
                 id={containerNodeID}

src/components/CodeExample/CodeExample.js

@@ -61,7 +61,7 @@ class CodeExample extends Component {
         {loaded ? (
           <CodeEditor code={code} containerNodeID={containerNodeID} />
         ) : (
-          <h4>Loading code example...</h4>
+          <h4>Nümunə yüklənir...</h4>
         )}
       </div>
     );

src/pages/index.js

@@ -51,7 +51,7 @@ class Home extends Component {
     return (
       <Layout location={location}>
         <TitleAndMetaTags
-          title="React &ndash; A JavaScript library for building user interfaces"
+          title="React &ndash; UI yaratmaq üçün Javascript Kitabxanası"
           ogUrl={createOgUrl('index.html')}
         />
         <div css={{width: '100%'}}>
@@ -134,7 +134,7 @@ class Home extends Component {
                         fontSize: 30,
                       },
                     }}>
-                    A JavaScript library for building user interfaces
+                    UI yaratmaq üçün Javascript Kitabxanası
                   </p>
                   <Flex
                     valign="center"
@@ -149,12 +149,12 @@ class Home extends Component {
                       <ButtonLink
                         to="/docs/getting-started.html"
                         type="primary">
-                        Get Started
+                        Başlamaq
                       </ButtonLink>
                     </CtaItem>
                     <CtaItem>
                       <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                        Take the Tutorial
+                        Dərsiliyi Götür
                       </ButtonLink>
                     </CtaItem>
                   </Flex>
@@ -286,12 +286,12 @@ class Home extends Component {
               <Flex valign="center">
                 <CtaItem>
                   <ButtonLink to="/docs/getting-started.html" type="primary">
-                    Get Started
+                    Başlamaq
                   </ButtonLink>
                 </CtaItem>
                 <CtaItem>
                   <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                    Take the Tutorial
+                    Dərsiliyi Götür
                   </ButtonLink>
                 </CtaItem>
               </Flex>