React Native использует модель компонентов React и JSX — построение интерфейсов из переиспользуемых компонентов, которые возвращают JSX. Если вы знакомы с React для веба, это напрямую переносится; главное отличие в использовании нативных компонентов вместо HTML-элементов.
() {
(
);
}
() {
(
);
}
Компоненты — это переиспользуемые UI-части (функции, возвращающие JSX); они принимают props (входные данные) и объединяются в деревья — точно так же как React для веба, но с нативными компонентами.
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0); // STATE (useState hook)
return (
<TouchableOpacity onPress={() => setCount(count + 1)}>
<Text>Count: {count}</Text> {/* re-renders when state changes */}
</TouchableOpacity>
);
}
Props передают данные в компоненты; state (через useState) содержит изменяющиеся данные, которые запускают перерисовку — та же модель React, что и в вебе.
✓ Components, JSX, props, state, HOOKS (useState, useEffect, etc.), composition, keys —
all the same as React for web
✓ The main difference: native components (View/Text) instead of HTML; styling differs
→ React developers can apply most of their knowledge directly to React Native.
Понимание того, как работают компоненты и JSX в React Native, является фундаментальным, потому что React Native построен на модели компонентов React, поэтому его освоение необходимо, и основное преимущество в том, что знания React переносятся напрямую.
Компоненты (переиспользуемые UI-части, возвращающие JSX, принимающие props как входные данные и объединяющиеся в деревья) и JSX (синтаксис, описывающий UI с встроенными выражениями) являются основой разработки React Native — так же как и в React для веба.
Понимание props (передачи данных в компоненты) и state (через хук useState, хранящий изменяющиеся данные, которые запускают перерисовку) необходимо, потому что эти концепции React определяют, как компоненты React Native получают данные и управляют изменениями — идентично веб-React.
Ключевое понимание состоит в том, что знания React переносятся напрямую: компоненты, JSX, props, state, хуки (useState, useEffect и т. д.), композиция и keys работают точно так же, как в React для веба, с основными отличиями в использовании нативных компонентов (View, Text) вместо HTML и различной стилизации.
Эта переносимость является основной причиной популярности React Native — большой пул React/веб-разработчиков может применять большую часть своих существующих знаний непосредственно к разработке нативных мобильных приложений, с относительно небольшой кривой обучения, сосредоточенной на нативных компонентах и особенностях платформы.
Поскольку React Native по сути является React (компоненты, JSX, props, state, хуки), применяемым к нативному UI, и понимание этой модели необходимо для разработки приложений React Native, а знания React переносятся напрямую (ключевое преимущество), понимание компонентов и JSX в React Native является необходимым, фундаментальным знанием — основной моделью программирования React Native, необходимой для разработки приложений и особенно ценной тем, что показывает, насколько напрямую навыки React/веба применяются к разработке мобильных приложений React Native.