Instalación y configuración de entorno

Clase 7 de 36 • Curso de React Native 2016

Resumen

Necesitamos:

Node y NPM
Los editores nativos Android Studio y Xcode

Para instalar React native ejecutamos

npm install -g react-native-cli

Camilo Serrato

student•

Qué diferencia hay entre react-native-cli y create-react-native-app ??

Carlos David Ramírez Gómez

student•

react-native-cli, permite crear las aplicaciones y renderizarlas de manera nativa, create-react-native-app las crea pero las renderiza de manera hibrida

Enova Desarrollo

student•

npm install -g react-native-cli …es para instalar
pero si ya tengo react-native-cli en una versión vieja, como sería el comando para actualizar ese paquete de react-native-cli ?

Sergio Daniel Xalambrí

student•

npm up -g react-native-cli

javier alejandro elias ballada

student•

npm install -g react-native-cli

con eso creo que tambien se puede actualizar paquete.

Ramon Magaña Carrillo

student•

En resumen lo que se necesita

Juan Esteban Angulo Uribe

student•

Para los que usamos Visual Studio Android Emulator:

Enova Desarrollo

student•

desde la terminal cuando ejecuto el comando:
react-native run-android

el final me muestra lo siguiente:

BUILD SUCCESSFUL

Total time: 2 mins 8.278 secs

This build could be faster, please consider using the Gradle Daemon:
Starting the app on emulator-5554 (/home/oem/Android/Sdk/platform-tools/adb -s emulator-5554 shell am start -n com.androidhem/.MainActivity)…
adb server version (32) doesn’t match this client (36); killing…

daemon started successfully *
Starting: Intent { cmp=com.androidhem/.MainActivity }

Que significa lo que el texto que esta resaltado en Negrita?

OSCAR NUNEZ

student•

A mi me sucedia lo mismo, instala la version 36 de adb.
Para ver la version de abd escribe “adb version” en la consola, seguramente te saldra la version 1.0.32; debes actualizarla a 1.0.36.

Alexander Martinez

student•

Hola como están, yo estoy teniendo problemas para conectar el emulador de android con react native, sera que me pueden ayudar.

Carlos Sampol

Team Platzi•

¿ Podrías darme detalles del problema que tienes ?

¿ Que SO tienes ? ¿ Algún error especifico?

Alexander Martinez

student•

El problema que tengo es que aunque tengo el emulador de android studio corriendo, cuando ejecuto el comando react-native run-android me da un error de que no se pudo instalar la aplicación y me pide que verifique que tenga el emulador corriendo o un dispositivo conectado. Estuve planteando mi problema en un foro de react native y me sugirieron que borrara la carpeta AndroidStudioProjects\MyApplication\app\build y corriera de nuevo el emulador, pero sigo igual, también verifique las variables de entorno y están como lo indica la guía, (No se si tenga algo que ver que el Metro Bundler corre por el puerto 8081 y cuando ejecuto adb devices me dice que el emulador esta en el puerto 5555.)

Nota; tengo Windows 7

Espero puedas ayudarme muchas gracias.

Enova Desarrollo

student•

Cuando le doy el comando:
react-native init MiProyecto
entre otras cosas me muestra algo como esto:
Consider installing yarn to make this faster: https://.com

Recomiendan usar yarnpkg ?

Gonzalo Aguirre

teacher•

Si, es recomendable tenerlo instalado. Es similar a npm pero con algunas mejoras (sobre todo en caché) que lo hacen más rápido.

React Native va a usarlo cada vez que ejecutes
react-native init.

Pablo Suarez

student•

Buenas noches, React Native vs Android studio, cual consume menos recursos de maquina y cual es más rápido a la hora de compilar la aplicación?

Gonzalo Aguirre

teacher•

Hola Pablo,

Antes que nada, Android Studio y React Native pueden usarse en conjunto, no son competencia.

