New to ionic. Need help

Ionic Framework Ionic React
1

Hello every one I’m new to ionic. I’m using ionic with Reactjs.
But I got some problems.
I trying to set a menu with IonMenu but still getting a blank black page.
And again I would like to know if there is className to set the background-color without using style(like bg-primary to set the bg color to primary or something like that.) Thank you
here is my code:

import React,{ Component } from "react";
import { 
    IonPage,IonAvatar,
    IonContent,IonMenu,
    IonItem,IonList,IonIcon,
    IonHeader,IonToolbar,
    IonTitle
 } from "@ionic/react";
import { Redirect, Route } from 'react-router-dom';
import axios from "axios";
import API_URL from "../apicommon";

export default class Marketing extends Component{
    constructor(props){
        super(props)
        this.state={
            user:{
                full_name:'',
                role:'Directeur',
                email:'mhady.itman@cestrack.com'
            }
        }
    }

    componentDidMount(){
        console.log("mounted")
    }


    render(){
        return(
            
                <IonPage>
                    <IonContent>
                <IonMenu side="start" contentId="main-content">
                <IonHeader>
        <IonToolbar color="primary">
          <IonTitle>Start Menu</IonTitle>
        </IonToolbar>
      </IonHeader>

      <div id="main-content">
                        
                        {/*<div className="always-top">
                            <IonAvatar>
                                <img src="./avatar.jpg" />
                            </IonAvatar>
                            <div className="bg-primary">{this.state.user.full_name}</div>
                            <div className="bg-primary" >{this.state.user.role}</div>
                            <div className="bg-primary">{this.state.user.email}</div>
        </div>*/}
                        <IonList>
                            <IonItem>
                                 Profile
                            </IonItem>
                            <IonItem>
                                 Log out
                            </IonItem>
                        </IonList>
                        </div>
                    
                </IonMenu>
               
                </IonContent>
                </IonPage>
            
        );
    }
}
2

It’s good to think of a Ionic React app as a web project at the start.

In web projects we use CSS concepts like Classes, ID and inline style to change the look of an element.

You should create a class rules in the stylesheet which would give you your own alternative to bg-primary. Or you could change the background inline:

<div style="background-color: black"> </div>

3

Ok thank you for that so how about using IonMenu???

4

Try this:

5

Thanks. But I already tried this first.
Still getting the same black blank page.

6

Are you using TypeScript? It gives very verbose errors.

I find if I’m getting a blank screen there’s usually a comma, semicolon, or bracket issue. Often minor things trip up the build.

Some Debugging Steps

  • Try looking for clues in the CLI you ran Ionic Serve from.
  • Do a diff for changes to compare what you’ve done since the last commit.
  • Roll back the last Git Commit you made. (If you’re not using Git make this a 1st priority - saves so much wasted time).
  • Try commenting out sections that may be the cause of the issue.
    • Remove parts at a time of what you worked on last until you narrow it down.
  • Run ionic repair
  • Run ionic doctor treat
7

I honestly recommend breaking the menu out into a separate component but this example works and I provided a running project in stackblitz

import React, { Component } from "react";
import {
  IonPage,
  IonAvatar,
  IonContent,
  IonMenu,
  IonItem,
  IonList,
  IonIcon,
  IonHeader,
  IonToolbar,
  IonTitle,
  IonButton,
  IonButtons,
  IonMenuButton
} from "@ionic/react";
import { Redirect, Route } from "react-router-dom";

export default class Marketing extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {
        full_name: "",
        role: "Directeur",
        email: "mhady.itman@cestrack.com"
      }
    };
  }

  componentDidMount() {
    console.log("mounted");
  }

  render() {
    return (
      <IonPage>
        <IonHeader>
          <IonToolbar>
            <IonButtons>
              <IonMenuButton />
            </IonButtons>
          </IonToolbar>
        </IonHeader>
        <IonContent>
          <IonMenu side="start" contentId="main-content">
            <IonHeader>
              <IonToolbar color="primary">
                <IonTitle>Start Menu</IonTitle>
              </IonToolbar>
            </IonHeader>
            <IonContent>
              <IonList>
                <IonItem>Profile</IonItem>
                <IonItem>Log out</IonItem>
              </IonList>
            </IonContent>
          </IonMenu>
          <div id="main-content">MENU IonPage</div>
        </IonContent>
      </IonPage>
    );
  }
}

See code in stackblitz - https://stackblitz.com/edit/ionic-react-modals-sq7xog?file=src/pages/MenuPage.tsx

Also a bunch of additional content available here - http://bit.ly/ionic-react-playlist

8

Thank you, it’s working now.

9

And Know I’m trying to use the icon.

But I can’t see the icons.
Help.