Ionic React with JavaScript (not TypeScript)

Ionic React is here. The Ionic CLI generates TypeScript code. Here's what to do if you'd rather use plain JavaScript.

The Ionic team recently announced the general availability of Ionic React. You can use the Ionic CLI to generate an Ionic React project, and by default it will use TypeScript. Here's what to do if you'd rather use plain JavaScript.

Following the official Build Your First Ionic React App documentation, we can create an Ionic React project by installing the Ionic CLI globally

npm install -g ionic

and then use it to generate a project, say my-app

ionic start my-app blank --type=react

(Where blank is the simplest template available.) This generates a new folder with the initial project structure:


Those *.tsx files contain TypeScript code. (With JSX enabled; otherwise the extension is just *.ts.) If you're not familiar with TypeScript you may find this a bit scary.

But there are at least two easy solutions: a) move to regular JavaScript files, or b) keep using TypeScript, but with optional typing. Let's look at the second option first.

Use TypeScript but with optional typing

If you've never used TypeScript before, I would encourage you to give it a try. It's easy to get started. Many people are reluctant at first, but end up loving it. TypeScript isn't a completely different language from JavaScript. It's a superset of JavaScript, which means it just adds more features (like type checking) on top of JavaScript.

If you look at the code in the *.tsx files generated by the Ionic CLI you'll see that 95% of it looks like regular JavaScript code. The only difference is that there are type annotations in a couple of places, like in App.tsx

const App: React.FC = () => ( /* ... */ );

That : React.FC bit means that App is of type React.FC (Function Component), and this information will be used by the TypeScript compiler to check that the rest of the code is using App correctly.

But if you don't feel like learning about type annotations right now, you can simply remove them. Since TypeScript is a superset of JavaScript, regular JavaScript code is also valid TypeScript code.

The last bit however depends on how strict you configure the TypeScript compiler to be. The project generated by the Ionic CLI is configured with strict mode enabled, which does require type annotations.

To disable strict mode simply by edit tsconfig.json and, under compilerOptions, set

    "strict": false,

At this point can basically write plain JavaScript code as you're used to in *.tsx files, and everything should work. If later on you want to start learning about types and other TypeScript features you can start using them gradually in your code. They're optional features.

Rename files to JavaScript

If despite the above you'd rather just work with plain JavaScript files, that's also easy to do. The project generated by the Ionic CLI has the allowJs option enabled in tsconfig.json, which means that the TypeScript compiler will accept regular JavaScript files.

So all you need to do is rename all the *.tsx files to *.js (there are just three of them), delete any type annotations in the code, and that's it: the project now contains only JavaScript files. No TypeScript code to worry about.

(It will still use the TypeScript compiler as part of the build process, but you don't really need to worry about that.)

Once you've modified the project to suit your liking, you can run the app in the browser with

ionic serve

and follow the rest of the Ionic documentation if you want to run it on Android or iOS.