Основы React Native

React Native похож на React, но использует нативные компоненты платформы вместо веб-компонентов.

Функциональные компоненты (рекомендуется)

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

function App() {
  return <Text>Hello world!</Text>
}
export default App

React Native поддерживает ES2015: import, export, const, from.

Почему JSX

React признаёт, что логика рендеринга неразрывно связана с логикой UI (события, состояние, данные). Вместо разделения разметки и логики React разделяет ответственности через компоненты, содержащие и то, и другое.

JSX-выражения превращаются в стандартные вызовы функций JavaScript после компиляции.

Классовые компоненты — устаревшее

Классовые компоненты теряют актуальность из-за React Hooks. Этот курс не рассматривает их подробно.

Хуки вместо классов

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>
  )
}