info.txt

*******************************************************************************************************************************************

Para crear una app de react con typescript usamos el siguiente comando:

npx create-react-app my-app --template typescript

(npx create-react-app): es para crear la app de react.
(my-app): es el nombre de nuestra app de react.
(--template typescript): es para que nuestra app de react la trabajemos con typescript.

Una vez creamos la app de react en algun repositorio debemos iniciarla, para hacer esto debemos movernos
a la carpeta de la app y luego debemos usar el siguiente comando:

npm start

(npm start): es un comando que inicia nuestra app en el navegador, nos crea un servidor local para ver los
cambios que le vamos haciendo a nuestra app de react.

En este curso vamos a trabajar con yarn en vez de npm, el comando para añadir los axios con npm es el siguiente:

npm i axios (NOTA: no vamos a usar este comando)

Antes de usar el siguiente comando debemos instalar yarn si no lo tenemos para esto usamos el siguiente comando:

npm install yarn -g

asi que una vez instalado yarn usamos el siguiente comando para agregar los axios con yarn en nuestro proyecto:

yarn add axios

*******************************************************************************************************************************************

Para las instalaciones necesarias vamos a ir a la siguiente pagina:

https://reactnative.dev/docs/environment-setup

y vamos a seleccionar lo que dice React Native CLI Quickstart, seleccionamos Windows y Android
a continuacion abrimos la powershell como administrador.

instalamos Chocolatey: https://chocolatey.org

por si se lo preguntan chocolatey es un gestor de paquetes como npm, yarn, etc..

le damos click en install now, si no han abierto la powershell haganlo ahora y abranlo como administrador.

una vez abierto usamos el siguiente comando y le damos a enter.

Get-ExecutionPolicy

si dice Restricted vamos a tener que usar el siguiente comando:

Set-ExecutionPolicy AllSigned

luego volvemos a ejecutar Get-ExecutionPolicy

si en dado caso no dijera AllSigned y dijera otra cosa deben ejecutar el siguiente comando (opcional):

Set-ExecutionPolicy Bypass -Scope Process

Una vez terminado copiamos la siguiente linea y la pagamos en el powershell para instalar el gestor de paquetes chocolatey.

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

una vez terminada la descarga ejecutamos la siguiente linea de comandos:

choco install -y nodejs.install openjdk8

una vez instalado debemos abrir android studio para hacer unas configuraciones.

en la app de android studio le damos click en configuracion y kle damos click en SDK Manager, seleccionamos la version de android mas
reciente en mi caso seleccione Android 11.0 (R) que es la que está por defecto, aparte debemos seleccionar la opcion que dice
Show Package Details, tenemos que tener seleccionada la SDK correspondiente se recomienda la 29 pero en mi caso tengo la 30, tambien
tenemos que tener seleccionado el Intel x86 Atom_64 System Image o el Google APIs Intel x86 Atom System Image y yo tengo la segunda opcion
en mi caso y la que diga Atom_64.

una vez terminado le damos click en apply, le damos click a ok, aceptamos, le damos en next y esperamos a que se descargue y le damos click
en finish. Ahora vamos a ir a SDK Tools que está al lado de SDK Platform y nos aseguramos de seleccionar Show Package Details, expandimos
la que dice Android SDK Build-Tools, en mi caso selecciono la version 30.0.3 y le damos click en ok y si instalamos otra version le damos
en apply.

una vez terminado salimos y ahora nos toca configurar el ANDROID_HOME para esto debemos abrir el panel de control, vamos a las cuentas de
usuario, volvemos y le damos a cuentas de usuario, buscamos cambiar las variables de entorno, hacemos click en nuevo, en el nombre debemos
poner ANDROID_HOME y para el valor, vamos a abrir el explorador de Windows, vamos al disco local C, Users, tuusuario, AppData, Local,
Android y por último Sdk, copiamos la ruta y ese es el valor que vamos a poner en la variable de entorno ANDROID_HOME, le damos click en 
aceptar y aceptar, abrimos el powershell y ponemos el siguiente comando:

Get-ChildItem -Path Env:\

le damos click en enter, aqui debemos verificar si sale la que se llama ANDROID_HOME, que por lo general está arriba en el 2do puesto, con
su respectiva ruta o valor.

ahora debemos agregar el platform-tools path a las variables de entorno en el panerl de control, una vez dentro de las variables de entorno
seleccioname la que dice path y le damos click en editar, creamos una nueva pegamos la ruta C:\Users\randy\AppData\Local\Android\Sdk que es
la misma de ANDROID_HOME, le damos click en aceptar y luego aceptar y ya vamos a estar listos para trabajar.

