Author: John Au-Yeung

If we know how to create React web apps but want to develop mobile apps, we can use the Ionic framework.

In this article, we’ll look at how to get started with mobile development with the Ionic framework with React.

Note

We can add notes display with the IonNote component.

For instance, we can use it by writing:

import React from 'react';
import { IonContent, IonNote } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonNote>Default Note</IonNote><br />
    </IonContent>
  );
};

export default Tab1;

We can also add color to it with the color prop:

import React from 'react';
import { IonContent, IonNote } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonNote color="secondary">Secondary Note</IonNote><br />
    </IonContent>
  );
};

export default Tab1;

Also, we can add notes in a list:

import React from 'react';
import { IonContent, IonItem, IonLabel, IonList, IonNote } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonLabel>Note (End)</IonLabel>
          <IonNote slot="end">On</IonNote>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

Lists

We can add lists with the IonList component.

For example, we can write:

import React from 'react';
import { IonContent, IonItem, IonLabel, IonList } from '[@ionic/react](https://medium.com/r/?url=http%3A%2F%2Ftwitter.com%2Fionic%2Freact "Twitter profile for @ionic/react")';
import './Tab1.css';

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonLabel>Pokemon</IonLabel>
        </IonItem>
        <IonItem>
          <IonLabel>Megaman</IonLabel>
        </IonItem>
        <IonItem>
          <IonLabel>The Legend of Zelda</IonLabel>
        </IonItem>
        <IonItem>
          <IonLabel>Pac-Man</IonLabel>
        </IonItem>
        <IonItem>
          <IonLabel>Super Mario World</IonLabel>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

to add the IonList with the IonItem as the list items.

We can add inputs and toggles into the list:

import React from 'react';
import { IonContent, IonInput, IonItem, IonLabel, IonList, IonToggle } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonLabel>Input</IonLabel>
          <IonInput></IonInput>
        </IonItem>
        <IonItem>
          <IonLabel>Toggle</IonLabel>
          <IonToggle slot="end"></IonToggle>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

List Header

We can add a list header with the IonListHeader component.

For example, we can write:

import React from 'react';
import { IonContent, IonLabel, IonListHeader } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonListHeader>
        <IonLabel>List Header</IonLabel>
      </IonListHeader>
    </IonContent>
  );
};

export default Tab1;

And we can add the list content below the header:

import React from 'react';
import { IonContent, IonItem, IonLabel, IonListHeader } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonListHeader>
        <IonLabel>List Header</IonLabel>
      </IonListHeader>
      <IonItem>
        <IonLabel color="primary">
          <h1>harry</h1>
        </IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel color="primary">
          <h1>christmas</h1>
        </IonLabel>
      </IonItem>
    </IonContent>
  );
};

export default Tab1;

color sets the color of the item.

We can also add the lines prop to the IonItem to change the line style.

Conclusion

We can add list headers and items, and notes with Ionic React.

If we know how to create React web apps but want to develop mobile apps, we can use the Ionic framework.

In this article, we’ll look at how to get started with mobile development with the Ionic framework with React.

Items

We can add an item into the Ionic component by using the IonItem and IonLabel components.

For example, we can write:

import React from 'react';
import { IonContent, IonItem, IonLabel } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonItem>
        <IonLabel>
          Item
        </IonLabel>
      </IonItem>
    </IonContent>
  );
};

export default Tab1;

to add the item.

We can add the detail prop to add a detail arrow:

import React from 'react';
import { IonContent, IonItem, IonLabel } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonItem detail>
        <IonLabel>
          Item
        </IonLabel>
      </IonItem>
    </IonContent>
  );
};

export default Tab1;

We can add a onClick prop to add a click handler for the item:

import React from 'react';
import { IonContent, IonItem, IonLabel } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonItem button onClick={() => { }} detail>
        <IonLabel>
          Button Item with Detail Arrow
          </IonLabel>
      </IonItem>
    </IonContent>
  );
};

export default Tab1;

And we can use it as a link:

import React from 'react';
import { IonContent, IonItem, IonLabel } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonItem detail={false} href="https://www.ionicframework.com">
        <IonLabel>
          Button Item with Detail Arrow
          </IonLabel>
      </IonItem>
    </IonContent>
  );
};

