React Native, Auth0 & Firebase, Tutorial (4/8) — Carpetas y nuevos componentes

(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. (Concretamente en la carpeta ios existe un proyecto de Xcode, así como en la carpeta android un proyecto Java).

Crearemos algunas carpetas para ordenar nuestro proyecto y agregar nuestros archivos, con la siguiente estructura.

|-ios
|-android
|-src
   |-components
   |-containers
   |-layouts

Pequeña explicación de las carpetas:

Components — Contiene todos los componentes reutilizables y visuales que usaremos en nuestra aplicación (Botónes, imagen de perfil, menues laterales, etc).

Containers — Componentes que contengan lógica.

Layouts — Componentes que definan la estructura de la vista que queramos visualizar, puedes considerarlos como las “Rutas” de la aplicación. (La pantalla de configuración, perfil del usuario, login, etc)

Cada una de estas carpetas contienen componentes de React que podemos utilizar.

La idea de un proyecto de React (A modo bastante resumido) es trabajar con componentes que se generen de otros componentes, que se generen de otros componentes, que se generen de otr… bueno, entienden la idea.

Lo que haremos nosotros en nuestro proyecto es: Cargar un Layout (un Componente que define una ruta), con uno o más Containers (un componente que realiza alguna lógica), y que puede estar compuesto por uno o más Components (un componente que solo interpreta información y dibuja elementos).

Una vista de nuestra app podía ser así por ejemplo:

|-Layout
   |-Component
   |-Container
      |-Component
      |-Component
          |-Component
          |-Component
   |-Container
      |-Component
      |-Component
      |-Component

Huh?

Ok, quizás se escucha complejo, pero no se preocupen, ya hará sentido más adelante :)
Si ya tienes tus carpetas creadas pasemos a migrar nuestro componente desde index.io.js a su propio archivo.

Migrando nuestro Componente Login

Para migrar nuestro componente “Login” es necesario tener primeroel archivo que lo contendrá. Crea el archivo “Login.js” dentro de la carpeta “components” con este contenido:

import React, { Component } from ‘react’;
import {
  StyleSheet,
  Text,
  View,
  TextInput,
} from ‘react-native’;
export default React.createClass({
  getInitialState: function() {
    return {
      text: ‘’,
      password: ‘’,
    };
  },
render() {
    return (
      <View style={styles.container}>
        <Text>
          Usuario
        </Text>
        <TextInput
          style={styles.textInput}
          onChangeText={(text) => this.setState({text})}
          value={this.state.text}
        />
        <Text>
           Contraseña
        </Text>
        <dpkg: command not found
           secureTextEntry
           style={styles.textInput}
           onChangeText={(password) => this.setState({password})}
           value={this.state.password}
        />
        <TouchableHighlight
           onPress={() => {
             alert(JSON.stringify(this.state))
           }}
        >
          <Text>
            Submit!
          </Text>
        </TouchableHighlight>
      </View>
    );
  }
})
const styles = StyleSheet.create({
  container: { 
    flex: 1, 
    justifyContent: ‘center’,
    alignItems: ‘center’,
    backgroundColor: ‘#F5FCFF’,
  },
  textInput: {
    height: 40,
    width: 300,
    borderWidth: 1,
    alignSelf: 'center',
  }
});

Removimos el estilo “inline” que tenían los componentes “TextInput” y los agregamos como parte del constructor de estilos, así queda más ordenado y no repetimos código :)

textInput: {
  height: 40,
  width: 300,
  borderWidth: 1 
}

Osom! Tenemos nuestro componente “Login” separado, pero no lo estamos visualizando, para eso, es necesario que lo traigamos o “importemos” a nuestro “componente principal”.

Abre el archivo “index.io.js” e importa el componente “Login” agregando la siguiente linea bajo el resto de los imports:

import Login from ‘./src/components/Login’;

Ahora que ya tenemos el componente importado, nos falta solo “dibujarlo”, o hacerlo visible.

Cambia lo que retorna el componente en index.ios.js, en su función render, por el componente Login.

class reactnativeauth0tutorial extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Login/>
      </View>
    );
  }
}

Deberías ver los cambios en el emulador, caso contrario es posible que React Native no considere las nuevas carpetas y archivos creados, por lo que si reinicias el Emulador, todo debería funcionar sin problemas.

Tu archivo index.ios.js debería quedar algo así… salvo por los nombres en negrita (Después de remover los import y estilos innecesarios)

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from ‘react’;
import {
  AppRegistry,
  StyleSheet,
} from ‘react-native’;
import Login from ‘./src/components/Login’;
class reactnativeauth0tutorial extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Login/>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: ‘center’,
    alignItems: ‘center’,
    backgroundColor: ‘#F5FCFF’,
  },
});
AppRegistry.registerComponent(‘reactnativeauth0tutorial’, () => reactnativeauth0tutorial);

Dashboard.

Vamos a crear un componente “dashboard” que será el componente que veremos cuando el usuario esté logueado.
Crea un archivo Dashboard.js en la carpeta “components” con el siguiente contenido.

import React, { Component } from ‘react’;
import {
  Text,
  View,
  StyleSheet,
} from ‘react-native’;
export default React.createClass({
  render() {
    return (
      <View style={styles.container}>
        <Text>
          Hola!
        </Text>
        <Text>
          Este será nuestro dashboard
        </Text>
      </View>
    );
  }
})
const styles = StyleSheet.create({
  container: { 
    flex: 1, 
    justifyContent: ‘center’,
    alignItems: ‘center’,
    backgroundColor: ‘#F5FCFF’,
  },
});

Puedes importarlo y probarlo en tu archivo index.ios.js, se verá algo como esto:

No es realmente un Dashboard… pero para allá vamos :)

Hermoso, no?
Con esto termina esta parte 4 del tutorial, ahora nos queda ver como definimos “rutas”, y transiciones de una “pantalla” a otra, antes de entrar de lleno a FireBase y Auth0.

Si tienes cualquier otra duda o consulta, recuerda que siempre puedes hacer preguntas en los comentarios, o en nuestro slack de Noders.

Si aun no tienes acceso, puedes pedir tu invitación acá https://fforres.typeform.com/to/z2Rj7z

Nos vemos en el capítulo 5!

Capítulo 5 en proceso

Si quieres revisar el código fuente para este post, acá → https://github.com/fforres/react-native-auth-0-tutorial/tree/4_folders

Capítulos anteriores:

Capítulo 1 — Introducción
Capítulo 2 — Configurando el entorno
Capítulo 3 — Componente Login