Building Ionic React App

1 min read
ReactIonicProgramming Notes
  1. Make sure you have Node.js installed (https://nodejs.org/dist/v12.13.0/node-v12.13.0-x86.msi)
  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 (https://code.visualstudio.com/download)
  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 {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
} from "@ionic/react"
import React from "react"

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

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} />
ionic