Install and Configure Capacitor
First of all, prepare your React application which you want to integrate with Capacitor JS. If you have not created one, you can see how to create React Typescript with Tailwind CSS in this tutorial.
If you already have a React application you can directly go to your React app project directory and install Capacitor JS using this command:
npm install @capacitor/core @capacitor/cli
After the installation is finished, continue with initializing the Capacitor configs.
npx cap init [name] [id] --web-dir=build
Build and Prepare Native Platforms
After finished with all the Capacitor configurations, build the React application using "npm run build" command first and then install the iOS and Android plugins for Capacitor JS using this command:
npm i @capacitor/ios @capacitor/android
After finished installed the iOS and Android plugin for Capacitor JS, add the platform for iOS and Android in Capacitor using these commands:
npx cap add android
npx cap add ios
npx cap add ios
After adding the native platforms, we can open and run the native platforms using these commands:
npx cap open ios // Open XCode
npx cap open android // Open Android Studio
npx cap open android // Open Android Studio
Congratulations! You have successfully adding capacitor to your React application. For more info, you can learn more here. If you want to integrate your React application with Firebase Cloud Functions you can check this tutorial.
