Creando tu primera aplicación

Clase 8 de 36 • Curso de React Native 2016

Resumen

Dentro de la carpeta de tu proyecto ejecutamos

react-native init [nombre del proyecto]

Si tienen un error al ejecutar react-native run-ios acerca de permisos sobre unos archivos, ejecuten los comandos:

sudo chown -R $USER ~/.npm
sudo chown -R $USER /usr/local/lib/node_modules

Para más información sobre otros errores que pueden llegar a ocurrir, dirígete a https://facebook.github.io/react-native/docs/getting-started.html

Luis Fernando Bedón

student•

En la documentación oficial, ahora se usa una herramienta llamada EXPO podrian explicar más acerca de esto ?

Simón Ottoniel González Acosta

student•

Creo que es una herramienta para hacer demo de las aplicaciones de react native que desarrollemos a traves de una red inalambrica… hay que averiguar 😃

Edwar Agusto Forero Pineda

student•

Lo que entiendo es que las aplicaciones que se pueden desplegar en expo, son aplicaciones que no tendrán componentes nativos de Android o Aios, lo cual nos libera de trabajar con Android studio o x code.

Aaron Pérez Pereira

student•

Para los que les sale error de licencias al tratar de correr la aplicación en Android les tengo esta solución:

Vayan a la carpeta donde está el SDK. Luego vayan a la carpeta Tools, y luego a la carpeta Bin. Allí dentro, abren el cmd, powershell, linea de comandos etc, y colocan esta instrucción:

./sdkmanager --licenses

Allí les va decir que tienen varias licencias por aceptar. Aprietan la tecla “Y” y luego ENTER

Luego sólo le dan que si a todo (Marcando varias veces Y y luego ENTER hasta que finalice).

Ya listo, vuelven a correr react-native run-android sin problemas 😃

Mario Rodriguez

student•

Sigo aca sin avanzar justo en este punto… a que te refieres con Allí dentro, abren el cmd …?

Aaron Pérez Pereira

student•

Osea, vas a la carpeta donde está el SDK. En mi caso es C:\Android\sdk. Allí dentro vas a la carpeta Tools, luego a la carpeta Bin, y allí dentro abres la consola de comandos. En Windows, aprietas SHIFT+(Click Derecho) y en el menú que se abre (Si tienes windows 10) le das a "Abrir la ventana de PowerShell Aquí). Una vez se te abra la consola de comandos, sigues los pasos que di allá arriba. Saludos

David Camacho

student•

Para los que le sale el siguiente error:

The development server returned response error code: 500 in react native

babel-preset-react-native es el problema, entonces debemos eliminarlo e instalar la version 2.1.0

npm remove babel-preset-react-native

npm add babel-preset-react-native@2.1.0

Nelson Estuardo Rodríguez Matul

student•

Gracias por el aporte 😃

Jhonnatan Cordova

student•

El código que se crea en la carpeta IOS está en ObjetiveC?, como se puede hacer para que el código generado sea SWIFT.

Alejandro Sanabria

student•

Es creando un puente entre código objective c y swift, en la documentación lo explican:

Gladys Yovana Mamani Camaticona

student•

buenos dias… no me genera el index.android y index.ios

Alejandro Sanabria

student•

En las nuevas versiones solo hay un solo index, pero tienes dos apps… osea app.android.js y android.ios.js

Jose Patiño

student•

Alguien sabra porque no me aparece:
index.adroid.js
index.ios.js
En cambio me aparece solo
index.js
Saludos y gracias!!

Carlos Raez

student•

A mi ma pasa exactamente lo mismo si pero si pongo la version que esta en el curos como aprendo lo nuevo???

Erick Polanco

student•

pueden trabajar perfectamente desde el App.js y va a funcionar para las 2 plataformas, en la nueva versión unificaron estos archivos… Saludos

Yafté Roberto Muñoz Lujano

student•

tengo este error

FAILURE: Build failed with an exception.

What went wrong:
Could not determine java version from ‘9.0.1’.
Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output.
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:

¿Alguien sabe como puedo solucionarlo?

Angel Solis

student•

ya somos dos, sigo buscando una solucion pero por ahora nada

Antonio Daniel García Guerrero

student•

Hola, tengo este error y no soy capaz de arreglarlo. Muchas gracias por adelantado.

FAILURE: Build failed with an exception.

* Where:
Build file 'C:\Users\AntonioDaniel\Desktop\Programaci¾n\react-native\thismusic\ThisM
usic\android\app\build.gradle' line: 1

* What went wrong:
A problem occurred evaluating project ':app'.
> Failed to apply plugin [id 'com.android.application']
   > Your project path contains non-ASCII characters. This will most likely cause th
e build to fail on Windows. Please move your project to a different directory. See h
ttp://b.android.com/95744 for details. This warning can be disabled by adding the li
ne 'android.overridePathCheck=true' to gradle.properties file in the project directo
ry.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug opti
on to get more log output.

