` elementi var:
```html
```
-We call this a "root" DOM node because everything inside it will be managed by React DOM.
+Biz bu nodu "ana" DOM nodu sayırıq. Çünki bu nodun içərisində baş verən bütün dəyişikliklər React DOM tərəfindən idarə olunacaq.
-Applications built with just React usually have a single root DOM node. If you are integrating React into an existing app, you may have as many isolated root DOM nodes as you like.
+Adətən, React-də düzəldilmiş applikasiyaların tək ana DOM nodu var. Əgər siz React-i mövcud applikasiyanıza inteqrasiya edirsinizsə, sizdə istədiyiniz qədər ana DOM nodları ola bilər.
-To render a React element into a root DOM node, pass both to `ReactDOM.render()`:
+React elementini DOM noduna render etmək üçün, həm elementi həm də ana nodu `ReactDOM.render()` funksiyasına göndərin:
`embed:rendering-elements/render-an-element.js`
[](codepen://rendering-elements/render-an-element)
-It displays "Hello, world" on the page.
+Bu səhifə "Salam Dünya" göstərəcək.
-## Updating the Rendered Element {#updating-the-rendered-element}
+## Render Edilmiş Elementi Yeniləyin {#updating-the-rendered-element}
-React elements are [immutable](https://en.wikipedia.org/wiki/Immutable_object). Once you create an element, you can't change its children or attributes. An element is like a single frame in a movie: it represents the UI at a certain point in time.
+React elementləri [dəyişilməzdir](https://en.wikipedia.org/wiki/Immutable_object). Element yarandıqdan sonra bu elementin uşaqlarını və ya atributlarını dəyişmək olmaz. Element filmdə bir kadr kimidir: hər hansı bir zamanda UI-ı təsvir edir.
-With our knowledge so far, the only way to update the UI is to create a new element, and pass it to `ReactDOM.render()`.
+Bizim indiki biliyimiz ilə UI-ı yeniləmək üçün yalnız yeni element yaradıb `ReactDOM.render()`-ə göndərməliyik.
-Consider this ticking clock example:
+Aşağıda olan saat misalına baxaq:
`embed:rendering-elements/update-rendered-element.js`
[](codepen://rendering-elements/update-rendered-element)
-It calls `ReactDOM.render()` every second from a [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval) callback.
+Bu kod hər saniyə [`setInterval()`](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval)-ın callback-indən `ReactDOM.render()` funksiyasını çağırır.
->**Note:**
+>**Qeyd:**
>
->In practice, most React apps only call `ReactDOM.render()` once. In the next sections we will learn how such code gets encapsulated into [stateful components](/docs/state-and-lifecycle.html).
+>Praktikada, React applikasiyaları `ReactDOM.render()` funksiyasını yalnız bir dəfə çağırırlar. Gələcək bölmələrdə belə kodun [state-li komponetlərə](/docs/state-and-lifecycle.html) necə inkapsulyasiya etdiyini oyrənəcəyik.
>
->We recommend that you don't skip topics because they build on each other.
+>Biz mövzuları ötürməyi tövsiyyə etmirik. Çünki bu mövzular bir-birilərindən asılıdırlar.
-## React Only Updates What's Necessary {#react-only-updates-whats-necessary}
+## React Yalnız Lazım Olanları Yeniləyir {#react-only-updates-whats-necessary}
-React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.
+React DOM, DOM-u istənilən vəziyyətə gətirmək üçün elementləri və uşaqları keçmiş versiyaları ilə müqayisə edərək yalnız lazımi DOM yeniliklərini tətbiq edir.
-You can verify by inspecting the [last example](codepen://rendering-elements/update-rendered-element) with the browser tools:
+Siz bunu təsqid etmək üçün [sonuncu misalımızı](codepen://rendering-elements/update-rendered-element) brauzer alətləri ilə yoxlaya bilərsiniz:
-
+
-Even though we create an element describing the whole UI tree on every tick, only the text node whose contents has changed gets updated by React DOM.
+Bizim hər anda bütün UI ağacını təsvir edən elementi yaratmağımıza baxmayaraq React DOM yalnız dəyişiklik baş verən mətn nodlarını yeniləyir.
-In our experience, thinking about how the UI should look at any given moment rather than how to change it over time eliminates a whole class of bugs.
+UI-ı zaman ilə necə dəyişmək əvəzinə hər hansı bir anda necə görünəcəyi haqqda fikirləşmək bir çox baqların qarşısını alır.
diff --git a/examples/rendering-elements/render-an-element.js b/examples/rendering-elements/render-an-element.js
index 024b35876..9a2e21a70 100644
--- a/examples/rendering-elements/render-an-element.js
+++ b/examples/rendering-elements/render-an-element.js
@@ -1,2 +1,2 @@
-const element =
Hello, world
;
+const element =
Salam Dünya
;
ReactDOM.render(element, document.getElementById('root'));
diff --git a/examples/rendering-elements/update-rendered-element.js b/examples/rendering-elements/update-rendered-element.js
index a4dabafc7..24a4ca363 100644
--- a/examples/rendering-elements/update-rendered-element.js
+++ b/examples/rendering-elements/update-rendered-element.js
@@ -1,8 +1,8 @@
function tick() {
const element = (
-
Hello, world!
- It is {new Date().toLocaleTimeString()}.
+ Salam Dünya!
+ Saat: {new Date().toLocaleTimeString()}.
);
// highlight-next-line
diff --git a/gatsby-config.js b/gatsby-config.js
index 957c39145..007e22915 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -60,7 +60,7 @@ module.exports = {
{
resolve: 'gatsby-remark-code-repls',
options: {
- defaultText: '
Try it on CodePen',
+ defaultText: '
CodePen-də sınayın',
directory: `${__dirname}/examples/`,
externals: [
`//unpkg.com/react/umd/react.development.js`,