Ionic 6 in React: Installation and Serving

Reading Time: 3 minutes

Ionic framework in React is an open-source UI toolkit for building performant, high-quality mobile apps, desktop apps, and progressive web apps using web technologies such as HTML, CSS, and JavaScript.

Ionic is a cross-platform framework as we can deploy across multiple platforms, such as Android, native iOS, Desktop, and the web as a progressive web app and all with one codebase. Thus, Ionic apps can write once and run everywhere.

Prerequisites

Before you start with Ionic there are a few things you need to get into your system,

you will need the following:

Node & Npm
Code Editor (Visual Studio Code recommended)

Downloading the Ionic CLI

Run the following command in your terminal:

npm i @ionic/cli -g

You’ll then be able to run the Ionic CLI from anywhere in your terminal.

Creating a new Ionic Application in React

Ionic offers two main ways of creating a new application:

You can use the app creation wizard to create a new Ionic app with the web interface (recommended)
You can use the CLI to create a new Ionic app directly with the command line interface.

I’ll be showing both ways, but first start with the creation wizard, as it’s the easiest way to get started.

1) Using the App Creation Wizard

Run the following command in your terminal:

ionic start

And Type Yes to start with the creation.

After that, you’ll be asked to choose a project name, and various customizations, and then choose which framework you want to use.

You should see something similar to this:

In this instance, select the following:

Project name: myApp.
Select your own icon and color theme.
Select the Tabs layout template.
Select the React framework.

Click Continue to move on to the next step.

Authentication

Next, you’ll be asked to sign in to your Ionic account.

To create a new account, enter your account details and click Create account. If you already have an account, select Log in at the bottom.

When you’ve successfully authenticated, you’ll see the following screen:

2) Using the CLI

Run the following command in your terminal:

npm i @ionic/cli -g

Deny the use of the app creation wizard because we’ll create our app through CLI.

Picking of Framework

Next, you’ll be asked to Pick a Framework.

You have to go with the React framework.

Next, you’ll be asked to name your App.

After naming your app you’ll see the starter templates.

According to your requirement, you can choose the template.

After this, your first Ionic application with react will be created.

Now you can open the application with Code Editor.

Here I’ll be using Visual Studio Code.

Now we’ll see how to Serve Our Application.

Serving the app in the Browser

You can use the Ionic CLI to serve your app in the browser or on a device.

To run your project, you’ll first need to navigate to the project with your terminal:

cd my-first-app

Next, you can run your app with the following command:

ionic serve

Your Ionic application is now running at http://localhost:8100. Open the browser at this URL to see it in action.

Conclusion

Ionic is a powerful framework that allows you to build cross-platform apps with a single codebase. It’s easy to use and provides a great user experience. You can create a new application in record time, without having to be reliant on one particular JavaScript framework.