It’s a beginner-focused explanation, but that’s just my writing style, in no way i’m trying to be condescending. :-)

(Versión en español en breve!)

Let’s dig a bit on protoype and inheritance in JS!

First we create a “Dog” function.

And we add a “Bark” function to our recently created “Dog” function

Now we are going to create “bailey”, our lovely dog friend.

BTW: Got the name from here http://dogtime.com/top-100-dog-names

We’ve only known each other for 8 lines of code, but i already like Bailey, it’s awesome.

Now, let’s make Bailey bark.
Copy and paste the code up there (dog3.js) …


En el capitulo anterior ya implementamos un login… bueno, realmente no, lo que hicimos fue crear un formulario con una validación bastante insegura.
Pero no se preocupen, recuerdan que algunos capítulos atrás hablamos sobre Auth0? En este post revisaremos como implementarlo en nuestra app, y así cambiar nuestra implementación anterior por el servicio de autenticación que ofrece Auth0.

Vuelta a la terminal →npm install.

Implementar el sistema de autenticación de Auth0, (AKA: Lock) solía ser un poco engorroso (Era necesario instalar paquetes de npm, mover algunas carpetas, modificar tus proyectos iOS y Android, trabajar con cocoapods en el caso de iOS, etc). …


(Si te perdiste el capítulo 4 de este tutorial, puedes encontrarlo en este link)

Parte 5 de 8!
En los capítulos anteriores, creamos nuestro proyecto de RN, definimos nuestra estructura de carpeta, creamos un par de componentes, y estamos listos para aprender como funciona el “Navigator” de React Native y movernos entre Rutas.

Navigator

“Navigator” es un componente oficial de React Native que nos permite movernos entre las rutas, o “Escenas” de una aplicación, para lograr esto, vamos a cambiar nuestro componente en el archivo “index.io.js” por lo siguiente:

<View style={styles.container}>
<Navigator
initialRoute={{ name: 'Login' }}
style={styles.nav}
renderScene={ this.renderScene

(Si te perdiste el capítulo 3 de este tutorial, puedes encontrarlo en este link)

Continuamos con el tutorial! Terminamos el capítulo anterior con nuestro nuestro “componente login” creado y funcionando, pero… ¿Que tal si queremos agregar un nuevo componente? o ¿Reutilizar el componente en otra pantalla? ¿Cómo agregamos otra pantalla?

Primero lo primero, vamos a definir una estructura de carpetas para ordenar un poco el proyecto y nuestros componentes, eso nos ayudará a responder un poco las preguntas de arriba.

Carpetas (…Carpetas y más carpetas)

Actualmente React Native provee de una serie de archivos y carpetas en un proyecto default, con las carpetas ios y android conteniendo los archivos necesarios para correr una aplicación de ambos S.O.


Vimos en el post anterior ya sobre el entorno para desarrollar, y como React Native nos entrega una experiencia de desarrollo mucho mejor a la del desarrollo nativo para iOS y Android, así que manos a la obra!

Componente Login

El componente “Login” es el que permitirá que nuestros usuarios ingresen a nuestro sistema ingresando su nombre de usuario y password. Para poder visualizarlo, en el archivo index.ios.js, reemplaza el contenido del return del componente, por:

<View style={styles.container}>
<Text>
Usuario
</Text>
<TextInput
style={{
height: 40,
borderWidth: 1
}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
<Text>
Contraseña
</Text>
<TextInput
secureTextEntry
style={{
height: 40,
borderWidth: 1
}}
onChangeText={(password) => this.setState({password})}
value={this.state.password} …

Que tal JavaEscriptos!
En este post daremos los primeros pasos con React Native, veremos como configurar el entorno, paquetes requeridos, como montar un proyecto de React Native, y jugar un poco con el código.
(Si quieres conocer la parte anterior de este tutorial, puedes verlo en el siguiente link)

Entonces, ya que conocemos lo que haremos, pongamos manos a la obra!

Instalación

Solo un par de requerimientos previos:

  • NodeJS v6.x.x y NPM 3.x.x
  • Editor preferido (Vim, Sublime, notepad++, yo personalmente uso Atom)

Comenzaremos iniciando nuestro proyecto de React Nativo, para eso es necesario instalar React Nativo entre algunas otras cosas, puedes seguir este pequeño tutorial en el sitio de Facebook (https://facebook.github.io/react-native/docs/getting-started.html#content) …


Disclaimer:
Este post (El primero del set) NO contiene código, es solo para explicar las motivaciones que me llevaron a realizar este tutorial, a modo de introducción.
Si quieres comenzar el tutorial directamente, puedes ir al link al final del post.

Hola JavaEscriptos!

Llevo un tiempo jugando con react nativo, react, redux y sus “no tan pequeños” y cambiantes ecosistemas.

Estuve hace algunos meses realizando algunos proyectos con react nativo, como booking y venta de entradas, Podcasts, POC (Proof of concept) para un par de proyectos en mi trabajo en Groupon, y algunas startups, y en una de aquellas batallas por integrar nuevas librerías y servicios, preferí no desarrollar el sistema de usuarios y usar auth0 como nuestro servicio de autenticación. …

About

Felipe Andrés Torres Sepu

JS Engineer by choice, Educator at heart. I co-run @javascriptChile and @Noders — Make Development Great Again

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store