Фундаментальні концепції React в React Native

Базові концепції:

• Компонент

• JSX

• Пропс (props)

• Стейт (state)

Компонент

Логіка побудови верстки застосунку - використання компонентів. Окрім базових компонентів користувачі можуть створювати власні компоненти для повторного використання у своєму застосунку.

Компоненти бувають класові та функціональні. Далі розглянемо створення власного компоненту (класового і функціонального).

Класові компоненти

Згори класового компонента роблять всі необхідні імпорти. Зокрема імпортують Component із бібліотеки React і базові компоненти з бібліотеки React Native, а також інші імпорти, необхідні для функціонування компонента. Оголошується класовий компонент так само як і в React: class ComponentName extends Component. Функція render() {} слугує для повернення верстки компонента. Ну і звичайно свій компонент можна експортувати для використання в інших компонентах. Використовуйте як іменований, так і дефолтний експорт.

Резервний код

App.js

import React, { Component } from "react";
import { Text } from "react-native";

class App extends Component {
  render() {
    return <Text>I am your first App!</Text>;
  }
}

export default App;

Функціональні компоненти

Згори функціонального компонента роблять імпорти, зокрема всіх вживаних нижче базових компонентів. Створити компонент можна використовуючи класичний синтаксис, так і стрілковий. Використовуйте експорти.

Резервний код

App.js

import React from "react";
import { Text } from "react-native";

const App = () => {
  return <Text>I am your first App!</Text>;
};

export default App;

JSX

Вся логіка використання JSX зберігається і в React Native. Не забувайте правильно закривати компонент: <Text>Hello, I am your friend! </Text>.

Щоб застосувати JavaScript в JSX його пишуть всередині фігурних дужок:

Резервний код

App.js

import React from "react";
import { Text } from "react-native";

const getFullName = (firstName, secondName) => {
  return firstName + " " + secondName;
};

const App = () => {
  return <Text>Hello, I am {getFullName("Oleksandr", "Khomiak")}!</Text>;
};

export default App;

Кастомні компоненти

Кастомні компоненти збираються із базових компонентів. Потім їх можна імпортувати з зовнішнього файлу і використовувати у верстці. Так само можуть бути як класові так і функціональні компоненти. Нижче в прикладах якраз <Friend /> є кастомним компонентом, який отримує як налаштування значення свого тексту.

Пропс (props)

Props - налаштування компонента, які дозволяють його кастомізувати. Можна компоненту передавати свої пропси.

Резервний код

import React from "react";
import { Text, View } from "react-native";

const Friend = (props) => {
  return (
    <View>
      <Text>{props.name}!</Text>
    </View>
  );
};

const App = () => {
  return (
    <View>
      <Text>My friends:</Text>
      <Friend name="Alex" />
      <Friend name="Max" />
      <Friend name="John" />
    </View>
  );
};

export default App;

Для налаштування компонента передбачені нативні пропси компонентів, наприклад для Image - посилання на картинку, або стилізація компонента тощо. Повний перелік пропсів для кожного компонента можна отримати на офіційній сторінці React Native.

Резервний код

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

const App = () => {
  return (
    <View>
      <Image
        source={{
          uri: "https://reactnative.dev/docs/assets/p_cat1.png",
        }}
        style={{ width: 200, height: 200 }}
      />
      <Text>Hello, I am your cat!</Text>
    </View>
  );
};

export default App;

Зауважте, що в фігурних дужках вказані ще одні фігурні дужки, тому, що цей пропс приймає обʼєкт. А передавати туди можна число, змінну, рядок, масив тощо.

Стейт (state)

Компоненти перерендерюються також коли змінюється стейт. Концепції стейту для React Native зберігаються такі ж як і для React.

Стейт класового компонента

В класових компонентах стейт зберігається в обʼєкті state. У ньому за кожне значення відповідає параметр, а його значення після двох крапок. Щоб звертатися до стейту не забуваємо використовувати контекст: this.state. Так само при перезаписі стейту не забуваємо контекст this.setState. Так само при перезаписі значення стейту просто вказуємо нове значення. Якщо його потрібно змінити, то використовуємо prevState.

Резервний код

import React, { Component } from "react";
import { Button, Text, View, StyleSheet } from "react-native";

class Dog extends Component {
  state = { isHungry: true };

  render() {
    return (
      <View>
        <Text>
          I am {this.props.name}, and I am
          {this.state.isHungry ? " hungry" : " full"}!
        </Text>
        <Button
          onPress={() => {
            this.setState({ isHungry: false });
          }}
          disabled={!this.state.isHungry}
          title={this.state.isHungry ? "Give me a bone, please!" : "Thank you!"}
        />
      </View>
    );
  }
}

class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Dog name="Sharik" />
        <Dog name="Tuzyk" />
      </View>
    );
  }
}

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Стейт функціонального компонента

Для використання стейту в функціональних компонентах використовуємо хук useState. В такому разі не використовуємо контекст. Правила зміни стейту зберігаються такі самі як і для React.

Резервний код

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

const Dog = (props) => {
  const [isHungry, setIsHungry] = useState(true);

  return (
    <View>
      <Text>
        I am {props.name}, and I am {isHungry ? "hungry" : "full"}!
      </Text>
      <Button
        onPress={() => {
          setIsHungry(false);
        }}
        disabled={!isHungry}
        title={isHungry ? "Give me a bone, please!" : "Thank you!"}
      />
    </View>
  );
};

const App = () => {
  return (
    <View style={styles.container}>
      <Dog name="Sharyk" />
      <Dog name="Tuzyk" />
    </View>
  );
};

export default App;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

Посилання на офіційну документацію:

База React