BUILD FAILED

Total time: 1 mins 22.265 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

Ivan Alvarez Malo L

student•

Quizá es muy tarde para responder, pero puedo ver que el proyecto está en una carpeta con acento “programación” lo que genera confusiones en la compu. te recomienda que lo muevas a una carpeta con un nombre que no contenga ese tipo de caracteres.

Gael Treviño Prieto

student•

Hola
¿Por que no me deja correr el comando react-native init ?
me dice que no lo encuentra
y ya tengo instalado el react-native-cli
???

MacBook-Air-de-Gael:platzi gaeltrevinoprieto$ sudo npm install react-native-cli
/Users/gaeltrevinoprieto
└── react-native-cli@2.0.1 

npm WARN enoent ENOENT: no such file or directory, open '/Users/gaeltrevinoprieto/package.json'
npm WARN gaeltrevinoprieto No description
npm WARN gaeltrevinoprieto No repository field.
npm WARN gaeltrevinoprieto No README data
npm WARN gaeltrevinoprieto No license field.
MacBook-Air-de-Gael:platzi gaeltrevinoprieto$ react-native init PlatziMusic
-bash: react-native: command not found
MacBook-Air-de-Gael:platzi gaeltrevinoprieto$

Gonzalo Aguirre

teacher•

Hola Gael, debes instalar react-native-cli globalmente para que puedas ejecutar el comando desde cualquier directorio

npm install -g react-native-cli

Gael Treviño Prieto

student•

hola!!! ya lo instale!! pero lo tuve que haer con sudo
por q si no me maraca error

aun asi me dice q no encuentra el comando react-native al correrlo en la terminal

Jorge Gomez

student•

Alguien que pueda ayudarme con este error, no abre el proyecto en el emulador.

BUILD FAILED in 1m 6s

at checkExecSyncError (child_process.js:621:11)
at execFileSync (child_process.js:639:15)
at runOnAllDevices (C:\Users\jorge\OneDrive\Escritorio\PlatziMusic\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:94:39)
at processTicksAndRejections (internal/process/task_queues.js:93:5)

Asier Ariztimuño

student•

¿expo.io?

Julio J Yépez

student•

La primera vez que se ejecuta en comando run-android … el CLI descarga la última versión de gradle que es, según Wikipedia:

Gradle es un sistema de automatización de construcción de código abierto que construye sobre los conceptos de Apache Ant y Apache Maven e introduce un lenguaje especifico del dominio (DSL) basado en Groovy en vez de la forma XML utilizada por Apache Maven para declarar la configuración de proyecto.

Y este paso … tarda bastante (sólo la primera vez)

Claudia Luna Vargas

student•

podrías subir tu package json? por favor

Diego Forero

Team Platzi•

En la pestaña de archivos esta un archivo zip con el package.json

EdwinDeLeonG

student•

Hola, mi laptop tiene windows 7 64bit instalado y me sale el error "ERROR watchman was not found in PATH"
He descargado la versión de watchman para windows, la he colocado en un directorio y en las variables de entorno he creado una variable WATCHMAN_HOME con la ubicación del archivo y la he agregado a la variable PATH… Basicamente he hecho todo lo que he encontrado y aun asi me sigue dando el error, ya no encuentro que hacer. Ayuda por favor, si alguien ha configurado su entorno usando Windows, que me diga como le hizo para hacer funcionar watchman y si se puede usar otra herramienta a parte de watchman.

EdwinDeLeonG

student•

Tambien instale watchman via NPM, pero tampoco funciona.

Sacha Lifszyc

teacher•

Instalaste Watchman con brew install watchman?

De todas maneras no se utiliza durante el curso, así que puedes continuar sin utilizarlo.

No dejes de darte una pasada por el sitio de Troubleshooting de Watchman.

Carlos Andrés Millan Satizabal

student•

Ejecuto el comando react-native run-android y me sale el siguiente error:

Could not install the app on the device.
Make sure you have an Android emulator running or a device connected.

Ya tengo instalado Android Studio con los SDK e instalado tambien Android Emulator. También tengo instalado Genymotion y ya configurado, además de virtualbox.

Que puede estar pasando?

Alejandro Sanabria

student•

Que debes tener antes el emulador abierto.

abayuba rodriguez

student•

Buenas Tengo este error estoy intentando abrir el emulador Genymotion
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:

pueden aydarme es mi primer día gracias saludos?

Francisco Ochoa

student•

Al ejecutar el comando react-native run-ios me da el siguiente error :
Print: Entry, “:CFBundleIdentifier”, Does Not Exist
Estoy usando xcode 8.3.3
mac os sierra
react-native-cli 2.0.1

Francisco Ochoa

student•

La solución que encontré es hacer un downgrade a react native 0.44 en el package.json

Matias Niz

