Перейти к основному содержимому

Основы React Native

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

Компоненты React Native​

Это строительные блоки библиотеки react-native, из которых мы создаём интерфейсы для приложений. Компоненты позволяют разделить UI на независимые, повторно используемые части и работать с каждой из них отдельно. Концептуально, компоненты похожи на JavaScript-функции.

Компоненты-функции​

Самый простой способ объявить компонент – это написать JavaScript-функцию:

Прежде всего, нам нужно импортировать React, чтобы иметь возможность использовать JSX, который затем будет преобразован в собственные компоненты каждой платформы. В строке 2 мы импортируем компонент Text из react-native Затем мы находим функцию App, которая является функциональным компонентом и возвращает компонент Text в качестве своего дочернего элемента. Если вам интересно, вы можете поиграть с образцом кода прямо в веб-симуляторах. Также вставьте код в файл index.js или App.js(Expo), чтобы создать настоящее приложение на локальном компьютере.

React Native поставляется с поддержкой ES2015, поэтому вы можете использовать этот материал, не беспокоясь о совместимости import, export, const и from в приведенном выше примере - все это функции ES2015. ES2015 (также известный как ES6) - это набор улучшений для JavaScript, который теперь является частью официального стандарта, но еще не поддерживается всеми браузерами, поэтому часто он еще не используется в веб-разработке.

Другая необычная вещь в этом примере кода:

<Text>Hello world!</Text>

Это JSX - синтаксис для встраивания XML в JavaScript. Многие фреймворки используют специализированный язык шаблонов, который позволяет встраивать код в язык разметки. В React все наоборот. JSX позволяет писать свой язык разметки внутри кода. Это похоже на HTML в Интернете, за исключением того, что вместо таких веб-вещей, как <div> или <h1>, вы используете компоненты React. В этом случае <Text> является основным компонентом, который отображает некоторый текст.

Почему JSX?​

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

После компиляции выражения JSX становятся обычными вызовами функций JavaScript и вычисляются в объекты JavaScript. Это означает, что вы можете использовать JSX внутри операторов if и for, присваивать его переменным, принимать его в качестве аргументов и возвращать из функций:

const getGreeting = user => {
  if (user) {
    return <Text>Привет!</Text>
  }
  return <Text>Hello</Text>
}

Подробней о JSX

Компоненты-классы​

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

EnglishMoji!

Проблемы?​

Problem

Пишите в Telegram или ВКонтакте, а также подписывайтесь на наши новости

Вопросы​

React Native использует собственные компоненты вместо веб-компонентов React в качестве строительных блоков?

  1. true
  2. false

Компоненты React Native это строительные блоки библиотеки:

  1. react
  2. react-native

Концептуально, компоненты похожи на JavaScript-функции?

  1. true
  2. false

Чтобы иметь возможность использовать JSX, нужно импортировать и подключить библиотеку:

  1. React
  2. React Native
  3. JSX

React Native поставляется с поддержкой ES2015?

  1. true
  2. false

<Text>Hello world!</Text> - это JSX синтаксис для встраивания ___ в JavaScript.

  1. HTML
  2. XML
  3. CSS

Сколько существует способов создания компонентов?

  1. 1
  2. 2
  3. 3

Компоненты-функции это более предпочтительный способ создания компонентов?

  1. true
  2. false

Done​

Чтобы узнать, насколько хорошо вы усвоили этот урок, пройдите тест в мобильном приложении нашей школы по этой теме или в боте Telegram.

EnglishMoji!

Ссылки:​

  1. React Native - official website
  2. Learn React