Как структурирован проект React Native?

Question

Accepted Answer

Проект React Native имеет структуру, объединяющую **JavaScript/TypeScript код** с **собственными проектами iOS/Android** и конфигурацией. Понимание структуры и ключевых файлов помогает ориентироваться и создавать приложения React Native.

## Ключевые части структуры

```text
my-app/
  App.js / App.tsx       → the root component (app entry point)
  src/ (or app/)         → your JS/TS code (components, screens, etc.) — organize here
  package.json           → dependencies and scripts (npm/yarn) — like any JS project
  node_modules/          → installed npm dependencies
  ios/                   → the native iOS project (Xcode) — for bare RN
  android/               → the native Android project (Gradle) — for bare RN
  index.js               → registers the root component
  app.json / app.config  → app config (name, icon) — especially in Expo
  (Expo projects hide ios/android; managed by Expo)
```

## Экосистема JavaScript

```text
→ package.json → dependencies (React Native, navigation, libraries) + scripts
→ npm / yarn → install packages (npm install); the huge npm ecosystem is available
→ Metro → React Native's JavaScript bundler (bundles your JS for the app)
→ Babel → transpiles modern JS/JSX/TypeScript
```

## Организация вашего кода

```text
→ Organize src/ into folders (common):
  src/components/ (reusable UI), src/screens/ (screen components),
  src/navigation/, src/services/ (API), src/hooks/, src/utils/, src/store/ (state)
→ Keep code organized as the app grows (separation by feature or type).
```

## Почему это важно

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

Знание **ключевых частей** — что **App.js/App.tsx это корневой компонент** (точка входа), что **ваш JS/TS код находится в `src/`** (где вы проводите большую часть времени), что **package.json** управляет зависимостями и скриптами (как в любом JavaScript проекте), и что существуют **собственные проекты `ios/` и `android/`** (для bare React Native, в то время как Expo управляет ими) — необходимо для ориентации в проекте React Native, который объединяет JavaScript код с собственными проектами.

Понимание аспекта **экосистемы JavaScript** важно: проекты React Native используют **package.json и npm/yarn** для зависимостей (с огромной экосистемой npm доступной — главное преимущество), **Metro** (бандлер React Native), и Babel — отражая то, что разработка на React Native — это разработка на JavaScript со знакомым инструментарием, ценное для веб-разработчиков.

Понимание того, как **организовать код** (структурирование `src/` в папки по функциям или типам — компоненты, экраны, навигация, сервисы, хуки, утилиты, хранилище) отражает хорошую практику для поддерживаемых проектов по мере их роста.

Поскольку работа с React Native требует ориентации в структуре проекта (JS код плюс собственные проекты), управления зависимостями через package.json и npm, понимания бандлера, и организации кода, и поскольку эти знания — необходимый практический фундамент для любой разработки React Native, понимание того, как структурирован проект React Native — ключевые файлы, экосистема JavaScript и организация кода — являются ценными, фундаментальными практическими знаниями для работы с проектами React Native, необходимыми для создания и поддержки приложений и базовой компетентностью, которая особенно доступна разработчикам, знакомым с экосистемой JavaScript/npm.