Claramente el Android Studio es más pesado que un comando de consola (como en el caso de React Native).

Sin embargo, a la hora de construir la aplicación ambos usan gradle y el proceso es el mismo por lo que los tiempos no deberían ser muy distintos.

Usuario anónimo

user•

¿Importa si he utilizado create-react-native-app en lugar de react-native-cli para seguir el resto del curso?

David Camacho

student•

create-react-native-app es la forma más fácil de comenzar a construir una app en React Native. Podrá iniciar un proyecto sin instalar ni configurar ninguna herramienta para compilar código nativo…

Todo depende de tus necesidades.

Jose Manuel Carmona Rivas

student•

tengo linux mint y hago todo lo que dice pero aun asi no puedo ejecutar esto me aparece en mi terminal

********This build could be faster, please consider using the Gradle Daemon:
ADB server didn’t ACK

failed to start daemon *
error:
Starting the app (adb shell am start -n com.platzimusic/com.platzimusic.MainActivity…
adb server is out of date. killing…
daemon started successfully *
error: no devices/emulators found********

espero que me puedan ayudar ya estoy desesperado.
Gracias

Diego Forero

Team Platzi•

Intenta correr el comando con sudo, al parecer es problema de permisos.

Jose Manuel Carmona Rivas

student•

lo corro con sudo y eso me sale

Izael Ruelas Garcia

student•

¿Cómo puedo instalar una versión anterior de React Native con npm?

Diego Forero

Team Platzi•

La sintaxis es

npm install <paquete>@<version>

Fernando Lucena Calixto

student•

alguien sabe a que se debe el siguiente error

Print: Entry, “:CFBundleIdentifier”, Does Not Exist

Grupo Creativo

student•

¿Por qué utilizar NPM en lugar de YARN?

Diego Forero

Team Platzi•

NPM es el gestor original de paquetes de Node, en la versión 5 de npm que se instala junto con node 8, el rendimiento es similar por no decir igual a Yarn.

En la versión 5 también ya crea el archivo .lock que permite optimizar la descarga e instalación de paquetes.

David Toca

student•

Es tema de gustos, yo personalmente prefiero npm porque la comunidad que esta detras de ella me da mas confianza, ademas con las ultimas actualizaciones la parte de cache y de mantener la misma version de los paquetes con el npm lock ya se esta poniendo al dia con respecto a yarn.

Jeison Rodriguez

student•

Buen día,
estoy realizando la instalación de acuerdo a lo indicado en la pagina de react Native y cuando ejecuto la siguiente linea npm install -g react-native-cli me sale lo siguiente:

npm WARN npm npm does not support Node.js v9.0.0
npm WARN npm You should probably upgrade to a newer version of node as we
npm WARN npm can’t make any promises that npm will work with this version.
npm WARN npm Supported releases of Node.js are the latest release of 4, 6, 7, 8.

npm WARN npm You can find the latest version at
C:\Program Files\nodejs\node.exe: src\node_zlib.cc:430: Assertion `args.Length()
== 7 && “init(windowBits, level, memLevel, strategy, writeResult, writeCallback
,” " dictionary)"’ failed.

La versión del node.js que descargue es la que esta en la pagina y no encuentro como la node.js v8.
me pueden ayudar por favor.

Diego Forero

Team Platzi•

Prueba a bajarte la versión 6.11.5 Qué era la lts hasta antes de ayer

Julio J Yépez

student•

CLI = command line interface … interfaz de línea de comando … es una serie de comandos (instrucciones, programas, scripts, etc.) que se instalan, para estar disponibles y ser ejecutados en la terminal del sistema (command / Terminal)

Joffre Veloz

student•

No puedo usar el comando es la consola de windows.
Como lo instalo?

Julio J Yépez

student•

Les comparto un artículo en Medium con la Guía de instalación de watchman en Linux

Julio J Yépez

student•

Probada …

Instalación y configuración de entorno

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