Що таке React Native? Детальний огляд

🔹 Що таке React Native?

React Native — це фреймворк для створення мобільних застосунків на iOS та Android за допомогою JavaScript та React. Він дозволяє писати код один раз і запускати його на обох платформах, що значно економить час і ресурси розробки.

React Native використовує React (бібліотеку для веб-інтерфейсів), але замість HTML і CSS рендерить нативні компоненти операційної системи (iOS/Android). Це дозволяє створювати швидкі та зручні мобільні застосунки з виглядом та поведінкою, максимально наближеною до рідних.

🔹 Головні особливості React Native

✅ Кросплатформність

Один код працює на iOS і Android.
Зменшує витрати часу та коштів на розробку.
Можливість додавати нативний код (Java/Kotlin/Swift) при необхідності.

✅ Компонентний підхід

Використовує React-компоненти, які легко пере використовувати.
Окремі компоненти можна оновлювати без перезапуску застосунку.

✅ Висока продуктивність

React Native не використовує WebView (як гібридні фреймворки типу Cordova).
Взаємодіє з рідними модулями через міст (bridge), що дозволяє досягати швидкодії, близької до нативних застосунків.

✅ Гаряче оновлення (Hot Reloading)

Hot Reloading дозволяє бачити зміни у коді миттєво без перевстановлення застосунку.

✅ Масштабованість

Використовується у великих компаніях, таких як Facebook, Instagram, Tesla, Uber, Discord.
Підтримує модульну архітектуру для великих проєктів.

🔹 Як працює React Native?

React Native рендерить нативні компоненти, а не веб-сторінку.
📌 Приклад:

Якщо ви використовуєте <Text> у React Native, він рендериться у TextView (Android) або UILabel (iOS).
Якщо ви використовуєте <Button>, він стає нативним кнопковим елементом платформи.

📌 Архітектура React Native

React Native складається з:

JavaScript-коду (React-компоненти, логіка).
JS Bridge (міст між JS і нативним кодом).
Нативних компонентів (UIKit на iOS, Views на Android).

🔹 Основи роботи з React Native

📌 Встановлення React Native

Перед початком роботи встановлюємо Node.js та React Native CLI:

npm install -g react-native-cli

Створюємо новий проєкт:

npx react-native init MyApp
cd MyApp

Запускаємо застосунок:

npx react-native run-android  # для Android
npx react-native run-ios      # для iOS

📌 Приклад простого застосунку

import React from 'react';
import { View, Text, Button, Alert } from 'react-native';

const App = () => {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Привіт, React Native!</Text>
      <Button title="Натисни мене" onPress={() => Alert.alert('Привіт!')} />
    </View>
  );
};

export default App;

📌 Що тут відбувається?

Використовуємо React-компоненти (View, Text, Button).
Встановлюємо обробник подій (onPress).
Відображаємо нативні UI-елементи (Alert показує повідомлення).

📌 Компоненти в React Native

React Native не використовує стандартні HTML-елементи (div, span). Натомість у ньому є власні нативні компоненти:

React Native	Android	iOS
`<View>`	`<ViewGroup>`	`<UIView>`
`<Text>`	`<TextView>`	`<UILabel>`
`<Button>`	`<Button>`	`<UIButton>`
`<Image>`	`<ImageView>`	`<UIImageView>`

📌 Приклад використання компонентів:

import React from 'react';
import { View, Text, Image, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Привіт, React Native!</Text>
      <Image source={{ uri: 'https://example.com/image.jpg' }} style={styles.image} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  title: { fontSize: 24, fontWeight: 'bold' },
  image: { width: 100, height: 100 },
});

export default App;

🔹 Стан та керування даними

У React Native можна керувати станом за допомогою useState, useEffect, Redux.

📌 Приклад використання useState:

import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';

const Counter = () => {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Лічильник: {count}</Text>
      <Button title="Додати" onPress={() => setCount(count + 1)} />
    </View>
  );
};

export default Counter;

🔹 Підключення до API

📌 Приклад отримання даних з API:

import React, { useEffect, useState } from 'react';
import { View, Text, ActivityIndicator } from 'react-native';

const App = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then((response) => response.json())
      .then((json) => setData(json));
  }, []);

  return (
    <View>
      {data ? <Text>{data.title}</Text> : <ActivityIndicator />}
    </View>
  );
};

export default App;

🔹 Переваги React Native

✅ Один код для iOS та Android
✅ Гнучкість завдяки компонентному підходу
✅ Швидка розробка (Hot Reload)
✅ Велика спільнота та підтримка Facebook
✅ Легка інтеграція з нативним кодом (Swift, Kotlin, Java)
✅ Висока продуктивність у порівнянні з гібридними фреймворками (Cordova, Ionic)

🔹 Недоліки React Native

❌ Не всі нативні функції доступні з коробки (іноді потрібно писати Java/Kotlin/Swift-код).
❌ Важчий дебагінг через міст між JS і нативним кодом.
❌ Великі розміри застосунку (більші за нативні iOS/Android-апки).
❌ Іноді продуктивність гірша, ніж у чистих Swift/Kotlin застосунках.

🔹 Для кого підходить React Native?

✅ Для стартапів та MVP – швидко можна розробити застосунок для обох платформ.
✅ Для компаній, які хочуть підтримувати один код на iOS та Android.
✅ Для розробників, які знають React – легше вивчити React Native.

🔹 Висновок

React Native – це потужний фреймворк для мобільної розробки, який дозволяє створювати кросплатформні застосунки швидко та ефективно. Він дає гнучкість, продуктивність та велику підтримку, що робить його чудовим вибором для сучасної мобільної розробки. 🚀