Відеокурс React Native українською мовою відеоуроки програмування
Дякуємо Іву ван Хоорну, Алексу Молдовану, Ясперу де Моору, та Данилі Возниця з CodeSandbox за їх роботу з інтеграцією у пісочниці. Дякуємо Ріку Ханлону за точкову розробку та роботу над дизайном, покращенням наших кольорів та дрібних деталей. Дякуємо Харішу Кумару та Луні Руанn за додавання нових функцій на сайт та допомогу в його підтримці. Старі документи React тепер заархівовано за адресою legacy.reactjs.org.
За допомогою function Profile() ви визначаєте функцію JavaScript з іменем Profile.
Завдяки модульній та компонентній структурі React, ви можете розділяти великі проекти на маленькі та керовані частини, що робить процес розробки простішим. Ви можете скористатися або синтаксис класичної функції або нове Синтаксис класу ES6 до визначити компонент React. У цій статті я скористаюся останньою, оскільки Babel дозволяє використовувати ECMAScript 6. Якщо ви зацікавлені в тому, як створити компонент без ES6, подивіться на сторінку Components and Props документації. Але у випадку статичних списків використання індексу теж можливе… Варто зазначити, що для атрибута key можна використовувати будь-яке унікальне значення.
- У цьому прикладі використовується XML-подібний синтаксис під назвою JSX.
- Експертом бути не обов’язково, але буде важко вивчати React і JavaScript одночасно.
- Така категоризація компонентів є корисною для розуміння потоку даних та продуктивності рендерингу.
- Кожен елемент React є об’єктом, який можна зберегти у змінній або розповсюдити у вашій програмі.
Як працює key у React: аналіз і нестандартні кейси
Тому React перетворює цей код на чистий JavaScript, який розуміє браузер. менеджер продукту Наприклад, коли ви визначаєте заголовок за допомогою JSX, React перетворює це на DOM-елемент за допомогою JavaScript. Ми наполегливо рекомендуємо призначати належні ключі при створенні динамічних списків. Якщо у вас не має відповідного ключа, вам варто розглянути можливість перебудови даних, щоб він у вас з’явився. Головною перевагою незмінності у React є те, що вона допомагає створити чисті компоненти.
Звичайні компоненти
Кожна стаття завершуватиметься списком ресурсів, що допоможуть вам глибше вивчити теми, які я розглядатиму. Сильвія Варгас переробила наші приклади, щоб вийти за рамки “foo/bar/baz” та кошенят і показати вчених, митців та міста з усього світу. Меґі Епплтон перетворила наші малюнки на чітку систему діаграм. Більшість сторінок розділу Навчання закінчуються кількома завданнями для перевірки вашого розуміння. Наприклад, ось кілька завдань зі сторінки про Умовний рендеринг. Це ті компоненти, що пропонує офіційна документація React і вони є базовими.
- Ми також хотіли б виділити Думати на React – це підручник, який зробив React “метчем” для багатьох з нас.
- Ви також можете підписатись на профіль @reactjs у Twitter, однак ви не пропустите нічого важливого, якщо будете слідкувати тільки за блогом.
- Цей список відображає історію всіх ходів і оновлюється по ходу гри.
Вивчіть лише раз — пишіть будь-де
React Native дає можливість поєднувати переваги фреймворка з власними перевагами кожної нативної платформи. Прочитайте Передача пропсів компоненту, щоб дізнатися, як передавати та читати пропси. Зверніть увагу, що кожна кнопка “запам’ятовує” свій стан count і не впливає на інші react native вакансії кнопки.
Будьте обачні
Тепер ми можемо робити такі речі, як передача результату HTTP запиту аргументом у функціональний компонент. Цей розділ документації корисний, якщо ви хочете дізнатися більше подробиць про конкретний API React. Для прикладу, React.Component API розповість про роботу функції setState() і для чого використовуються різні методи життєвого циклу компоненту. Якщо ви віддаєте перевагу навчанню через практику, почніть з нашого практичного посібника.
Наостанок давайте створимо здатність “подорожувати у часі”, щоб мати змогу повернутися до попередніх ходів у грі. Тепер нам треба виправити один очевидний дефект у нашій грі — на полі не можна поставити “O”. React DevTools дозволяють перевірити пропси і стан вашого React-компонента. Тепер, при натисканні на Square, у браузері щоразу має з’являтись повідомлення. Не видаляйте саму папку src, тільки вихідні файли, що містяться в ній. Наступним кроком ми замінимо ці файли прикладами, потрібними для проекту.