5. Vista Rapida: Estructura Projecto Base

 

Tutorial: Reproducir la Estructura de un Proyecto Base de React Native

En este tutorial aprenderás a crear y entender la estructura básica de un proyecto en React Native, utilizando la imagen adjunta como referencia y los conceptos proporcionados.

🎯 Objetivo del Tutorial

Reproducir la estructura básica de un proyecto React Native y comprender la función de cada carpeta y archivo esencial.

📁 Estructura de Carpetas y Archivos (Basada en la Imagen)

text

tu-proyecto/

│

├── .bundle/

├── .yscode/

├── android/          # Código nativo para Android

├── ios/              # Código nativo para iOS

├── node_modules/     # Dependencias externas instaladas

├── src/              # Código fuente principal de la app

├── vendor/

│

├── .eslintrc.js      # Configuración de ESLint

├── .gitignore        # Archivos a ignorar por Git

├── .node-version     # Versión de Node.js

├── .prettierrc.js    # Configuración de Prettier

├── .watchmanconfig   # Configuración de Watchman

├── app.json          # Configuración de la app

├── App.tsx           # Componente principal (punto de entrada)

├── babel.config.js   # Configuración de Babel

├── Gemfile           # Dependencias de Ruby (para iOS)

├── Gemfile.lock

├── index.js          # Punto de entrada de la app

├── metro.config.js   # Configuración del bundler Metro

├── package.json      # Dependencias y scripts del proyecto

├── tsconfig.json     # Configuración de TypeScript

└── yarn.lock         # Bloqueo de versiones de Yarn

🛠️ Paso a Paso para Reproducir la Estructura

Paso 1: Crear un Nuevo Proyecto

Ejecuta el siguiente comando para crear un proyecto base de React Native:

bash

npx react-native init MiProyectoBase --template react-native-template-typescript

Esto generará automáticamente muchas de las carpetas y archivos que ves en la imagen.

Paso 2: Organizar la Carpeta src/

La carpeta src/ no viene por defecto, así que créala y organízala:

bash

cd MiProyectoBase

mkdir src

cd src

mkdir components screens services styles utils assets

  • components/: Componentes reutilizables.

  • screens/: Pantallas/vistas de la app.

  • services/: Lógica de negocio, llamadas a API, etc.

  • styles/: Estilos globales o temáticos.

  • utils/: Funciones auxiliares.

  • assets/: Imágenes, fuentes, iconos, etc.

Paso 3: Mover el Componente Principal

Renombra App.tsx y muévelo a src/screens/ si lo deseas, o déjalo en la raíz como en el ejemplo.

bash

# Opcional: si quieres moverlo

mv App.tsx src/screens/

Luego actualiza la referencia en index.js:

javascript

import {AppRegistry} from 'react-native';

import App from './src/screens/App';

// ...

Paso 4: Verificar Archivos de Configuración

Asegúrate de que los siguientes archivos estén presentes en la raíz:

  • .eslintrc.js

  • .prettierrc.js

  • babel.config.js

  • metro.config.js

  • tsconfig.json

Si no los tienes, créalos con configuraciones básicas.

Paso 5: Instalar Dependencias Adicionales

Si necesitas linter o formateador:

bash

yarn add -D eslint prettier eslint-config-react-app

Luego configura .eslintrc.js y .prettierrc.js según tus preferencias.

📘 Explicación de Carpetas Principales

Carpeta/Archivo

Descripción

src/

Contiene todo el código fuente de la app: componentes, pantallas, lógica, estilos, etc.

android/

Código nativo para Android (Java/Kotlin). Modificar solo si necesitas funcionalidades nativas.

ios/

Código nativo para iOS (Objective-C/Swift). Similar al anterior.

node_modules/

Todas las dependencias instaladas con npm o yarn. No se versiona.

App.tsx

Componente principal de la app. Suele ser el punto de entrada visual.

index.js

Punto de entrada principal que registra la app en React Native.

package.json

Lista de dependencias y scripts del proyecto.

app.json

Configuración del nombre, versión y otros metadatos de la app.

✅ Conclusión

Has reproducido la estructura base de un proyecto React Native, similar a la de la imagen. Ahora tienes:

  • Una organización clara en src/ para escalar el proyecto.

  • Carpetas nativas (android/, ios/) listas para personalización.

  • Archivos de configuración esenciales para el desarrollo.

  • Un punto de entrada (index.js y App.tsx) funcional.

📚 Recursos Adicionales

¡Listo! Ahora puedes comenzar a desarrollar tu aplicación con una estructura organizada y profesional.

Comentarios

Publicar un comentario

Entradas más populares de este blog

Guía Paso a Paso para Entender React Native (antes del Tutorial)

  1. 📱 ¿Qué es React Native? React Native es un  framework para crear aplicaciones móviles nativas  usando  JavaScript y React . A diferencia de las apps web, genera componentes nativos reales (no WebViews). Comparación con React Web: React Web React Native <div> <View> <span> ,  <p> <Text> <input> <TextInput> onClick onPress CSS StyleSheet (JavaScript) 2. 🎯 Prerrequisitos Básicos A) Conocimientos previos necesarios: ✅ JavaScript ES6+ (funciones flecha, destructuración, spread operator) ✅ Conceptos básicos de React (si ya sabes React web, ¡estás al 90%!) Componentes Props (propiedades) ✅ Hooks (useState, useEffect) B) Si NO sabes React, necesitas esto primero: javascript // 1. Componente funcional function MiComponente ( ) { return < View > Hola Mundo < / View > ; } // 2. Props (propiedades que recibe un componente) function Saludo ( props ) { return < Text > Hola { props . nombre } ...
Leer más

Tutorial: Aplicación React Native para Agregar Tareas - Minimalista

  Voy a crear una aplicación React Native simple que permite agregar tareas a una lista usando un formulario con un solo input. Será minimalista y bien explicado paso a paso. Estructura del Proyecto text react-native-todo-app/ ├── src/ │ ├── components/ │ │ ├── TaskForm.js │ │ └── TaskList.js │ └── App.js ├── package.json └── README.md Paso a Paso 1. Crear el proyecto React Native bash npx react-native init ReactNativeTodoApp cd ReactNativeTodoApp 2. Crear el componente App.js jsx import React , { useState } from 'react' ; import { View , Text , StyleSheet , SafeAreaView } from 'react-native' ; import TaskForm from './src/components/TaskForm' ; import TaskList from './src/components/TaskList' ; function App ( ) { // Estado para almacenar la lista de tareas const [ tasks , setTasks ] = useState ( [ ] ) ; // Función para agregar una nueva tarea const addTask = ( taskText ) => { // Crear un o...
Leer más