diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index b103cfae4..ad2aa72cc 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,127 +8,127 @@ 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ə dizayn 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. React-i **bir neçə sətr kod ilə və heç bir yaranma alətindən istifadə etmədən** 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əhifəyə necə əlavə edəcəyimizi göstərəcəyik. Buradakı misalları ö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 zip olunmuş formada)](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ə ediləcək 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} - +
- + ``` -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 `
` təqinə unikal `id` HTML atributu verdik. Göstərilən ID ilə elementi JavaScript kodda taparaq React komponentini bu elementə render etmək mümkün olacaq. ->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ümkündür. Bu elementlər adətən boş olurlar. React bu elementin daxilində olan bütün kontenti ö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, üçü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)** 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) və [əsas konsepsiyalarda](/docs/hello-world.html) danışacağıq. İndi əsas məqsəd, 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 kodundandan 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 sətr 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ına dair 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. Aşağıdakı nümunədə "Like" düyməsi fəqrli məlumatlar ilə üç dəfə göstə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 zip olunmuş formada)](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 strategiya 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 Minifikasiya 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ə, minifikasiya olunmamış JavaScript-in səhifəni çox yavaşladacağından xəbərdar olun. -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 applikasiya skriptlərini minifikasiya edirsinizsə, yüklənmiş HTML-in `production.min.js` ilə bitən React versiyasını yüklədikdə **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 skriptlə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 React-in render etməsi üçün funksiya çağırışından istifadə etdik: ```js const e = React.createElement; -// Display a "Like"