Mobile Development with Ionic and React — Notes and Lists

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.