
Я працюю з React та React-Native останні пару місяців. Я вже випустив два додатки у виробництві, Kiven Aa (React) та Pollen Chat (React Native). Коли я почав вивчати React, я шукав щось (блог, відео, курс, що завгодно), що не лише навчило мене писати програми в React. Я також хотів, щоб це підготувало мене до співбесід.
Більшість матеріалів, які я знайшов, зосереджені на тому чи іншому. Отже, ця публікація спрямована на аудиторію, яка шукає ідеальне поєднання теорії та практичного досвіду. Я дам вам трохи теорії, щоб ви зрозуміли, що відбувається під капотом, а потім я покажу вам, як писати код React.js.
Якщо ви віддаєте перевагу відео, у мене також є весь цей курс на YouTube. Будь ласка, перевірте це.
Зануримось…
React.js - це бібліотека JavaScript для побудови користувальницьких інтерфейсів
Ви можете створювати всілякі односторінкові програми. Наприклад, месенджери чату та портали електронної комерції, де ви хочете відображати зміни в інтерфейсі користувача в режимі реального часу.
Все - компонент
Реактив додаток складається з компонентів, багато з них , вкладених один в одного. “Але що таке компоненти?”, Можете запитати ви.
Компонент - це шматок коду, який багаторазово використовується, який визначає, як певні функції повинні виглядати та поводитися в інтерфейсі. Наприклад, кнопка - це компонент.
Давайте подивимось на наступний калькулятор, який ви бачите в Google при спробі обчислити щось на зразок 2 + 2 = 4 –1 = 3 (швидка математика!)

Як ви можете бачити на зображенні вище, калькулятор має багато областей - наприклад, вікно відображення результатів та цифрову клавіатуру . Все це можуть бути окремі компоненти або один гігантський компонент. Це залежить від того, наскільки зручно розбивати і абстрагувати речі в React
Ви пишете код для всіх таких компонентів окремо. Потім об’єднайте їх під один контейнер, який, у свою чергу, є самим компонентом React. Таким чином ви можете створити компоненти, що використовуються багаторазово, і ваш остаточний додаток буде колекцією окремих компонентів, що працюють разом.
Нижче наведено один із таких способів написати калькулятор, показаний вище, у React:
Так! Це схоже на HTML-код, але це не так. Докладніше про це ми розглянемо у наступних розділах.
Налаштування нашого дитячого майданчика
Цей підручник присвячений основним елементам React. Він не спрямований переважно на React for Web або React Native (для створення мобільних додатків). Отже, ми використовуватимемо онлайн-редактор, щоб уникнути певних веб-конфігурацій або конфігурацій, навіть якщо ми дізнаємося, що React може зробити.
Я вже створив для вас середовище на codepen.io. Просто перейдіть за посиланням і прочитайте всі коментарі на вкладках HTML і JavaScript (JS).
Керування компонентами
Ми дізналися, що програма React - це сукупність різних компонентів, структурованих як вкладене дерево. Таким чином, нам потрібен якийсь механізм передачі даних від одного компонента до іншого.
Введіть “реквізит”
Ми можемо передавати довільні дані нашому компоненту за допомогою props
об’єкта. Кожен компонент у React отримує цей props
об'єкт.
Перш ніж дізнатися, як користуватися цим props
об’єктом, давайте дізнаємося про функціональні компоненти.
а) Функціональна складова
Функціональний компонент у React споживає довільні дані, які ви передаєте йому за допомогою props
об'єкта. Він повертає об'єкт, який описує, що UI React повинен відображати. Функціональні компоненти також відомі як компоненти без громадянства.
Давайте напишемо наш перший функціональний компонент:
Це все так просто. Ми просто передали props
як аргумент звичайну функцію JavaScript і повернули, ммм, ну що це було? Що {props.name}
я v> річ! Це JSX ( розширений JavaScript ). Детальніше про це ми дізнаємось у наступному розділі.
Ця наведена вище функція відобразить у браузері такий HTML:
Прочитайте розділ нижче про JSX, де я пояснив, як ми отримуємо цей HTML із нашого коду JSX.
Як ви можете використовувати цей функціональний компонент у своїй програмі React? Радий, що ви запитали! Це так просто, як наступне:
Атрибут name
у наведеному вище коді стає props.name
всередині нашого Hello
компонента. Атрибут age
стає props.age
тощо.
Запам’ятай! Ви можете вкласти один компонент React всередину інших компонентів React.
Давайте використаємо цей Hello
компонент на нашому ігровому майданчику. Замініть div
внутрішню частину на ReactDOM.render()
наш Hello
компонент, як показано нижче, і перегляньте зміни у нижньому вікні.
Але що, якщо ваш компонент має якийсь внутрішній стан? Наприклад, як наступний компонент лічильника, який має внутрішню змінну рахунку, яка змінюється при натисканні клавіш + та -.
б) Компонент на основі класу
Компонент на основі класу має додаткову властивість state
, за допомогою якої можна зберігати приватні дані компонента. Ми можемо переписати наш Hello
компонент, використовуючи позначення класу, наступним чином. Оскільки ці компоненти мають стан, вони також відомі як компоненти Stateful .
Ми розширюємо React.Component
клас бібліотеки React, щоб створювати компоненти на основі класів у React. Дізнайтеся більше про класи JavaScript тут.
render()
Метод повинен бути присутнім в своєму класі , як React шукає цей метод для того , щоб знати , що UI вона повинна надавати на екрані.
Для використання такого роду внутрішнього стану нам спочатку слід ініціалізувати state
об’єкт у конструкторі класу компонента наступним чином.
Подібним чином до props
файлу можна отримати доступ всередині нашого компоненту на основі класу за допомогою this.props
об'єкта.
Для того, щоб встановити стан, можна використовувати React.Component
«S setState()
. Приклад цього ми побачимо в останній частині цього посібника.
Порада: Ніколи не викликайте setState()
внутрішню render()
функцію, оскільки setState()
компонент повторно відображається, і це призведе до нескінченного циклу.

