Building Mobile Apps with Pure React.js and Capacitor

This tutorial will walk you through crafting a mobile application using React and Capacitor. By the end, you’ll know how to morph a React.js web app into a native mobile application with Capacitor, and add a native feel with Capgo Native Navigation and Transitions.

Capacitor enables the easy transformation of your React.js web app into a native mobile application, requiring no substantial alterations or learning of new strategies such as React Native.

Prosesnya melibatkan beberapa langkah sederhana, dan sebelum Anda tahu, aplikasi React.js Anda akan menjadi aplikasi seluler yang berfungsi penuh. Jadi, tetaplah bersama kami untuk mengikuti perjalanan ini.

Capacitor Overview

CapacitorJS adalah perubahan besar. Ia dapat menyatu dengan proyek web apa pun dan menggabungkan aplikasi Anda ke dalam tampilan web asli sambil menghasilkan proyek Xcode dan Android Studio asli. Selain itu, melalui pluginnya, Anda dapat mengakses fitur perangkat asli seperti kamera melalui jembatan JS.

Capacitor offers a straightforward way to create a native mobile application without any hassle or steep learning curve. Its simple API and streamlined functionality make it easy to incorporate into your project.

Mengatur Aplikasi React.js

Mari kita gunakan cara termudah untuk memulai aplikasi React. Kami akan menggunakan manajer paket npm untuk membuat aplikasi React baru:

npx create-react-app my-app

Untuk mengubah proyek kami menjadi aplikasi seluler asli, kami perlu eksport bagian dari aplikasi kami yang diperlukan.

Kami akan kembali ke hal ini dalam waktu singkat. Terlebih dahulu, mari kita pahami cara mengintegrasikan Capacitor ke dalam aplikasi React kami.

Integrasi Capacitor ke dalam Aplikasi React.js

Langkah awal mungkin terlihat detail, tapi setelah itu, memperbarui wrapper aplikasi native Anda menjadi seolah-olah menjalankan sebuah sync perintah.

Pertama, kami akan menginstal Capacitor CLI sebagai dependensi pengembangan dan mengaturnya dalam proyek kami. Selama proses setup, terima nilai default untuk nama dan ID paket dengan menekan tombol “enter.”

Kemudian, kami akan menginstal paket inti dan paket relevan untuk platform iOS dan Android.

Terakhir, kami akan menambahkan platform, dan Capacitor akan membuat folder untuk setiap platform di root proyek kami:

# 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

Folder iOS dan android daftar direktori sekarang sudah ada di proyek React.js Anda.

Untuk mengakses proyek Android nanti, instal Studio Android. Untuk iOS, Anda memerlukan Mac dan harus menginstal Xcode.

Selanjutnya, update webDir in your capacitor.config.json file seperti yang ditunjukkan di bawah ini:

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

Jalankan perintah pembangunan dan sinkronkan proyek Anda dengan Capacitor.

npm run build
npx cap sync

The npm run build perintah akan membangun proyek React.js Anda, sementara npx cap sync akan menyinkronkan web code di tempat yang tepat di platform native sehingga dapat dijalankan di aplikasi.

Sekarang, dengan sedikit keberuntungan dan tanpa kesalahan, aplikasi React.js Anda seharusnya sudah siap untuk diluncurkan pada perangkat!

Membangun aplikasi iOS memerlukan

Membuat aplikasi iOS memerlukan Xcodedan aplikasi Android juga perlu Studio Android. If you plan to distribute your app on the app store, you must enroll in the Apple Developer Program for iOS and the Google Play Console for Android.

Proses pembukaan proyek native baik itu Capacitor CLI menjadi lebih sederhana

npx cap open ios
npx cap open android

Proses menginstal aplikasi ke perangkat yang terhubung cukup sederhana setelah proyek native Anda telah terkonfigurasi.

Untuk Android Studio, tunggu sampai semua muatan terisi dan kemudian buat aplikasi Anda di perangkat yang terhubung.

Untuk Xcode, buat akun tanda tangan Anda untuk mengirimkan aplikasi Anda ke perangkat nyata bukan hanya simulator. Setelah itu, cukup tekan tombol play untuk menjalankan aplikasi di perangkat yang terhubung, yang dapat dipilih di atas.

Jika semuanya berjalan lancar, Anda akan telah mengubah aplikasi web React.js Anda menjadi aplikasi mobile native!

