React Native: Projekt anlegen




React Native besitzt eine eingebaute Befehleszeilenschnittstelle, die mit dem von Node.js geliefertem Befehl npx (Node Package Execute) aufgerufen wird. Mit diesem Befehl und react-native CLI werden auch die Projekte erstellt.

Hinweis: Der Projektname darf keine Leer- und/oder Sonderzeichen enthalten.

Einfaches Projekt

Ein einfaches Projekt wird ohne zusätzliche Argumente erstellt.

$ npx react-native init ProjectName

Projekt mit einer bestimmten React Native Version

Mit der Option ––version kann man ein Projekt mit einer bestimmten React Native Version anlegen.

$ npx react-native init ProjectName --version X.XX.X

Projekt aus einer Vorlage

Mit der Option ––template wird ein Projekt aus einer Vorlage, z.B. TypeScript erstellt.

$ npx react-native init ProjectName --template react-native-template-typescript

Projekt mit einem App-Titel

Standardmäßig wird das Projekt mit dem gleichen App-Titel wie der Projektname erzeugt. Der Projektname darf aber keine Leer- und Sonderzeichen enthalten. Bei langen, aus mehreren Wörtern zusammengesetzten Namen sieht der App Titel ungewöhnlich aus. Man kann ihn später ändern in der android/app/src/main/res/values/strings.xml bzw. ios/ProjectName/Info.plist Datei. Den Titel kann man aber auch schon beim Anlegen des Projektes vergeben, z.B.:

$ npx react-native init ReactNativeDemo --title "RN Demo App"

Siehe auch: React Native CLI Befehle – init

Anzeige

Projekt-Struktur

Die Struktur eines neu angelegten Projektes ist in drei Bereiche aufzuteilen: gemeinsamer JavaScript Code mit den Node-Modulen, Android-spezifischer und iOS-spezifischer Code.

Project_Structure [Image]

index.js

Der Einstiegspunkt der App befindet sich in dieser Datei.

App.tsx

Die App-Hauptdatei, die den Screen-View enthält.

app.json

App-Einstellungen.

package.json

Pakete-Konfiguration und Abhängigkeiten.

package-lock.json

Garantiert, dass die mit npm install hinzugefügte Pakete die gleiche, im Projekt benutzte Version haben. Diese Datei soll manuell nicht editiert werden.

tsconfig.json

TypeScript-Konfiguration.

metro.config.js

Metro-Server-Konfiguration.

babel.config.js

Babel-Konfiguration.

.watchmanconfig

Watchman-Konfiguration.

.prettierrc.js

Prettier-Konfiguration.

.gitignore

Dateien und Verzeichnisse die nicht versioniert werden sollen. Siehe: https://git-scm.com/docs/gitignore

.gitattributes

Git-Attribute. Siehe: https://git-scm.com/docs/gitattributes

.eslintrc.js

ESLint-Konfiguration.

.buckconfig

Buck-Konfiguration.

node_modules

Dieser Ordner enthält die Node Module, die von der App benutzt werden.

ios

Der iOS-spezifische und native Code, Builds und Releases.

android

Der Android-spezifische und native Code, Builds und Releases.

__test__

Dieser Ordner enthält die Jest-Testdateien.

 


Anzeige

War diese Seite für dich informativ? Hat sie dir gefallen und geholfen?

Dann unterstütze die Weiterentwicklung mit einer kleinen Spende!

Die Spenden werden für die Lizenzen sowie neue Hard- und Software verwendet, die für weitere Projekte auf dieser Webseite eingesetzt werden.




Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.