Curso de React Native CLI

Curso de React Native CLI

Alejandro Sanabria

Alejandro Sanabria

Instalaci贸n React Native CLI en Windows

2/22

Lectura

Bienvenido a la instalaci贸n de React Native para Windows 10.

Antes de empezar debes tener en cuenta que en Windows solo puedes compilar la aplicaci贸n para Android, ya que para poder tener un emulador de un dispositivo iOS solo puedes hacerlo desde una computadora con sistema operativo MacOS, teniendo esto cuenta empecemos.

Lo primero que necesitamos es instalar Node.js, Python 2 y JDK que es el Java SE Development Kit.

Estas dependencias la vamos instalar via Chocolatey un gestor de paquetes para Windows que es muy parecido a Brew de Mac.

Debes tener instalado PowerShell v2+ y aseg煤rarte de abrirlo como administrador.

Ahora con PowerShell abierto corremos el siguiente comando:

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
install-choco.png

Una vez haya terminado la instalaci贸n puedes verificar que qued贸 instalado correctamente corriendo el comando:

choco
choco.png

Una vez tenemos instalado y funcionando choco en PowerShell procederemos a instalar las dependencias con el comando:

Nota: Si ya tienes Node.js o alguna de las dependencias anteriormente instaladas lo puedes eliminar del comando y dejar las que te hagan falta. Pero asegurate de tener node de la versi贸n 10 para arriba y lo mismo con el JDK que sea mayor o igual a la versi贸n 8.

choco install -y nodejs.install python2 openjdk8

Instalar Android Studio:

Vamos a ir a este link: https://developer.android.com/studio/index.html y descargar el instalador, una vez descargado abrimos el instalador y en uno de los pasos nos va a preguntar que items vamos a instalar debemos asegurarnos de que est茅n seleccionados estos:

  • Android SDK
  • Android SDK Platform
  • Android Virtual Device

Una vez instalado Android Studio tenemos que asegurarnos de tener instalado tambi茅n el Android 10 SDK que es un requerimiento de React Native a la hora de compilar 鈥渆sto no quiere decir que nuestra app solo va a funcionar en Android 10 para arriba鈥.

Esto lo comprobar en Preferences 鈫 Appearance & Behavior 鈫 System Settings 鈫 Android SDK y en la pesta帽a SDK Platforms:

Revisamos que est茅 seleccionado en la parte inferior veremos un check box cerca a lo botones de confirmaci贸n que dir谩 Show package Details lo seleccionamos y veremos mas opciones de las cuales tenemos que asegurarnos que est茅n seleccionadas:

Screen Shot 2020-09-11 at 12.30.06 PM.png

Android SDK Platform 29 y Intel x86 Atom_64 System Image o Google APIs Intel x86 Atom System Image

Android_10.png

Ahora, ah铆 mismo dentro de Android SDK pasamos a la pesta帽a SDK Tools y nos aseguraremos que est茅 seleccionado de Android SDK Build-Tools y hacemos lo mismo que en el paso anterior donde seleccionaremos la opci贸n del check box Show package Details donde veremos la lista de versiones y asegurarnos de que la versi贸n 29.0.2 est茅 seleccionado:

build_tools.png

Por 煤ltimo, ya que tengamos todo seleccionado, oprimimos el bot贸n Apply y si algo nos hac铆a falta se instalara.

Configurar ANDROID_HOME environment variable:

React native requiere que tengamos unas variables de entorno para eso vamos a abrir el control panel de Windows 鈫 User Accounts 鈫 User Accounts 鈫 Change my environment variables

luego hacemos click en el New y agregamos ANDROID_HOME

android_home.png

ahora abrimos power shell para verificar que esta variable qued贸 instalada:

Copiamos y pegamos este comando en la consola y lo ejecutamos:

Get-ChildItem -Path Env:\

y nos aseguramos que a sido a帽adida ANDROID_HOME

Ahora si por 煤ltimo agregaremos platform-tools al path:

variables.png

Windows 鈫 User Accounts 鈫 User Accounts 鈫 Change my environment variables y seleccionamos la variable Path click en Edit y click en New y agregamos:

%LOCALAPPDATA%\Android\Sdk\platform-tools

Con todo esto ya configurado podemos continuar con el curso.

Nota: Si siguiendo con estos pasos encontraste alg煤n problema, d茅janoslo saber para entre todos arreglarlo, o si tienes screenshots comp谩rtelos con nosotros. Mil gracias.

Aportes 37

Preguntas 7

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

Nefasto, se supone que pagamos por unos videos para que se mucho m谩s sencillo todo explicado y en lugar me salen con esto, mejor lo hubiera investigado al final de cuentas lo tuve que hacer solo.

No deja links de descarga muy mal

Para poder ejecutar el comando en el power shell se debe ejecutar el programa como administrador

Esta clase deber铆a estar explicada en video, es muy confuso todo para el que arranca de cero en React Native

Por si les pasa como a mi que no encontraba Preferences en Android Studio

Les recomiendo este tutorial, mejor explicado que el de arriba.
https://www.youtube.com/watch?v=t-iKceOBy6A

Pude seguir con 茅xito, algunas recomendaciones:

  • Abran el Windows Powershell en como administrador para correr este comando: choco install -y nodejs.install python2 openjdk8

  • Cuando creen la variable de entorno ANDROID_HOME, pongan su ruta de usuario, en mi caso es 鈥済onza鈥 no 鈥渉ramos鈥, C:\Users\gonza\AppData\Local\Android\Sdk

Buenas noches chicos/as.
Recuerden que usar Chocolatey no es la 煤nica opci贸n para poder instalar las dependencias necesarias y as铆 correr React Native en sus ordenadores.

