Mobilanwendungen mit reinem React.js und Capacitor erstellen

Dieses Tutorial führt Sie durch die Erstellung einer mobilen Anwendung mit React, Capacitor, und Konsta UI. Am Ende werden Sie wissen, wie Sie eine React.js-Web-Anwendung in eine native mobile Anwendung mit Capacitor umwandeln und eine native UI mit Konsta UI implementieren können.

Capacitor ermöglicht die einfache Umwandlung Ihrer React.js-Web-Anwendung in eine native mobile Anwendung, ohne wesentliche Änderungen oder das Lernen neuer Strategien wie React Native.

Der Prozess umfasst einige einfache Schritte, und bevor Sie es wissen, ist Ihre React.js-Anwendung eine voll funktionsfähige mobile Anwendung. Also bleiben Sie bei uns, während wir Sie auf dieser Reise begleiten.

Capacitor-Übersicht

CapacitorJS ist ein Game-Changer. Es kann problemlos mit jedem Web-Projekt integriert werden und Ihre App in eine native WebView einhüllen, während gleichzeitig die native Xcode- und Android-Studio-Projekt erstellt werden. Außerdem können Sie durch seine Plugins Zugriff auf native Gerätefeatures wie die Kamera über eine JS-Brücke erhalten.

Capacitor bietet einen direkten Weg, eine native mobile Anwendung ohne Umstände oder steile Lernkurve zu erstellen. Seine einfache API und gestreamte Funktionalität machen es leicht, es in Ihr Projekt einzubinden.

Einrichten Ihrer React.js-Anwendung

Lassen Sie uns mit der einfachsten Methode beginnen, um eine React-Anwendung zu initiieren. Wir werden das npm-Package-Manager verwenden, um eine neue React-Anwendung zu erstellen:

npx create-react-app my-app

Um unsere Projekt in eine native mobile App umzuwandeln, ist ein export von unserer App erforderlich.

Wir werden darauf zurückkommen. Zuerst müssen wir verstehen, wie Capacitor in unsere React-Anwendung integriert werden kann.

Capacitor in Ihre React.js Anwendung integrieren

Die ersten Einrichtungsschritte mögen ein bisschen detailliert sein, aber danach wird das Aktualisieren Ihres native App Wrappers so einfach wie das Ausführen eines sync Kommandos.

Zuerst installieren wir das Capacitor CLI als Entwicklungsabhängigkeit und setzen es innerhalb unseres Projekts auf. Während der Einrichtung akzeptieren Sie die Standardwerte für Name und Bundle-ID, indem Sie 'Enter' drücken.

Als nächstes installieren wir das Kernpaket und die relevanten Pakete für die iOS- und Android-Plattformen.

Schließlich fügen wir die Plattformen hinzu und Capacitor erstellt Ordner für jede Plattform in unserem Projektroot:

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your React project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

Die ios und android Verzeichnisse sind jetzt in Ihrer React.js-Projekt vorhanden.

Um auf das Android-Projekt später zuzugreifen, installieren Sie Android StudioFür iOS benötigen Sie einen Mac und sollten Xcode.

Als Nächstes aktualisieren Sie das webDir in Ihrem capacitor.config.json Führen Sie den Build-Befehl aus und synchronisieren Sie Ihr Projekt mit __CAPGO_KEEP_0__:

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "build",
  "bundledWebRuntime": false
}

Run the build command and sync your project with Capacitor:

npm run build
npx cap sync

Befehl wird Ihr React.js-Projekt erstellen, während npm run build die web __CAPGO_KEEP_0__ in den richtigen Orten der nativen Plattformen ausrichten, damit sie in einer App ausgeführt werden können. npx cap sync Die Befehl wird Ihr React.js-Projekt erstellen, während die web code in den richtigen Orten der nativen Plattformen ausrichten, damit sie in einer App ausgeführt werden können.

Jetzt, mit ein bisschen Glück und ohne Fehler, sollte Ihre React.js-App für die Veröffentlichung auf einem Gerät bereit sein!

Erstellen und Bereitstellen Ihrer nativen Apps

Die Entwicklung von iOS-Apps erfordert Xcode, und Android-Apps benötigen Android Studio. Wenn Sie beabsichtigen, Ihre App im App-Store zu verteilen, müssen Sie sich für iOS im Apple Developer Programm und für Android im Google Play Console anmelden.

Die Capacitor CLI vereinfacht den Prozess, beide native Projekte zu öffnen:

npx cap open ios
npx cap open android

Sobald Ihre native Projekte eingerichtet sind, ist das Bereitstellen Ihrer App auf einem verbundenen Gerät ein einfacher Prozess.

Für Android Studio warten Sie, bis alles geladen ist, und deployen Sie dann Ihre App auf ein verbundenes Gerät.

Für Xcode stellen Sie Ihr Signierkonto ein, um Ihre App auf einem realen Gerät zu deployen, anstatt nur auf dem Simulator. Nachdem Sie das getan haben, drücken Sie einfach auf 'Play', um die App auf Ihrem verbundenen Gerät auszuführen, das Sie oben auswählen können.

Wenn alles gut gelaufen ist, haben Sie Ihre React.js-Web-App in eine native mobile Anwendung umgewandelt!

Capacitor Live Reload

Moderne Entwicklungsframeworks haben normalerweise Hot Reload, und zum Glück kannst du das auch mit Capacitor haben, aber auf deinem Mobilgerät!

Du kannst deine lokal gehostete Anwendung mit Live Reload auf deinem Netzwerk zugänglich machen, indem du die Capacitor-App dazu bringst, Inhalte von einer bestimmten URL zu laden.

