From 1e6ef487446cf2f4d90df4fb26df9c41d0277766 Mon Sep 17 00:00:00 2001 From: Gasim Gasimzada Date: Mon, 23 Sep 2019 14:23:17 +0400 Subject: [PATCH 1/2] Translate Add React to Website --- content/docs/add-react-to-a-website.md | 144 ++++++++++++------------- 1 file changed, 72 insertions(+), 72 deletions(-) diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index b103cfae4..283edf179 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: Səhifəyə React Əlavə Et permalink: docs/add-react-to-a-website.html redirect_from: - "docs/add-react-to-an-existing-app.html" @@ -8,28 +8,28 @@ prev: getting-started.html next: create-a-new-react-app.html --- -Use as little or as much React as you need. +İstədiyiniz qədər az və ya çox React işlədin. -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. +React tədrici adaptasiya ilə dizan olunub. Siz **istədiyiniz qədər az və ya çox React işlədə bilərsiniz**. Siz mövcud səhifəyə bir az interktivlik əlavə etmək istəyə bilərsiniz. React komponentləri bunun üçün çox yaxşıdır. -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. +Veb səhifələrin əksəriyyəti tək səhifəli applikasiya deyil və olmamalıdırlar. **Bir neçə sətr kod və heç bir yaranma aləti olmadan**, React-i veb səhifənin kiçik bir hissəsində sınayın. Sonra React-in varlığını yavaş yavaş genişləndirə bilər və ya bir neçə dinamik vidcet üçün saxlaya bilərsiniz. --- -- [Add React in One Minute](#add-react-in-one-minute) -- [Optional: Try React with JSX](#optional-try-react-with-jsx) (no bundler necessary!) +- [React-i Bir Dəqiqəyə Əlavə Et](#add-react-in-one-minute) +- [Fakultativ: React-i JSX-də Sına](#optional-try-react-with-jsx) (paketləmə qurğusu lazım deyil!) -## Add React in One Minute {#add-react-in-one-minute} +## React-i Bir Dəqiqəyə Əlavə Et {#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. +Bu bölmədə, React-i mövcud veb səfihəyə necə əlavə edəcəyimiz göstərəcəyik. Siz öz veb səhifənizdə yoxlaya bilər və ya boş HTML faylı yaradıb praktika edə bilərsiniz. -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.** +Burada çətin alətlər və ya yükləmə tələbləri olmayacaq -- **bu bölməni bitirmək üçün sizə yalnız internet və bir dəqiqə vaxt lazımdır.** -Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) +Fakultativ: [Tam nümunəni yüklə (2KB zipped)](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} +### Addım 1: HTML-ə DOM Konteyneri Əlavə Et {#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: +İlk olaraq, redaktə edəcəyiniz HTML səhifəsini açın. React-də render ediləcək komponentin harada yerləşdirilməsi üçün boş `
` təqi əlavə edin. Məsələn: ```html{3} @@ -39,96 +39,96 @@ First, open the HTML page you want to edit. Add an empty `
` tag to mark the ``` -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. +Biz `
`-ə unikal `id` HTML atributu verdik. Bu elementi JavaScript kodda taparaq React komponentini bu elementə render etməyə imkan yaradacaq. ->Tip +>Məsləhət > ->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. +>Siz bunun kimi "konteyner" `
`-ini `` təqinin **istənilən yerində** yerləşdirə bilərsiniz. Bir səhifədə istədiyiniz qədər müstəqil DOM konteynerləri yerləşdirmək münkündür. Bu elementlər adətən boş olurlar. React bu elementin daxilində olan bütün konenti öz markapı ilə əvəzləyəcək. -### Step 2: Add the Script Tags {#step-2-add-the-script-tags} +### Addım 2: Script Təqləri Əlavə Et {#step-2-add-the-script-tags} -Next, add three ` - + ``` -The first two tags load React. The third one will load your component code. +İlk iki təq React-i yükləyəcək. Üçüncü təq isə bizim komponentimizi yükləyəcək. -### Step 3: Create a React Component {#step-3-create-a-react-component} +### Addım 3: React Komponenti Yarat {#step-3-create-a-react-component} -Create a file called `like_button.js` next to your HTML page. +HTML faylının yanında `like_button.js` faylı yaradın. -Open **[this starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** and paste it into the file you created. +Bu **[starter kodunu](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** açaraq bu faylın kontentini yeni yaratdığınız fayla köçürün. ->Tip +>Məsləhət > ->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! +>Bu kod `LikeButton` adlı React komponenti təyin edir. Bunu başa düşmürsünüzsə narahat olmayın -- biz React-in əsas blokları haqqında [dərslikdə](/tutorial/tutorial.html) and [və əsas konsepsiyalarda](/docs/hello-world.html) danışacağıq. İndi, əsas kodu ekranda görməkdir! -After **[the starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add two lines to the bottom of `like_button.js`: +**[Starter koddan sonra](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, `like_button.js` faylının sonuna iki sətr əlavə edin: ```js{3,4} -// ... the starter code you pasted ... +// ... Köçürdüyünüz starter kodu ... 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. +Bu iki liniya kod HTML-ə əlavə etdiyimiz `
` elementini tapacaq və "Like" düyməsi olan React komponentini bu elementin içərisində render edəcək. -### That's It! {#thats-it} +### Hamısı Budur! {#thats-it} -There is no step four. **You have just added the first React component to your website.** +Burada 4-cü addım yoxdur. **Siz veb səhifənizə ilk React komponentinin əlavə etdiniz.** -Check out the next sections for more tips on integrating React. +React-in inteqrasiyası üçün digər məsləhətlər üçün sonrakı bölmələrə baxın. -**[View the full example source code](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** +**[Tam nümunə koduna buradan baxın](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** -**[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** +**[Tam nümunəni yükləyin (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** -### Tip: Reuse a Component {#tip-reuse-a-component} +### Məsləhət: Komponenti Yenidən İşlədin {#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: +Adətən, React komponentləri HTML səhifəsinin bir neçə yerində istifadə edilir. Bu nümunədə "Like" düyməsi üç dəfə göstərilir və bəzi məlumatlar bu düyməyə göndərilir: -[View the full example source code](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) +[Tam nümunə koduna buradan baxın](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) -[Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) +[Tam nümunəni yükləyin (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) ->Note +>Qeyd > ->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. +>Bu stategiya React ilə işlənilən hissələrinin bir birindən ayrı olduğu halda faydalıdır. React kodunun daxilində [komponent kompozisiyasından istifadə etmək](/docs/components-and-props.html#composing-components) daha faydalıdır. -### Tip: Minify JavaScript for Production {#tip-minify-javascript-for-production} +### Məsləhət: Produksiya üçün JavaScript-i Minify Edin {#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. +Veb səhifəni produksiyaya yerləşdirmədən öncə, minify olunmamış JavaScript-in istifadəçilərə səhifənin açılmasını çox yavaşladacaq. -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`: +Əgər siz artıq applikasiya skriptlərini minify edirsinizsə, yüklənmiş HTML-in `production.min.js` ilə bitən React veriyasını yüklədikdə **sizin saytınız produksiya üçün hazır olacaq**: ```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). +Əgər sizdə scriptlər üçün minifikasiya addımı yoxdursa, [bunu quraşdırmağın yollarından biri buradadır](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). -## Optional: Try React with JSX {#optional-try-react-with-jsx} +## Fakultativ: React-i JSX ilə Sınayın {#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: +Yuxarıdakı numünələrdə, biz yalnız brauzerlərdə nativ dəstəklənən xüsusiyyətlərdən istifadə etdik. Bu səbəbdən biz React-ə render etməsi üçün funksiya çağırışından istifadə etdik: ```js const e = React.createElement; -// Display a "Like"