Como é estruturado um projeto React Native?

Question

Accepted Answer

Um projeto React Native possui uma estrutura que combina **código JavaScript/TypeScript** com **projetos nativos iOS/Android** e configuração. Entender a estrutura e os arquivos-chave ajuda a navegar e construir aplicativos React Native.

## Partes principais da estrutura

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

## Ecossistema 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
```

## Organizando seu código

```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).
```

## Por que isso importa

Entender como um projeto React Native é estruturado é conhecimento prático necessário para navegar, construir e organizar aplicativos React Native, portanto é um conhecimento fundamental útil.

Conhecer as **partes principais** — que **App.js/App.tsx é o componente raiz** (o ponto de entrada), seu **código JS/TS fica em `src/`** (onde você passa a maior parte do tempo), **package.json** gerencia dependências e scripts (como em qualquer projeto JavaScript), e os **projetos nativos `ios/` e `android/`** existem (para React Native puro, enquanto Expo os gerencia) — é necessário para se orientar em um projeto React Native, que combina código JavaScript com projetos nativos.

Entender o aspecto do **ecossistema JavaScript** é importante: projetos React Native usam **package.json e npm/yarn** para dependências (com o enorme ecossistema npm disponível — uma grande vantagem), **Metro** (o bundler do React Native), e Babel — refletindo que o desenvolvimento React Native é desenvolvimento JavaScript com ferramentas familiares, valioso para desenvolvedores web.

Entender como **organizar código** (estruturando `src/` em pastas por funcionalidade ou tipo — componentes, telas, navegação, serviços, hooks, utilitários, store) reflete boas práticas para projetos mantíveis conforme crescem.

Já que trabalhar com React Native requer navegar pela estrutura do projeto (código JS mais projetos nativos), gerenciar dependências via package.json e npm, entender o bundler e organizar código, e já que esse conhecimento é uma base prática necessária para qualquer desenvolvimento React Native, entender como um projeto React Native é estruturado — os arquivos principais, o ecossistema JavaScript e a organização do código — é conhecimento prático fundamental e valioso para trabalhar com projetos React Native, necessário para construir e manter aplicativos e uma competência básica que é especialmente acessível para desenvolvedores familiarizados com o ecossistema JavaScript/npm.