From 3b086077d6432fa266c4b6bcbc0c834b2b3d9ba9 Mon Sep 17 00:00:00 2001 From: Kurzdor Date: Tue, 26 Feb 2019 02:24:12 +0200 Subject: [PATCH 1/7] Added translation for "Add React to a Website" section --- content/docs/add-react-to-a-website.md | 152 ++++++++++++------------- content/docs/nav.yml | 2 +- 2 files changed, 77 insertions(+), 77 deletions(-) diff --git a/content/docs/add-react-to-a-website.md b/content/docs/add-react-to-a-website.md index 6a668e0a1..1eae86674 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: Додайте React до вашого сайту 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. +Використовуйте ту частину React, яка вам потрібна. -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 був спроектований з початку для поступового вбудовування і **ви можете використати ту частину React, яка вам потрібна**. Можливо, ви ви тільки хочете "оживити" елементи існуючого сайту. React-компоненти є чудовим способом зробити це. -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. +Більшість сайтів в Інтернеті не є і не повинна бути односторіночними додатками. Спробувати React в невеликих місцях вашого сайту можна за допомогою **декількох рядків коду і без інструментів збірки**. За бажанням, ви зможете потім поступово переносити на React весь сайт або залишити в декількох динамічних віджетах. --- -- [Add React in One Minute](#add-react-in-one-minute) -- [Optional: Try React with JSX](#optional-try-react-with-jsx) (no bundler necessary!) +- [Додаємо React за одну хвилину](#add-react-in-one-minute) +- [Необов'язково: Спробуйте React без JSX](#optional-try-react-with-jsx) (без бандлерів!) -## Add React in One Minute {#add-react-in-one-minute} +## Додаємо React за одну хвилину {#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. +В цьому розділі, ми покажемо як додати React-компонент до існуючої HTML сторінки. Ви можете практикуватися на своєму сайті або створити для даних цілей пустий HTML файл. -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.** +Вам не потрібно буде встановлювати складні інструменти або що-небудь інше -- **для того, щоб пройти даний розділ, вам потрібен доступ в Інтернет і хвилинка вільного часу.** -Optional: [Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip) +Необов'язково: [Завантажити готовий приклад (2Кб в архіві)](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} +### Крок 1: Додайте DOM-контейнер до HTML структури {#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: +По-перше, відкрийте HTML сторінку, яку ви хочете відредагувати. Додайте пустий `
` тег, щоб показати де ви хочете відобразити що-небудь з React. Для прикладу: ```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. +Ми дали цьому `
`-у `id` HTML аттрибут, який є унікальний. Це дозволить нам знайти за допомогою JavaScript-коду пізніше і відобразити React-компонент всередині нього. ->Tip +>Порада > ->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. +>Ви можете вставити так "контейнер" `
` **будь-де** всередині тегу ``. Ви можете створювати стільки незалежних DOM-контейнерів на одній сторінці, скільки вам потрібно. Вони зазвичай пусті -- React замінить будь-який існуючий вміст всередини DOM контейнерів. -### Step 2: Add the Script Tags {#step-2-add-the-script-tags} +### Крок 2: Додайте теги скриптів {#step-2-add-the-script-tags} -Next, add three ` - + ``` -The first two tags load React. The third one will load your component code. +Перші два теги завантажують React. Третій завантажує код вашого компонента. -### Step 3: Create a React Component {#step-3-create-a-react-component} +### Крок 3: Створіть React-компонент {#step-3-create-a-react-component} -Create a file called `like_button.js` next to your HTML page. +Створіть файл з назвою `like_button.js` в директорії з вашою HTML сторінкою. -Open **[this starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** and paste it into the file you created. +Відкрийте **[цей початковий код](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)** і вставте його в файл, який ви створили раніше. ->Tip +>Порада > ->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! +>В даному код створюється компонент React під назвою `LikeButton`. Не хвилюйтесь, якщо ви не розумієте його -- ми охопимо розробку React-компонентів пізніше в нашому [практичному підручнику](/tutorial/tutorial.html) і [довідці про основні концепти React](/docs/hello-world.html). Зараз же давайте відобразимо його на екрані! -After **[the starter code](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, add two lines to the bottom of `like_button.js`: +Після **[початкового коду](https://cdn.rawgit.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js)**, додайте два рядки коду в кінці `like_button.js`: ```js{3,4} -// ... the starter code you pasted ... +// ... початковий код, який ви скопіювали... 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. +Ці два рядки коду шукають `
`, який ми додали до нашого HTML файлу в першому кроці і потім відображає React-компонент кнопки "Мені подобається" всередині нього. -### That's It! {#thats-it} +### Готово! {#thats-it} -There is no step four. **You have just added the first React component to your website.** +Ось і все! **Ви щойно додали ваш перший React-компонент до вашого сайту.** -Check out the next sections for more tips on integrating React. +Ознайомтесь з наступними розділами, щоб дізнатися про інші способи для додавання React на ваш сайт. -**[View the full example source code](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** +**[Подивитися фінальний код прикладу](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605)** -**[Download the full example (2KB zipped)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** +**[Завантажити код прикладу (2Кб в архіві)](https://gist.github.com/gaearon/6668a1f6986742109c00a581ce704605/archive/f6c882b6ae18bde42dcf6fdb751aae93495a2275.zip)** -### Tip: Reuse a Component {#tip-reuse-a-component} +### Порада: Повторно використовуйте компоненти {#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: +Зазвичай, ви мабуть хотіли би відобразити React-компонент в кількох місцях на HTML сторінці. Це приклад, який показує кнопку "Мені подобається" три рази із різними даними: -[View the full example source code](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) +[Подивитися повний першокод](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda) -[Download the full example (2KB zipped)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) +[Завантажити код прикладу (2Кб в архіві)](https://gist.github.com/gaearon/faa67b76a6c47adbab04f739cba7ceda/archive/9d0dd0ee941fea05fd1357502e5aa348abb84c12.zip) ->Note +>Примітка > ->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. +>Цей принцип найбільш доречний для сторінок сайту, які містять написані на React ізольовані частини коду. Всередині чистого React-коду, простіше користуватися [композицією компонентів](/docs/components-and-props.html#composing-components). -### Tip: Minify JavaScript for Production {#tip-minify-javascript-for-production} +### Порада: Виконуйте мініфікацію JavaScript-коду для продакшена {#tip-minify-javascript-for-production} -Before deploying your website to production, be mindful that unminifed JavaScript can significantly slow down the page for your users. +Перед публікацією вашого сайту на продакшен, не забудьте про те, що незжатий JavaScript-код може значно сповільнити швидкість завантаження сторінки для ваших користувачів. -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`: +Якщо ви вже зжимаєте скрипти вашого додатку, **то ваш сайт буде готовим для публікації на продакшен**, якщо ви впевнитесь в тому що опублікована HTML-сторінка завантажує версії React які закінучуються на `production.min.js`: ```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). +Якщо ви не налаштували зжимання для ваших скриптів, то [цей варіант може вам допомогти із цим](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). -## Optional: Try React with JSX {#optional-try-react-with-jsx} +## Необов'язково: Спробуте React з JSX {#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: +В прикладах вище, ми лише опиралися на можливості, які підтримуються браузерами "з коробки". Ось чому ми використали JavaScript функцію, яка закликана для того, щоб описати React-у що відображати: ```js const e = React.createElement; -// Display a "Like" ); ``` Ці два приклади виконують одну і ту ж річ. Незважаючи на те, що **JSX є [цілком необов'язковим](/docs/react-without-jsx.html)**, багато людей вважають його зручним для розробки інтерфейсів користувача -- як із React, так і з іншими бібліотеками. -Ви можете спробувати JSX [в цьому онлайн-конвертері](https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=). +Ви можете спробувати JSX [у цьому онлайн-конвертері](https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=Q&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2%2Cstage-3&prettier=true&targets=Node-6.12&version=6.26.0&envVersion=). ### Швидкий старт з JSX {#quickly-try-jsx} @@ -159,9 +159,9 @@ return ( ``` -Тепер ви можете використовувати JSX в будь-якому ` @@ -121,9 +121,9 @@ ReactDOM.render(e(LikeButton), domContainer); Якщо ви ще не налаштували стискання для ваших скриптів, то [цей варіант може вам допомогти із цим](https://gist.github.com/gaearon/42a2ffa41b8319948f9be4076286e1f3). -## Необов'язково: Спробуте React з JSX {#optional-try-react-with-jsx} +## Необов'язково: Спробуйте React з JSX {#optional-try-react-with-jsx} -В попередніх прикладах, ми використовували тільки звичайні можливості сучасних браузерів. Тому ми використали JavaScript функцію, мета якої описати React, що відобразити на екран: +В попередніх прикладах ми використовували тільки звичайні можливості сучасних браузерів. Тому ми використали JavaScript функцію, мета якої описати React, що відобразити на екран: ```js const e = React.createElement; @@ -136,7 +136,7 @@ return e( ); ``` -Однак, React також пропонує можливість використовувати спеціальний синтаксис під назвою [JSX](/docs/introducing-jsx.html): +Однак React також пропонує можливість використовувати спеціальний синтаксис під назвою [JSX](/docs/introducing-jsx.html): ```js // Відобразити