Así que fue una gran introducción a React Native y expo, pero me parece importante que entiendas
con qué estás trabajando antes de comenzar.
Ahora con eso, es hora de comenzar y para esto, visite expo. io. Allí puede hacer clic
en Comenzar y encontrará los pasos iniciales aquí.
Ahora realmente no necesita ese primer paso,
podemos saltar directamente al paso número dos, que es que necesita NodeJS. Ahora necesita NodeJS, que es un tiempo de ejecución de Javascript que le
permite, por ejemplo, crear aplicaciones del lado del servidor con Javascript. No necesita eso porque estamos a punto de
escribir cualquier código NodeJS en este curso, no
es un
curso Node, no
se preocupe, no necesita saber NodeJS pero es un paquete que nos permite ejecutar Javascript en nuestra máquina y, por ejemplo, el
cliente de exposición detrás de escena también se ejecuta en Javascript,
no está totalmente relacionado con React Native,
solo para que esta herramienta funcione correctamente.
También para este comando para instalar la herramienta, npm, ese es el Administrador de paquetes
de nodo y NodeJS también lo pone a disposición.
Entonces, el primer paso es que visites nodejs. org y allí, descargue la
última versión, en mi caso 12. 6 a partir de ahí para comenzar y sea cual sea
su última versión cuando esté viendo eso, simplemente
descargue esa versión, instálela, le brinda un instalador normal que puede seguir haciendo clic en todos estos pasos
allí, nada demasiado sofisticado.
Está disponible para MacOS y Windows y Linux.
Así que simplemente descárguelo aquí, recorra el instalador y una vez que esté instalado, puede continuar con
este tercer paso aquí.
Entonces, con NodeJS instalado, copiemos ese comando aquí y luego abra su terminal normal o en Windows,
su símbolo del sistema y pegue ese comando aquí.
Ahora en Mac y Linux, es posible que deba agregar un sudo delante de esto,
en Windows no será necesario para obtener los permisos correctos.
Así que aquí lo
ingresaré, entonces es posible que se le solicite su contraseña, simplemente ingrésela si lo
está y ahora esto instalará la expo CLI, que es esta herramienta que nos ayuda a crear y
administrar proyectos React Native con la ayuda de expo globalmente en su máquina, para que pueda usarla desde
cualquier lugar
de su máquina, desde cualquier lugar en su terminal.
Esperemos a que termine esta instalación,
puede ignorar cualquier advertencia que pueda estar interponiendo y volveré una vez que
finalice esta instalación.
También puede ignorar tales errores intermedios aquí, por cierto, siempre que el general no se bloquee con
un error, pero al final termina con un
mensaje como este, tuvo éxito.
Entonces, con esto, instalamos Expo CLI, el siguiente paso es crear nuestro proyecto, así que el paso número
cuatro aquí.
Hacemos esto ejecutando expo init y
luego cualquier nombre de proyecto de su elección y para eso, en primer lugar, asegúrese de usar el comando cd para navegar
en la carpeta aquí en su máquina donde desea crear ese proyecto. Así que hice eso aquí, estoy en esa carpeta
y ahora puedo ejecutar expo init y nombraré esta aplicación rn-first-first porque, después de todo,
es nuestra primera aplicación React Native. Simplemente presione enter, ese nombre, por supuesto, depende totalmente
de usted que tiene
aquí y esto creará una nueva carpeta en el lugar donde ejecutó este comando y configurará una
aplicación React Native allí usando expo.
Ahora probablemente se le pregunte qué plantilla desea usar y allí
puede ir con la plantilla en blanco por ahora.
Asegúrate de no elegir el mínimo básico porque sería una configuración sin el entorno de exposición con todas las
características de conveniencia,
así que definitivamente ve con blanco aquí.
Ahora, probablemente se le pedirá que ingrese un nombre para su aplicación y simplemente ingresaré rn-first-app aquí, que al final es
el
nombre que se muestra en el selector de tareas de su aplicación en la pantalla de
inicio y pronto.
Puede dejar la babosa como está y simplemente presionar enter nuevamente, ahora
también estoy usando hilo en mi máquina, que es una alternativa a npm, es posible que no se le pregunte si desea
usar hilo que está totalmente bien,
lo haré también elija no aquí para usar
npm y, por lo tanto, ahora, esto continuará, creará esta carpeta de proyecto, instalará todas las dependencias
necesarias allí como React y React Native y nos dará un proyecto React Native que podemos usar para construir una aplicación
nativa.
Así que esperemos a que esto termine ahora.
Ahora, una vez que terminó, puede ver las siguientes instrucciones aquí. Puede navegar en la carpeta recién creada
con el comando cd y luego allí, simplemente ejecute npm start. Npm start ahora iniciará la herramienta de desarrollo
de expo, las herramientas de desarrollo de expo y una nueva pestaña debería abrirse en su navegador.
Aquí está esa pestaña que se abrió, si tiene algún problema aquí, puede ignorarlo por
ahora, esta es la herramienta de desarrollo de expo o las herramientas de desarrollo de expo como se llama.
Es una ventana que le permite ejecutar su aplicación en diferentes dispositivos conectados o agregar simuladores y le permite en general
administrar partes de su aplicación, puede ver algunos resultados de su aplicación aquí, algunas advertencias que
podría estar recibiendo y esto
es muy conveniente ventana para administrar su aplicación y para ejecutarla. Ahora también asegúrese de que
aquí, en la terminal donde ejecutó npm start, dejará ese proceso en ejecución.
Es posible que vea que no terminó, no ve esa línea de entrada nuevamente donde puede ingresar comandos,
en su lugar aquí, no puede escribir o puede presionar algunos de los accesos directos que ve aquí pero no puede
escribir nuevos comandos
Siempre puede salir de este proceso presionando control yc simultáneamente, pero debe dejar este proceso en funcionamiento
durante todo el tiempo que esté trabajando en su proyecto
y, si ya ha terminado ese día, puede salir y reiniciarlo. al día siguiente porque
este proceso también verá su código y cada vez que cambie algo en su código y
guarde ese cambio, lo guardará automáticamente y lo publicará en su dispositivo conectado.
Pero hablando de eso, conectemos el dispositivo y para eso, la forma más fácil de comenzar es
usar su teléfono iPhone o Android que posea.
Entonces, en mi caso, es un iPhone aquí y aquí está mi teléfono real y estoy en la App Store, ahora está en alemán porque tengo un
teléfono alemán pero esta es la App Store normal. Ahora allí, puede ir
al área de búsqueda y buscar expo. Ahora, una vez que haya hecho eso, debe encontrar ese cliente de exposición
aquí y simplemente puede descargarlo a su dispositivo, es de uso gratuito. Simplemente instálelo en su dispositivo y espere a que termine esta
instalación, por supuesto, y una
vez que haya terminado, puede abrir esto y
ahora con la aplicación expo instalada, no necesita registrarse aquí, en cambio, en Android debería poder para escanear ese código de
barras directamente desde el interior de su aplicación expo. En iOS, simplemente abra la aplicación de la
cámara y luego puede ir también a las herramientas de desarrollo aquí y verá ese código de barras
aquí, simplemente sostenga su cámara en eso en iOS o el escáner de la aplicación expo aquí en Android y se le pedirá si quieres abrir
una aplicación en la expo entonces. Simplemente presione abrir allí y ahora esto
debería abrir su aplicación aquí en el cliente expo que instaló,
nuevamente sin registrarse, simplemente sosteniendo la cámara de su iPhone sobre ese código de barras o en Android haciendo eso directamente
desde el interior de la aplicación expo donde tendrá esa opción para hacerlo.
Así que ahora esto creará el paquete de Javascript como se ve aquí en la parte
inferior o en otras palabras, ahora tomará su aplicación y la compilará básicamente y la preparará y luego la cargará aquí sobre
los servidores de la expo en su aplicación y simplemente puede presionar Lo obtuve aquí en la primera pantalla y luego esta es su
aplicación inicial React Native.
Y ahora veamos el código para esto y veamos cómo podemos cambiar algo en el código para ver
algo diferente aquí en esta pantalla.