HIGH LEVEL OF CODE (HLC)

Curso gratuito de React-Native (básico).

Por: Marvin Israel Alvarenga Mejía

RECOMENDACIONES
 Se recomienda tener una motivación
personal muy fuerte para seguir adelante
con el proyecto o actividad que se desea.
 Tener una noción de JavaScript o React.
 Tener sistema operativo Windows
 En caso que no se tenga la suficiente
memoria RAM para correr “Android
Studio” se recomienda tener un teléfono
con sistema operativo Android en el cual
se puedan instalar las aplicaciones que
se estarán creando.

TEMARIO
Introducción: Se dará una breve reseña de la tecnología implementada.
Requisitos: Un editor de texto, Android Studio, mvn, jdk, crear las variables de
entorno e instalar react-native-cli.
¿Qué es React-Native?: Se hará mención de algunos conceptos básicos que
sirven para comprender el funcionamiento de esta tecnología y se
proporcionaran ejemplos de aplicaciones creadas con esta tecnología.
Instalación de React-Native y lo necesario para su funcionamiento: Se
hará una pequeña reseña de lo necesario para la instalación y correcto
funcionamiento de las tecnologías que utiliza “React-Native”.
Creación, inicialización, estructura del proyecto y código: En esta parte se
explicará cómo crear un nuevo proyecto, su ejecución, estructura del proyecto y
código creado
Maquetación (Joshua dará html5 y css3) y estilo: Teniendo en cuenta la
estructura del código se explicarán algunos complementos que usa React-
Native para elaborar una maquetación de una ventana de login.
Introducción
Como es de esperar con el tiempo la humanidad siempre ha tenido que
evolucionar y adaptarse al medio que la rodea, esto pasa en todas las facetas.
Siendo así surge la importancia de hacer referencia a las tecnologías que están
teniendo gran auge en la actualidad.
Es por eso que hoy le toca el turno a React-Native, pero se preguntaran ¿Qué
es React-Native?
A groso modo se puede destacar que es un framework desarrollado por
Facebook (una extensión de JavaScript conocida como “JSX”) en el cual se
pueden crear aplicaciones móviles multiplataformas (Android e IOS) basándose
en JavaScript y ReactJS.
Dicha tecnología ha sido una de las que ha llegado a posicionarse como una
de muchas tecnologías en la vanguardia ya que es una manera fácil de
reutilizar parte de su código, lo que permite ahorrarse una gran cantidad de
tiempo. Todo esto es debido a su manera de convertir parte de su código
(Componentes) en funciones.
Considerando lo antes dicho “React-Native” es muy utilizado hoy en día en la
parte del diseño de aplicación por lado del “Front-End”.
¿Qué es React-Native?
React-Native es un framework de aplicaciones nativas para el desarrollo de
aplicaciones multiplataformas basado en JavaScript y React, una tecnología
que está en la moda del momento, la cual está revolucionando la el desarrollo
de aplicaciones para teléfonos móviles.
Marcando la innovación ha cambiado mucho en la manera de desarrollar
aplicaciones para móviles, tal es el caso de las aplicaciones “web reponsitive”,
las cuales están programadas de manera que se ajusten al tipo de pantalla del
dispositivo que las visitan, pero, estas aún tiene una desventaja ya que no
permiten tener como tal un acceso directo a una red en específico como lo
podría hacer una aplicación desarrollada para un sistema operativo Andorid o
IOS, lo que implica que no se puede descargar de una tienda como lo es
“PlayStore” o “App Store”, entre otras cosas particulares de una aplicación para
un móvil.
También existen tecnologías que permiten desarrollar aplicaciones parecidas a
las nativas como son las WPA (O su significado en español “Aplicaciones Web
Progresivas”), ya que una de las características que la distingue a grandes
rasgos es la generación de notificaciones como lo hace una aplicación para
móvil, entre otras opciones que estas presentan.
Y por otro lado tenemos las aplicaciones hibridas, las cuales encierran un
conjunto de lenguajes de programación para el desarrollo de sus aplicaciones.
Como ejemplo de esto se tiene Facebook en sus inicios, los cuales emigraron a
las aplicaciones nativas (https://engineering.fb.com/android/react-native-a-year-
in-review/).
Lo bueno de React-Native es que permite compartir fácilmente parte de su
código ya que es reutilizable, esto es una ventaja para personas que quieren
trabajar en equipos pequeños de desarrolladores.
Vale señalar que React-Native no es para desarrollo web, no está orientado
para crear un CRUD, es más para usar el rendimiento de la GPU del dispositivo
(los recursos que este posee como cámaras, linterna, contactos, galería, etc.) o
para realizar algo de alto rendimiento, pero si se encuentran desarrollando
módulos que funcionan en la parte de la web y otras aplicaciones que este
pueda tener. En resumen, se puede decir que es una tecnología que se
encuentra evolucionando constantemente.
Pero ahora surge la interrogante: ¿cuál es el funcionamiento de esta
tecnología? Esto se puede ver en el siguiente diagrama:
 JSX
