Saltar al contenido
Cosas Tecnológicas

Cómo instalar React Native en Windows

reacción País de origen Es un marco de aplicación móvil JavaScript muy conocido que permite crear aplicaciones móviles en plataformas Android e iOS. Proporciona excelentes capacidades de desarrollo móvil y se centra en la creación de aplicaciones para múltiples etapas utilizando bases de código similares.

React Native fue desarrollado originalmente por Facebook para el desarrollo de su aplicación interna. Fue de código abierto para aplicaciones móviles iOS en marzo de 2015, y una versión de desarrollo de Android fue lanzada en septiembre del mismo año. En la actualidad, Native React se ha mejorado enormemente y proporciona soporte para aplicaciones móviles populares a nivel mundial como Instagram, Facebook y Skype.

¿Estás listo para comenzar a usar React Native? Entendamos cómo descargar, instalar y configurar React Native en Windows 10.

1. Requisitos previos

Antes de comenzar, aquí hay algunos requisitos del sistema para descargar, instalar y configurar React-Native en Windows 10.

Requisitos de hardware

Para descargar e instalar con éxito React-Native en su computadora, debe considerar las especificaciones mínimas de hardware necesarias para admitir la aplicación y ejecutarla sin problemas.

  • RAM 8 GB
  • CPU: CPU Intel® Core ™ i7-4870 HQ a 2,50 GHz
  • 256 GB de memoria de solo lectura

Requisitos de Software

Para instalar y configurar React-Native de manera efectiva en su dispositivo Windows, necesita instalar lo siguiente:

  • Estudio de Android
  • SDK de Android
  • Instalar JDK
  • Nodo Js
  • Gestión de nuevos productos 3.5.2
  • Reaccionar cli nativo

2. Procedimiento de instalación

Para instalar y configurar con éxito React-Native en su dispositivo, debe seguir los pasos que se describen a continuación:

Paso 1: Instale Chocolatey

El primer proceso que debe realizar es instalar Chocolatey, un conocido administrador de paquetes de Windows. La instalación de Chocolatey requiere que un administrador acceda al símbolo del sistema de la computadora para ejecutarse.

  • ir con con Seleccione Opción de inicio.

  • En la sección de instalación de Chocolatey, seleccione individual como se muestra:

Instalar React Native en Windows

  • Ahora vaya a Windows CMD Shell e ingrese el siguiente comando en cmd.exe shell.

La instalación se verá así:

Para comprobar si lo ha instalado correctamente, abra un símbolo del sistema y escriba;

choco -version 

Si ha realizado la instalación correcta, este comando devolverá la versión Chocolatey que ha instalado; como se muestra en la siguiente figura:

Paso 2: instalar Node Js

Ahora usaremos Chocolatey para instalar Node.js y JDK8 como se muestra a continuación.

I. Instalar Node.js

instalación Node.js Es crucial porque es un entorno de ejecución de JavaScript y React Native lo usa para crear código JavaScript. Para instalar Node.js, debe abrir un símbolo del sistema como administrador e ingresar el siguiente símbolo del sistema Chocolatey:

Instalación de Choco -y nodejs.install

La instalación puede tardar algún tiempo. Al finalizar, verá un mensaje que indica que Chocolatey se ha instalado, como se muestra a continuación:

Para confirmar la instalación exitosa, ejecutaremos los siguientes comandos como administrador en el símbolo del sistema:

node --version 

Si la instalación es exitosa, se mostrará el número de versión.

Después de instalar Node.js, Node Package Manager NPM se instalará automáticamente. Ahora verifique la instalación de NPM en el sistema ingresando el siguiente comando.

npm --version

El mensaje que se muestra a continuación verifica que la instalación de NPM se realizó correctamente.

Paso: 4 Instale JDK8 (Java Development Kit)

JDK8 es crucial en la mejora de React-Native de las aplicaciones de Android. Para instalar JDK8, vaya a Windows PowerShell y use el siguiente comando:

choco install -y nodejs.install openjdk8 

Para saber si la instalación es exitosa, abra el símbolo del sistema nuevamente e ingrese el comando:

java -version 

Si la instalación de JDK8 se realiza correctamente, se mostrará el siguiente mensaje, por lo que la versión de Java se muestra como:

openjdk version “1.8.0_222” 

El JDK8 instalado también tiene instalado un compilador de Java. Para confirmar si el compilador de Java está instalado, abra un símbolo del sistema e ingrese el siguiente comando:

javac -version 

Paso 5: instala Android Studio

Para utilizar React Native para mejorar las aplicaciones móviles, debe instalar Android Studio.Descargar e instalar expediente, ir con. De forma predeterminada, Android Studio instalará automáticamente el último SDK de Android. Sin embargo, la creación de aplicaciones React Native con código nativo requiere el SDK de Android 11.0 (R) en particular.

El mensaje de la pantalla de instalación es el siguiente: Instalar React Native en Windows

Después de descargar el archivo, realice el proceso de instalación de Android Studio. Para continuar, haga clic en el botón “Siguiente” para ver la pantalla “Seleccionar componentes”. Instalar React Native en Windows

Marque la casilla que contiene el dispositivo virtual Android y luego haga clic en el botón Siguiente. Instalar React Native en Windows

Luego, debe seleccionar la ubicación en su computadora donde desea instalar Android Studio. Incluso puede instalarlo en la ubicación predeterminada para ahorrar tiempo y luego hacer clic en el botón Siguiente para ir a la siguiente pantalla: Instalar React Native en Windows

Se le llevará a seleccionar la carpeta del menú de inicio. Haga clic en el botón de instalación para instalar el programa.Instalar React Native en Windows

