Ionic React – Getting started

Code, Ionic, React

The Ionic framework team has announced React is officially supported in Ionic.
While still in beta, let’s build an app for web and devices.

In a new folder, let’s run:

create-react-app . --typescript --use-npm
then
npm start

The browser runs the app

Let’s install with npm (and save to package.json) ionic/react and capacitor

npm i -S @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": "ionic react app",
"integrations": {
"capacitor": {}
},
"type": "custom"
}

And a capacitor.config.json file

{
"appId": "com.yourdomain.yourappname",
"appName": "ionic react app",
"bundledWebRuntime": false,
"webDir": "build"
}

Run the ionic capacitor from the command line

ionic capacitor add android

Now launch Android Studio with npx cap open android

App running on the device

Same process applies to deploy to ios on a mac, just change the commands with ios instead of android