Original text

Окрім того state
, компонент, що базується на класі, має деякі методи життєвого циклу, як-от componentWillMount().
Ці, якими ви можете скористатися, наприклад, як ініціалізувати state
і все, але це поза сферою цієї публікації.
JSX
JSX - це коротка форма JavaScript Extended, і це спосіб писати React
компоненти. Використовуючи JSX, ви отримуєте всю потужність JavaScript усередині XML-подібних тегів.
Ви поміщаєте всередину вирази JavaScript {}
. Нижче наведено декілька прикладів JSX.
Як це працює, ви пишете JSX, щоб описати, як має виглядати ваш інтерфейс. Транспілятор типу Babel
конвертує цей код у купу React.createElement()
дзвінків. Потім бібліотека React використовує ці React.createElement()
виклики для побудови деревоподібної структури елементів DOM (у випадку React для Інтернету) або власних подань (у випадку React Native) і зберігає її в пам'яті.
Потім React обчислює, як він може ефективно імітувати це дерево в пам'яті інтерфейсу, що відображається користувачеві. Цей процес відомий як примирення. Після цього обчислення React вносить зміни до фактичного інтерфейсу користувача на екрані.

Ви можете використовувати онлайн-REPL від Babel, щоб побачити, що насправді виходить React, коли ви пишете якийсь JSX.

Оскільки JSX - це просто синтаксичний цукор над простими React.createElement()
дзвінками, React можна використовувати без JSX
Зараз у нас є всі концепції, тому ми маємо можливість створити counter
компонент, який ми бачили раніше як GIF.
Код такий, і я сподіваюся, що ви вже знаєте, як це зробити на нашому дитячому майданчику.
Нижче наведено кілька основних моментів щодо вищевказаного коду.
- JSX використовує,
camelCasing
отжеbutton
, атрибутonClick
, а неonclick
, як ми використовуємо в HTML. - Прив’язка необхідна для
this
роботи із зворотними викликами. Див. Рядки 8 та 9 у коді вище.
Остаточний інтерактивний код знаходиться тут.
З цим ми дійшли до висновку нашого курсу аварійного реагування React. Я сподіваюся, що я пролив трохи світла на те, як працює React і як ви можете використовувати React для створення більших додатків, використовуючи менші та багаторазові компоненти.
Якщо у вас є якісь запитання чи сумніви, напишіть мені на Twitter @ rajat1saxena або напишіть мені на [email protected]
Будь ласка, порекомендуйте цю публікацію, якщо вона вам сподобалась, і поділіться нею зі своєю мережею. Слідуйте за мною, щоб отримувати більше публікацій, пов’язаних із технологіями, і розгляньте можливість підписки на мій канал Rayn Studios на YouTube. Дуже дякую.