student•

Yo borre la carpeta ./cache y reinstale con npm install

ariel ventura

student•

Genial @Gonzalo, hora de picar código 😄

Kenny Chavez

student•

Disculpen, corro el comando react-native run-ios y me aparece este error:

Installing build/Build/Products/Debug-iphonesimulator/PlatziMusic.app
No devices are booted.
Launching org.reactjs.native.example.PlatziMusic
No devices are booted.

Matias Niz

student•

Yo tuve el mismo problema, al final lo solucione indicando un device que no fuera el por defecto, que en mi caso era iphone 6…
Por ejemplo:
sudo react-native run-ios --simulator=“iPhone 5s”

Enova Desarrollo

student•

Si estoy desarrollando para Android
y quiero ver las salidas de console.log en
como le hago para habilitar el depurardor?

Gonzalo Aguirre

teacher•

Necesitas habilitar la opción Debug JS Remotely y luego ver la consola dentro de las Developer Tools del Chrome.

FAILURE: Build failed with an exception.

* Where:
Build file 'C:\Users\AntonioDaniel\Desktop\Programaci¾n\react-native\thismusic\ThisM
usic\android\app\build.gradle' line: 1

* What went wrong:
A problem occurred evaluating project ':app'.
> Failed to apply plugin [id 'com.android.application']
   > Your project path contains non-ASCII characters. This will most likely cause th
e build to fail on Windows. Please move your project to a different directory. See h
ttp://b.android.com/95744 for details. This warning can be disabled by adding the li
ne 'android.overridePathCheck=true' to gradle.properties file in the project directo
ry.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug opti
on to get more log output.

BUILD FAILED

Total time: 1 mins 22.265 secs
Could not install the app on the device, read the error above for details.
Make sure you have an Android emulator running or a device connected and have
set up your Android development environment:
https://facebook.github.io/react-native/docs/android-setup.html

MacBook-Air-de-Gael:platzi gaeltrevinoprieto$ sudo npm install react-native-cli
/Users/gaeltrevinoprieto
└── react-native-cli@2.0.1 

npm WARN enoent ENOENT: no such file or directory, open '/Users/gaeltrevinoprieto/package.json'
npm WARN gaeltrevinoprieto No description
npm WARN gaeltrevinoprieto No repository field.
npm WARN gaeltrevinoprieto No README data
npm WARN gaeltrevinoprieto No license field.
MacBook-Air-de-Gael:platzi gaeltrevinoprieto$ react-native init PlatziMusic
-bash: react-native: command not found
MacBook-Air-de-Gael:platzi gaeltrevinoprieto$

at checkExecSyncError (child_process.js:621:11)
at execFileSync (child_process.js:639:15)
at runOnAllDevices (C:\Users\jorge\OneDrive\Escritorio\PlatziMusic\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:94:39)
at processTicksAndRejections (internal/process/task_queues.js:93:5)

Creando tu primera aplicación

Lanzamiento del Curso

Intro a React Native y a Platzimusic, el proyecto del curso

Requerimientos técnicos del curso

Guía de instalación de React Native

Guía de instalación para desarrollar para Android

Introducción al Desarrollo Mobile

¿De qué se trata este Curso de React Native?

Tres enfoques para desarrollo de aplicaciones móviles

Qué es React Native y sus componentes básicos

Primera App con React Native

Instalación y configuración de entorno

Creando tu primera aplicación

Developer Experience (DX)

Componentes y APIs

Estilos y Layout con Flexbox

PlatziMusic

Armando la ArtistBox

Componentes reutilizables

Contenedores con Scroll

Armando nuestro listado de artistas

Consume datos de la API de last.fm para listar los artistas

Routing y Navegación

Agregando una vista de detalle

Autenticación de usuarios

Agregando login con Facebook para iOS

Agregando botón de login con Facebook para iOS

Agregando botón de login con Facebook para Android

Configurando autenticación con Firebase

Agreguemos las funcionalidades principales a nuestra app: likes y comentarios

Refactor y referencias de Firebase

Agrega la funcionalidad para hacer Like a un artista

Envia comentarios de un artista y almacénalos en Firebase

Lista los comentarios de un artista trayendo los datos desde Firebase

Agrega un avatar de usuario para mostrar en los comentarios

Refinando detalles de la app

Mejorando la UI/UX de PlatziMusic para Android y iOS en cada caso

Agrega recursos de imágenes en la aplicación para la pantalla de login

Agrega un ícono bonito para PlatziMusic

Llevando la app a los Stores

Cómo subir tu aplicación de React Native al Play Store

Cómo subir tu aplicación de React Native al App Store

Conclusiones

Cierre del curso

Desafíos

Desafío 1 - Lista los artistas top de tu país

Desafío 2 - Lista la cantidad precisa de comentarios

Desafío 3 - Comparte un artista en Facebook o Whatsapp