Les env铆o los enlaces de cada uno de los paquetes necesarios para RN.

Grupo me di de cuenta algo jenial PowerShell esta instalado en los sistemas de windows 10 busquenlo depronto esta instalado por predeterminado
Y no se quemen mas la cabeza

Documentaci贸n completa y oficial!
https://reactnative.dev/docs/environment-setup
Si no encontras la carpeta APPDATA puede que est茅 oculta simplemente. Anda a 鈥渧ista鈥 y dale a "Mostrar carpetas ocultas"
Inicien POWERSHELL en modo administrador. Saludos

驴Por qu茅 debemos instalar Python 2? 驴Cu谩l es la funci贸n espec铆fica que cumple en React Native?
驴Podr铆a instalar Python 3 en su lugar?

mejor es usar expo

no me dio ning煤n error luego de terminar las instrucciones, vamos a ver como me va :3 鈥 sospecho que no pudo ser tan f谩cil jajaja

En esta 鈥渃lase鈥 no se ve nada del 鈥渆ntusiasmo鈥 que apoarentemente corre por las venas de Platzi鈥

por el peso yo modifique la instalaci贸n de las sdk y las pase al disco D, no tengo que ir a buscarlas en ning煤n lugar raro solo los busco en D\android\sdk

Mi consejo es solo usen POWERSHELL, no ocupen la que trae en visual studio, por eso a mi no me corr铆a.
Adem谩s tuve que seguir los pasos que se detallan aqu铆:
https://stackoverflow.com/questions/32634352/react-native-android-build-failed-sdk-location-not-found
Sin duda, esta es de las partes m谩s complejas.

Cuando inicia la PC, quiz谩 hay procesos (resultados de la instalaci贸n de este pack) que se cargan en memoria no-necesarios (mientras no se desarrolle).
Ser铆a bueno saber identificarlos para el kill respectivo.

Al momento de ejecutar el script inicial para instalar chocolatey me cancela la ejecucion instantaneamente y me muestra el siguiente mensaje:

This script contains malicious content and has been blocked by your antivirus software.

Un buen profesor para React Native es Fernando Herrera
Aqui va un playlist que tiene para react native
https://youtu.be/B7iTbTZWM0Q
Saludos

ojala pues cambien eso, expliquen tanto los posibles errores que podrian salir y las posibles solucones y ahi si despues ponernos a nosotros aimvestigar de mas si aun asi no se resuelve sea cual sea el error que nos salga.

hasta el momento no tengo errores debido ala practica que tengo pero si seria una buena recomendacion que actualizaran los cursos, toamndo de base los comentarios, todo para una excelencia academica y de calidad como proete Platzi

valla put mierd
q curso mas malo mucho marketing e fredy

Encontr茅 un tutorial para la instalaci贸n muy bueno, aqu铆 les comparto el link https://www.youtube.com/watch?v=FT4QyQADxgY

Para los que no pudieron instalar en windows, aqu铆 les dejo estos 2 videos que me ayudaron a instalarlo.
JDK | Android Studio
Iniciar Correctamente APP de React-Native

Los dos son sin Expo ya que aqu铆 en el curso creo que no se usa Expo.

Espero les funcione 馃槃

El sdk viene despu茅s de instalar el android studio, e ir a la p谩gina para instalarlo sin la versi贸n studio, no vale la pena, no lo intenten 馃槂

creo que este video les va a servir https://www.youtube.com/watch?v=NdwghbFNITY&ab_channel=ElPariXD , es b谩sicamente todo lo que esta en la documentaci贸n de la clase mostrado paso a paso

En ningun lado dice como instalarlo en WSL2???

No s茅 ustedes yo empece a programar en react native solo estudiando y sin ningun curso y esto me salvo la vida

Hola Platzinautas, para los que esten en Ubuntu, para instalar Android Studio y setear las variables de entorno y demas, les recomiendo este video: Video

Ahora si instalan openjdk8 con chocolatey vendra por defecto OpenJDK 16.0.1
A mi esto me creo problemas a la hora del run en android del proyecto. Segun investigue la solucion es NO instalar openjdk8.
Instalarlo con el siguiente comando:

choco install openjdk --version=15.0.2

Que es a la version a la que esta funcionando!

Vale con una Virtual machine?

驴Puedo tener Expo-cli y aun asi usar React Native- cli鈥 ?

Lo de android studio pide instalar extensiones

No entend铆 la ultima parte de => 鈥淲indows 鈫 User Accounts 鈫 User Accounts 鈫 Change my environment variables y seleccionamos la variable Path click en Edit y click en New y agregamos:鈥

驴Doy click a editar o nueva?

Tengo un Windows, Linux virtualizado y el Windows Subsystem Linux (ubuntu)
Me da la sensaci贸n que al instalar recargar茅 el consumo de RAM de mi WIN (mientras no use react-native)
Pienso instalar todo el pack en el WSL y usar el Visual Code desde windows (ser谩 factible?).

Hola tengo algunos problemas ya tengo todo configurado pero me aparece estos errores.
Podrian ayudarme por favor鈥

error Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`.

 Task :app:installDebug FAILED

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.
Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

llegue hasta la parte de configurar ANDROID_HOME en change my enviroment variables y me estanque ahi鈥 como se cual directorio es el correcto??? tengo varias capretas android sdk 鈥 ayuda por favor

Para poder ejecutar scripts en powershell ejecuten esto:

 Set-ExecutionPolicy AllSigned

Ac谩 esta mejor explicado. Link de referencia quiz谩 este obsoleto, no s茅. espero ayude.

https://www.tutorialspoint.com/react_native/react_native_environment_setup.htm