Structuring React apps


#1

It’s nice to see that there is documentation for individual elements for React now. However, actually knowing how to structure an app is a bit difficult as the only reference is the conference app. When do I need to use IonPage, for example?

It seems like Ionic is very opinionated about structure.

What my app currently looks like using split-pane - its split into three


#2

I just started messing around with @ionic/react also

Looks like they want ion-page wrapping “page” or “view” components

Can you post your code?


#3

My app is a styleguide app that displays components. Its very basic so it is disappointing that using Ionic React is proving to be so difficult.

class App extends Component {
  render() {
    return (
      <Router>
        <div id="app">
          <IonApp>
            <IonSplitPane contentId="main">
              {/*--  our side menu  --*/}
              <IonMenu menuId="main-menu">
                <IonHeader no-border>
                  <IonToolbar>
                    <IonTitle>Components</IonTitle>
                  </IonToolbar>
                </IonHeader>
                <IonContent>
                  <IonList>
                    <IonItem>
                      <Link to="/button">Button</Link>
                    </IonItem>
                    <IonItem>
                      <Link to="/card">Card</Link>
                    </IonItem>
                    <IonItem>
                      <Link to="/checkbox">Checkbox</Link>
                    </IonItem>
                    <IonItem>
                      <Link to="/chip">Chip</Link>
                    </IonItem>
                  </IonList>
                </IonContent>
              </IonMenu>
              <IonPage id="main">
                <div className="@large:margin-left components-container">
                  <Switch>
                    <Route
                      path="/"
                      exact
                      render={props => {
                        return <h1>Choose a component</h1>;
                      }}
                    />

                    <Route path="/button" component={Button} />
                    <Route path="/card" component={Card} />
                    <Route path="/checkbox" component={Checkbox} />
                    <Route path="/chip" component={Chip} />
                  </Switch>
                </div>
              </IonPage>
            </IonSplitPane>
          </IonApp>
        </div>
      </Router>
    );
  }
}

export default App;

This is what I was told on Slack - it’s not clear to me how things should be done.


#4

yes i have spent a lot of time looking at that app as well

I modified my app to have a tabs root page so my individual routes are there

class App extends Component {

  render() {
    return (
      <Router>
        <IonApp>
          <IonSplitPane contentId="main">
            <Menu />
            <IonPage id="main">
              <Switch>
                <Route path="/" component={Tabs} />
              </Switch>
            </IonPage>
          </IonSplitPane>
        </IonApp>
      </Router>
    );
  }
}

export default App;