Основы React

React Native работает на React, популярной библиотеке с открытым исходным кодом для создания пользовательских интерфейсов с использованием JavaScript. Для максимального использования React Native полезно понимать сам React. Этот раздел поможет вам начать работу или послужит курсом для освежения знаний.

Мы рассмотрим основные понятия React:

• компоненты
• JSX
• свойства (props)
• состояние (state)

Если вы хотите углубиться в изучение, рекомендуем ознакомиться с официальной документацией React.

Ваш первый компонент

В остальной части этого введения в React в примерах используются кошки: дружелюбные, доступные существа, которым нужны имена и кафе, где они могут работать. Вот ваш первый компонент «Кошка»:

• Функциональный компонент
• Компонент класса

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

const Cat = () => {};

const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};

const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};

export default Cat;

import React, { Component } from 'react';

class Cat extends Component {}

class Cat extends Component {
  render() {
    return <Text>Hello, I am your cat!</Text>;
  }
}

class Cat extends Component {
  render() {
    return <Text>Hello, I am your cat!</Text>;
  }
}

export default Cat;

Это один из многих способов экспорта вашего компонента. Такой способ экспорта хорошо работает с Snack Player. Однако в зависимости от структуры файлов вашего приложения вам может потребоваться использовать другую конвенцию. Эта полезная шпаргалка по импорту и экспорту JavaScript может помочь.

Теперь более подробно рассмотрим оператор return. <Text>Hello, I am your cat!</Text> использует вид синтаксиса JavaScript, который делает написание элементов удобным: JSX.

JSX

React и React Native используют JSX, синтаксис, который позволяет писать элементы внутри JavaScript, например: <Text>Hello, I am your cat!</Text>. Документация React содержит полное руководство по JSX, которое вы можете использовать для получения дополнительной информации. Поскольку JSX является JavaScript, вы можете использовать переменные внутри него. Здесь вы объявляете имя для кошки, name, и встраиваете его с помощью фигурных скобок в <Text>.

Любой JavaScript-выражение будет работать между фигурными скобками, включая вызовы функций, такие как {getFullName("Rum", "Tum", "Tugger")}:

Вы можете рассматривать фигурные скобки как создание портала в функциональность JS в вашем JSX!

Поскольку JSX включён в библиотеку React, он не будет работать, если у вас нет import React from 'react' в верхней части файла!

Пользовательские компоненты

Вы уже познакомились с базовыми компонентами React Native. React позволяет вкладывать эти компоненты друг в друга, чтобы создавать новые компоненты. Эти вложенные, многоразовые компоненты лежат в основе парадигмы React.

Например, вы можете вложить Text и TextInput в View ниже, и React Native отобразит их вместе:

Примечания для разработчиков

• Android
• Веб

Вы можете отображать этот компонент несколько раз и в разных местах, не дублируя код, используя <Cat>:

Любой компонент, который отображает другие компоненты, является родительским компонентом. Здесь Cafe является родительским компонентом, а каждый Cat является дочерним компонентом.

Вы можете разместить в кафе столько кошек, сколько захотите. Каждый <Cat> отображает уникальный элемент, который можно настроить с помощью свойств (props).

Свойства (Props)

Свойства (Props) — это «свойства». Свойства позволяют настраивать компоненты React. Например, здесь вы передаёте каждой <Cat> разное name для отображения Cat:

Большинство базовых компонентов React Native также можно настраивать с помощью свойств (props). Например, при использовании Image, вы передаёте ему свойство, называемое source, чтобы определить, какое изображение он отображает:

Image имеет множество различных свойств (props), включая style, которое принимает JS-объект пар «свойство-значение», связанных с дизайном и макетом.

Обратите внимание на двойные фигурные скобки {{ }} вокруг ширины и высоты style. В JSX JavaScript-значения ссылаются с помощью {}. Это удобно, если вы передаёте что-то, отличное от строки, как свойства, например, массив или число: <Cat food={["fish", "kibble"]} age={2} />. Однако JS-объекты также обозначаются фигурными скобками: {width: 200, height: 200}. Поэтому, чтобы передать JS-объект в JSX, вы должны обернуть объект в ещё одну пару фигурных скобок: {{width: 200, height: 200}}

Вы можете создать многое с помощью свойств (props) и базовых компонентов Text, Image и View! Но чтобы создать что-то интерактивное, вам понадобится состояние (state).

Состояние (State)

В то время как свойства (props) можно рассматривать как аргументы, используемые для настройки того, как компоненты отображаются, состояние (state) — это как личное хранилище данных компонента. Состояние полезно для обработки данных, которые изменяются со временем или поступают от взаимодействия пользователя. Состояние даёт компонентам память!

Как общее правило, используйте свойства (props) для настройки компонента при его отображении. Используйте состояние (state), чтобы отслеживать любые данные компонента, которые, по вашему ожиданию, изменятся со временем.

Следующий пример происходит в кошачьей кафе, где две голодные кошки ждут, чтобы их покормили. Их голод, который, по нашим ожиданиям, будет меняться со временем (в отличие от их имён), хранится в состоянии. Чтобы накормить кошек, нажмите на их кнопки — это обновит их состояние.

• Функциональный компонент
• Компонент класса

import React, { useState } from 'react';

const Cat = (props) => {
  const [isHungry, setIsHungry] = useState(true);
  // ...
};

<Button
  onPress={() => {
    setIsHungry(false);
  }}
  //..
/>

<Button
  //..
  disabled={!isHungry}
  title={isHungry ? 'Pour me some milk, please!' : 'Thank you!'}
/>

const Cafe = () => {
  return (
    <>
      <Cat name="Munkustrap" />
      <Cat name="Spot" />
    </>
  );
};

import React, { Component } from 'react';

export class Cat extends Component {
  state = { isHungry: true };
  //..
}

<Text>
  I am {this.props.name}, and I am
  {this.state.isHungry ? ' hungry' : ' full'}!
</Text>

<Button
  onPress={() => {
    this.setState({ isHungry: false });
  }}
  // ..
/>

<Button
  // ..
  disabled={!this.state.isHungry}
  title={
    this.state.isHungry
      ? 'Pour me some milk, please!'
      : 'Thank you!'
  }
/>

class Cafe extends Component {
  render() {
    return (
      <>
        <Cat name="Munkustrap" />
        <Cat name="Spot" />
      </>
    );
  }
}

export default Cafe;