Crear una aplicación React Native

Después de completar esta unidad, podrá:

• Crear una aplicación React Native sencilla con Mobile SDK.
• Acceder a componentes React Native proporcionados por Mobile SDK.
• Agregar la información de su aplicación conectada a su aplicación.
• Compilar y probar su aplicación React Native con Mobile SDK.

En el siguiente ejemplo, se crea una aplicación React Native mediante forcereact en macOS X. Puede usar forcereact en macOS o Windows, pero solo puede desarrollar una aplicación React Native para iOS en macOS.

1. Para crear una aplicación React Native, ejecute forcereact create en una ventana de terminal.
2. Ingrese los siguientes valores en los mensajes que se muestran:

   • Plataforma: lista delimitada por comas de una o varias plataformas. Puede ser ios, android o ios,android.

   • Tipo de aplicación: Pulse <Volver>
   • Nombre de aplicación: FirstReact

   • Nombre de paquete: com.mytrail.react

   • Nombre de organización: MyTrail, Inc.

   • Directorio de resultados: FirstReact

3. Así es como se debería mostrar su entrada (sin tener en cuenta cualquier resaltado de la sintaxis irrelevante):

4. $ forcereact create
   Enter the target platform(s) separated by commas (ios, android): ios,android
   Enter your application type (react_native_typescript or react_native, leave empty for react_native_typescript): <Return>
   Enter your application name: FirstReact
   Enter your package name: com.mytrail.react
   Enter your organization name (Acme, Inc.): MyTrail, Inc.
   Enter output directory for your app (leave empty for the current directory): FirstReact

Nombre de aplicación, nombre de paquete, nombre de organización y el directorio de salida son propiedades personalizadas que usted proporciona.

¿Qué crea esta llamada de forcereact? Una aplicación React Native que:

• Se llama FirstReact.
• Es compatible con iOS y Android.
• Admite el uso de TypeScript
• Se compila con bibliotecas de Mobile SDK.
• Reside en el directorio <current_directory>/FirstReact/.

La primera vez que crea una aplicación forcereact en cualquier equipo de desarrollo, el tiempo de espera será de varios minutos mientras se descargan las bibliotecas de React Native.

Cuando un mensaje de la línea de comandos le informe que el proyecto está listo, actualice el nuevo proyecto para reflejar la configuración de la aplicación conectada.

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <string name="remoteAccessConsumerKey">3MVG9Iu66FKeHhINkB1l7xt7kR8czFcCTUhgoA8Ol2Ltf1eYHOU4SqQRSEitYFDUpqRWcoQ2.dBv_a1Dyu5xa</string>
   <string name="oauthRedirectURI">testsfdc:///mobilesdk/detect/oauth/done</string>
   <string-array name="oauthScopes">
       <item>api</item>
   </string-array>
   <string name="androidPushNotificationClientId"></string>
</resources>

Para ejecutar su aplicación React Native, vuelva a la aplicación Terminal o a la línea de comandos de Windows.

Su aplicación React Native, cuando se construye, crea un paquete que contiene sus componentes JavaScript personalizados. Para ejecutar la aplicación con JavaScript y el código nativo hablando entre sí, inicie el servidor de desarrollo de React Native.

1. En una ventana de Terminal en macOS o en el símbolo del sistema en Windows, cambie al directorio raíz de su aplicación. En nuestro caso, es FirstReact.
2. Ejecute uno de los siguientes comandos:
   • yarn start o npm start 

Cuando la línea de comandos indique “Loading dependency graph, done” (Cargando gráfico de dependencia, listo), puede ejecutar la aplicación desde su entorno de desarrollo.

1. Para iniciar una aplicación forcereact iOS:
   1. En Xcode, abra FirstReact/ios/FirstReact.xcworkspace.
   2. Haga clic en Ejecutar.
2. Para iniciar una aplicación forcereact Android:
   1. Desde la pantalla Android Studio Welcome, o desde el elemento de menú File | Open (Archivo | Abrir), navegue a FirstReact/android/.
   2. Haga clic en Aceptar.
   3. Haga clic en Ejecutar.

Cuando aparezca la pantalla de inicio de sesión, ingrese sus credenciales de su organización de Developer Edition. Cuando se le solicite, autorice a la aplicación a acceder a datos y aparecerá una pantalla de vista de lista.

Ahí está: ¡su aplicación React Native con Mobile SDK nuevecita!

Si navegó por su proyecto en Xcode o Android Studio, probablemente se esté preguntando: ¿Dónde están los archivos JavaScript y de marca de React Native? No los encontrará en el proyecto de Xcode o Android Studio. Ya que estos archivos JavaScript pueden compartirse entre aplicaciones de iOS y Android, se crean en un nivel superior y solo se hace referencia a ellos en la configuración de compilación del proyecto. Busque el archivo app.tsx en el mismo nivel que la carpeta ios/ o android/.

Cuando examina el archivo app.js, algunas de las primeras líneas de código que encuentra importan el ingrediente especial de Mobile SDK. Mobile SDK proporciona componentes JavaScript que permiten que las aplicaciones React Native accedan a funciones de Mobile SDK. Los componentes incluyen:

• react.force.oauth.ts (inicio de sesión, identidad y autenticación)
• react.force.net.ts (clases auxiliares y utilidades de la API de REST)
• react.force.smartstore.ts (función de caché sin conexión SmartStore)
• react.force.mobilesync.ts (función de sincronización offline de Mobile Sync)

import {oauth, net, smartstore, mobilesync} from 'react-native-force';

...
"react-native-force": "git+https://github.com/forcedotcom/SalesforceMobileSDK-ReactNative.git#v9.0.0"
...

Si bifurcó este repositorio de forma local, puede establecer esta ruta como su bifurcación local.

No puede utilizar la biblioteca force.js con React Native.

Ahora, vamos a divertirnos.

const styles = StyleSheet.create({    
    container: {        
        flex: 1, 
        paddingTop: 22,    
        backgroundColor: 'white',    
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },

const styles = StyleSheet.create({
    ...
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
        backgroundColor: 'red',
    }
});

Cambie de nuevo a su simulador de iOS y pulse Comando-R. ¿Ve el fondo de color rojo?

Puede realizar una vista previa de los cambios que guarde en la fuente JavaScript de React Native simplemente actualizando el emulador o el simulador.

• Guía de desarrollo de Salesforce Mobile SDK: Desarrollo de React Native