Я працюю з 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()компонент повторно відображається, і це призведе до нескінченного циклу.

Окрім того 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.

Код такий, і я сподіваюся, що ви вже знаєте, як це зробити на нашому дитячому майданчику.

Нижче наведено кілька основних моментів щодо вищевказаного коду.

1. JSX використовує, camelCasingотже button, атрибут onClick, а не onclick, як ми використовуємо в HTML.
2. Прив’язка необхідна для thisроботи із зворотними викликами. Див. Рядки 8 та 9 у коді вище.

Остаточний інтерактивний код знаходиться тут.

З цим ми дійшли до висновку нашого курсу аварійного реагування React. Я сподіваюся, що я пролив трохи світла на те, як працює React і як ви можете використовувати React для створення більших додатків, використовуючи менші та багаторазові компоненти.

Якщо у вас є якісь запитання чи сумніви, напишіть мені на Twitter @ rajat1saxena або напишіть мені на [email protected]

Будь ласка, порекомендуйте цю публікацію, якщо вона вам сподобалась, і поділіться нею зі своєю мережею. Слідуйте за мною, щоб отримувати більше публікацій, пов’язаних із технологіями, і розгляньте можливість підписки на мій канал Rayn Studios на YouTube. Дуже дякую.