Mobile-Apps mit reinem React.js und Capacitor erstellen

In diesem Tutorial werden Sie durch die Schritte geführt, um eine mobile Anwendung mit React, Capacitor und Konsta UI zu erstellen. Am Ende werden Sie wissen, wie Sie eine React.js-Webanwendung in eine native mobile Anwendung mit Capacitor umwandeln und eine native Benutzeroberfläche mit Konsta UI implementieren können.

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

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

Capacitor-Übersicht

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

Capacitor bietet eine einfache Möglichkeit, eine native mobile Anwendung ohne jede Hürde oder steile Lernkurve zu erstellen. Seine einfache API und gestreamte Funktionalität machen es leicht, es in Ihr Projekt einzubinden.

Einstellung Ihres React.js-Apps

Lassen Sie uns den einfachsten Weg wählen, 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 unser Projekt in eine native mobile App umzuwandeln, ist ein export von unserer App erforderlich.

Wir kommen darauf zurück. Zunächst müssen wir verstehen, wie Capacitor in unsere React-Anwendung integriert werden kann.

Integration von Capacitor in Ihre React.js-Anwendung

Die ersten Einstellungsschritte mögen ein bisschen detailliert sein, aber nachdem das, wird die Aktualisierung Ihres native App Wrapper so einfach wie das Ausführen eines sync Kommandos.

Zunächst werden wir das Capacitor CLI als Entwicklungszusammenhänge installieren und es innerhalb unseres Projekts einrichten. 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 im React.js-Projekt vorhanden.

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

installieren. Als Nächstes aktualisieren Sie webVerzeichnis in Ihrem capacitor.config.json wie unten gezeigt:

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

Führen Sie den Build-Befehl aus und synchronisieren Sie Ihr Projekt mit Capacitor:

npm run build
npx cap sync

Die npm run build Der Befehl wird Ihr React.js-Projekt erstellen, während npx cap sync wird die Web code auf den genauen 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!

Erstellung und Bereitstellung Ihrer nativen Apps

Die Entwicklung von iOS-Apps erfordert Xcodeund Android-Anwendungen benötigen Android StudioWenn Sie Ihre App im App-Store verteilen möchten, müssen Sie sich für iOS im Apple Developer Programm und für Android im Google Play Console anmelden.

Das 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 die Bereitstellung 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 einem verbundenen 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-Anwendung in eine native mobile Anwendung umgewandelt!

Capacitor Live Reload

Moderne Entwicklungsframeworks kommen normalerweise mit Hot Reload, und zum Glück können Sie das auch mit Capacitor haben, auf Ihrem Mobilgerät!

Sie können Ihre lokal gehostete Anwendung zugänglich machen, indem Sie mit Live Reload auf Ihrem Netzwerk eine bestimmte URL haben, auf die sich das Capacitor-App laden kann.

Zuerst müssen Sie Ihre lokale IP-Adresse bestimmen. Auf einem Mac können Sie dies tun, indem Sie ipconfig getifaddr en0 im Terminal ausführen. Auf Windows ausführen Sie ipconfig und suchen Sie nach der IPv4-Adresse.

Nach diesem Schritt instruieren Sie Capacitor dazu, die App direkt vom Server zu laden, indem Sie ein weiteres Parameter zu Ihrem capacitor.config.ts Datei hinzufügen:

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;

Stellen Sie sicher, dass Sie die genaue IP-Adresse und den Port verwenden. Führen Sie npx cap copy aus, um diese Änderungen an unserem native Projekt anzuwenden.

Bei der Wiederverteilung Ihrer App ein weiteres Mal über Android Studio oder Xcode werden alle Änderungen in Ihrer React-App automatisch neu geladen und auf Ihrer App angezeigt!

Beachten Sie jedoch, 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.

Mit Capacitor-Plugins

Lassen Sie uns einen Blick darauf werfen, wie man ein Capacitor-Plugin verwendet. Lassen Sie uns ein einfaches Plugin installieren, das Teilen-Plugin, das native Teilen-Dialogfenster aufruft:

npm i @capacitor/share

Um es zu verwenden, importieren Sie das Paket und rufen Sie die entsprechende Funktion aus unserer App auf. Beachten Sie dabei das share() App.js Nach der Installation eines neuen Plugins vergessen Sie nicht, Ihr React-Projekt erneut zu synchronisieren, indem Sie:

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;

Konsta UI implementieren: Eine bessere mobile Benutzeroberfläche npx cap sync.

Für eine bessere mobile Benutzeroberfläche wird Konsta UI verwendet. Es bietet iOS- und Android-spezifische Stile und ist leicht zu handhaben.

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

Ändern Sie Ihr

npm i konsta

Datei wie folgt: tailwind.config.js wird Ihre aktuelle Tailwind CSS-Konfiguration mit zusätzlichen Varianten und -Utilities ergänzen, die für Konsta UI erforderlich sind.

// 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 Stellen Sie nun die primäre App-Komponente ein, um globale Parameter wie

zur Einstellung zu verwenden. theme. Wrap the main app with 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 src/App.js und ändern Sie es in:

// 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 effektive Integration zwischen React und Konsta UI sehen, um Ihrem mobilen App einen nativen Look zu geben.

Zusammenfassung

Capacitor bietet eine nahtlose Möglichkeit, native Apps auf der Grundlage eines bestehenden Web-Projekts zu erstellen, indem ein einfacher Weg zur Weitergabe von code und zur konsistenten Benutzeroberfläche angeboten wird.

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 Coden!

Um mehr über die Möglichkeiten zu erfahren, wie Sie Ihren Entwicklungsprozess beschleunigen können, melden Sie sich für ein kostenloses Konto heute an.