3.4--33. Inicio de proyecto - CounterApp

Inicio de Proyecto - CounterApp: Primeros Pasos en React Native

¡Bienvenidos al inicio de nuestro primer proyecto práctico en React Native! Vamos a crear una aplicación contador (CounterApp) desde cero, aprendiendo el proceso de configuración inicial y la estructura básica de un proyecto.

🛠 Configuración Inicial del Proyecto

Para crear nuestro proyecto, ejecutamos el siguiente comando en la terminal:

bash
npx create-expo-app counter-app --template blank-typescript

Alternativas de instalación:

  • Yarn: yarn create expo-app counter-app --template blank-typescript

  • pnpm: pnpm create expo-app counter-app --template blank-typescript

  • bun: bunx create-expo-app counter-app --template blank-typescript

📁 Estructura del Proyecto

Al crear el proyecto, obtenemos esta estructura básica:

text
counter-app/
├── assets/
│   ├── icon.png
│   └── splash.png
├── node_modules/
├── .gitignore
├── app.json
├── App.tsx
├── babel.config.js
├── package.json
├── package-lock.json
└── tsconfig.json

Archivos clave:

  1. App.tsx: Componente principal de la aplicación

  2. app.json: Configuración de Expo (nombre, icono, splash screen)

  3. assets/: Contiene recursos estáticos (imágenes, fuentes)

  4. tsconfig.json: Configuración de TypeScript

🚀 Iniciando la Aplicación

Para lanzar el proyecto:

bash
cd counter-app
npm start
# O alternativas:
# yarn start
# pnpm start
# bun start

Comandos útiles en Expo:

  • a: Abre en emulador Android

  • i: Abre en simulador iOS

  • R: Recarga la aplicación

  • w: Abre en navegador web

🖥 Primeros Cambios

Vamos a modificar el archivo App.tsx para nuestro contador básico:

typescript
import { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Contador: {count}</Text>
      <Button 
        title="Incrementar" 
        onPress={() => setCount(count + 1)} 
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    marginBottom: 20,
  },
});

🔍 ¿Qué Hemos Aprendido?

  1. Creación de proyectos con Expo y TypeScript

  2. Estructura básica de un proyecto React Native

  3. Configuración inicial (iconos, splash screen)

  4. Componente principal (App.tsx)

  5. Estado básico con useState

📌 Próximos Pasos

En las siguientes clases vamos a:

  • Mejorar el diseño del contador

  • Agregar funcionalidad para decrementar

  • Implementar persistencia de datos

  • Añadir temas de colores

¡Manos a la obra! ¿Qué otras funcionalidades te gustaría que agregáramos a nuestro CounterApp?

Comentarios

Publicar un comentario

Entradas más populares de este blog

4.2-12. Componentes esenciales

    Componentes esenciales de React Native (Vignatti) 📱 En este video, exploramos y utilizamos los  componentes esenciales de React Native (Vignatti) , junto con los  NAC Decks . Estamos en la fase final de los fundamentos que todo desarrollador debe dominar antes de empezar un proyecto. 🔹  ¿Qué veremos? Equivalencia con HTML : Comparativa de los componentes de Vignatti vs. HTML. Funcionamiento clave : Cómo usar cada componente en proyectos reales. 📌 Componentes principales: 1️⃣  View  → Como un  div  en HTML. Es un contenedor que puede anidar otros componentes. Dato clave : Si el contenido excede la pantalla, ¡usa  ScrollView  para evitar cortes! 2️⃣  Image  → Similar a  <img>  en HTML. Propiedad  source  para cargar imágenes (local o URL). ¡Obligatorio!  Asignarle un estilo con  width  y  height . 3️⃣  Text  → Equivalente a  <p> ,  <span> ...
Leer más

7.5-10. ¿Como funcionan los estilos en React Native?

  ¿Cómo funcionan los estilos en React Native? En React Native, los estilos no usan CSS tradicional, sino un sistema basado en  objetos JavaScript  similar. ¡Te explico cómo dominarlo! 📌 Componente clave:  StyleSheet Es el equivalente a una hoja de estilos CSS, pero en formato de objeto: javascript import { StyleSheet } from 'react-native' ; const styles = StyleSheet . create ( { contenedor : { borderRadius : 10 , borderWidth : 2 , borderColor : '#000' , } , titulo : { fontSize : 19 , fontWeight : 'bold' , } , } ) ; 🔥 Características importantes: Soporte por componente : Cada elemento (View, Text, etc.) acepta estilos con atributos específicos. Múltiples estilos : Pásalos como un  arreglo : javascript < Text style = { [ styles . titulo , styles . centrado ] } > Hola < / Text > Estilos dinámicos : Usa condicionales para cambiar estilos: javascript < Text style = { [ styles . titulo , isActive...
Leer más

7.1-19. Creación de estilos

  Creación de Estilos en React Native: Buenas Prácticas En el post anterior, creamos nuestro primer componente en React Native. Hoy vamos a profundizar en cómo  estructurar correctamente los estilos  para mantener un código limpio y escalable. 🚫 Evita los Estilos "Inline" En el ejemplo anterior, definimos los estilos directamente en el componente: jsx < View style = { { width : 50 , height : 50 , backgroundColor : 'red' } } /> Aunque funciona,  no es una buena práctica  porque: Dificulta el mantenimiento en proyectos grandes. Hace el código menos legible. No permite reutilizar estilos. ✅ La Forma Correcta: Objetos de Estilo React Native recomienda definir los estilos en un  objeto separado  usando  StyleSheet.create() : jsx import { View , StyleSheet } from 'react-native' ; function MiComponente ( ) { return < View style = { styles . mainContainer } /> ; } const styles = StyleSheet . create ( { mainCont...
Leer más