Erste Schritte mit React Native

Lernziele

Nachdem Sie diese Lektion abgeschlossen haben, sind Sie in der Lage, die folgenden Aufgaben auszuführen:

Erläutern, was React Native ist
Erklären, wie React Native gängige Programmiersprachen unterstützt
Installieren erforderlicher Software für das Mobile SDK mit React Native

Was ist React Native?

Wenn Sie die anderen Module im Mobile SDK-Trail durchlaufen haben, wissen Sie inzwischen, dass Ihnen das Mobile SDK viele Entwicklungsmöglichkeiten bietet. Sie können native Anwendungen in Android und iOS erstellen und dabei native Programmiersprachen verwenden, um Ihren Code zu schreiben. Sie können auch hybride Anwendungen erstellen, die sowohl unter Android als auch unter iOS laufen und in JavaScript, CSS, HTML oder sogar in Visualforce geschrieben sind. Hybride Anwendungen auf der Grundlage von Apache Cordova laufen in einem Webansicht-Container, der die Übersetzungsbrücke zum nativen Code bereitstellt. Dieser Ansatz bringt eine gewisse Leistungseinbuße mit sich und bietet nicht immer das echte Look & Feel nativer Anwendungen.

Doch hier kommt React Native. Facebook führte React 2013 als Open Source-Entwicklungsframework ein und ließ ihm 2015 React Native folgen. Heute ist die React-Technologie in zwei Teile gegliedert: ReactJS und React Native. ReactJS ist eine JavaScript-Bibliothek für die Erstellung webbasierter Benutzeroberflächen. React Native ist ein Framework, das die ReactJS-Bibliothek verwendet, um native Komponenten für mobile Anwendungen zu erstellen. React Native ist ebenso wie Cordova plattformübergreifend und unterstützt Android und iOS.

Sie schreiben React Native-Komponenten zwar in den speziellen Stilen von JavaScript, CSS und Markup, doch die zugrunde liegenden Objekte sind native Geräteobjekte, die direkt auf das Betriebssystem zugreifen. Dadurch entsprechen die Performance und das Look and Feel von React Native-Komponenten nativen Standards.

Zu den standardmäßigen React Native-Sprachen gibt es einige Anmerkungen zu machen:

In React implementiert JavaScript einen neuen Standard namens ES2015, sodass Hybrid-Entwickler in React-Beispielen auf einige unbekannte Code-Konstrukte stoßen könnten. Wenn Sie mehr über ES2015 erfahren möchten, nutzen Sie den entsprechenden Link im Abschnitt "Ressourcen" am Ende dieser Lektion.
Bei CSS in React handelt es sich eigentlich JavaScript-Code, der CSS imitiert im Web in der Regel wie CSS funktioniert. Ein bemerkenswerter Unterschied besteht darin, dass man für Bezeichner Binnenmajuskeln (als Großbuchstaben im Wortinneren) statt kleingeschriebenen, mit Bindestrich getrennten Namen verwendet. Selbst wenn Sie mit CSS vertraut sind, werden Sie vielleicht feststellen, dass Sie das Styling von React bevorzugen.
Das in React-Anwendungen verwendete XML-Markup wird als JSX bezeichnet. JSX ist eine Syntax, mit der Sie XML-Markup in JavaScript einbetten können, im Gegensatz zur traditionellen Methode, JavaScript in Markup einzubetten. Sie schreiben das Markup also direkt in den JavaScript-Code, anstatt es in einer Textdatei getrennt von der JavaScript-Quelle zu platzieren. Sie können JSX-Markup beispielsweise aus der render()-Funktion einer Komponente zurückgeben.
Ab Mobile SDK 9.0 können Sie Code entweder wie bisher in standardmäßigem ES2015-JavaScript oder in TypeScript schreiben. Sie können ohne TypeScript, mit wenig TypeScript oder mit so viel TypeScript, wie Sie definieren können, programmieren. TypeScript verwendet einen eigenen Compiler, um während des Programmierens eine statische Typüberprüfung durchzuführen. Vom Compiler gefundene Fehler sind informativ, aber nicht unterbindend, sodass Ihr JavaScript-Code weiterhin wie zuvor ausgeführt wird. Mobile SDK-Bibliotheken für React Native enthalten TypeScript-Typen.

Ein beliebter Grund für die Nutzung von React Native ist, dass Sie Ihre Anwendungen nicht erneut mit Xcode oder Gradle kompilieren müssen, um Änderungen zu testen. Sobald die Anwendung auf einem realen oder virtuellen Gerät läuft, bearbeiten und speichern Sie einfach den Code und aktualisieren dann Ihren Emulator bzw. Simulator, um die Änderungen zu sehen.

Obwohl das zugrunde liegende Facebook-Framework weiterhin Vorabversionsstatus hat, behandelt das Mobile SDK React Native als vollwertiges SDK. Sie können React Native-Anwendungen mit unseren Befehlszeilen-Tools erzeugen und Mobile SDK-Komponenten wie die Authentifizierung, SmartStore und Mobile Sync verwenden, um leistungsfähige Mobile SDK-Anwendungen zu erstellen.

Installieren von Forcereact

Haben Sie das Projekt zum Einrichten Ihrer Mobile SDK-Entwicklungsumgebung abgeschlossen? Falls nicht, dann wäre jetzt ein guter Zeitpunkt, um es durchzuarbeiten und sicherzustellen, dass Ihre Entwicklertools auf dem neuesten Stand sind. Obwohl die React Native-Codierung in JavaScript ausgeführt wird, müssen Sie trotzdem native Entwicklungswerkzeuge für Plattformen installieren – Android Studio, Xcode oder beides. Zum Erstellen von React Native-Anwendungen für das Mobile SDK verwenden Sie das forcereact npm-Dienstprogramm.

Erstellen von verbundenen Anwendungen

Das Modul Salesforce Mobile SDK – Grundlagen, das Anweisungen für verbundene Anwendungen enthält, ist eine Voraussetzung für dieses Modul. Ohne eine verbundene Anwendung erstellt zu haben, können Sie die Übungen zu dieser Einheit nicht durchführen.

Um eine Verbindung mit dem Salesforce-Service herzustellen, benötigt jede mobile Anwendung eine mit Salesforce verbundene Anwendung. Eine verbundene Anwendung berechtigt Ihre Anwendung, mit Salesforce zu kommunizieren und sicher auf Salesforce-APIs zuzugreifen.

Nachdem Sie Ihre verbundene Anwendung erstellt haben, beachten Sie ihre Details.

Kopieren Sie die Werte "Rückmeldungs-URL" und "Verbraucherschlüssel". Diese Werte nutzen Sie zum Einrichten der Authentifizierung in Ihrer Anwendung.
Das Verbrauchergeheimnis wird von Mobile SDK-Anwendungen nicht verwendet. Sie können diesen Wert daher ignorieren.

Benötigen Sie Hilfe?

Mehr entdecken

Erste Schritte mit React Native

Lernziele

Was ist React Native?

Installieren von Forcereact

Erstellen von verbundenen Anwendungen

Ressourcen