Instalar React Native en Windows

Cuando la barra llegue al final, haga clic en el botón “Siguiente” para completar el proceso.
Instalar React Native en Windows

En la siguiente pantalla, seleccione Iniciar Android Studio y haga clic en el botón Finalizar.
Instalar React Native en Windows

Personalizar Android Studio:

Haga clic en el botón Siguiente para ir a la pantalla del tipo de instalación:

Personalizar Android Studio

Seleccione el tipo de configuración personalizada y luego haga clic en el botón Siguiente.Personalizar Android Studio

Personalizar Android Studio

En esta pantalla, puede seleccionar el tema de su elección y luego hacer clic en el botón Siguiente para ir a la ventana de configuración del componente SDK.Personalizar Android Studio

En la pantalla de configuración del componente SDK, seleccione la opción Rendimiento Intel HAXM y la opción Dispositivo virtual Android, y luego haga clic en el botón Siguiente.Personalizar Android Studio

En la ventana Configuración del emulador, no cambie nada. Déjelo como está y luego haga clic en el botón “Siguiente”. Personalizar Android Studio

Verifique la configuración.

Personalizar Android Studio

El siguiente cuadro de diálogo completa todo el proceso haciendo clic en el botón de instalación.

Personalizar Android Studio

Personalizar el SDK de Android

Cuando seleccione la configuración, se mostrará el administrador de SDK como se muestra en la pantalla anterior. Esto le permite elegir la configuración del SDK de Android. Haga clic en Mostrar detalles del paquete ubicado en la esquina inferior derecha de la pantalla. De la lista, verifique lo siguiente:

  1. Plataforma 28 del SDK de Android
  2. Imagen del sistema Intel x86 Atom
  3. Imagen del sistema Intel x86 Atom de las API de Google
  4. Imagen del sistema Intel x86 Atom_64 de las API de Google

Haga clic en el botón Aceptar para instalarlos y habrá completado la configuración del SDK de Android.

React Native requiere variables de entorno personalizadas para crear aplicaciones con código nativo. A continuación, personalizaremos las variables de entorno de Android Studio.

3. Establecer la ruta de las variables de entorno

Haga clic con el botón derecho en esta computadora y haga clic en Propiedades, se mostrará la siguiente pantalla. Haga clic en Configuración avanzada del sistema.Establecer la ruta de las variables de entorno

Después de ingresar a la ventana de propiedades del sistema, seleccione la pestaña Avanzado y luego seleccione el botón de variables de entorno en la parte inferior. Luego presione Enter.

Establecer la ruta de las variables de entorno

Después de seleccionar la variable de entorno, vaya al nombre de la variable, ingrese ANDROID_HOME y la ruta del SDK de Android Studio del valor de la variable. Luego, personalice la ruta de la herramienta de la plataforma Android Studio seleccionando la variable de ruta en la variable de usuario para su lista de nombres y moviéndose al cuadro de diálogo de edición.

Ingrese la ruta de la carpeta de herramientas de la plataforma en la ruta del SDK, como C: Users [user name] AppData Local Android Sdk al final de la lista y presione Entrar. Abra un símbolo del sistema e ingrese el siguiente comando:

adb 

Cuando la personalización de la variable de entorno sea exitosa, recibirá el siguiente mensaje:

Android Debug Bridge version 1.0.41 
Version 29.0.1-5644136 
Installed as /Users/Username/Library/Android/sdk/platform-tools/adb 

Instalar React Native CLI

Para instalar React-Native CLI, abra un símbolo del sistema como administrador e ingrese el siguiente comando:

npm install -g react-native-cli 

Instalar React Native CLI

4. Crea una nueva aplicación

Creemos un nuevo proyecto React Native utilizando la CLI nativa de react. Reaccionar aplicación Es el primer proyecto que creamos en React Native.

react-native init reactapp 

Instalar React Native CLI

Ejecuta la aplicación

Después de crear la primera aplicación React, puede ejecutar la aplicación. Abra la aplicación en cualquier IDE de su elección. Aquí estamos usando Visual Studio Code, como se muestra a continuación: Instalar React Native CLISi desea ejecutar su proyecto en un dispositivo Android, abra Android Studio y cree un dispositivo virtual. Cuando su dispositivo virtual esté encendido, use el siguiente comando en el símbolo del sistema de Windows:

Instalar React Native CLI

Cuando termine, verá la aplicación abierta en su dispositivo Android como se muestra a continuación:

Instalar React Native CLI

5. Desinstalar React-Native

La aplicación React Native es un paquete global, diferente de otros marcos. Háganos saber cómo desinstalar React Native de su sistema usando el panel de control. Esta es una guía paso a paso sobre cómo desinstalar React Native:

Para desinstalar React Native del sistema, use el siguiente comando:

npm uninstall -g react-native-cli

Desinstalar React-Native

en conclusión

En este artículo, hemos visto el proceso del sistema para descargar y configurar React-Native en un dispositivo con Windows 10. Además, también discutimos React-Native, su origen, proceso de instalación y posterior proceso de configuración. En resumen, ha aprendido a instalar y configurar los siguientes paquetes:

  1. Instalar chocolate
  2. Instalar Node y JDK8
  3. Instalar Android Studio
  4. Personalizar el SDK de Android
  5. Instalar React Native CLI
  6. Crear una nueva aplicación
  7. Ejecuta la aplicación

También aprendió a crear una aplicación React Native y a usarla en dispositivos Android. Finalmente, también vimos el proceso de desinstalación.

¡alegría! Ha completado este tutorial. Es hora de comenzar a usar React Native y construir su proyecto. ¡Sigue codificando!