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
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?
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.
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;
I have also been struggling with the topic of basic navigation in ionic React. I have not found any two examples alike. Is there any updated ‘best practice’ available, especially for tabs?
Here is what I have come up with
Awesome, thank you! I found your other repo here very helpful as well, especially since I’m also using mobx state tree and not typescript.
