Плутанина в назвах: React та React Native
У світі існує безліч речей, і ми, люди, часто їх плутаємо. Ця плутанина може виникати з різних причин, але найчастіше вона пов’язана зі схожістю назв.
Зазвичай, коли ми стикаємося з чимось новим, перше, що ми дізнаємося, це назва. Це може бути ім’я людини, тварини, назва продукту, програми тощо. Саме за назвою ми шукаємо інформацію про об’єкт, а потім вже дізнаємося про його функції, призначення, історію та інші характеристики.
Але чому це так важливо?
Справа в тому, що люди дуже часто плутають поняття (і, відповідно, назви) React та React Native. Непідковані в технічних питаннях особи, побачивши ці дві назви, найімовірніше, припустять, що React Native є якимось розширенням React. Навіть деякі технічні фахівці, не знайомі з цими технологіями, можуть мати таку ж думку.
Так що ж це насправді? Чому саме ці дві назви так часто плутають між собою?
React та React Native – це дві окремі програмні структури, або, як їх ще називають, фреймворки. Їх назви дуже схожі, відрізняючись лише одним додатковим словом. Саме ця схожість у назвах і є головною причиною плутанини. Якщо ви також заплуталися, ви потрапили за адресою. Зараз ми розберемося в чому різниця.
Отже, почнемо.
React
React – це JavaScript-бібліотека, призначена для створення односторінкових веб-застосунків. Це один з найпопулярніших інструментів для розробки користувацьких інтерфейсів (frontend) для веб-сайтів. Можна навіть сказати, що на сьогоднішній день це найпопулярніша бібліотека такого типу. Її розроблено та підтримується компанією Facebook, і її часто називають ReactJS.
Маючи досвід роботи з React, можу сказати, що ця бібліотека є зручною та простою у вивченні і використанні. Оскільки це саме бібліотека, а не фреймворк, то вона не накладає строгих обмежень і дає розробникам свободу у виборі методів розробки. Ми можемо будувати все, що завгодно і як завгодно, використовуючи її можливості.
React має ряд цікавих функцій, давайте поглянемо на деякі з них:
#1. Компоненти
У React все складається з компонентів. Компонент – це своєрідний “будівельний блок” веб-застосунку. Ми можемо створювати великі компоненти, об’єднуючи маленькі. Кожен компонент має власний стан і керування. Компоненти відповідають за відображення інтерфейсу користувача, вирішуючи, що саме показувати користувачам в залежності від свого стану.
Компоненти – це основа React. Вони призначені для багаторазового використання: один раз створив і використовуєш всюди.
Нам потрібно підходити до створення компонентів з особливою увагою, так як це значно спрощує обслуговування програми в майбутньому. Якщо розмістити весь код в одному компоненті, з часом буде дуже складно його підтримувати. Компоненти React повинні бути невеликими і чіткими. В залежності від якості їх виконання, вони можуть зробити життя розробника як раєм, так і пеклом.
#2. Віртуальний DOM
Напевно, ви бачили щось на кшталт індикатора завантаження всередині кнопки. Або в соціальних мережах кількість лайків збільшується відразу після натискання. На початку розвитку інтернету нам потрібно було повністю перезавантажувати сторінку для отримання оновленої інформації. Зараз же, оновлюється лише необхідна частина, не зачіпаючи інші елементи. Як це працює?
Як ми вже говорили, в React все є компонентом. Браузери використовують структуру DOM для представлення елементів веб-сторінки. Коли частина веб-сторінки потребує оновлення, ми маємо оновити її через маніпуляції з DOM. React робить це ефективно.
React створює віртуальний DOM (копію DOM) для всіх своїх компонентів. Для оновлення частини веб-застосунку React порівнює реальний DOM з віртуальним. Якщо виявляються зміни, то React запускає оновлення відповідного компонента.
#3. Односпрямований потік даних
Ми не можемо розділити великий набір компонентів на менші без організації потоку даних між ними. Повинен бути спосіб передачі даних між компонентами.
React дозволяє передавати дані від одного компонента до іншого тільки в одному напрямку. Дані передаються від батьківських компонентів до дочірніх. При цьому, дочірні компоненти не можуть оновлювати ці дані. Неможливо надіслати дані до батьківського компонента, так як потік даних є односпрямованим.
На перший погляд це може здатися обмеженням. Але, саме односпрямований потік даних дає нам більше контролю в порівнянні з багатоспрямованим.
Загальний висновок
Є ще багато інших можливостей, таких як JSX, умовний рендеринг і т.д., але вони є вторинними. Ми розглянули основні функції бібліотеки React. За допомогою React можна розробляти практично будь-які типи веб-застосунків. Спільнота React є дуже великою, і ви завжди можете знайти велику кількість готових пакетів для вирішення різних завдань.
React Native
React Native – це платформа JavaScript, призначена для розробки кросплатформенних мобільних додатків. Так само як і React, вона розроблена та підтримується Facebook.
Більшість з вас будуть здивовані попереднім твердженням.
Невже можна створювати мобільні додатки для Android та iOS, використовуючи єдиний фреймворк?
Якщо ви не слідкуєте за останніми тенденціями у світі технологій, то ви, можливо, не знаєте про цю можливість. Так, за допомогою React Native можна створювати кросплатформенні додатки (для Android та iOS). Крім React Native існують й інші фреймворки для кросплатформної розробки.
React Native є одним з найпопулярніших серед них. Він не є “найпопулярнішим” через деякі обмеження JavaScript у нативних додатках, але він досяг значних успіхів у цій області. Навіть великі компанії, такі як Facebook, Instagram, Flipkart та інші, використовують його в своїй роботі. Це не означає, що ви повинні його використовувати, але це підтверджує, що за допомогою React Native можливо створювати повноцінні кросплатформенні додатки.
У попередньому абзаці я згадав поняття “нативний додаток”. Що це таке? Це не якийсь новий тип додатків. Нативний додаток спеціально розроблений для конкретної платформи. Наприклад, програми для Android створені для мобільних телефонів Android, програми для iOS – для iPhone, програми для Windows – для Windows тощо.
То що ж означає “Native” у React Native? Виходячи з нашого бажання, React Native створює нативний додаток, який підходить як для Android, так і для iOS. Додатки, розроблені за допомогою React Native, є нативними, як і додатки, створені в Android Studio для Android та Xcode для iOS.
Можливо, саме тому розробники назвали його React Native. Але це не точно.
Щодо функціональних можливостей React Native, їх достатньо. Давайте розглянемо деякі з них:
#1. Кросплатформенність
Ми можемо створювати мобільні додатки одночасно для Android та iOS з однієї кодової бази. Це заощаджує багато часу та грошей для компаній.
#2. Гаряче або живе перезавантаження
Якщо ви маєте досвід роботи з React або React Native, то вам це знайомо. Ця функція перезавантажує додаток з новими оновленнями, як тільки ми змінюємо код. Нам не потрібно натискати кнопку перезавантаження кожен раз, коли ми вносимо зміни. Змінив код – одразу побачив результат. Все просто і швидко. Не потрібно чекати, якщо немає помилок.
Це може здатися несуттєвою функцією, але якщо ви починали розробку Android без використання фреймворків, то ви точно оціните цю можливість React Native.
#3. Бібліотеки та спільнота UI
В React Native є велика кількість вбудованих нативних компонентів. Ми можемо використовувати їх без додаткового налаштування або установки. Нативні компоненти виглядають нативно на відповідних платформах. Користувацький інтерфейс додатків React Native відповідає рідному інтерфейсу користувача IOS, а також рідному інтерфейсу Android. React Native має компоненти, подібні до React.
Коли справа доходить до спільноти, вона велика і постійно зростає. Ви завжди можете отримати допомогу від спільноти, якщо у вас виникнуть складнощі.
Загальний висновок
В Інтернеті ви можете знайти багато інших функцій React Native. Обов’язково ознайомтеся з ними, якщо збираєтеся займатися розробкою мобільних додатків. Фронтенд-розробники також можуть створювати нативні додатки за допомогою React Native. Це значно спрощує розробку кросплатформних мобільних додатків.
React проти React Native
Між React та React Native є певні подібності та відмінності. Давайте їх розглянемо.
З точки зору кінцевого продукту, програми, розроблені на React та React Native, абсолютно різні. Але якщо говорити про принципи розробки, то вони дуже схожі. І React, і React Native використовують компоненти, і дотримуються однакових принципів в розробці відповідних додатків.
Обидва вони використовують JavaScript. Погляньмо на приклад простої програми “Hello, World” для обох платформ:
React:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="container">
<h1>Hello, Wolrd!</h1>
</div>
);
}
}
export default App;
React Native:
import React from 'react';
import { Text, View } from 'react-native';
const App = () => {
return (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center"
}}>
<Text>Hello, world!</Text>
</View>
)
}
export default App;
Як бачимо, обидва приклади використовують пакет React. Синтаксис також схожий, оскільки вони використовують спеціальну розмітку JSX. Але відмінності проявляються, коли справа доходить до рендерингу. React використовує Virtual DOM, а React Native використовує Native API для відображення інтерфейсу.
Існують деякі зовнішні пакети, такі як Redux, MobX, які використовуються для управління станом додатків React. Ці ж пакети можна використовувати і в додатках React Native.
React та React Native використовують JavaScript, тому майже кожен JavaScript-пакет можна використовувати з обома платформами. Це значно розширює можливості їх використання.
React та React Native є взаємопов’язаними, але вони призначені для різних цілей.
Висновок
React та React Native відрізняються за кінцевим продуктом і платформами додатків, але вони дотримуються схожих принципів в розробці. Якщо ви навчитесь працювати з однією з цих платформ, то ви зможете швидше опанувати і другу. Однак, знання React є важливим для розробки додатків React Native. Але цього не достатньо, так як для цього потрібно більше знань про розробку нативних програм, а підтримка React Native є обмеженою.
Будемо сподіватися, що з часом ця підтримка буде вдосконалюватися.
Якщо ви збираєтесь розпочати розробку веб-додатків або мобільних додатків, вибір React або React Native однозначно стане вам у пригоді. Але це не обов’язково.
Вивчення концепцій React буде легким, якщо ви знаєте JavaScript. Офіційна документація стане для вас чудовим ресурсом для початку роботи з React або React Native.
Приємно знати 🙂