En esta sección, aprenderás a configurar tu entorno de desarrollo para trabajar con React Native. Este proceso incluye la instalación de Node.js, el administrador de paquetes npm, y la configuración de las herramientas necesarias para desarrollar aplicaciones tanto en iOS como en Android.

Antes de comenzar, asegúrate de tener lo siguiente:

• Un editor de texto o IDE (recomendamos Visual Studio Code).
• Conocimientos básicos de JavaScript y React.

React Native requiere Node.js y npm (Node Package Manager). Puedes descargar e instalar Node.js desde su sitio web oficial. La instalación de Node.js también instalará npm automáticamente.

1. Descargar Node.js:

   • Ve a https://nodejs.org/.
   • Descarga la versión LTS (Long Term Support) recomendada.

2. Instalar Node.js:

   • Ejecuta el instalador y sigue las instrucciones en pantalla.

3. Verificar la instalación:

   • Abre una terminal y ejecuta los siguientes comandos para verificar que Node.js y npm se instalaron correctamente:

     node -v
     npm -v
     

   • Deberías ver los números de versión de Node.js y npm.

Expo es una herramienta que facilita el desarrollo de aplicaciones React Native. Para instalar Expo CLI, ejecuta el siguiente comando en tu terminal:

1. Crear un nuevo proyecto:

   • En tu terminal, navega a la carpeta donde deseas crear tu proyecto y ejecuta:

     expo init MyFirstProject
     

   • Selecciona una plantilla (recomendamos "blank" para empezar).

2. Navegar al directorio del proyecto:

   cd MyFirstProject
   

3. Iniciar el proyecto:

   expo start
   

   Esto abrirá una nueva ventana en tu navegador con el servidor de desarrollo de Expo.

Para desarrollar y probar aplicaciones en iOS, necesitas una Mac con Xcode instalado.

1. Instalar Xcode:

   • Descarga e instala Xcode desde la App Store.

2. Instalar Xcode Command Line Tools:

   • Abre una terminal y ejecuta:

     xcode-select --install
     

3. Configurar el simulador de iOS:

   • Abre Xcode y navega a Preferences > Locations para asegurarte de que las herramientas de línea de comandos estén configuradas correctamente.
   • Puedes iniciar el simulador de iOS desde Xcode o desde la terminal con:

     open -a Simulator
     

Para desarrollar y probar aplicaciones en Android, necesitas instalar Android Studio.

1. Instalar Android Studio:

   • Descarga e instala Android Studio desde su sitio web oficial.

2. Configurar Android Studio:

   • Durante la instalación, asegúrate de incluir el Android SDK, Android SDK Platform, y Android Virtual Device (AVD).

3. Configurar las variables de entorno:

   • Añade las siguientes líneas a tu archivo de configuración de shell (~/.bashrc, ~/.zshrc, etc.):

     export ANDROID_HOME=$HOME/Library/Android/sdk
     export PATH=$PATH:$ANDROID_HOME/emulator
     export PATH=$PATH:$ANDROID_HOME/tools
     export PATH=$PATH:$ANDROID_HOME/tools/bin
     export PATH=$PATH:$ANDROID_HOME/platform-tools
     

4. Crear un dispositivo virtual (AVD):

   • Abre Android Studio y navega a AVD Manager para crear un nuevo dispositivo virtual.

5. Iniciar el emulador de Android:

   • Puedes iniciar el emulador desde Android Studio o desde la terminal con:

     emulator -avd <nombre_del_dispositivo>
     

1. Ejecutar la aplicación en el simulador/emulador:

   • Con el servidor de desarrollo de Expo en ejecución (expo start), selecciona "Run on iOS simulator" o "Run on Android device/emulator" desde la interfaz web de Expo.

2. Verificar la aplicación:

   • Deberías ver la aplicación "Hola Mundo" ejecutándose en el simulador/emulador.

Has configurado con éxito tu entorno de desarrollo para React Native. Ahora estás listo para comenzar a desarrollar aplicaciones móviles. En el próximo tema, crearemos nuestra primera aplicación "Hola Mundo" para familiarizarnos con la estructura básica de una aplicación React Native.

Resumen:

• Instalamos Node.js y npm.
• Instalamos Expo CLI.
• Creamos y ejecutamos un nuevo proyecto con Expo.
• Configuramos el entorno para iOS y Android.
• Probamos la configuración ejecutando una aplicación en el simulador/emulador.

En el siguiente módulo, profundizaremos en la creación de una aplicación "Hola Mundo" y entenderemos los conceptos básicos de React Native.