Основы React¶

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

Мы рассмотрим основные концепции, лежащие в основе React:

• компоненты
• JSX
• пропсы
• состояние

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

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

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

Вот как это делается: Чтобы определить свой компонент Cat, сначала используйте JavaScript import для импорта React и React Native Text Core Component:

1
2

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

Ваш компонент начинается как функция:

1

const Cat = () => {};

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

Здесь компонент Cat отображает элемент <Text>:

1
2
3

const Cat = () => {
    return <Text>Здравствуйте, я ваш кот!</Text>;
};

Вы можете экспортировать свой компонент функции с помощью JavaScript export default для использования в вашем приложении следующим образом:

1
2
3
4
5

const Cat = () => {
    return <Text>Здравствуйте, я ваш кот!</Text>;
};

export default Cat;

Теперь посмотрите внимательнее на оператор 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!

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

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

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

Примечания разработчика¶

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

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

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

Пропсы¶

Пропсы — это сокращение от "свойства". Пропсы позволяют вам настраивать компоненты React. Например, здесь вы передаете каждому <Cat> разное имя для рендеринга Cat:

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

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

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

Состояние¶

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

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

Вы можете добавить состояние в компонент, вызвав React's useState Hook. Хук — это своего рода функция, которая позволяет вам "подключаться" к функциям React. Например, useState — это хук, позволяющий добавлять состояние в компоненты функций. Вы можете узнать больше о других видах хуков в документации по React.

Во-первых, вы должны импортировать useState из React следующим образом:

1

import React, { useState } from 'react';

Затем вы объявляете состояние компонента, вызывая useState внутри его функции. В этом примере useState создает переменную состояния isHungry:

1
2
3
4

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

Вызов useState делает две вещи:

• создает "переменную состояния" с начальным значением — в данном случае переменная состояния — isHungry и ее начальное значение — true
• она создает функцию для установки значения этой переменной состояния — setIsHungry.

Неважно, какие имена вы используете. Но может быть удобно представить паттерн как [<getter>, <setter>] = useState(<initialValue>).

Далее вы добавляете основной компонент Button и задаете ему свойство onPress:

1
2
3
4
5
6

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

Теперь, когда кто-то нажимает на кнопку, срабатывает onPress, вызывая setIsHungry(false). Это установит переменную состояния isHungry в значение false. Когда isHungry равно false, параметр disabled кнопки Button устанавливается в true и ее title также изменяется:

1
2
3
4
5
6
7
8
9

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

Наконец, поместите ваших кошек внутрь компонента Cafe:

1
2
3
4
5
6
7
8

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

Теперь, когда вы рассмотрели основные компоненты React и React Native, давайте углубимся в некоторые из этих основных компонентов, рассмотрев handling <TextInput>.

Комментарии