Ahora nos vamos a crear un emulador virtual, primero debemos ir a adroid studio y le damos click en configuracion, luego a ADV Manager y
pueda ser que ya haya un dispositivo creado, si queremos podemos usar ese dispositivo virtual y no tenemos que crear ninguno nuevo, en mi
caso voy a crear uno nuevo, para eso le damos click en create virtual device, aqui aparecera una lista de dispositivos, en mi caso voy a 
seleccionar un pixel 4 xl, le damos click en next, seleccionamos la version de android en mi caso usare la version R con la version de 
Android 11.0, ustedes pueden descargar la que quieran, le damos click en next, le van a poner un nombre, en mi caso lo dejare asi como 
esta, en la parte que dice emulated performance, en graphics quitamos automatico y ponemos por hardware, en el apartado de show advanced
settings podemos ponerle mas RAM, en mi caso le puse 4GB de RAM, una vez terminemos le damos click en finish y listo ya nos habrá creado
el emulador, para ponerlo en accion le damos click en el icono de play, si nos pide que instalemos HAXM lo hacemos, si nos da problemas
les dejare un link a un video para que lo instalen manualmente:

https://www.youtube.com/watch?v=aVLFMqIHccQ

una vez instalado el HAXM solo tienen que ir a android studio, configuracion, AVD Manager y le dan al icono de play del dispositivo
virtual que ustedes crearon, ahi les va a iniciar, ahora debemos copiar el siguiente comando:

npx react-native init AwesomeTSProject --template react-native-template-typescript

para que nos cree el proyecto de React Native con TypeScript, en dado caso de que queramos el proyecto normal de React Native con 
Javascript debemos usar el siguiente comando:

npx react-native init AwesomeProject

una vez copiamos el comando que vayamos a usar abrimos el powershell (no tiene que ser administrador), en mi caso usare el comando de 
arriba porque voy a usar React Native con TypeScript, cuando peguemos el comando y le demos en anter debemos decirle que si para que la
instalacion pueda seguir.

una vez se crea la carpeta podemos abrir visual studio code, y arrastramos la carpeta de React Native que se creo cuando usamos el comando
que en mi caso se llama AwesomeTSProject.

para echar a andar la aplicacion debemos hacer lo siguiente: abrimos la powershell (no tiene que ser administrador), una vez abierta
debemos localizarnos en la carpeta de nuestro proyecto AwesomeProject y ahora debemos usar el siguiente comando para iniciar la app:

npx react-native run-android

este comando en dado caso que no tengamos el emulador abierto nos lo va a abrir, nos va a preguntar que si queremos darle permiso a node
o a metro, en dado caso le deben dar permiso, metro es un webpack para la aplicacion de react, la primera vez que se ejecuta puede tardar
un tiempo, esto depende de la velocidad del procesador, de la computadora en general.

una vez acaba la carga nos abrira una especia de app en el emulador (NOTA: no cerrar el powershell, si lo cierras vas a tener que ejecutar
de nuevo el comando npx react-native run-android), un comando util en metro es presionar la tecla R para refrescar la app esto sirve para
que todos los ultimos cambios y actualizar el estado de la aplicacion.

si quisieras cambiar algo de la app entonces tendría que hacerse en visual studio code, justamente en el App.tsx, en mi caso lo abrire y
borraré todo lo que hay escrito y uso el snippet rafc para crear la estructura y ahí ponemos todo nuestro codigo.

para arreglar el error por si no se ve nuestra app debemos ir al archivo index.js y poner entre {} la importacion de App 

import App from './App';

ahora se verá así:

import {App} from './App';

el error pasa porque en el index.js se esta buscando el App como la exportacion como defecto y lo estamos haciendo como una exportacion 
con nombre, si hacemos esto y guardamos los cambios y vamos al emulador veremos que ya nos sale el contenido de nuestra app.

si queremos dejarlo como estaba entonces solo tenemos que exportar el app por defecto en el archivo App.tsx ejemplo:

asi se ve antes de cambiarlo:

// Importamos React //
import React from 'react';

// Importamos View, Text de React Native //
import { Text, View } from 'react-native';

export const App = () => {
  return (

    // En React Native no se usa el div pero si se usa el View //
    <View>
      
      {/* Text es para poner texto en nuestra aplicación */}
      <Text>Hola Mundo</Text>

    </View>

  )
}

despues de cambiarlo se veria asi:

// Importamos React //
import React from 'react';

// Importamos View, Text de React Native //
import { Text, View } from 'react-native';

const App = () => {
  return (

    // En React Native no se usa el div pero si se usa el View //
    <View>
      
      {/* Text es para poner texto en nuestra aplicación */}
      <Text>Hola Mundo</Text>

    </View>

  )
}

export default App;

