The Ionic framework team has announced React is officially supported in Ionic.
Let’s build an app for web and devices.
This project uses Typescript, you can also use the Javascript version
In a new folder, let’s run:
ionic start
then choose react and a template ( conference is great will all options! )cd appname
npm start

Let’s install with npm (and save to package.json) ionic/react and capacitor
npm i -S @ionic/core @ionic/react @capacitor/cli @capacitor/core typesafe-actions
Optional: Axios, Redux, React-Router, React-Dropzone npm i -S @types/react-redux @types/react-router @types/react-router-dom axios react-dropzone react-redux react-router react-router-dom redux redux-devtools
Next step: build and run on a device
First run npm run build
to create the build folder which will be used by the ionic capacitor to generate the android app
Create a ionic.config.json file with the following content
{
"name": "your ionic react app name",
"integrations": {
"capacitor": {}
},
"type": "react"
}
And a capacitor.config.json file
{
"appId": "com.yourdomain.yourappname",
"appName": "your ionic react app name",
"bundledWebRuntime": false,
"npmClient": "npm",
"webDir": "build"
"cordova": {}
}
Run the ionic capacitor from the command line
ionic capacitor add android
Now launch Android Studio with npx cap open android

Add in package.json, section “scripts”:"ionic:build": "npm run build && ionic capacitor copy"
Then run ionic capacitor run android
Same process applies to deploy to ios on a mac, just change the commands with ios instead of android
One comment
Comments are closed.