Zuerst bestimmst du deine lokale IP-Adresse. Auf einem Mac kannst du das tun, indem du ipconfig getifaddr en0 in der Terminal-Anwendung ausführst. Auf Windows ausführst du ipconfig und suchst nach der IPv4-Adresse.

Nach diesem Schritt instruierst du Capacitor dazu, die App direkt vom Server zu laden, indem du einen anderen Parameter zu deinem capacitor.config.ts Datei hinzufügst:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'build',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:3000',
    cleartext: true
  }
};

export default config;

Stelle sicher, dass du die genaue IP-Adresse und den Port verwendest. Führe npx cap copy aus, um diese Änderungen auf unserem native Projekt anzuwenden.

Bei der Wiederverteilung deiner App noch einmal durch Android Studio oder Xcode werden alle Änderungen in deiner React-Anwendung automatisch neu geladen und auf deiner App angezeigt!

Bitte beachten Sie, dass bei der Installation neuer Plugins, wie z.B. der Kamera, eine Neuverteilung Ihres native Projekts erforderlich ist. Dies liegt daran, dass die native Dateien geändert wurden und nicht auf der Fliege aktualisiert werden können.

Verwendung von Capacitor-Plugins

Ein Blick auf die Verwendung eines Capacitor-Plugins. Lassen Sie uns ein einfaches Plugin installieren, das Teilen-Plugin, das den native Teilen-Dialog auslöst:

npm i @capacitor/share

Um es zu verwenden, importieren Sie das Paket und rufen Sie die entsprechende share() Funktion aus unserer App. Beachten Sie die App.js:

import { Share } from '@capacitor/share';

function ShareButton() {
  const share = async () => {
    await Share.share({
      title: 'React App',
      text: 'Visit this React App',
      url: 'http://localhost:3000',
      dialogTitle: 'Share with...'
    });
  };

  return (
    <button onClick={share}>
      Share
    </button>
  );
}

export default ShareButton;

Nach der Installation eines neuen Plugins vergessen Sie nicht, Ihre React-Projekt wieder zu synchronisieren mit npx cap sync.

Implementierung von Konsta UI: Eine bessere mobile Benutzeroberfläche

Für eine bessere mobile Benutzeroberfläche nutzen wir Konsta UI. Es bietet iOS- und Android-spezifische Styling und ist leicht zu handhaben.

Um Konsta UI zu verwenden, installieren Sie das React-Paket:

npm i konsta

Ändern Sie Ihr tailwind.config.js Datei wie folgt:

// import konstaConfig config
const konstaConfig = require('konsta/config')

// wrap config with konstaConfig config
module.exports = konstaConfig({
  content: [
    './src/**/*.{js,ts,javascript,tsx}',
  ],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
})

konstaConfig erweitert Ihre aktuelle Tailwind CSS-Konfiguration um zusätzliche Varianten und -Utilities, die für Konsta UI erforderlich sind.

Setzen Sie nun die primäre App-Komponente ein, um globale Parameter wie themeUmwickeln Sie die Hauptanwendung mit App in der src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import {App} from 'konsta/react';
import './index.css';
import MyApp from './App';

ReactDOM.render(
  <React.StrictMode>
    <App theme="ios">
      <MyApp />
    </App>
  </React.StrictMode>,
  document.getElementById('root')
);

Lassen Sie uns Konsta UI React-Komponenten in unseren React.js-Seiten verwenden. Öffnen Sie src/App.js und ändern Sie es zu:

// Konsta UI components
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
} from 'konsta/react';

export default function MyApp() {
  return (
    <Page>
      <Navbar title="My App" />

      <Block strong>
        <p>
          Welcome to your React & Konsta UI app.
        </p>
      </Block>
      
      <List>
        <ListItem href="/about" title="About" />
      </List>

      <Block strong>
        <Button>Click Me</Button>
      </Block>
    </Page>
  );
}

Wenn alles richtig gemacht wurde, sollten Sie eine efflose Integration zwischen React und Konsta UI sehen, um Ihrem mobilen App einen nativen Look zu geben.

Fazit

Capacitor bietet einen nahtlosen Weg, um native Apps auf der Grundlage eines bestehenden Web-Projekts zu erstellen, indem es eine einfache Möglichkeit bietet, code zu teilen und eine konsistente Benutzeroberfläche zu haben.

Dank Technologien wie Capacitor ist es nie einfacher gewesen, mobile Anwendungen aus React.js-Web-Apps zu erstellen. Nehmen Sie Ihre Web-Entwicklungskenntnisse auf die nächste Stufe, indem Sie beeindruckende native mobile Apps erstellen. Viel Spaß beim Programmieren!

Für weitere Informationen darüber, wie Sie Ihren Entwicklungsprozess beschleunigen können, sich für ein kostenloses Konto anmelden heute.

Weitermachen von Building Mobile Apps with Pure React.js und Capacitor

Wenn Sie Building Mobile Apps with Pure React.js und __CAPGO_KEEP_0__ verwenden Building Mobile Apps with Pure React.js und Capacitor um native Medien und Schnittstellenverhalten zu planen, verbinden Sie es mit Using @capgo/capacitor-live-activities für die native Fähigkeit in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities für die Implementierungsdetails in @capgo/capacitor-live-activities, Using @capgo/capacitor-video-player für die native Fähigkeit in Using @capgo/capacitor-video-player, @capgo/capacitor-Video-Player für die Implementierungsdetails in @capgo/capacitor-Video-Player, und Mit @capgo/capacitor-native-Navigation für die native Fähigkeit in Mit @capgo/capacitor-native-Navigation.