20. Creación de archivo App
Tema: 20. Creación de archivo App en React Native
Objetivo:
Aprender a estructurar y organizar una aplicación React Native creando un archivo App.js dentro de una carpeta de layouts para separar la lógica de presentación y mejorar la arquitectura del proyecto.
Contenido del tutorial:
1. Introducción a la organización por layouts
¿Qué es un layout?:
Estructura visual que organiza componentes en la pantalla.
Puede incluir headers, footers, sidebars, contenedores principales.
Ventajas de usar layouts:
Separación clara entre estructura y contenido.
Reutilización de diseños comunes.
Mantenimiento más sencillo.
Escalabilidad del proyecto.
2. Crear la estructura de carpetas
Paso 1: Navegar al directorio src o source
bash
cd src
Paso 2: Crear carpeta layouts
En VS Code: Click derecho → "New Folder" → Nombre: layouts
En terminal:
bash
mkdir layouts
Estructura resultante:
text
mi-proyecto/
├── src/
│ ├── layouts/ ← Nueva carpeta
│ ├── components/
│ ├── screens/
│ └── ...
├── App.js ← Archivo principal actual
└── ...
3. Crear el archivo App.js dentro de layouts
Paso 1: Crear el archivo
En VS Code: Click derecho en layouts → "New File" → Nombre: App.js
Ruta completa: src/layouts/App.js
Paso 2: Usar snippet rnfe (React Native Functional Component)
Abrir App.js
Escribir rnfe y presionar Tab
Se generará automáticamente:
jsx
import { View, Text } from 'react-native'
import React from 'react'
const App = () => {
return (
<View>
<Text>App</Text>
</View>
)
}
export default App
Paso 3: Personalizar el componente
jsx
import { View, Text, StyleSheet } from 'react-native'
import React from 'react'
const App = () => {
return (
<View style={styles.container}>
<Text style={styles.title}>Mi Layout Principal</Text>
{/* Aquí irán otros componentes */}
</View>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#f5f5f5',
},
title: {
fontSize: 24,
fontWeight: 'bold',
color: '#333',
},
})
export default App
4. Configurar el punto de entrada (index.js)
Paso 1: Abrir index.js (o App.js principal)
Ubicación: En la raíz del proyecto (mi-proyecto/App.js)
Paso 2: Comentar la importación anterior
jsx
// import App from './src/App';
Paso 3: Importar el nuevo App desde layouts
jsx
import App from './src/layouts/App';
Ejemplo completo de index.js:
jsx
import { registerRootComponent } from 'expo';
// Importar el App desde layouts
import App from './src/layouts/App';
// Registrar el componente principal
registerRootComponent(App);
5. Verificar que funciona
Guardar todos los archivos
Ejecutar la aplicación:
bash
npm start
# o
expo start
Deberías ver "Mi Layout Principal" en pantalla
6. Extender el layout con componentes básicos
Ejemplo de layout con estructura común:
jsx
import { View, Text, StyleSheet, SafeAreaView, StatusBar } from 'react-native'
import React from 'react'
const App = () => {
return (
<SafeAreaView style={styles.safeArea}>
<StatusBar barStyle="dark-content" backgroundColor="#fff" />
{/* Header */}
<View style={styles.header}>
<Text style={styles.headerTitle}>Mi Aplicación</Text>
</View>
{/* Contenido principal */}
<View style={styles.mainContent}>
<Text>Contenido principal aquí</Text>
</View>
{/* Footer */}
<View style={styles.footer}>
<Text style={styles.footerText}>© 2023 Mi App</Text>
</View>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
safeArea: {
flex: 1,
backgroundColor: '#fff',
},
header: {
height: 60,
backgroundColor: '#6200ee',
justifyContent: 'center',
alignItems: 'center',
},
headerTitle: {
color: '#fff',
fontSize: 20,
fontWeight: 'bold',
},
mainContent: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
padding: 20,
},
footer: {
height: 50,
backgroundColor: '#f5f5f5',
justifyContent: 'center',
alignItems: 'center',
borderTopWidth: 1,
borderTopColor: '#ddd',
},
footerText: {
color: '#666',
fontSize: 12,
},
})
export default App
7. Beneficios de esta estructura
Separación de responsabilidades:
layouts/: Estructura general
screens/: Páginas específicas
components/: Componentes reutilizables
Reutilización:
jsx
// Puedes crear múltiples layouts
src/layouts/
├── App.js ← Layout principal
├── AuthLayout.js ← Layout para autenticación
├── TabLayout.js ← Layout con tabs
└── DrawerLayout.js ← Layout con drawer
Mantenimiento más fácil:
Cambios en la estructura solo en un lugar
Fácil de encontrar y modificar
8. Siguientes pasos recomendados
Crear un layout para autenticación:
bash
src/layouts/AuthLayout.js
Implementar navegación entre layouts
Añadir temas globales
Integrar un sistema de rutas
Resumen de comandos útiles:
Posibles errores y soluciones:
Conclusión:
Al crear un archivo App.js dentro de una carpeta layouts, establecemos una arquitectura escalable que separa la estructura visual de la lógica de negocio. Esto permite:
✅ Organización clara del código
✅ Reutilización de layouts en diferentes partes
✅ Mantenimiento más sencillo
✅ Escalabilidad para proyectos grandes
Próximo paso: Aprenderemos a crear múltiples layouts y a navegar entre ellos usando React Navigation.
📌 Recuerda: Esta estructura es una recomendación, puedes adaptarla según las necesidades de tu proyecto. Lo importante es mantener consistencia en toda la aplicación
Comentarios
Publicar un comentario