Building Ionic React App

5 years ago -  
ReactIonicProgramming Notes
  1. Make sure you have Node.js installed (
  2. Open command prompt and type in this command to create an app: npx ionic start myApp blank —type=react
  3. Make sure you have VSCode installed (
  4. cd into myApp
  5. Type in this command to open the project in VSCode: code .
  6. Inside App.tsx you can see something like this: <Route path="/home" component={Home} exact={true} /> This means that when we navigate to /home it shows a page called Home which is located inside pages directory.
  7. Run the project using this command: npx ionic serve
  8. Switch to the editor and create a new page called List.tsx with this content:
import {
} from "@ionic/react";
import React from "react";

const List: React.FC = () => {
  return (
          <IonTitle>This is a sample page</IonTitle>
      <IonContent className="ion-padding">
        {["Item one", "Item two", "Item 3"].map((item) => (
          <p key={item}>{item}</p>

export default List;
  1. Add a new route for the newly created page inside App.tsx right after the <Route path="/home" component={Home} exact={true} />:
<Route path="/list" component={List} exact={true} />