Capacitor Reload Hidup

Framework pengembangan modern biasanya dilengkapi dengan hot reload, dan beruntungnya, Anda dapat memiliki hal yang sama dengan Capacitor tetapi di perangkat mobile Anda!

Anda dapat membuat aplikasi yang dihosting lokal Anda dapat diakses dengan reload hidup di jaringan Anda dengan memiliki aplikasi Capacitor memuat konten dari URL tertentu.

Pertama, tentukan alamat IP lokal Anda. Pada Mac, Anda dapat melakukannya dengan menjalankan ipconfig getifaddr en0 di terminal. Pada Windows, jalankan ipconfig dan cari alamat IPv4.

Setelah itu, instruksikan Capacitor untuk memuat aplikasi secara langsung dari server dengan menambahkan parameter lain ke file: capacitor.config.ts file:

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;

Pastikan Anda menggunakan IP dan port yang akurat. Jalankan npx cap copy untuk menerapkan perubahan-perubahan ini ke proyek native kami.

Setelah menginstal ulang aplikasi Anda melalui Android Studio atau Xcode, perubahan-perubahan di aplikasi React Anda akan secara otomatis di-reload dan ditampilkan di aplikasi!

Hati-hati bahwa jika plugin baru diinstal, seperti kamera, maka diperlukan pembangunan ulang proyek native Anda. Hal ini karena file-file native akan berubah dan tidak dapat diperbarui secara langsung.

Menggunakan Capacitor Plugins

Mari kita lihat secara singkat bagaimana menggunakan sebuah Capacitor plugin. Mari kita instal plugin sederhana, yaitu Bagikan plugin, yang mempromosikan dialog berbagi native:

npm i @capacitor/share

Untuk menggunakan fitur ini, import paket dan panggil fungsi yang terkait share() fungsi dari aplikasi kami. Pertimbangkan 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;

Sesudah menginstal plugin baru, jangan lupa untuk menyinkronkan kembali proyek React Anda. npx cap sync.

Aplikasi selanjutnya dapat membuat aplikasi terasa lebih asli di iOS dan Android dengan Capgo navigasi dan transisi, dan memperbaiki masalah layout iOS yang umum menyebabkan overflow horizontal atau area aman yang dipotong.

Antarmuka UI yang terasa asli dengan Capgo Native Navigation dan Transisi

Saya telah bekerja selama beberapa tahun dengan Ionic untuk membangun aplikasi lintas platform, tetapi mengintegrasikannya dengan React adalah hacky dan jarang berharga ketika Anda sudah memiliki Tailwind CSS.

Untuk merasakan aplikasi mobile asli di React + Capacitor gunakan plugin Capgo bukan kit UI web saja seperti Konsta UI:

• @capgo/capacitor-navigasi native — navbar asli, Liquid Glass tab bar di iOS, dan gaya tab bar yang diblur di Android. Pengaturan route React Anda tetap; plugin menguasai chrome asli.
• @capgo/capacitor-transisi — transisi halaman Ionic dan swipe-back iOS di layer WebView, tanpa menerima UI Ionic.

Instal keduanya:

bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap sync

Mengonfigurasi navigasi native dengan mode inset CSS agar konten web menghormati bar-bar native:

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

Mengrender tab bar Liquid Glass (iOS menggunakan rendering milik sistem; Android menggunakan latar belakang WebView yang dibor):

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: { dynamic: true },
  tabs: [
    { id: 'home', title: 'Home', icon: { svg: '...' } },
    { id: 'settings', title: 'Settings', icon: { svg: '...' } },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  navigate(`/${id}`);
});

Mengambahkan transisi halaman native di dalam shell aplikasi:

import { useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions/react';

initTransitions({ platform: 'auto' });

export function AppShell() {
  const navigate = useNavigate();
  const outletRef = useRef<HTMLElement>(null);

  useEffect(() => {
    if (outletRef.current) {
      setupRouterOutlet(outletRef.current, { platform: 'auto', swipeGesture: 'auto' });
    }
  }, []);

  const openSettings = () => {
    setDirection('forward');
    navigate('/settings');
  };

  return <cap-router-outlet ref={outletRef}>{/* routes */}</cap-router-outlet>;
}

Penggunaan halaman yang diarahkan cap-router-outlet, cap-page, dan cap-content, dan memanggil setDirection('forward') atau setDirection('back') Jangan duplikasi header atau footer web ketika navigasi native menguasai permukaan-permukaan tersebut.

Lihat panduan lengkap: Menggunakan @capgo/capacitor-transitions and Menggunakan @capgo/capacitor-transisi.

Daerah aman dengan Tailwind

Untuk daerah aman perangkat di Tailwind CSS, gunakan @capgo/tailwind-capacitor (diterbitkan sebagai) tailwind-capacitor di npm. Ini menyediakan safe-areas utilitas dan plugin Tailwind lainnya yang Capacitor-ramah:

bun add -D tailwind-capacitor

In src/index.css:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

Pakai utilitas seperti pt-safe, pb-safe, dan px-safe sebaliknya dari menyebarkan env(safe-area-inset-*) secara manual. Projek ini aktif dikembangkan — jika ada yang hilang untuk pengaturan React Anda, buka PR di GitHub.

Memperbaiki Masalah Tata Letak iOS (Viewport, Area Aman, dan Overlalu Horizontal)

Jika konten terlihat dipotong, bergeser, atau dapat di-scroll secara horizontal pada iOS, menambahkan lebih banyak overflow-x: hidden atau mengatur tag viewport saja biasanya tidak dapat memperbaikinya. Jalankan periksaan-periksaan ini secara berurutan.

Pastikan tag meta viewport diterapkan dengan benar

Tambahkan tag meta viewport di index.html di dalam <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

Mengatasi Area Aman iOS dari satu wrapper root saja

Buatlah shell aplikasi tunggal dan aplikasikan padding area aman di sana — bukan di komponen-komponen nested yang berbeda:

html,
body,
#root {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

Selimuti semua konten halaman di .app-shellDuplikasi padding area aman di header, modal, dan wrapper tata letak sering membuat UI terlihat dipotong atau terlalu besar.

Dengan @capgo/tailwind-capacitorKamu bisa mengekspresikan padding yang sama dengan utilitas seperti pt-safe pb-safe px-safe di shell tunggal itu.

Buat Capacitor iOS contentInset ke never context

In capacitor.config.tsprefer native inset disabled dan biarkan CSS (atau Native Navigation) contentInsetMode: 'css'Mengontrol area aman:

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'build',
  ios: {
    contentInset: 'never',
  },
};

Menggabungkan Capacitor’s konten otomatis yang diatur dengan CSS env(safe-area-inset-*) spasi ganda sering disebabkan oleh pengaturan padding.

Temukan elemen yang mengalir melebihi

The usual culprit is an element using 100vw, Tailwind w-screenlebar piksel tetap, atau besar min-width.

Jalankan di Safari Web Inspector:

[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .map(el => ({
    el,
    tag: el.tagName,
    class: el.className,
    scrollWidth: el.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }));

Dengan Tailwind, ganti w-screen with w-full ketika memungkinkan. Banyak masalah overflow horizontal berasal dari 100vw / w-screenDari viewport meta tag itu sendiri, bukan dari padding area aman yang diulang, atau kontainer lebar tetap.

Conclusion

Capacitor offers a seamless means of building native apps based on an existing web project, providing a simple way to share code and have consistent UI.

Thanks to technologies like Capacitor, building mobile applications from React.js web apps has never been easier. Take your web development skills to the next level by crafting impressive native mobile apps. Happy coding!

Untuk informasi lebih lanjut tentang cara mempercepat proses pengembangan aplikasi Anda. lebar piksel tetap, atau besar Hari ini.

Teruskan dari Membangun Aplikasi Mobile dengan React.js dan Capacitor

Jika Anda menggunakan Membangun Aplikasi Mobile dengan React.js dan Capacitor untuk merencanakan perilaku media dan antarmuka native, hubungkannya dengan Menggunakan @capgo/capacitor-aktivitas-hidup untuk kemampuan native di Menggunakan @capgo/capacitor-aktivitas-hidup Menggunakan @capgo/capacitor-aktivitas-hidup untuk detail implementasi di @capgo/capacitor-aktivitas-hidup Menggunakan @capgo/capacitor-pemain-video untuk kemampuan native di Menggunakan @capgo/capacitor-pemain-video Menggunakan @capgo/capacitor-pemain-video untuk detail implementasi di @capgo/capacitor-video-player, dan Menggunakan @capgo/capacitor-native-navigation untuk kemampuan native di Menggunakan @capgo/capacitor-native-navigation.