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

Но чтобы эти компоненты работали и выглядели как надо, мы используем JSX — специальный синтаксис, который выглядит как HTML, но на самом деле это JavaScript. Сегодня мы разберём основы JSX, научимся создавать функциональные и классовые компоненты, а потом напишем простое приложение «To-Do List».

Что такое JSX?

JSX — это специальный синтаксис, который выглядит как HTML, но на самом деле является расширением для JavaScript. Он позволяет писать код, который выглядит как разметка, но внутри может содержать JavaScript-логику.

Если открыть любой проект на React или React Native, вы наверняка увидите куски кода, похожие на HTML:

<View>
  <Text>Hello, React Native!</Text>
</View>

Это и есть JSX. Несмотря на то, что он напоминает HTML, это просто синтаксический сахар для JavaScript. Под капотом JSX компилируется в вызовы функций вроде React.createElement. Например:

<Text>Hello</Text>

Преобразуется в:

React.createElement('Text', null, 'Hello');

Но писать JSX намного удобнее и понятнее, правда?

Почему JSX важен?

• Читабельность — JSX делает код проще для понимания. Он ясно показывает, что именно рендерится на экране.
• Возможность комбинировать логику и визуал — Вы можете использовать JavaScript прямо внутри JSX с помощью фигурных скобок {}.
• Компактность — С помощью JSX можно создавать интерфейсы с минимальным количеством кода.

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

React-компоненты — это кусочки интерфейса, которые можно переиспользовать. Подумайте об интерфейсе мобильного приложения. У вас есть кнопки, списки, карточки, текстовые поля — всё это компоненты. В React Native есть два способа создания компонентов:

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

Это простые функции, которые возвращают JSX. Они идеально подходят для небольших, статичных компонентов.

Пример:

const MyComponent = () => {
  return (
    <View>
      <Text>Привет, это мой компонент!</Text>
    </View>
  );
};

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

Это старый, но всё ещё используемый способ создания компонентов. Они пишутся как классы, которые наследуют от React.Component.

Пример:

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

class MyClassComponent extends Component {
  render() {
    return (
      <View>
        <Text>Я классовый компонент!</Text>
      </View>
    );
  }
}

export default MyClassComponent;

Как работают компоненты?

Вложенность

Компоненты можно вкладывать друг в друга, как матрёшки. Например:

const App = () => {
  return (
    <View>
      <Header />
      <Footer />
    </View>
  );
};

Пропсы (Props)

Это входные данные для компонентов. С их помощью можно настраивать внешний вид и поведение компонента.

const Greeting = (props) => {
  return <Text>Привет, {props.name}!</Text>;
};

// Использование:
<Greeting name="Иван" />

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

Это внутренние данные компонента. Например, состояние кнопки: нажата она или нет. О нём подробнее в следующих уроках.

Практика: создаём приложение «To-Do List»

Теперь, когда мы знаем основы JSX и компонентов, давайте напишем приложение для списка задач. Оно будет состоять из двух компонентов:

• Список задач.
• Отдельная задача.

Структура проекта

Убедитесь, что вы уже настроили проект (если нет, следуйте инструкции из первой статьи). Откройте App.js и замените его содержимое:

import React, { useState } from 'react';
import { View, Text, TextInput, Button, StyleSheet, FlatList } from 'react-native';

// Компонент для отдельной задачи
const TaskItem = ({ task }) => {
  return (
    <View style={styles.taskItem}>
      <Text>{task}</Text>
    </View>
  );
};

// Основное приложение
const App = () => {
  const [tasks, setTasks] = useState([]); // Храним задачи в массиве
  const [newTask, setNewTask] = useState(''); // Для ввода новой задачи

  const addTask = () => {
    if (newTask.trim()) {
      setTasks([...tasks, newTask.trim()]);
      setNewTask('');
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.header}>To-Do List</Text>
      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          placeholder="Введите задачу"
          value={newTask}
          onChangeText={setNewTask}
        />
        <Button title="Добавить" onPress={addTask} />
      </View>
      <FlatList
        data={tasks}
        renderItem={({ item }) => <TaskItem task={item} />}
        keyExtractor={(item, index) => index.toString()}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: '#f9f9f9',
  },
  header: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  inputContainer: {
    flexDirection: 'row',
    marginBottom: 20,
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    marginRight: 10,
    borderRadius: 5,
  },
  taskItem: {
    padding: 15,
    backgroundColor: '#fff',
    borderRadius: 5,
    borderWidth: 1,
    borderColor: '#ddd',
    marginBottom: 10,
  },
});

export default App;

Что мы сделали?

Компонент TaskItem

Это функциональный компонент для отображения одной задачи. Он принимает task как проп.

Состояние tasks

Используем useState для хранения массива задач.

Добавление задач

Когда пользователь вводит текст и нажимает кнопку «Добавить», задача добавляется в массив tasks.

FlatList

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