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
ionic start my-app blank --type=react
blank is the simplest template available.) This generates a new folder with the initial project structure:
*.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.
Use TypeScript but with optional typing
If you look at the code in the
const App: React.FC = () => ( /* ... */ );
: 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
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.
strict mode simply by edit
tsconfig.json and, under
*.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.
allowJs option enabled in
So all you need to do is rename all the
*.tsx files to
(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