¿Cómo se estructura un proyecto React Native?

Question

Accepted Answer

Un proyecto React Native tiene una estructura que combina **código JavaScript/TypeScript** con **proyectos nativos de iOS/Android** y configuración. Comprender la estructura y los archivos clave ayuda a navegar y construir aplicaciones React Native.

## Partes clave de la estructura

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

## Ecosistema de 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 tu 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 qué es importante

Comprender cómo se estructura un proyecto React Native es conocimiento práctico necesario para navegar, construir y organizar aplicaciones React Native, por lo que es conocimiento fundamental útil.

Conocer las **partes clave** — que **App.js/App.tsx es el componente raíz** (el punto de entrada), tu **código JS/TS vive en `src/`** (donde pasas la mayor parte del tiempo), **package.json** administra dependencias y scripts (como cualquier proyecto JavaScript), y los **proyectos nativos `ios/` y `android/`** existen (para React Native bare, mientras que Expo los administra) — es necesario para encontrar tu camino en un proyecto React Native, que combina código JavaScript con proyectos nativos.

Comprender el aspecto del **ecosistema de JavaScript** es importante: los proyectos React Native usan **package.json y npm/yarn** para dependencias (con el enorme ecosistema npm disponible — una ventaja importante), **Metro** (el bundler de React Native) y Babel — reflejando que el desarrollo de React Native es desarrollo JavaScript con herramientas familiares, valioso para desarrolladores web.

Comprender cómo **organizar código** (estructurar `src/` en carpetas por característica o tipo — componentes, pantallas, navegación, servicios, hooks, utils, store) refleja buena práctica para proyectos mantenibles a medida que crecen.

Ya que trabajar con React Native requiere navegar la estructura del proyecto (código JS más proyectos nativos), administrar dependencias a través de package.json y npm, entender el bundler y organizar código, y ya que este conocimiento es base práctica necesaria para cualquier desarrollo React Native, comprender cómo se estructura un proyecto React Native — los archivos clave, el ecosistema de JavaScript y la organización del código — es conocimiento práctico fundamental valioso para trabajar con proyectos React Native, necesario para construir y mantener aplicaciones y una competencia básica que es especialmente accesible para desarrolladores familiarizados con el ecosistema JavaScript/npm.