diff --git a/content/docs/getting-started.md b/content/docs/getting-started.md index 37972e83e..c2c50003a 100644 --- a/content/docs/getting-started.md +++ b/content/docs/getting-started.md @@ -1,6 +1,6 @@ --- id: getting-started -title: Getting Started +title: Початок роботи permalink: docs/getting-started.html next: add-react-to-a-website.html redirect_from: @@ -18,109 +18,109 @@ redirect_from: - "docs/environments.html" --- -This page is an overview of the React documentation and related resources. +В даному розділі ми оглянемо документацію React та пов'язані з ним ресурси. -**React** is a JavaScript library for building user interfaces. Learn what React is all about on [our homepage](/) or [in the tutorial](/tutorial/tutorial.html). +**React** — це JavaScript-бібліотека для створення інтерфейсу користувачів. Відвідайте [нашу головну сторінку](/) або [вступ](/tutorial/tutorial.html), аби скласти враження про React. --- -- [Try React](#try-react) -- [Learn React](#learn-react) -- [Staying Informed](#staying-informed) -- [Versioned Documentation](#versioned-documentation) -- [Something Missing?](#something-missing) +- [Спробуємо React](#try-react) +- [Вивчаємо React](#learn-react) +- [Новини про нові релізи](#staying-informed) +- [Документація старих версій React](#versioned-documentation) +- [Зворотній зв'язок](#something-missing) -## Try React {#try-react} +## Спробуємо React {#try-react} -React has been designed from the start for gradual adoption, and **you can use as little or as much React as you need.** Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started. +З самого початку React був спроектований для поступового вбудовування і **ви можете використати ту частину React, яка вам потрібна.** Посилання в цьому розілі допоможуть вам дізнатися як познайомитися з React, додати трохи "інтерактивності" до простої HTML-сторінки, або почати розробку складних React-додатків. -### Online Playgrounds {#online-playgrounds} +### Онлайн-пісочниці {#online-playgrounds} -If you're interested in playing around with React, you can use an online code playground. Try a Hello World template on [CodePen](codepen://hello-world), [CodeSandbox](https://codesandbox.io/s/new), or [Glitch](https://glitch.com/edit/#!/remix/starter-react-template). +Хочете погратися з React? Тоді ви можете використати онлайн-пісочниці. Спробуйте початковий шаблон на [CodePen](codepen://hello-world), [CodeSandbox](https://codesandbox.io/s/new) або [Glitch](https://glitch.com/edit/#!/remix/starter-react-template). -If you prefer to use your own text editor, you can also [download this HTML file](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html), edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so we'd only recommend using this for simple demos. +Віддаєте перевагу вашому редактору коду? Тоді ви можете [завантажити даний HTML-файл](https://raw.githubusercontent.com/reactjs/reactjs.org/master/static/html/single-file-example.html), відредагувати та відкрити його в вашому браузері. Даний шаблон під час запуску проводить трансформацію JSX в JavaScript. Однак, воно є повільним, тому ми рекомендуємо використовувати даний файл тільки для простих демонстраційних прикладів. -### Add React to a Website {#add-react-to-a-website} +### Додаємо React до сайту {#add-react-to-a-website} -You can [add React to an HTML page in one minute](/docs/add-react-to-a-website.html). You can then either gradually expand its presence, or keep it contained to a few dynamic widgets. +Ви можете [додати React до HTML-сторінки лише за хвилину](/docs/add-react-to-a-website.html). За бажанням, ви зможете потім поступово поширювати React на сайті або залишити в декількох динамічних віджетах. -### Create a New React App {#create-a-new-react-app} +### Створюємо новий React-додаток {#create-a-new-react-app} -When starting a React project, [a simple HTML page with script tags](/docs/add-react-to-a-website.html) might still be the best option. It only takes a minute to set up! +Розпочинаючи розробку React-проекту, [проста HTML-сторінка з script-тегами](/docs/add-react-to-a-website.html) може бути найкращим варіантом. Вам знадобиться одна хвилина, щоб створити її! -As your application grows, you might want to consider a more integrated setup. There are [several JavaScript toolchains](/docs/create-a-new-react-app.html) we recommend for larger applications. Each of them can work with little to no configuration and lets you take full advantage of the rich React ecosystem. +Однак для розробки більш складного додатку вам, мабуть, потрібно буде розглянути варіант використання робочого середовища, яке містить різноманітні технології. Ось [декілька наборів JavaScript-інструментів](/docs/create-a-new-react-app.html), які ми рекомендуємо для розробки більш серйозних React-додатків. Кожен із них може використовуватись майже без зміни налаштувань, а також дають змогу розкрити весь потенціал великої React-екосистеми. -## Learn React {#learn-react} +## Вивчаємо React {#learn-react} -People come to React from different backgrounds and with different learning styles. Whether you prefer a more theoretical or a practical approach, we hope you'll find this section helpful. +Люди приходять до React із різним досвідом і стилем навчання. Мабуть, ви віддаєте перевагу ознайомленню з теоретичною частиною або навчанню на практиці, але ми надіємось, що для вас даний розділ був корисним. -* If you prefer to **learn by doing**, start with our [practical tutorial](/tutorial/tutorial.html). -* If you prefer to **learn concepts step by step**, start with our [guide to main concepts](/docs/hello-world.html). +* Віддаєте перевагу **навчанню на практиці**? Почніть з [навчального посібника](/tutorial/tutorial.html). +* Або ж **ознайомленню з теоретичною частиною**? [Ознайомтесь з головними концептами React](/docs/hello-world.html). -Like any unfamiliar technology, React does have a learning curve. With practice and some patience, you *will* get the hang of it. +Можливо, React може здатися для вас трохи важким, але, доклавши трохи зусиль, ви **обов'язково вивчите його**. Терпіння і праця все перемагають. -### First Examples {#first-examples} +### Перші приклади {#first-examples} -The [React homepage](/) contains a few small React examples with a live editor. Even if you don't know anything about React yet, try changing their code and see how it affects the result. +[Головна сторінка](/) містить декілька невеликих React-прикладів з можливістю їх редагування. Навіть якщо ви не знаєте нічого про React, спробуйте погратися з їх кодом, аби побачити, як впливають на результат ваші зміни. -### React for Beginners {#react-for-beginners} +### React для початківців {#react-for-beginners} -If you feel that the React documentation goes at a faster pace than you're comfortable with, check out [this overview of React by Tania Rascia](https://www.taniarascia.com/getting-started-with-react/). It introduces the most important React concepts in a detailed, beginner-friendly way. Once you're done, give the documentation another try! +Якщо ви відчуваєте те, що вивчення React за допомогою цієї документації здається важким і йде не так швидко, як вам хотілось би, тоді прочитайте [цей запис блогу Тані Раша (Tania Rascia)](https://www.taniarascia.com/getting-started-with-react/). Вона описала найбільш важливі концепти React в детальному стилі, який також доступний для новачків. Як тільки ви ознайомитесь з ним, спробуйте документацію знову! -### React for Designers {#react-for-designers} +### React для дизайнерів {#react-for-designers} -If you're coming from a design background, [these resources](https://reactfordesigners.com/) are a great place to get started. +Займаєтесь дизайном і хочете вивчити React? Хорошим способом для цього є [даний ресурс](https://reactfordesigners.com/). -### JavaScript Resources {#javascript-resources} +### Ресурси по JavaScript {#javascript-resources} -The React documentation assumes some familiarity with programming in the JavaScript language. You don't have to be an expert, but it's harder to learn both React and JavaScript at the same time. +Документація React передбачає наявність невеликого досвіду в програмуванні на JavaScript. Вам не потрібно бути експертом, але це важко вивчати React і JavaScript одночасно. -We recommend going through [this JavaScript overview](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript) to check your knowledge level. It will take you between 30 minutes and an hour but you will feel more confident learning React. +Ми рекомендуємо вам пройти [даний огляд мови програмування JavaScript](https://developer.mozilla.org/uk/docs/Web/JavaScript/A_re-introduction_to_JavaScript) для того, щоб освіжити знання. Це займе від 30 хвилин до години вашого вільного часу, але ви будете відчувати себе більш впевнено під час вивчення React. ->Tip +>Підказка > ->Whenever you get confused by something in JavaScript, [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) and [javascript.info](https://javascript.info/) are great websites to check. There are also [community support forums](/community/support.html) where you can ask for help. +>Загляніть на [MDN](https://developer.mozilla.org/uk/docs/Web/JavaScript) та [javascript.info](https://javascript.info/), якщо ви маєте певні пробіли в знаннях. Також на [форумах нашої спільноти](/community/support.html) ви можете попросити допомоги в вирішенні певних проблем. -### Practical Tutorial {#practical-tutorial} +### Практичний довідник {#practical-tutorial} -If you prefer to **learn by doing,** check out our [practical tutorial](/tutorial/tutorial.html). In this tutorial, we build a tic-tac-toe game in React. You might be tempted to skip it because you're not building games -- but give it a chance. The techniques you'll learn in the tutorial are fundamental to building *any* React apps, and mastering it will give you a much deeper understanding. +Віддаєте перевагу **навчанню на практиці**? Заглянте в [практичний довідник](/tutorial/tutorial.html). В цьому посібнику описано процес розробки гри в "Хрестики-нулики" на React. Ви, мабуть, захочете пропустити його, тому що ви не збираєтесь розробляти ігри, але все рівно спробуйте. Методи, які ви вивчите в довіднику, є фундаментальними для створення *будь-якого* React-додатку. Даний практичний довідник дасть вам більш глибоке розуміння React, яке піде вам на користь. -### Step-by-Step Guide {#step-by-step-guide} +### Покроковий гід {#step-by-step-guide} -If you prefer to **learn concepts step by step,** our [guide to main concepts](/docs/hello-world.html) is the best place to start. Every next chapter in it builds on the knowledge introduced in the previous chapters so you won't miss anything as you go along. +Віддаєте перевагу **ознайомленню з теоретичною частиною**? Почніть з [гіду по головним концептам React](/docs/hello-world.html). Кожен наступний розділ в ньому покладається на знанні, отриманому в попередніх розділах, тому ви не пропустите нічого в процесі вивчення. -### Thinking in React {#thinking-in-react} +### Філософія React {#thinking-in-react} -Many React users credit reading [Thinking in React](/docs/thinking-in-react.html) as the moment React finally "clicked" for them. It's probably the oldest React walkthrough but it's still just as relevant. +Багатьом React-користувачів допомогло розкласти все по місцям прочитання розділу [Філософія React](/docs/thinking-in-react.html). Хоч це є найстаріший гід по React, але він актуальний досі. -### Recommended Courses {#recommended-courses} +### Рекомендовані курси {#recommended-courses} -Sometimes people find third-party books and video courses more helpful than the official documentation. We maintain [a list of commonly recommended resources](/community/courses.html), some of which are free. +Інколи люди віддають перевагу книжкам та відеоматеріалам від сторонніх авторів, ніж документації. Для них ми зібрали та оновлюємо [список рекомендованих матеріалів](/community/courses.html). Деякі із них є безплатними. -### Advanced Concepts {#advanced-concepts} +### Поглиблене вивчення React {#advanced-concepts} -Once you're comfortable with the [main concepts](#main-concepts) and played with React a little bit, you might be interested in more advanced topics. This section will introduce you to the powerful, but less commonly used React features like [context](/docs/context.html) and [refs](/docs/refs-and-the-dom.html). +Як тільки ви вивчите [головні концепти React](#main-concepts) і трохи пограєтесь з ним, вам стануть цікавими більш поглиблені теми. Даний розділ познайомить вас з потужним, але менш вживаними можливостями React як [контекст](/docs/context.html) та [рефи](/docs/refs-and-the-dom.html). -### API Reference {#api-reference} +### Довідник по API {#api-reference} -This documentation section is useful when you want to learn more details about a particular React API. For example, [`React.Component` API reference](/docs/react-component.html) can provide you with details on how `setState()` works, and what different lifecycle methods are useful for. +Цей розділ корисний, коли ви хочете вивчити більше нюансів використання React API. Наприклад, [довідник про `React.Component` API](/docs/react-component.html) розповість вам про тонкощі роботи `setState()` та різні методи життєвого циклу. -### Glossary and FAQ {#glossary-and-faq} +### Словник термінів і FAQ {#glossary-and-faq} -The [glossary](/docs/glossary.html) contains an overview of the most common terms you'll see in the React documentation. There is also a FAQ section dedicated to short questions and answers about common topics, including [making AJAX requests](/docs/faq-ajax.html), [component state](/docs/faq-state.html), and [file structure](/docs/faq-structure.html). +[Словник термінів](/docs/glossary.html) містить перелік термінів, які ви будете бачити в документації React. Також там є розділ FAQ в якому є питання та відповіді щодо про загальні теми як [створення AJAX запитів](/docs/faq-ajax.html), [стан компонента](/docs/faq-state.html) і [структура директорій](/docs/faq-structure.html). -## Staying Informed {#staying-informed} +## Залишаємось проінформованими {#staying-informed} -The [React blog](/blog/) is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted there first. +Офіційним джерелом оновлень від команди розробників React є [блог](/blog/). Важливі новини, такі як описи нововведень релізів або замітки по методам, які більше не будуть підтримуватися, публікуються в першу чергу саме тут. -You can also follow the [@reactjs account](https://twitter.com/reactjs) on Twitter, but you won't miss anything essential if you only read the blog. +Ви також можете підписатися на профіль [@reactjs](https://twitter.com/reactjs) в Twitter. Але ви не пропустите нічого особливого, якщо ви тільки стежите за нашим блогом. -Not every React release deserves its own blog post, but you can find a detailed changelog for every release [in the `CHANGELOG.md` file in the React repository](https://github.com/facebook/react/blob/master/CHANGELOG.md), as well as on the [Releases](https://github.com/facebook/react) page. +В блозі ми не пишемо про майже всі зміни в нових версіях React, але ви можете знайти детальний список змін для кожного релізу [в файлі `CHANGELOG.md` в офіційному репозиторії React](https://github.com/facebook/react/blob/master/CHANGELOG.md), а також на сторінці [Релізи](https://github.com/facebook/react). -## Versioned Documentation {#versioned-documentation} +## Документація по старим версіям React {#versioned-documentation} -This documentation always reflects the latest stable version of React. Since React 16, you can find older versions of the documentation [on a separate page](/versions). Note that documentation for past versions is snapshotted at the time of the release, and isn't being continuously updated. +Ця документація завжди відображає останню стабільну версію React. Починаючи з версії 16 React, ви знайдете версії документації по старим версіям React [на окремій сторінці](/versions). Врахуйте те, що копії документації створюются в момент релізу і більше ніколи не оновлюється. -## Something Missing? {#something-missing} +## Зворотній зв'язок {#something-missing} -If something is missing in the documentation or if you found some part confusing, please [file an issue for the documentation repository](https://github.com/reactjs/reactjs.org/issues/new) with your suggestions for improvement, or tweet at the [@reactjs account](https://twitter.com/reactjs). We love hearing from you! +Якщо чогось не вистачає в документації, або якщо ви вважаєте певні частини даної документації не точними, будь ласка, [створіть ішью в репозиторії документації](https://github.com/reactjs/reactjs.org/issues/new) з вашими пропозиціями щодо покращення або щебетніть нам в наш Twitter-профіль [@reactjs](https://twitter.com/reactjs). Ми завжди раді чути вас!