В предыдущем посте мы говорили о настройке симулятора и перезагрузке живого кода. Этот пост будет посвящен введению в React.
По сути, разработка React вращается вокруг одного — «создания компонентов многократного использования».
Что такое React-компоненты?
Компоненты — это в основном то, что вы бы показывали в пользовательском интерфейсе. Например, если я хочу показать список задач и отправить свои задачи, тогда структура компонентов может быть следующей:
├── Список задач
│ ├── Задача
├── Форма отправки
Как создать компонент React?
Каждый компонент React имеет метод React.createClass, в который передается объект. Этот объект сообщает, как будет выглядеть компонент, и результат различных действий, выполняемых над этим компонентом. Метод рендеринга является обязательным для любого компонента, состоящего из ключа рендеринга и функции как значение.
Вот как выглядит базовый компонент MyTaskList:
Вся цель этого метода рендеринга состоит в том, чтобы всегда что-то возвращать.
В нашем случае мы возвращаем HTMLish код (и он находится внутри JavaScript). Давайте обсудим это подробнее в следующем разделе.
JSX
Что ж, со строк с 4 по 6 вы видите на самом деле JSX — XML-подобное расширение синтаксиса для ECMAScript, которое определяет структуру того, как будет выглядеть наш компонент.
В. Зачем использовать JSX?
А. Намного легче читать, писать и понимать; благодаря большей части синтаксиса, заимствованного из HTML.
Давайте посмотрим, как на самом деле выглядит JSX, если мы конвертируем его в нативный JavaScript:
Как видите, слишком много контекста, и ясность пострадала. В следующем посте мы рассмотрим создание пользовательских компонентов в React Native.