<Text> Metro Android o
Hola bundler IOS
</Text>
Algunas aplicaciones que usan React-Native:
 Facebook
 WhatsApp
 Netflix
 Instagram
 Walmart

Requisitos
Instalación de react-native y lo necesario para su funcionamiento
 Editor de texto (Se recomienda Visual Studio Code
(https://code.visualstudio.com/)).
 Android Studio (https://developer.android.com/studio)
 nvm (permite manejar las versiones de node
(https://github.com/coreybutler/nvm-windows/releases): al tenerlo
instalado desde el ejecutable se dirige a una terminal (CMD) y se pone
el siguiente comando “nvm install –lts” (instala la versión más sostenible
y la que tiene más soporte).
 jdk (son herramientas de Java tener cuidado donde se instala
(https://www.oracle.com/java/technologies/javase/javase-jdk8-
downloads.html) y sirven para emular con los sistemas de Android).
 Variables de entorno: Sirven para realizar las configuraciones
pertinentes para un buen funcionamiento de la tecnología que se está
usando, para tener una buena configuración de variables de entorno
solo se crean dos, las cuales son ANDROID_HOME y JAVA_HOME,
cada PATH se indica de color rojo para cada variable de entorno
o ANDROID_HOME = /Android/sdk (ruta donde está instalado, esto se
suele ver en Android Studio)
o PATH=% ANDROID_HOME%/emulator
o PATH=% ANDROID_HOME%/tools
o PATH=% ANDROID_HOME%/tolos/bin
o PATH=% ANDROID_HOME%/platform-tools
 o JAVA_HOME=c:/Program Files/Java/jdkversion (en este caso se pega la
ruta que se tenía a la hora que se instaló jdk)
o PATH=%JAVA_HOME% \bin
 Instalar react-native-cli: para instalar react-native-cli se abre una terminal
de Windows (CMD) y se pone el siguiente comando: “npm install -g
react-native-cli” y se presiona la tecla “Enter”

Creación, inicialización, estructura del proyecto y código

Para crear un proyecto es necesario abrir una terminal de Windows (CDM),
dirigirse a la ruta donde está el proyecto y poner el siguiente comando:
“react-native init NOMBRE”
Una vez que termine de crear el proyecto (crear todos los archivos que se
necesitan en el proyecto) en la misma terminal aparecerán las indicaciones y
los comandos necesarios para poder inicializar el proyecto en la plataforma de
su preferencia.
Una vez creado el proyecto en la terminal se dirige a la ruta del proyecto, lo
cual se hace con el siguiente comando:
“cd NOMBRE”

Estando ya en la ruta del proyecto existen diversas maneras en las cuales uno
puede inicializar el proyecto, en caso que uno quiera hacerlo desde un sistema
emulado desde la computadora se pone el comando:
“npx react-native run-android”
Para el caso que no se quiera hacer de esa manera ya que no se dispone con
los recursos necesarios como la suficiente memoria RAM se puede utilizar el
comando:
“react-native run-android”
O
“react-native run-android --no-jetifier”
NOTA: “en caso que no se cuenten con los recursos necesarios en la
computadora se puede cerrar el método bundler que inicia Android Studio”.
Esto se recomienda en caso que se quiera utilizar el teléfono físico para hacer
las pruebas.
Siempre que se inicie un proyecto por primera vez es algo tardado ya que se
instalara la app en nuestro dispositivo y realizara las configuraciones
necesarias.
Una vez ya creado el proyecto este dividido en una estructura de carpetas y
documentos predeterminadas, dicha estructura es:
Carpetas:
 __tests__
 android
 ios
 node_modules
Scripts y documentos de configuración:
 .buckconfig
 .eslintrc.js
 .flowconfig
 .gitattributes
 .gitignore
 .prettierrc.js
 .watchamanconfig
 app.json
 App.js
 babel.config.js
 index.js
 metro.config.js
 package.json
 package-lock.json
La carpeta “__test__” ayuda para crear módulos de test.
La carpeta “android” correspondiente a los módulos nativos de la plataforma
android generalmente no modifican, al no ser que se quiera hacer una
modificación en alguna versión especifica de android.
La carpeta “ios” correspondiente a los módulos nativos de la plataforma ios
generalmente no se modifican, al no ser que se quiera hacer una modificación
en alguna versión especifica de ios.
La carpeta “node_modules” son las librerías y dependencias que se necesitan
para trabajar en el proyecto, si se quisiera instalar una librería se instala en
esta carpeta.
El archivo “.gitignore” hace más fácil los repositorios en la nube.
El archivo “App.js” es el código de la aplicación que muestra en el dispositivo.

Documento App.js
Import React, {Component} from ‘react’;
Import {View, Text, StyleSheet, TouchacleOpacity} from ‘react-native’;

Class NOMBRE extends Component {

render() {
return (
NUESTRO_CODIGO
);
}
}

Const ESTILO = StyleSheet.create({

NUESTRO_CODIGO_DE_ESTILO
});

export default NOMBRE;

Maquetación y estilo
import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  TextInput,
} from 'react-native';

class Hlc extends Component {
  render() {
    return (
      <View style={estilos.contenedor}>
        <View style={estilos.cabeza}>
          <Image source={require('./imagenes/logo.png')} style={estilos.l
ogo} />
        </View>
        <View style={estilos.cuerpo}>
          <Text>Correo</Text>
          <TextInput style={estilos.inpuTex} />
          <Text>Credenciales</Text>
          <TextInput style={estilos.inpuTex} secureTextEntry />
          <TouchableOpacity style={estilos.boton}>
            <Text style={estilos.texBoton}>Login</Text>
          </TouchableOpacity>
        </View>
        <View style={estilos.pie} />
      </View>
    );
  }
}

const estilos = StyleSheet.create({
  contenedor: {
    flex: 1,
    //backgroundColor: 'red',
    flexDirection: 'column',
  },
  cabeza: {
    flex: 1,
    //backgroundColor: 'yellow',
    justifyContent: 'center',
    alignItems: 'center',
  },
  logo: {
    width: 200,
    height: 200,
    borderRadius: 100,
    resizeMode: 'contain',
  },
  cuerpo: {
    flex: 1,
    backgroundColor: 'green',
    justifyContent: 'center',
    alignItems: 'center',
  },
  inpuTex: {
    fontSize: 20,
    width: 250,
    paddingVertical: 5,
    borderWidth: 1,
    borderRadius: 10,
  },
  boton: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'red',
    width: 150,
    height: 25,
    borderRadius: 25,
  },
  texBoton: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'blue',
  },
  pie: {
    flex: 0.4,
  },
});

export default Hlc;
EXTRA (animaciones).
import React, {Component, useState} from 'react';
import {StyleSheet, Animated, View, Text, TouchableOpacity} from 'react-
native';

function HLC() {
  const [largo, setLargo] = useState(new Animated.Value(0));
  const [altura, setAltura] = useState(new Animated.Value(30));

  Animated.timing(largo, {
    toValue: 500,
    duration: 2000, //milisegundos
  }).start();

  return (
    <View style={estilos.contenedor}>
      <View style={estilos.cabeza}>
        <Animated.View
          style={{
            width: largo,
            height: altura,
            backgroundColor: 'blue',
          }}>
          <TouchableOpacity />
        </Animated.View>
      </View>
      <View style={estilos.cuerpo}>
        <Animated.View
          style={{
            width: largo,
            height: altura,
            backgroundColor: 'red',
          }}>
          <TouchableOpacity />
        </Animated.View>
      </View>
    </View>
  );
}
const estilos = StyleSheet.create({
  contenedor: {
    flex: 1,
    //backgroundColor: 'red',
    alignItems: 'center',
    justifyContent: 'center',
  },
  cabeza: {
    flex: 0.5,
    backgroundColor: 'green',
  },
  logo: {
    width: 370,
    height: 30,
    backgroundColor: 'blue',
  },
  cuerpo: {
    flex: 0.5,
    backgroundColor: '#FFFF00',
  },
});

export default HLC;