export default Tab1;

We can add lines with the lines prop:

import React from 'react';
import { IonContent, IonItem, IonLabel } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonItem lines="full">
        <IonLabel>Item Lines Full</IonLabel>
      </IonItem>
    </IonContent>
  );
};

export default Tab1;

Item Divider

We can add an item divider between the items.

For instance, we can write:

import React from 'react';
import { IonContent, IonItemDivider, IonLabel } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonItemDivider>
        <IonLabel>
          Basic Item Divider
        </IonLabel>
      </IonItemDivider>
      <IonItemDivider color="secondary">
        <IonLabel>
          Secondary Item Divider
        </IonLabel>
      </IonItemDivider>
    </IonContent>
  );
};

export default Tab1;

We add the IonItemDivider around the IonLabel to add items.

Item Groups

We can group items with item groups.

For example, we can write:

import React from 'react';
import { IonContent, IonItem, IonItemDivider, IonItemGroup, IonLabel } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonItemGroup>
        <IonItemDivider>
          <IonLabel>A</IonLabel>
        </IonItemDivider>
        <IonItem>
          <IonLabel>Angola</IonLabel>
        </IonItem>
        <IonItem>
          <IonLabel>Argentina</IonLabel>
        </IonItem>
        <IonItem>
          <IonLabel>Armenia</IonLabel>
        </IonItem>
      </IonItemGroup>
    </IonContent>
  );
};

export default Tab1;

We add the IonItemDivider , IonLabel , and IonLitem inside the IonItemGroup to group them.

IonItemDivider is used for the headings.

We can also put the IonItemSliding component inside the group:

import React from 'react';
import { IonContent, IonItem, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {

  return (
    <IonContent>
      <IonItemGroup>
        <IonItemSliding>
          <IonItem>
            <IonLabel>
              <h3>Grapes</h3>
            </IonLabel>
          </IonItem>
          <IonItemOptions>
            <IonItemOption>
              Favorite
          </IonItemOption>
          </IonItemOptions>
        </IonItemSliding>
      </IonItemGroup>
    </IonContent>
  );
};

export default Tab1;

to make the group a sliding item.

Conclusion

We can add items and item groups with Ionic.

If we know how to create React web apps but want to develop mobile apps, we can use the Ionic framework.

In this article, we’ll look at how to get started with mobile development with the Ionic framework with React.

Floating Action Button

We can add a floating action button with Ionic React.

For example, we can write:

import React from 'react';
import { IonContent, IonFab, IonFabButton, IonIcon } from '@ionic/react';
import './Tab1.css';
import { add } from 'ionicons/icons';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonFab vertical="top" horizontal="end" slot="fixed">
        <IonFabButton>
          <IonIcon icon={add} />
        </IonFabButton>
      </IonFab>
    </IonContent>
  );
};

export default Tab1;

to add it.

IonFab is the floating action button component.

IonFabButton lets us add a button inside the IonFab container.

We can add an IonIcon inside the IonFabButton to show an icon.

We can set the slot to 'fixed' to make its position fixed.

vertical sets the vertical position.

horizontal sets the horizontal position.

Grid

We can add a grid layout with Ionic React.

To do this, we can use the IonRow and IonCol components to add rows and columns for the grid:

import React from 'react';
import { IonCol, IonContent, IonGrid, IonRow } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonGrid>
        <IonRow>
          <IonCol>ion-col</IonCol>
          <IonCol>ion-col</IonCol>
          <IonCol>ion-col</IonCol>
          <IonCol>ion-col</IonCol>
        </IonRow>
        <IonRow>
          <IonCol size="6">ion-col size="6"</IonCol>
          <IonCol>ion-col</IonCol>
          <IonCol>ion-col</IonCol>
        </IonRow>
      </IonGrid>
    </IonContent>
  );
};

export default Tab1;

We add the IonRow and IonCol to add the rows and columns respectively.

IonGrid is the container for the rows and columns.

Input

Ionic React comes with a text input component.

For example, we can add one by writing:

import React, { useState } from 'react';
import { IonContent, IonInput, IonItem, IonList } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  const [text, setText] = useState<string>();

  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonInput
            value={text}
            placeholder="Enter Input"
            onIonChange={e => setText(e.detail.value!)} clearInput
          >
          </IonInput>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

The IonInput component is the text input component.

We pass a callback as the value of the onIonChange prop to set the text state to the value of the input.

The value prop has the inputted value.

Also, we can make the input read-only with the readonly prop.

We can also add a number input by setting the type prop to 'number' :

import React, { useState } from 'react';
import { IonContent, IonInput, IonItem, IonList } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  const [number, setNumber] = useState<number>();

  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonInput
            type="number"
            value={number}
            placeholder="Enter Number"
            onIonChange={e => setNumber(parseInt(e.detail.value!, 10))}
          ></IonInput>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

Text Area

We can add a text area with the IonTextarea component.

For example, we can write:

import React, { useState } from 'react';
import { IonContent, IonItem, IonList, IonTextarea } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  const [text, setText] = useState<string>();

  return (
    <IonContent>
      <IonList>
        <IonItem>
          <IonTextarea
            value={text}
            onIonChange={e => setText(e.detail.value!)}>
          </IonTextarea>
        </IonItem>
      </IonList>
    </IonContent>
  );
};

export default Tab1;

to add it.

The props are the same as the IonInput component.

We can add a placeholder with the placeholder prop.

And we can disable interaction with the disabled prop.

The text area can also be made read-only with the readonly prop.

Conclusion

We can add a floating action button and text inputs with Ionic React.

If we know how to create React web apps but want to develop mobile apps, we can use the Ionic framework.

In this article, we’ll look at how to get started with mobile development with the Ionic framework with React.

Chips

We can add chips to display small pieces of data in our app.

We can use the IonChip component to do this.

For instance, we can write:

import React from 'react';
import { IonChip, IonContent, IonLabel } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonChip>
        <IonLabel>Default</IonLabel>
      </IonChip>
    </IonContent>
  );
};

export default Tab1;

to add a chip without any styles.

We can add a background color with the color prop:

import React from 'react';
import { IonChip, IonContent, IonLabel } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonChip color="secondary">
        <IonLabel >Default</IonLabel>
      </IonChip>
    </IonContent>
  );
};

export default Tab1;

Also, we can add an icon besides the label by writing:

import React from 'react';
import { IonChip, IonContent, IonIcon, IonLabel } from '@ionic/react';
import './Tab1.css';
import { pin } from 'ionicons/icons';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonChip>
        <IonIcon icon={pin} />
        <IonLabel>Default</IonLabel>
      </IonChip>
    </IonContent>
  );
};

export default Tab1;

Content

We add our app’s content in an IonContent component.

For example, we can write:

import React from 'react';
import { IonContent } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent
      scrollEvents={true}
      onIonScrollStart={() => { }}
      onIonScroll={() => { }}
      onIonScrollEnd={() => { }}>
      <h1>Main Content</h1>
    </IonContent>
  );
};

export default Tab1;

to add some text into our IonContent container.

We can listen to scroll events on it by setting the scrollEvents to true .

The onIonScrollStart prop function is run when we start scrolling.

The onIonScroll prop’s function is run when we scroll.

The onIonScrollEnd prop’s function is run when we’re done scrolling.

Datetime Picker

We can set the date and time in our app with the IonDatetime component.

For example, we can write:

import React, { useState } from 'react';
import { IonContent, IonDatetime } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  const [selectedDate, setSelectedDate] = useState<string>('2012-12-15T13:47:20.789');

  return (
    <IonContent>
      <IonDatetime
        displayFormat="MM-DD-YYYY"
        value={selectedDate}
        onIonChange={e => setSelectedDate(e.detail.value!)}
      >
      </IonDatetime>
    </IonContent>
  );
};

export default Tab1;

We display the selectedDate ‘s formatted value with the IonDatetime component.

The displayFormat prop changes the display format.

value sets the datetime value to display.

onIonChange sets the date and time after we picked them when the date and time picker.

Also, we can set some datetime picker options by writing:

import React, { useState } from 'react';
import { IonContent, IonDatetime } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  const [selectedDate, setSelectedDate] = useState<string>('2012-12-15T13:47:20.789');

  return (
    <IonContent>
      <IonDatetime pickerOptions={{
        buttons: [
          {
            text: 'Save',
            handler: () => console.log('Clicked Save!')
          }, {
            text: 'Log',
            handler: () => {
              console.log('Clicked Log. Do not Dismiss.');
              return false;
            }
          }
        ]
      }}
        placeholder="Custom Options" displayFormat="YYYY"
        min="1981"
        max="2018"
        value={selectedDate} onIonChange={e => setSelectedDate(e.detail.value!)}>
      </IonDatetime>
    </IonContent>
  );
};

export default Tab1;

We add the pickerOptions prop and set it to an object with the buttons property.

It has an array of options for each button.

The handler property has the function that’s called when we click the button.

Returning false in the handler stops the datetime picker from being dismissed.

Conclusion

We can add chips, content, and a datetime picker with Ionic React.

If we know how to create React web apps but want to develop mobile apps, we can use the Ionic framework.

In this article, we’ll look at how to get started with mobile development with the Ionic framework with React.

Button Ripple Effect

We can add a ripple effect to our buttons by using the IonRippleEffect component.

For example, we can write:

import React from 'react';
import { IonContent, IonRippleEffect } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <button className="ion-activatable ripple-parent">
        A button with a bounded ripple effect
        <IonRippleEffect></IonRippleEffect>
      </button>
    </IonContent>
  );
};

export default Tab1;

We add the IonRippleEffect component inside the button to show the ripple effect when we click it.

Card

We can add cards to our Ionic React app to show content.

For example, we can add a card by writing:

import React from 'react';
import { IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonContent } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonCard>
        <IonCardHeader>
          <IonCardSubtitle>Card Subtitle</IonCardSubtitle>
          <IonCardTitle>Card Title</IonCardTitle>
        </IonCardHeader>

        <IonCardContent>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus congue ante a congue.
      </IonCardContent>
      </IonCard>
    </IonContent>
  );
};

export default Tab1;

IonCard has the card container.

IonCardHeader has the card header.

IonCardSubtitle has the card subtitle.

IonCardTitle has the card title.

IonicCardContent has the card content.

We can also add list items in a card by writing:

import React from 'react';
import { IonCard, IonContent, IonIcon, IonItem, IonLabel } from '@ionic/react';
import './Tab1.css';
import { wifi, wine } from 'ionicons/icons';

const Tab1: React.FC = () => {
  return (
    <IonContent>
      <IonCard>
        <IonItem href="#" className="ion-activated">
          <IonIcon icon={wifi} slot="start" />
          <IonLabel>Card Link Item 1 activated</IonLabel>
        </IonItem>

        <IonItem href="#">
          <IonIcon icon={wine} slot="start" />
          <IonLabel>Card Link Item 2</IonLabel>
        </IonItem>
      </IonCard>
    </IonContent>
  );
};

export default Tab1;

The IonItem component has the list item.

The IonIcon component to add the icon for the list item.

IonLabel has the item label.

Checkbox

We can add a checkbox with the IonCheckbox component.

For example, we can write:

import React, { useState } from 'react';
import { IonCheckbox, IonContent, IonItem, IonLabel } from '@ionic/react';
import './Tab1.css';

const Tab1: React.FC = () => {
  const [checked, setChecked] = useState(false);

  return (
    <IonContent>
      <IonItem>
        <IonLabel>Checked: {JSON.stringify(checked)}</IonLabel>
        <IonCheckbox checked={checked} onIonChange={e => setChecked(e.detail.checked)} />
      </IonItem>
    </IonContent>
  );
};

export default Tab1;

We listen to changes in the checked state with the onIonPage prop.

e.detail.checked has the checked state of the checkbox.

The checked prop sets the checked state.

IonLabel has the label for the checkbox.

setChecked sets the checked state so that we can display it and use it with the IonCheckbox .

Conclusion

We can add button ripple effects, cards, and checkboxes with Ionic React.