para hacer pruebas en nuestro dispositivo android físico y no en el emulador debemos activar el USB Debugging, esto es obligatorio si
queremos hacer pruebas fisicamente conectado por USB a nuestro teléfono, esta opcion la activamos en las opciones de developer de nuestro
telefono, en mi caso tengo un Samsung Galaxy S8 para activar estas opciones tengo que ir a ajustes, Acerca del teléfono, Información del
software y en la opcion que dice Número de compilación presionar varias veces hasta que aparezca en pantalla que se habilitaron las
Opciones de desarrollador, vamos allá y activamos el USB Debugging o Depuración por USB en español.

Conectamos el celular con un USB al PC, abrimos la powershell en nuestra pc (no tiene que ser administrador) pero antes de ingresar los
comandos para correr la app en nuestro dispositivo fisico tenemos que hacer unas configuraciones, vamos al panel de control, cuentas de
usuario, cuentas de usuario, cambiar variables de entorno, ahí podríamos ver el ANDROID_HOME, copiamos el url o valor de ANDROID_HOME,
ahora seleccionamos el path y editamos, en el explorador de archivos de windows pegamos la url y tenemos que dirigirnos a platform-tools
copiamos ese path osea C:\Users\randy\AppData\Local\Android\Sdk\platform-tools este y ahora en las variables de entorno le damos en nuevo
y pegamos ese path que copiamos, aceptar y aceptar, ahora si, en el powershell vamos a poner el siguiente comando:

adb devices

una vez le demos a enter nos va a enseñar el dispositivo físico que tenemos conectado, entonces debemos movernos a la carpeta de la app
abrimos android studio y iniciamos el emulador y ejecutamos en la terminal.

npx react-native run-android 

y esperamos a que se cargue la aplicacion y listo ahora podremos correr la app en nuestro dispositivo fisico.

*******************************************************************************************************************************************

para iniciar una app con un dispositivo IOS usamos el comando 

npx react-native run-ios

si por alguna razón nos da error a la hora de ejecutar ese comando entonces debemos hacer lo siguiente: en en proyecto hay un archivo 
llamado podfile, vamos a entrar, debemos buscar las siguientes lineas de comando:

use_flipper!()

post_install do |installer|
  react_native_post_install(installer)
end

una vez las encontremos la vamos a comentar, una vez comentada en la terminal vamos a usar el siguiente comando dentro de nuestr app:

npx pod-install

este comando va a leer ese archivo podfile y va a quitar todo lo que ya removí y listo ya pueden usar el comando:

npx react-native run-ios

*******************************************************************************************************************************************

los fundamentos del diseño de react son:

Box Object Model: alto, ancho, margen, padding, borde.

Position: absoluta, relativa, top, left, right, bottom.

Flex Box: direccion, ubicacion, alineamiento, estirar, encoger, proporciones.

*******************************************************************************************************************************************

propiedades del margin:

margin: aplica margen a los 4 lados.

marginLeft: margen a la izquierda.

marginRight: margen a la derecha.

marginBotton: margen abajo.

marginTop: margen arriba.

marginVertical: aplica mismo margen arriba y abajo.

marginHorizontal: mismo margen a la izquierda y derecha.

*******************************************************************************************************************************************

propiedades del padding:

padding: aplica padding a los 4 lados.

paddingLeft: padding a la izquierda.

paddingRight: padding a la derecha.

paddingBotton: padding abajo.

paddingTop: padding arriba.

paddingVertical: aplica mismo padding arriba y abajo.

paddingHorizontal: mismo padding a la izquierda y derecha.

*******************************************************************************************************************************************

propiedades del border:

borderWidth: aplica borde a los 4 lados.

borderLeftWith: borde a la izquierda.

borderRightWith: borde a la derecha.

borderBottomWith: borde abajo.

borderTopWith: borde arriba.

borderColor: aplica un color al borde.

*******************************************************************************************************************************************

para agregar un snippet debemos ir a Visual Studio Code y darle en View, Command palette, escribimos Configure User Snippets, buscamos
typescriptreact.json podemos ir a la siguiente pagina para copiar un snippet para agregar un stylesheet: 

https://gist.githubusercontent.com/Klerith/ed5675a477d08ade69f23eaafd75a6d1/raw/e797d2c513e536aae395f23e6ee71afa501ef513/typescriptreact.json

copiamos y reemplazamos por todo lo que esta en el archivo typescriptreact.json, entonces ahora podemos usar el snippet stles, que nos
crea un stylesheet rapido.

*******************************************************************************************************************************************

Si por alguna razon me da un error al tratar de crear una app de react native entonces debo usar el siguiente comando en la cmd
un error como el siguiente: https://github.com/react-native-community/react-native-template-typescript/issues/72

npm uninstall -g react-native-cli

npm i -g @react-native-community/cli

luego si podemos ejecutar nuestro comando:

npx react-native init MyApp --template react-native-template-typescript

*******************************************************************************************************************************************