El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Aplicación Hola Mundo

Siguiente ►
►

En esta lección, crearemos nuestra primera aplicación en React Native: una simple aplicación "Hola Mundo". Este ejercicio nos permitirá familiarizarnos con la estructura básica de una aplicación React Native y con el proceso de desarrollo.

Objetivos de Aprendizaje

  • Comprender la estructura básica de una aplicación React Native.
  • Aprender a crear y ejecutar una aplicación simple.
  • Familiarizarse con los componentes básicos y el uso de JSX.

Requisitos Previos

  • Haber completado la configuración del entorno de desarrollo (ver lección anterior).

Pasos para Crear la Aplicación "Hola Mundo"

  1. Crear un Nuevo Proyecto

Primero, necesitamos crear un nuevo proyecto de React Native. Abre tu terminal y ejecuta el siguiente comando:

npx react-native init HelloWorldApp

Este comando creará una nueva carpeta llamada HelloWorldApp con todos los archivos necesarios para empezar.

  1. Navegar al Directorio del Proyecto

Cambia al directorio del proyecto recién creado:

cd HelloWorldApp

  1. Ejecutar la Aplicación

Para asegurarnos de que todo está configurado correctamente, ejecutemos la aplicación en un emulador o dispositivo físico.

En iOS

npx react-native run-ios

En Android

npx react-native run-android

Si todo está configurado correctamente, deberías ver la aplicación predeterminada de React Native ejecutándose en tu emulador o dispositivo.

  1. Modificar el Código para Mostrar "Hola Mundo"

Ahora, vamos a modificar el código para que la aplicación muestre "Hola Mundo". Abre el archivo App.js en tu editor de código favorito. Deberías ver algo similar a esto:

import React from 'react';
import {
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const App = () => {
  const isDarkMode = useColorScheme() === 'dark';

  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
      <ScrollView
        contentInsetAdjustmentBehavior="automatic"
        style={backgroundStyle}>
        <Header />
        <View
          style={{
            backgroundColor: isDarkMode ? Colors.black : Colors.white,
          }}>
          <Text style={styles.sectionTitle}>Step One</Text>
          <Text style={styles.sectionDescription}>
            Edit <Text style={styles.highlight}>App.js</Text> to change this
            screen and then come back to see your edits.
          </Text>
          <DebugInstructions />
          <ReloadInstructions />
          <LearnMoreLinks />
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

Vamos a simplificar este código para que solo muestre "Hola Mundo". Reemplaza el contenido de App.js con el siguiente código:

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hola Mundo</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

export default App;

  1. Guardar y Ejecutar

Guarda los cambios y vuelve a ejecutar la aplicación. Deberías ver "Hola Mundo" en la pantalla.

Explicación del Código

  • Importaciones: Importamos React y algunos componentes básicos de react-native como Text, View y StyleSheet.
  • Componente App: Definimos un componente funcional llamado App que retorna una vista (View) con un texto (Text) dentro.
  • Estilos: Usamos StyleSheet para definir los estilos de la vista y el texto. La vista tiene estilos para centrar el contenido y darle un color de fondo, mientras que el texto tiene un tamaño de fuente y un margen.

Ejercicio Práctico

Ejercicio 1: Modificar el Texto

Modifica el texto "Hola Mundo" para que diga "Bienvenidos a React Native".

Solución

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Bienvenidos a React Native</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

export default App;

Ejercicio 2: Cambiar el Color de Fondo

Cambia el color de fondo de la vista a un color de tu elección.

Solución

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

const App = () => {
  return (
    <View style={[styles.container, { backgroundColor: '#ADD8E6' }]}>
      <Text style={styles.text}>Bienvenidos a React Native</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
});

export default App;

Conclusión

En esta lección, hemos creado nuestra primera aplicación en React Native y hemos aprendido a modificar el código para personalizar la salida. Ahora deberías sentirte más cómodo con la estructura básica de una aplicación React Native y estar listo para explorar componentes y funcionalidades más avanzadas en las próximas lecciones.

◄ Anterior
◄
Siguiente ►
►
El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados