refactor(react): update tab-bar requirement on tabs

[thetaPC]

Issue number: N/A

---

What is the current behavior?

As mentioned in this PR, React IonTabs requires IonTabBar do be a child, else it doesn't render and throws an error.

Angular, JS, and Vue doesn't have this requirement.

What is the new behavior?

I didn't see any reason why React does not mimic the other frameworks. In order to keep consistency, I've updated the React tabs. This would allow ion-tabs and ion-tab-bar can be used as standalone elements as mentioned in the docs.

• React follows the same structure as the other frameworks: IonTabs doesn't require IonTabBar to be a child to render.

Does this introduce a breaking change?

• Yes
• No

Other information

Dev build: 8.3.1-dev.11726159792.1a6f49de

How to test:

1. Create a Ionic React app through the Ionic CLI with tabs as the starter
2. Run the app
3. Comment out the IonTabBar
4. Notice that the IonTabs does not render
5. Notice that there's an error in the console: "IonTabs needs a IonTabBar"
6. Install the dev build: npm install @ionic/[email protected]
7. Make sure the IonTabBar is still commented out
8. Verify that IonTabs renders
9. Verify that there isn't an error in the console

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 12, 2024 4:06pm

[tanner-reits]

Looks good! Repro steps worked